Safety is a shadcn/ui theme built around a vivid indigo primary color (#0e1790) with near-white accents (#e9e9ec). The light mode uses a neutral background (#ffffff). Dark mode keeps the vivid indigo primary (#0e1790) on an indigo-tinted background (#04050b).
| Token | Light | Dark |
|---|---|---|
| Background | #ffffffwhite | #04050bblack |
| Foreground | #010104black | #fcfcfdwhite |
| Card | #ffffffwhite | #04050bblack |
| Card foreground | #010104black | #fcfcfdwhite |
| Popover | #ffffffwhite | #04050bblack |
| Popover foreground | #010104black | #fcfcfdwhite |
| Primary | #0e1790darkblue | #0e1790darkblue |
| Primary foreground | #d5d8fblavender | #d5d8fblavender |
| Secondary | #e9e9eclavender | #262736darkslategray |
| Secondary foreground | #4c4d57darkslategray | #bdbfd0silver |
| Muted | #e6e7f4lavender | #0b0c19black |
| Muted foreground | #48495bdarkslategray | #a4a5b7darkgray |
| Accent | #e9e9eclavender | #262736darkslategray |
| Accent foreground | #4c4d57darkslategray | #bdbfd0silver |
| Destructive | #8e2106darkred | #eb370aorangered |
| Destructive foreground | #fdd3c9peachpuff | #ffffffwhite |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #0e1790darkblue | #0e1790darkblue |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 20.84:1 | AAA |
| Text on card | 20.84:1 | AAA |
| Primary button | 9.75:1 | AAA |
| Secondary button | 6.93:1 | AA |
| Muted text | 7.19:1 | AAA |
| Accent | 6.93:1 | AA |
| Destructive | 6.46:1 | AA |
| Text on background | 19.88:1 | AAA |
| Text on card | 19.88:1 | AAA |
| Primary button | 9.75:1 | AAA |
| Secondary button | 8.07:1 | AAA |
| Muted text | 8.00:1 | AAA |
| Accent | 8.07:1 | AAA |
| Destructive | 4.13:1 | AA Large |
Paste this into your globals.css to use Safety in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(1 0 180);
--foreground: oklch(0.076 0.016 277.007);
--muted: oklch(0.931 0.018 282.782);
--muted-foreground: oklch(0.412 0.03 281.757);
--popover: oklch(1 0 180);
--popover-foreground: oklch(0.076 0.016 277.007);
--card: oklch(1 0 180);
--card-foreground: oklch(0.076 0.016 277.007);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--primary: oklch(0.319 0.188 267.05);
--primary-foreground: oklch(0.891 0.048 282.139);
--secondary: oklch(0.936 0.004 283.042);
--secondary-foreground: oklch(0.422 0.018 282.371);
--accent: oklch(0.936 0.004 283.042);
--accent-foreground: oklch(0.422 0.018 282.371);
--destructive: oklch(0.426 0.148 33.913);
--destructive-foreground: oklch(0.901 0.049 34.345);
--ring: oklch(0.319 0.188 267.05);
--chart-1: oklch(0.319 0.188 267.05);
--chart-2: oklch(0.936 0.004 283.042);
--chart-3: oklch(0.936 0.004 283.042);
--chart-4: oklch(0.96 0.002 283.067);
--chart-5: oklch(0.319 0.193 266.517);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.115 0.018 278.79);
--foreground: oklch(0.991 0.001 283.083);
--muted: oklch(0.16 0.027 279.689);
--muted-foreground: oklch(0.726 0.026 282.47);
--popover: oklch(0.115 0.018 278.79);
--popover-foreground: oklch(0.991 0.001 283.083);
--card: oklch(0.115 0.018 278.79);
--card-foreground: oklch(0.991 0.001 283.083);
--border: oklch(0.278 0.03 256.848);
--input: oklch(0.278 0.03 256.848);
--primary: oklch(0.319 0.188 267.05);
--primary-foreground: oklch(0.891 0.048 282.139);
--secondary: oklch(0.279 0.027 281.316);
--secondary-foreground: oklch(0.808 0.025 282.568);
--accent: oklch(0.279 0.027 281.316);
--accent-foreground: oklch(0.808 0.025 282.568);
--destructive: oklch(0.614 0.221 33.296);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.319 0.188 267.05);
--chart-1: oklch(0.319 0.188 267.05);
--chart-2: oklch(0.279 0.027 281.316);
--chart-3: oklch(0.279 0.027 281.316);
--chart-4: oklch(0.306 0.031 281.242);
--chart-5: oklch(0.319 0.193 266.517);
}