Minion is a shadcn/ui theme built around a muted cyan primary color (#85a2ad) with muted blue accents (#858dad). The light mode uses a neutral background (#ffffff). Dark mode keeps the muted cyan primary (#85a2ad) on a neutral background (#000000).
| Token | Light | Dark |
|---|---|---|
| Background | #ffffffwhite | #000000black |
| Foreground | #040d10black | #f4f9famintcream |
| Card | #ffffffwhite | #000000black |
| Card foreground | #040d10black | #f4f9famintcream |
| Popover | #ffffffwhite | #000000black |
| Popover foreground | #040d10black | #f4f9famintcream |
| Primary | #85a2adlightslategray | #85a2adlightslategray |
| Primary foreground | #000000black | #000000black |
| Secondary | #85ada5darkseagreen | #85ada5darkseagreen |
| Secondary foreground | #000000black | #000000black |
| Muted | #e2eeeblavender | #111d1ablack |
| Muted foreground | #4b625ddimgray | #9db4afdarkgray |
| Accent | #858dadlightslategray | #858dadlightslategray |
| Accent foreground | #000000black | #000000black |
| Destructive | #6b240amaroon | #eb5924chocolate |
| Destructive foreground | #f8c3b0lightpink | #ffffffwhite |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #85a2adlightslategray | #85a2adlightslategray |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 19.62:1 | AAA |
| Text on card | 19.62:1 | AAA |
| Primary button | 7.75:1 | AAA |
| Secondary button | 8.53:1 | AAA |
| Muted text | 5.51:1 | AA |
| Accent | 6.43:1 | AA |
| Destructive | 7.12:1 | AAA |
| Text on background | 19.77:1 | AAA |
| Text on card | 19.77:1 | AAA |
| Primary button | 7.75:1 | AAA |
| Secondary button | 8.53:1 | AAA |
| Muted text | 7.89:1 | AAA |
| Accent | 6.43:1 | AA |
| Destructive | 3.52:1 | AA Large |
Paste this into your globals.css to use Minion in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(1 0 180);
--foreground: oklch(0.15 0.016 221.773);
--muted: oklch(0.939 0.013 181.675);
--muted-foreground: oklch(0.476 0.028 180.308);
--popover: oklch(1 0 180);
--popover-foreground: oklch(0.15 0.016 221.773);
--card: oklch(1 0 180);
--card-foreground: oklch(0.15 0.016 221.773);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--primary: oklch(0.693 0.037 223.83);
--primary-foreground: oklch(0 0 0);
--secondary: oklch(0.717 0.046 180.153);
--secondary-foreground: oklch(0 0 0);
--accent: oklch(0.649 0.049 272.872);
--accent-foreground: oklch(0 0 0);
--destructive: oklch(0.365 0.108 38.44);
--destructive-foreground: oklch(0.859 0.066 40.911);
--ring: oklch(0.693 0.037 223.83);
--chart-1: oklch(0.693 0.037 223.83);
--chart-2: oklch(0.717 0.046 180.153);
--chart-3: oklch(0.649 0.049 272.872);
--chart-4: oklch(0.738 0.042 180.367);
--chart-5: oklch(0.695 0.042 223.966);
}
.dark {
--radius: 0.5rem;
--background: oklch(0 0 0);
--foreground: oklch(0.978 0.005 223.184);
--muted: oklch(0.218 0.018 179.562);
--muted-foreground: oklch(0.75 0.026 181.081);
--popover: oklch(0 0 0);
--popover-foreground: oklch(0.978 0.005 223.184);
--card: oklch(0 0 0);
--card-foreground: oklch(0.978 0.005 223.184);
--border: oklch(0.278 0.03 256.848);
--input: oklch(0.278 0.03 256.848);
--primary: oklch(0.693 0.037 223.83);
--primary-foreground: oklch(0 0 0);
--secondary: oklch(0.717 0.046 180.153);
--secondary-foreground: oklch(0 0 0);
--accent: oklch(0.649 0.049 272.872);
--accent-foreground: oklch(0 0 0);
--destructive: oklch(0.649 0.191 38.476);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.693 0.037 223.83);
--chart-1: oklch(0.693 0.037 223.83);
--chart-2: oklch(0.717 0.046 180.153);
--chart-3: oklch(0.649 0.049 272.872);
--chart-4: oklch(0.738 0.042 180.367);
--chart-5: oklch(0.695 0.042 223.966);
}