05 / 09
Tokens
The shadcn → Lexi bridge — every semantic token and what it maps to.
| Token | Value | Preview | Usage |
|---|---|---|---|
| --color-background | var(--lexi-bg) | Page and surface ground | |
| --color-foreground | var(--lexi-fg) | Primary text | |
| --color-primary | var(--lexi-accent) | The one action that matters — Signal | |
| --color-primary-foreground | #151715 | Always dark on Signal — never flips | |
| --color-muted-foreground | var(--lexi-fg-muted) | Secondary text — grey-400 on dark, grey-600 on light (AA at small sizes) | |
| --color-accent | var(--lexi-surface-card) | Neutral hover surface — not Signal | |
| --color-border | var(--lexi-border-subtle) | Borders and dividers | |
| --color-ring | var(--lexi-accent) | Focus rings | |
| --radius | 8px | Base radius (sm 4 / md 8 / lg 16) | |
| --font-sans | Inter | Functional UI — 16px and below | |
| --font-display | Founders Grotesk | Display voice, 20px floor — 300 Light · 400 Regular, no heavier | |
| --font-mono | Founders Grotesk Mono | Technical — labels, code, data |
Dark by default
:root is the dark theme; light opts out via [data-theme="light"]. Every semantic token flips automatically — components never carry their own theme logic.
Signal discipline
Signal is reserved for primary and ring. Text on Signal is always #151715 — Signal on white fails WCAG (~1.2:1); on black it clears 12.9:1.
Last updated on 2026-09-13