Sprat is a shadcn/ui theme built around a near-white primary color (#fcfcfd) with muted light indigo accents (#dfdfe7). The light mode uses a neutral background (#f8f8fc). Dark mode keeps the near-white primary (#fcfcfd) on a neutral background (#010104).
| Token | Light | Dark |
|---|---|---|
| Background | #f8f8fcghostwhite | #010104black |
| Foreground | #030312black | #f9f9fbghostwhite |
| Card | #f5f5fawhitesmoke | #020208black |
| Card foreground | #02020dblack | #fcfcfdwhite |
| Popover | #f5f5fawhitesmoke | #020208black |
| Popover foreground | #02020dblack | #fcfcfdwhite |
| Primary | #fcfcfdwhite | #fcfcfdwhite |
| Primary foreground | #444583darkslateblue | #444583darkslateblue |
| Secondary | #dfdfe7gainsboro | #13131bblack |
| Secondary foreground | #404054darkslategray | #a2a2bedarkgray |
| Muted | #eaeaf6lavender | #090a15black |
| Muted foreground | #38394cdarkslategray | #b3b3c7silver |
| Accent | #dfdfe7gainsboro | #13131bblack |
| Accent foreground | #404054darkslategray | #a2a2bedarkgray |
| Destructive | #8c0703darkred | #fa251eorangered |
| Destructive foreground | #fec5c3pink | #ffffffwhite |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #fcfcfdwhite | #fcfcfdwhite |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 19.33:1 | AAA |
| Text on card | 18.93:1 | AAA |
| Primary button | 8.42:1 | AAA |
| Secondary button | 7.62:1 | AAA |
| Muted text | 9.46:1 | AAA |
| Accent | 7.62:1 | AAA |
| Destructive | 6.51:1 | AA |
| Text on background | 19.80:1 | AAA |
| Text on card | 20.15:1 | AAA |
| Primary button | 8.42:1 | AAA |
| Secondary button | 7.43:1 | AAA |
| Muted text | 9.57:1 | AAA |
| Accent | 7.43:1 | AAA |
| Destructive | 3.91:1 | AA Large |
Paste this into your globals.css to use Sprat in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(0.98 0.005 285.527);
--foreground: oklch(0.109 0.039 276.341);
--muted: oklch(0.94 0.016 285.314);
--muted-foreground: oklch(0.351 0.034 283.756);
--popover: oklch(0.971 0.007 285.48);
--popover-foreground: oklch(0.098 0.034 276.692);
--card: oklch(0.971 0.007 285.48);
--card-foreground: oklch(0.098 0.034 276.692);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--primary: oklch(0.99 0.002 285.579);
--primary-foreground: oklch(0.42 0.102 280.314);
--secondary: oklch(0.906 0.01 285.409);
--secondary-foreground: oklch(0.379 0.035 283.864);
--accent: oklch(0.906 0.01 285.409);
--accent-foreground: oklch(0.379 0.035 283.864);
--destructive: oklch(0.405 0.162 29.501);
--destructive-foreground: oklch(0.873 0.065 20.769);
--ring: oklch(0.99 0.002 285.579);
--chart-1: oklch(0.99 0.002 285.579);
--chart-2: oklch(0.906 0.01 285.409);
--chart-3: oklch(0.906 0.01 285.409);
--chart-4: oklch(0.932 0.008 285.472);
--chart-5: oklch(0.99 0.002 285.575);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.075 0.017 280.411);
--foreground: oklch(0.982 0.003 285.566);
--muted: oklch(0.149 0.025 282.141);
--muted-foreground: oklch(0.773 0.028 284.96);
--popover: oklch(0.095 0.021 280.411);
--popover-foreground: oklch(0.991 0.001 285.592);
--card: oklch(0.095 0.021 280.411);
--card-foreground: oklch(0.991 0.001 285.592);
--border: oklch(0.278 0.03 256.848);
--input: oklch(0.278 0.03 256.848);
--primary: oklch(0.99 0.002 285.579);
--primary-foreground: oklch(0.42 0.102 280.314);
--secondary: oklch(0.19 0.016 283.968);
--secondary-foreground: oklch(0.722 0.04 284.572);
--accent: oklch(0.19 0.016 283.968);
--accent-foreground: oklch(0.722 0.04 284.572);
--destructive: oklch(0.631 0.242 28.823);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.99 0.002 285.579);
--chart-1: oklch(0.99 0.002 285.579);
--chart-2: oklch(0.19 0.016 283.968);
--chart-3: oklch(0.19 0.016 283.968);
--chart-4: oklch(0.22 0.021 283.763);
--chart-5: oklch(0.99 0.002 285.575);
}