Seabass is a shadcn/ui theme built around a light red primary color (#f3dde2) with muted light red accents (#ded8da). The light mode uses a neutral background (#fdfbfc). Dark mode keeps the light red primary (#f3dde2) on a red-tinted background (#0f0608).
| Token | Light | Dark |
|---|---|---|
| Background | #fdfbfcsnow | #0f0608black |
| Foreground | #0f0507black | #fcf8f9snow |
| Card | #fdfbfcsnow | #0f0608black |
| Card foreground | #0f0507black | #fcf8f9snow |
| Popover | #fdfbfcsnow | #0f0608black |
| Popover foreground | #0f0507black | #fcf8f9snow |
| Primary | #f3dde2mistyrose | #f3dde2mistyrose |
| Primary foreground | #732b3cbrown | #732b3cbrown |
| Secondary | #ebeaealinen | #21181ablack |
| Secondary foreground | #525151darkslategray | #c1a9afdarkgray |
| Muted | #f1e4e7linen | #1b0e11black |
| Muted foreground | #5a494ddarkslategray | #b6a5a9darkgray |
| Accent | #ded8dagainsboro | #362126darkslategray |
| Accent foreground | #483d3fdarkslategray | #d2b6bdsilver |
| Destructive | #651001maroon | #fe3410orangered |
| Destructive foreground | #fea99alightsalmon | #ffffffwhite |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #f3dde2mistyrose | #f3dde2mistyrose |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 19.57:1 | AAA |
| Text on card | 19.57:1 | AAA |
| Primary button | 7.61:1 | AAA |
| Secondary button | 6.60:1 | AA |
| Muted text | 6.80:1 | AA |
| Accent | 7.43:1 | AAA |
| Destructive | 6.96:1 | AA |
| Text on background | 19.02:1 | AAA |
| Text on card | 19.02:1 | AAA |
| Primary button | 7.61:1 | AAA |
| Secondary button | 7.93:1 | AAA |
| Muted text | 8.01:1 | AAA |
| Accent | 7.97:1 | AAA |
| Destructive | 3.67:1 | AA Large |
Paste this into your globals.css to use Seabass in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(0.991 0.002 1.023);
--foreground: oklch(0.135 0.021 2.255);
--muted: oklch(0.93 0.015 1.414);
--muted-foreground: oklch(0.425 0.023 2.42);
--popover: oklch(0.991 0.002 1.023);
--popover-foreground: oklch(0.135 0.021 2.255);
--card: oklch(0.991 0.002 1.023);
--card-foreground: oklch(0.135 0.021 2.255);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--primary: oklch(0.918 0.024 1.683);
--primary-foreground: oklch(0.398 0.103 8.713);
--secondary: oklch(0.939 0 0.974);
--secondary-foreground: oklch(0.436 0.002 1.103);
--accent: oklch(0.888 0.006 1.165);
--accent-foreground: oklch(0.372 0.015 2.082);
--destructive: oklch(0.33 0.121 32.949);
--destructive-foreground: oklch(0.814 0.104 30.453);
--ring: oklch(0.918 0.024 1.683);
--chart-1: oklch(0.918 0.024 1.683);
--chart-2: oklch(0.939 0 0.974);
--chart-3: oklch(0.888 0.006 1.165);
--chart-4: oklch(0.962 0 0.969);
--chart-5: oklch(0.917 0.026 1.731);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.136 0.019 2.099);
--foreground: oklch(0.983 0.004 1.063);
--muted: oklch(0.183 0.024 4.47);
--muted-foreground: oklch(0.738 0.02 1.694);
--popover: oklch(0.136 0.019 2.099);
--popover-foreground: oklch(0.983 0.004 1.063);
--card: oklch(0.136 0.019 2.099);
--card-foreground: oklch(0.983 0.004 1.063);
--border: oklch(0.278 0.03 256.848);
--input: oklch(0.278 0.03 256.848);
--primary: oklch(0.918 0.024 1.683);
--primary-foreground: oklch(0.398 0.103 8.713);
--secondary: oklch(0.219 0.015 2.801);
--secondary-foreground: oklch(0.758 0.028 1.989);
--accent: oklch(0.276 0.033 4.193);
--accent-foreground: oklch(0.803 0.033 2.097);
--destructive: oklch(0.645 0.238 31.819);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.918 0.024 1.683);
--chart-1: oklch(0.918 0.024 1.683);
--chart-2: oklch(0.219 0.015 2.801);
--chart-3: oklch(0.276 0.033 4.193);
--chart-4: oklch(0.25 0.018 2.949);
--chart-5: oklch(0.917 0.026 1.731);
}