Hateful is a shadcn/ui theme built around a muted light orange primary color (#f9f7f6) with neutral gray accents (#d9d9d8). The light mode uses a neutral background (#ffffff). Dark mode keeps the muted light orange primary (#f9f7f6) on an orange-tinted background (#0e0a07).
| Token | Light | Dark |
|---|---|---|
| Background | #ffffffwhite | #0e0a07black |
| Foreground | #080502black | #fcfaf8snow |
| Card | #ffffffwhite | #0e0a07black |
| Card foreground | #080502black | #fcfaf8snow |
| Popover | #ffffffwhite | #0e0a07black |
| Popover foreground | #080502black | #fcfaf8snow |
| Primary | #f9f7f6whitesmoke | #f9f7f6whitesmoke |
| Primary foreground | #342b23darkslategray | #342b23darkslategray |
| Secondary | #d9d9d8gainsboro | #2c2621darkslategray |
| Secondary foreground | #40403fdarkslategray | #c8beb6silver |
| Muted | #f7f2eewhitesmoke | #110c08black |
| Muted foreground | #514c48darkslategray | #b7b2aedarkgray |
| Accent | #d9d9d8gainsboro | #2c2621darkslategray |
| Accent foreground | #40403fdarkslategray | #c8beb6silver |
| Destructive | #bc1a01firebrick | #e41f01red |
| Destructive foreground | #ffffffwhite | #ffffffwhite |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #f9f7f6whitesmoke | #f9f7f6whitesmoke |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 20.33:1 | AAA |
| Text on card | 20.33:1 | AAA |
| Primary button | 12.98:1 | AAA |
| Secondary button | 7.33:1 | AAA |
| Muted text | 7.61:1 | AAA |
| Accent | 7.33:1 | AAA |
| Destructive | 6.40:1 | AA |
| Text on background | 18.95:1 | AAA |
| Text on card | 18.95:1 | AAA |
| Primary button | 12.98:1 | AAA |
| Secondary button | 8.20:1 | AAA |
| Muted text | 9.23:1 | AAA |
| Accent | 8.20:1 | AAA |
| Destructive | 4.65:1 | AA |
Paste this into your globals.css to use Hateful in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(1 0 180);
--foreground: oklch(0.118 0.015 71.58);
--muted: oklch(0.963 0.008 62.09);
--muted-foreground: oklch(0.42 0.01 61.889);
--popover: oklch(1 0 180);
--popover-foreground: oklch(0.118 0.015 71.58);
--card: oklch(1 0 180);
--card-foreground: oklch(0.118 0.015 71.58);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--primary: oklch(0.978 0.002 62.161);
--primary-foreground: oklch(0.295 0.019 61.283);
--secondary: oklch(0.885 0.001 62.184);
--secondary-foreground: oklch(0.371 0.001 62.145);
--accent: oklch(0.885 0.001 62.184);
--accent-foreground: oklch(0.371 0.001 62.145);
--destructive: oklch(0.508 0.196 31.2);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.978 0.002 62.161);
--chart-1: oklch(0.978 0.002 62.161);
--chart-2: oklch(0.885 0.001 62.184);
--chart-3: oklch(0.885 0.001 62.184);
--chart-4: oklch(0.908 0.001 62.186);
--chart-5: oklch(0.978 0.003 62.155);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.148 0.011 64.713);
--foreground: oklch(0.985 0.003 62.152);
--muted: oklch(0.161 0.012 61.756);
--muted-foreground: oklch(0.767 0.008 62.051);
--popover: oklch(0.148 0.011 64.713);
--popover-foreground: oklch(0.985 0.003 62.152);
--card: oklch(0.148 0.011 64.713);
--card-foreground: oklch(0.985 0.003 62.152);
--border: oklch(0.278 0.03 256.848);
--input: oklch(0.278 0.03 256.848);
--primary: oklch(0.978 0.002 62.161);
--primary-foreground: oklch(0.295 0.019 61.283);
--secondary: oklch(0.272 0.012 61.563);
--secondary-foreground: oklch(0.808 0.016 61.933);
--accent: oklch(0.272 0.012 61.563);
--accent-foreground: oklch(0.808 0.016 61.933);
--destructive: oklch(0.587 0.228 30.976);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.978 0.002 62.161);
--chart-1: oklch(0.978 0.002 62.161);
--chart-2: oklch(0.272 0.012 61.563);
--chart-3: oklch(0.272 0.012 61.563);
--chart-4: oklch(0.304 0.014 61.531);
--chart-5: oklch(0.978 0.003 62.155);
}