Hefty is a shadcn/ui theme built around a vivid purple primary color (#941070) with vivid green accents (#109433). The light mode uses a neutral background (#fefbfd). Dark mode keeps the vivid purple primary (#941070) on a purple-tinted background (#10040d).
| Token | Light | Dark |
|---|---|---|
| Background | #fefbfdsnow | #10040dblack |
| Foreground | #160411black | #ffffffwhite |
| Card | #fdf7fbsnow | #140510black |
| Card foreground | #12030eblack | #ffffffwhite |
| Popover | #fdf7fbsnow | #140510black |
| Popover foreground | #12030eblack | #ffffffwhite |
| Primary | #941070purple | #941070purple |
| Primary foreground | #fbdaf2mistyrose | #fbdaf2mistyrose |
| Secondary | #109433forestgreen | #109433forestgreen |
| Secondary foreground | #ffffffwhite | #ffffffwhite |
| Muted | #e3ede6gainsboro | #121c15black |
| Muted foreground | #49554cdarkslategray | #aab6addarkgray |
| Accent | #109433forestgreen | #109433forestgreen |
| Accent foreground | #ffffffwhite | #ffffffwhite |
| Destructive | #83290bsaddlebrown | #eb4e19orangered |
| Destructive foreground | #fad4c7peachpuff | #ffffffwhite |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #941070purple | #941070purple |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 19.29:1 | AAA |
| Text on card | 19.03:1 | AAA |
| Primary button | 6.40:1 | AA |
| Secondary button | 3.97:1 | AA Large |
| Muted text | 6.51:1 | AA |
| Accent | 3.97:1 | AA Large |
| Destructive | 6.65:1 | AA |
| Text on background | 20.06:1 | AAA |
| Text on card | 19.79:1 | AAA |
| Primary button | 6.40:1 | AA |
| Secondary button | 3.97:1 | AA Large |
| Muted text | 8.34:1 | AAA |
| Accent | 3.97:1 | AA Large |
| Destructive | 3.73:1 | AA Large |
Paste this into your globals.css to use Hefty in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(0.991 0.004 334.594);
--foreground: oklch(0.148 0.044 338.178);
--muted: oklch(0.936 0.013 154.276);
--muted-foreground: oklch(0.437 0.022 153.607);
--popover: oklch(0.982 0.008 334.663);
--popover-foreground: oklch(0.135 0.039 337.305);
--card: oklch(0.982 0.008 334.663);
--card-foreground: oklch(0.135 0.039 337.305);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--primary: oklch(0.452 0.184 342.698);
--primary-foreground: oklch(0.923 0.048 335.414);
--secondary: oklch(0.581 0.172 146.228);
--secondary-foreground: oklch(1 0 180);
--accent: oklch(0.581 0.172 146.228);
--accent-foreground: oklch(1 0 180);
--destructive: oklch(0.416 0.129 37.053);
--destructive-foreground: oklch(0.898 0.047 39.28);
--ring: oklch(0.452 0.184 342.698);
--chart-1: oklch(0.452 0.184 342.698);
--chart-2: oklch(0.581 0.172 146.228);
--chart-3: oklch(0.581 0.172 146.228);
--chart-4: oklch(0.62 0.184 146.151);
--chart-5: oklch(0.456 0.188 342.972);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.137 0.031 336.819);
--foreground: oklch(1 0 180);
--muted: oklch(0.213 0.019 152.843);
--muted-foreground: oklch(0.765 0.019 154.078);
--popover: oklch(0.149 0.035 337.632);
--popover-foreground: oklch(1 0 180);
--card: oklch(0.149 0.035 337.632);
--card-foreground: oklch(1 0 180);
--border: oklch(0.278 0.03 256.848);
--input: oklch(0.278 0.03 256.848);
--primary: oklch(0.452 0.184 342.698);
--primary-foreground: oklch(0.923 0.048 335.414);
--secondary: oklch(0.581 0.172 146.228);
--secondary-foreground: oklch(1 0 180);
--accent: oklch(0.581 0.172 146.228);
--accent-foreground: oklch(1 0 180);
--destructive: oklch(0.636 0.202 36.738);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.452 0.184 342.698);
--chart-1: oklch(0.452 0.184 342.698);
--chart-2: oklch(0.581 0.172 146.228);
--chart-3: oklch(0.581 0.172 146.228);
--chart-4: oklch(0.62 0.184 146.151);
--chart-5: oklch(0.456 0.188 342.972);
}