Hyphenation is a shadcn/ui theme built around a vivid blue primary color (#0b80f4) with muted light blue accents (#c3c9d0). The light mode uses a neutral background (#f7fafd). Dark mode keeps the vivid blue primary (#0b80f4) on a blue-tinted background (#05080a).
| Token | Light | Dark |
|---|---|---|
| Background | #f7fafdghostwhite | #05080ablack |
| Foreground | #040a10black | #fcfcfdwhite |
| Card | #f7fafdghostwhite | #05080ablack |
| Card foreground | #040a10black | #fcfcfdwhite |
| Popover | #f7fafdghostwhite | #05080ablack |
| Popover foreground | #040a10black | #fcfcfdwhite |
| Primary | #0b80f4dodgerblue | #0b80f4dodgerblue |
| Primary foreground | #ffffffwhite | #ffffffwhite |
| Secondary | #dcdee0gainsboro | #1d1f20black |
| Secondary foreground | #414549darkslategray | #b4b8bbsilver |
| Muted | #eaedf1lavender | #0e1215black |
| Muted foreground | #4b545ddarkslategray | #a2abb4darkgray |
| Accent | #c3c9d0silver | #2d3339darkslategray |
| Accent foreground | #2b3036darkslategray | #c6ccd2lightgrey |
| Destructive | #61230amaroon | #ed7545coral |
| Destructive foreground | #f6bda7lightpink | #000000black |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #0b80f4dodgerblue | #0b80f4dodgerblue |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 18.96:1 | AAA |
| Text on card | 18.96:1 | AAA |
| Primary button | 3.90:1 | AA Large |
| Secondary button | 7.15:1 | AAA |
| Muted text | 6.56:1 | AA |
| Accent | 7.99:1 | AAA |
| Destructive | 7.27:1 | AAA |
| Text on background | 19.61:1 | AAA |
| Text on card | 19.61:1 | AAA |
| Primary button | 3.90:1 | AA Large |
| Secondary button | 8.30:1 | AAA |
| Muted text | 8.08:1 | AAA |
| Accent | 7.88:1 | AAA |
| Destructive | 7.20:1 | AAA |
Paste this into your globals.css to use Hyphenation in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(0.983 0.005 247.875);
--foreground: oklch(0.142 0.017 243.813);
--muted: oklch(0.945 0.006 247.886);
--muted-foreground: oklch(0.442 0.019 248.263);
--popover: oklch(0.983 0.005 247.875);
--popover-foreground: oklch(0.142 0.017 243.813);
--card: oklch(0.983 0.005 247.875);
--card-foreground: oklch(0.142 0.017 243.813);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--primary: oklch(0.607 0.196 255.121);
--primary-foreground: oklch(1 0 180);
--secondary: oklch(0.899 0.003 247.862);
--secondary-foreground: oklch(0.388 0.009 248.058);
--accent: oklch(0.834 0.011 247.964);
--accent-foreground: oklch(0.308 0.013 248.257);
--destructive: oklch(0.345 0.098 39.786);
--destructive-foreground: oklch(0.845 0.073 42.578);
--ring: oklch(0.607 0.196 255.121);
--chart-1: oklch(0.607 0.196 255.121);
--chart-2: oklch(0.899 0.003 247.862);
--chart-3: oklch(0.834 0.011 247.964);
--chart-4: oklch(0.923 0.003 247.852);
--chart-5: oklch(0.609 0.201 255.512);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.13 0.009 242.757);
--foreground: oklch(0.992 0.001 247.833);
--muted: oklch(0.179 0.009 248.319);
--muted-foreground: oklch(0.736 0.017 248.059);
--popover: oklch(0.13 0.009 242.757);
--popover-foreground: oklch(0.992 0.001 247.833);
--card: oklch(0.13 0.009 242.757);
--card-foreground: oklch(0.992 0.001 247.833);
--border: oklch(0.278 0.03 256.848);
--input: oklch(0.278 0.03 256.848);
--primary: oklch(0.607 0.196 255.121);
--primary-foreground: oklch(1 0 180);
--secondary: oklch(0.237 0.004 247.985);
--secondary-foreground: oklch(0.78 0.006 247.908);
--accent: oklch(0.318 0.013 248.226);
--accent-foreground: oklch(0.843 0.01 247.945);
--destructive: oklch(0.693 0.161 41.301);
--destructive-foreground: oklch(0 0 0);
--ring: oklch(0.607 0.196 255.121);
--chart-1: oklch(0.607 0.196 255.121);
--chart-2: oklch(0.237 0.004 247.985);
--chart-3: oklch(0.318 0.013 248.226);
--chart-4: oklch(0.268 0.005 247.996);
--chart-5: oklch(0.609 0.201 255.512);
}