Design Tokens
CSS custom properties that define the visual language
Color Hierarchy
The design system uses a 3-level surface hierarchy:
| Level | Token | Lightness | Purpose |
|---|---|---|---|
| 0 | --background | 97% | Page canvas |
| 1 | --card | 100% | Content containers |
| 2 | --muted | 93.5% | Nested elements within cards |
Token Roles
| Token | Purpose |
|---|---|
--primary | Brand color, CTAs |
--secondary | Subtle buttons, badges |
--accent | Hover/focus states |
--muted | Nested surfaces |
--destructive | Danger actions |
--border | Borders |
--input | Input borders |
--ring | Focus rings |
Color Spaces
Tokens use modern CSS color spaces:
- oklch() for grays and semantic colors (perceptually uniform)
- lab() for the primary/brand color (precise hue control)
Dark Mode
Toggle dark mode by adding the .dark class to your root element.
All tokens automatically remap to dark variants.
High Contrast
Add the data-high-contrast attribute for WCAG AAA compliance.
Works with both light and dark modes.
Multi-Brand Theming
Override tokens per brand using data attributes:
[data-brand="your-product"] {
--primary: oklch(50% 0.2 250);
--ring: oklch(50% 0.2 250);
}