Tambour is a shadcn/ui theme built around a light green primary color (#eef7d9) with light purple accents (#f7d9ee). The light mode uses a neutral background (#fdfefb). Dark mode keeps the light green primary (#eef7d9) on a green-tinted background (#090b04).
| Token | Light | Dark |
|---|---|---|
| Background | #fdfefbwhite | #090b04black |
| Foreground | #030401black | #f8faf5whitesmoke |
| Card | #fbfcf7snow | #0c0f06black |
| Card foreground | #000000black | #fafbf8snow |
| Popover | #fdfefbwhite | #090b04black |
| Popover foreground | #030401black | #f8faf5whitesmoke |
| Primary | #eef7d9beige | #eef7d9beige |
| Primary foreground | #232f09black | #232f09black |
| Secondary | #d9eef7lavender | #d9eef7lavender |
| Secondary foreground | #09232fblack | #09232fblack |
| Muted | #e6f0f4lavender | #0b1419black |
| Muted foreground | #3f4040darkslategray | #bfbfc0silver |
| Accent | #f7d9eemistyrose | #f7d9eemistyrose |
| Accent foreground | #841a62purple | #841a62purple |
| Destructive | #ac2811firebrick | #ed5e45tomato |
| Destructive foreground | #fef3f1seashell | #000000black |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #eef7d9beige | #eef7d9beige |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 20.26:1 | AAA |
| Text on card | 20.41:1 | AAA |
| Primary button | 12.80:1 | AAA |
| Secondary button | 13.51:1 | AAA |
| Muted text | 8.97:1 | AAA |
| Accent | 6.98:1 | AA |
| Destructive | 6.30:1 | AA |
| Text on background | 18.83:1 | AAA |
| Text on card | 18.65:1 | AAA |
| Primary button | 12.80:1 | AAA |
| Secondary button | 13.51:1 | AAA |
| Muted text | 10.10:1 | AAA |
| Accent | 6.98:1 | AA |
| Destructive | 6.29:1 | AA |
Paste this into your globals.css to use Tambour in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(0.995 0.003 120.823);
--foreground: oklch(0.103 0.016 120.519);
--muted: oklch(0.948 0.012 227.016);
--muted-foreground: oklch(0.371 0.001 226.902);
--popover: oklch(0.995 0.003 120.823);
--popover-foreground: oklch(0.103 0.016 120.519);
--card: oklch(0.99 0.007 120.878);
--card-foreground: oklch(0 0 0);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--primary: oklch(0.962 0.042 121.487);
--primary-foreground: oklch(0.284 0.06 125.201);
--secondary: oklch(0.936 0.026 227.225);
--secondary-foreground: oklch(0.242 0.038 231.493);
--accent: oklch(0.916 0.044 337.462);
--accent-foreground: oklch(0.424 0.158 344.218);
--destructive: oklch(0.489 0.171 32.214);
--destructive-foreground: oklch(0.972 0.012 29.512);
--ring: oklch(0.962 0.042 121.487);
--chart-1: oklch(0.962 0.042 121.487);
--chart-2: oklch(0.936 0.026 227.225);
--chart-3: oklch(0.916 0.044 337.462);
--chart-4: oklch(0.957 0.017 227.087);
--chart-5: oklch(0.963 0.043 121.518);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.144 0.017 120.668);
--foreground: oklch(0.982 0.006 120.876);
--muted: oklch(0.186 0.017 228.57);
--muted-foreground: oklch(0.806 0.001 226.874);
--popover: oklch(0.144 0.017 120.668);
--popover-foreground: oklch(0.982 0.006 120.876);
--card: oklch(0.16 0.019 121.934);
--card-foreground: oklch(0.988 0.004 120.839);
--border: oklch(0.278 0.03 256.848);
--input: oklch(0.278 0.03 256.848);
--primary: oklch(0.962 0.042 121.487);
--primary-foreground: oklch(0.284 0.06 125.201);
--secondary: oklch(0.936 0.026 227.225);
--secondary-foreground: oklch(0.242 0.038 231.493);
--accent: oklch(0.916 0.044 337.462);
--accent-foreground: oklch(0.424 0.158 344.218);
--destructive: oklch(0.662 0.181 32.127);
--destructive-foreground: oklch(0 0 0);
--ring: oklch(0.962 0.042 121.487);
--chart-1: oklch(0.962 0.042 121.487);
--chart-2: oklch(0.936 0.026 227.225);
--chart-3: oklch(0.916 0.044 337.462);
--chart-4: oklch(0.957 0.017 227.087);
--chart-5: oklch(0.963 0.043 121.518);
}