Jacksons Purple Puffin is a shadcn/ui theme built around a blue primary color (#353e82) with muted blue accents (#aaaeca). The light mode uses a neutral background (#f7f7fd). Dark mode keeps the blue primary (#353e82) on a blue-tinted background (#040610).
| Token | Light | Dark |
|---|---|---|
| Background | #f7f7fdghostwhite | #040610black |
| Foreground | #000000black | #ffffffwhite |
| Card | #f2f4fcaliceblue | #050714black |
| Card foreground | #000000black | #ffffffwhite |
| Popover | #f2f4fcaliceblue | #050714black |
| Popover foreground | #000000black | #ffffffwhite |
| Primary | #353e82darkslateblue | #353e82darkslateblue |
| Primary foreground | #f1f2f9whitesmoke | #f1f2f9whitesmoke |
| Secondary | #c8cad5lightgrey | #1e1e1fblack |
| Secondary foreground | #2f303ddarkslategray | #b6b7b9silver |
| Muted | #e7e8eelavender | #111118black |
| Muted foreground | #4c4d57darkslategray | #a8a9b3darkgray |
| Accent | #aaaecasilver | #282a33darkslategray |
| Accent foreground | #1a1b29black | #c0c2cesilver |
| Destructive | #a61c0cfirebrick | #ee3520orangered |
| Destructive foreground | #fde9e7linen | #ffffffwhite |
| Border | #dfdfe2gainsboro | #1b1b1dblack |
| Input | #dfdfe2gainsboro | #1b1b1dblack |
| Ring | #353e82darkslateblue | #353e82darkslateblue |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 19.71:1 | AAA |
| Text on card | 19.09:1 | AAA |
| Primary button | 8.66:1 | AAA |
| Secondary button | 7.97:1 | AAA |
| Muted text | 6.83:1 | AA |
| Accent | 7.80:1 | AAA |
| Destructive | 6.44:1 | AA |
| Text on background | 20.22:1 | AAA |
| Text on card | 20.03:1 | AAA |
| Primary button | 8.66:1 | AAA |
| Secondary button | 8.28:1 | AAA |
| Muted text | 8.03:1 | AAA |
| Accent | 8.07:1 | AAA |
| Destructive | 4.06:1 | AA Large |
Paste this into your globals.css to use Jacksons Purple Puffin in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(0.978 0.008 280.207);
--foreground: oklch(0 0 0);
--muted: oklch(0.931 0.009 280.174);
--muted-foreground: oklch(0.424 0.017 279.684);
--popover: oklch(0.968 0.012 280.141);
--popover-foreground: oklch(0 0 0);
--card: oklch(0.968 0.012 280.141);
--card-foreground: oklch(0 0 0);
--border: oklch(0.905 0.003 280.28);
--input: oklch(0.905 0.003 280.28);
--primary: oklch(0.395 0.114 274.328);
--primary-foreground: oklch(0.961 0.01 280.164);
--secondary: oklch(0.84 0.015 280.037);
--secondary-foreground: oklch(0.314 0.022 279.134);
--accent: oklch(0.757 0.04 279.447);
--accent-foreground: oklch(0.228 0.026 278.276);
--destructive: oklch(0.468 0.175 30.518);
--destructive-foreground: oklch(0.951 0.022 25.191);
--ring: oklch(0.395 0.114 274.328);
--chart-1: oklch(0.395 0.114 274.328);
--chart-2: oklch(0.84 0.015 280.037);
--chart-3: oklch(0.757 0.04 279.447);
--chart-4: oklch(0.866 0.013 280.094);
--chart-5: oklch(0.391 0.122 273.727);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.125 0.025 274.325);
--foreground: oklch(1 0 180);
--muted: oklch(0.182 0.014 279.003);
--muted-foreground: oklch(0.737 0.014 280.017);
--popover: oklch(0.136 0.029 274.598);
--popover-foreground: oklch(1 0 180);
--card: oklch(0.136 0.029 274.598);
--card-foreground: oklch(1 0 180);
--border: oklch(0.223 0.004 280.058);
--input: oklch(0.223 0.004 280.058);
--primary: oklch(0.395 0.114 274.328);
--primary-foreground: oklch(0.961 0.01 280.164);
--secondary: oklch(0.236 0.002 280.193);
--secondary-foreground: oklch(0.778 0.004 280.259);
--accent: oklch(0.287 0.018 279.282);
--accent-foreground: oklch(0.816 0.017 280.004);
--destructive: oklch(0.619 0.223 30.484);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.395 0.114 274.328);
--chart-1: oklch(0.395 0.114 274.328);
--chart-2: oklch(0.236 0.002 280.193);
--chart-3: oklch(0.287 0.018 279.282);
--chart-4: oklch(0.268 0.002 280.184);
--chart-5: oklch(0.391 0.122 273.727);
}