Motiion Dark is a shadcn/ui theme built around a near-white primary color (#ffffff) with vivid teal accents (#00ccb7). The light mode uses a neutral background (#030407). Dark mode switches to a near-black primary (#1c1e21) on a neutral background (#030407).
| Token | Light | Dark |
|---|---|---|
| Background | #030407black | #030407black |
| Foreground | #f8f9fbghostwhite | #f8f9fbghostwhite |
| Card | #1c1d20black | #04060bblack |
| Card foreground | #ffffffwhite | #fcfcfdwhite |
| Popover | #04060bblack | #04060bblack |
| Popover foreground | #fcfcfdwhite | #fcfcfdwhite |
| Primary | #ffffffwhite | #1c1e21black |
| Primary foreground | #030407black | #b3b5bdsilver |
| Secondary | #1c2021black | #1c2021black |
| Secondary foreground | #b3babdsilver | #b3babdsilver |
| Muted | #1a2d33darkslategray | #1a2d33darkslategray |
| Muted foreground | #8d9fa5darkgray | #8d9fa5darkgray |
| Accent | #00ccb7darkturquoise | #00baa6lightseagreen |
| Accent foreground | #030407black | #b5b3bdsilver |
| Destructive | #e94b01orangered | #e94b01orangered |
| Destructive foreground | #ffffffwhite | #ffffffwhite |
| Border | #17181cblack | #17181cblack |
| Input | #007a6eteal | #17181cblack |
| Ring | #daf1eflavender | #1c1e21black |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 19.47:1 | AAA |
| Text on card | 16.85:1 | AAA |
| Primary button | 20.50:1 | AAA |
| Secondary button | 8.36:1 | AAA |
| Muted text | 5.23:1 | AA |
| Accent | 10.07:1 | AAA |
| Destructive | 3.83:1 | AA Large |
| Text on background | 19.47:1 | AAA |
| Text on card | 19.77:1 | AAA |
| Primary button | 8.18:1 | AAA |
| Secondary button | 8.36:1 | AAA |
| Muted text | 5.23:1 | AA |
| Accent | 1.18:1 | Fail |
| Destructive | 3.83:1 | AA Large |
Paste this into your globals.css to use Motiion Dark in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(0.106 0.013 265.451);
--foreground: oklch(0.983 0.003 271.38);
--muted: oklch(0.282 0.027 221.018);
--muted-foreground: oklch(0.69 0.023 219.805);
--popover: oklch(0.121 0.015 265.548);
--popover-foreground: oklch(0.991 0.002 271.395);
--card: oklch(0.231 0.006 271.153);
--card-foreground: oklch(1 0 180);
--border: oklch(0.211 0.006 271.114);
--input: oklch(0.52 0.093 183.024);
--primary: oklch(1 0 180);
--primary-foreground: oklch(0.107 0.011 266.506);
--secondary: oklch(0.239 0.005 219.688);
--secondary-foreground: oklch(0.784 0.009 219.596);
--accent: oklch(0.758 0.136 181.992);
--accent-foreground: oklch(0.107 0.011 266.506);
--destructive: oklch(0.63 0.205 38.122);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.941 0.025 189.577);
--chart-1: oklch(1 0 180);
--chart-2: oklch(0.239 0.005 219.688);
--chart-3: oklch(0.758 0.136 181.992);
--chart-4: oklch(0.272 0.006 219.702);
--chart-5: oklch(1 0 180);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.106 0.013 265.451);
--foreground: oklch(0.983 0.003 271.38);
--muted: oklch(0.282 0.027 221.018);
--muted-foreground: oklch(0.69 0.023 219.805);
--popover: oklch(0.121 0.015 265.548);
--popover-foreground: oklch(0.991 0.002 271.395);
--card: oklch(0.121 0.015 265.548);
--card-foreground: oklch(0.991 0.002 271.395);
--border: oklch(0.211 0.006 271.114);
--input: oklch(0.211 0.006 271.114);
--primary: oklch(0.233 0.006 271.137);
--primary-foreground: oklch(0.774 0.011 271.274);
--secondary: oklch(0.239 0.005 219.688);
--secondary-foreground: oklch(0.784 0.009 219.596);
--accent: oklch(0.708 0.127 181.543);
--accent-foreground: oklch(0.771 0.014 297.495);
--destructive: oklch(0.63 0.205 38.122);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.233 0.006 271.137);
--chart-1: oklch(0.233 0.006 271.137);
--chart-2: oklch(0.239 0.005 219.688);
--chart-3: oklch(0.708 0.127 181.543);
--chart-4: oklch(0.272 0.006 219.702);
--chart-5: oklch(0.231 0.009 271);
}