Slippery is a shadcn/ui theme built around a purple primary color (#d59fcc) with pink accents (#d59fb1). The light mode uses a neutral background (#fdf7fc). Dark mode keeps the purple primary (#d59fcc) on a neutral background (#040103).
| Token | Light | Dark |
|---|---|---|
| Background | #fdf7fcsnow | #040103black |
| Foreground | #040104black | #faf5f9whitesmoke |
| Card | #fcf2fblavenderblush | #070307black |
| Card foreground | #000000black | #fcf8fbsnow |
| Popover | #fcf2fblavenderblush | #070307black |
| Popover foreground | #000000black | #fcf8fbsnow |
| Primary | #d59fccplum | #d59fccplum |
| Primary foreground | #2e142ablack | #2e142ablack |
| Secondary | #c39fd5plum | #c39fd5plum |
| Secondary foreground | #25142eblack | #25142eblack |
| Muted | #e2dce5gainsboro | #201a23black |
| Muted foreground | #454446darkslategray | #bab9bbsilver |
| Accent | #d59fb1silver | #d59fb1silver |
| Accent foreground | #2e141dblack | #2e141dblack |
| Destructive | #792901saddlebrown | #fd7430tomato |
| Destructive foreground | #fec9aepeachpuff | #000000black |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #d59fccplum | #d59fccplum |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 19.62:1 | AAA |
| Text on card | 19.29:1 | AAA |
| Primary button | 7.74:1 | AAA |
| Secondary button | 7.60:1 | AAA |
| Muted text | 7.19:1 | AAA |
| Accent | 7.65:1 | AAA |
| Destructive | 6.63:1 | AA |
| Text on background | 19.25:1 | AAA |
| Text on card | 19.47:1 | AAA |
| Primary button | 7.74:1 | AAA |
| Secondary button | 7.60:1 | AAA |
| Muted text | 8.69:1 | AAA |
| Accent | 7.65:1 | AAA |
| Destructive | 7.72:1 | AAA |
Paste this into your globals.css to use Slippery in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(0.982 0.01 330.958);
--foreground: oklch(0.084 0.024 332.123);
--muted: oklch(0.902 0.013 314.756);
--muted-foreground: oklch(0.389 0.003 314.794);
--popover: oklch(0.972 0.015 331.028);
--popover-foreground: oklch(0 0 0);
--card: oklch(0.972 0.015 331.028);
--card-foreground: oklch(0 0 0);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--primary: oklch(0.768 0.087 332.269);
--primary-foreground: oklch(0.239 0.054 333.648);
--secondary: oklch(0.754 0.085 314.275);
--secondary-foreground: oklch(0.229 0.053 313.562);
--accent: oklch(0.759 0.068 357.04);
--accent-foreground: oklch(0.233 0.044 359.794);
--destructive: oklch(0.397 0.12 41.333);
--destructive-foreground: oklch(0.876 0.071 47.893);
--ring: oklch(0.768 0.087 332.269);
--chart-1: oklch(0.768 0.087 332.269);
--chart-2: oklch(0.754 0.085 314.275);
--chart-3: oklch(0.759 0.068 357.04);
--chart-4: oklch(0.781 0.075 314.359);
--chart-5: oklch(0.767 0.093 332.376);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.087 0.015 331.646);
--foreground: oklch(0.975 0.008 330.928);
--muted: oklch(0.23 0.018 314.44);
--muted-foreground: oklch(0.788 0.002 314.814);
--popover: oklch(0.109 0.019 331.646);
--popover-foreground: oklch(0.983 0.005 330.891);
--card: oklch(0.109 0.019 331.646);
--card-foreground: oklch(0.983 0.005 330.891);
--border: oklch(0.278 0.03 256.848);
--input: oklch(0.278 0.03 256.848);
--primary: oklch(0.768 0.087 332.269);
--primary-foreground: oklch(0.239 0.054 333.648);
--secondary: oklch(0.754 0.085 314.275);
--secondary-foreground: oklch(0.229 0.053 313.562);
--accent: oklch(0.759 0.068 357.04);
--accent-foreground: oklch(0.233 0.044 359.794);
--destructive: oklch(0.714 0.184 43.894);
--destructive-foreground: oklch(0 0 0);
--ring: oklch(0.768 0.087 332.269);
--chart-1: oklch(0.768 0.087 332.269);
--chart-2: oklch(0.754 0.085 314.275);
--chart-3: oklch(0.759 0.068 357.04);
--chart-4: oklch(0.781 0.075 314.359);
--chart-5: oklch(0.767 0.093 332.376);
}