Semantic tokens, rendered side by side under both themes. Return here after edits to theme.css.
Primary text sits at the top of the typographic stack — normal weight, full foreground color.
Descriptions, captions, timestamps. Clearly one step down from primary text in both weight feel and brightness.
Verify button contrast against a card surface in both themes.
Primary text sits at the top of the typographic stack — normal weight, full foreground color.
Descriptions, captions, timestamps. Clearly one step down from primary text in both weight feel and brightness.
Verify button contrast against a card surface in both themes.
| Token | Light | Dark |
|---|---|---|
| --background | 0 0% 100% | 0 0% 8% |
| --foreground | 240 10% 3.9% | 0 0% 98% |
| --card | 0 0% 100% | 0 0% 10% |
| --card-foreground | 240 10% 3.9% | 0 0% 98% |
| --primary | 326 100% 71% | 326 100% 71% |
| --action | 203 100% 69% | 203 100% 69% |
| --secondary | 240 5.9% 90% | 0 0% 27% |
| --muted | 240 4.8% 95.9% | 0 0% 27% |
| --muted-foreground | 240 3.8% 46.1% | 0 0% 65% |
| --accent | 240 4.8% 95.9% | 0 0% 27% |
| --destructive | 0 84.2% 60.2% | 0 62.8% 30.6% |
| --border | 240 5.9% 90% | 0 0% 22% |
| --input | 240 5.9% 90% | 0 0% 27% |
| --ring | 203 100% 69% | 203 100% 69% |