Development is a shadcn/ui theme built around a deep cyan primary color (#05161a) with deep blue accents (#050b1a). The light mode uses a neutral background (#ffffff). Dark mode keeps the deep cyan primary (#05161a) on a cyan-tinted background (#040a0c).
| Token | Light | Dark |
|---|---|---|
| Background | #ffffffwhite | #040a0cblack |
| Foreground | #041216black | #f6f9f9whitesmoke |
| Card | #fcfcfcsnow | #050e10black |
| Card foreground | #030f11black | #f9fbfbghostwhite |
| Popover | #fcfcfcsnow | #050e10black |
| Popover foreground | #030f11black | #f9fbfbghostwhite |
| Primary | #05161ablack | #05161ablack |
| Primary foreground | #23a9c7lightseagreen | #23a9c7lightseagreen |
| Secondary | #051a13black | #051a13black |
| Secondary foreground | #23c793lightseagreen | #23c793lightseagreen |
| Muted | #edf7f4whitesmoke | #08120fblack |
| Muted foreground | #606261dimgray | #9d9f9edarkgray |
| Accent | #050b1ablack | #050b1ablack |
| Accent foreground | #6c92e5cornflowerblue | #6c92e5cornflowerblue |
| Destructive | #672704maroon | #f5600forangered |
| Destructive foreground | #fbc1a2navajowhite | #000000black |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #05161ablack | #05161ablack |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 19.03:1 | AAA |
| Text on card | 19.02:1 | AAA |
| Primary button | 6.66:1 | AA |
| Secondary button | 8.30:1 | AAA |
| Muted text | 5.63:1 | AA |
| Accent | 6.42:1 | AA |
| Destructive | 7.11:1 | AAA |
| Text on background | 18.82:1 | AAA |
| Text on card | 18.82:1 | AAA |
| Primary button | 6.66:1 | AA |
| Secondary button | 8.30:1 | AAA |
| Muted text | 7.15:1 | AAA |
| Accent | 6.42:1 | AA |
| Destructive | 6.54:1 | AA |
Paste this into your globals.css to use Development in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(1 0 180);
--foreground: oklch(0.172 0.023 212.758);
--muted: oklch(0.969 0.012 175.264);
--muted-foreground: oklch(0.494 0.003 175.461);
--popover: oklch(0.992 0 161.565);
--popover-foreground: oklch(0.156 0.02 211.449);
--card: oklch(0.992 0 161.565);
--card-foreground: oklch(0.156 0.02 211.449);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--primary: oklch(0.187 0.025 213.649);
--primary-foreground: oklch(0.681 0.115 217.689);
--secondary: oklch(0.197 0.032 170.069);
--secondary-foreground: oklch(0.74 0.148 165.19);
--accent: oklch(0.153 0.034 261.512);
--accent-foreground: oklch(0.668 0.131 264.31);
--destructive: oklch(0.361 0.101 43.662);
--destructive-foreground: oklch(0.856 0.079 49.575);
--ring: oklch(0.187 0.025 213.649);
--chart-1: oklch(0.187 0.025 213.649);
--chart-2: oklch(0.197 0.032 170.069);
--chart-3: oklch(0.153 0.034 261.512);
--chart-4: oklch(0.246 0.042 168.342);
--chart-5: oklch(0.188 0.026 213.679);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.138 0.013 209.706);
--foreground: oklch(0.979 0.003 212.664);
--muted: oklch(0.17 0.017 172.608);
--muted-foreground: oklch(0.701 0.002 175.516);
--popover: oklch(0.153 0.015 211.699);
--popover-foreground: oklch(0.986 0.002 212.663);
--card: oklch(0.153 0.015 211.699);
--card-foreground: oklch(0.986 0.002 212.663);
--border: oklch(0.278 0.03 256.848);
--input: oklch(0.278 0.03 256.848);
--primary: oklch(0.187 0.025 213.649);
--primary-foreground: oklch(0.681 0.115 217.689);
--secondary: oklch(0.197 0.032 170.069);
--secondary-foreground: oklch(0.74 0.148 165.19);
--accent: oklch(0.153 0.034 261.512);
--accent-foreground: oklch(0.668 0.131 264.31);
--destructive: oklch(0.673 0.199 41.913);
--destructive-foreground: oklch(0 0 0);
--ring: oklch(0.187 0.025 213.649);
--chart-1: oklch(0.187 0.025 213.649);
--chart-2: oklch(0.197 0.032 170.069);
--chart-3: oklch(0.153 0.034 261.512);
--chart-4: oklch(0.246 0.042 168.342);
--chart-5: oklch(0.188 0.026 213.679);
}