Semantic tokens
Role-based design tokens that map to CSS custom properties. These adapt automatically in dark mode.
| Swatch | Token | Role | CSS Variable |
|---|---|---|---|
| background | Page background | var(--background) | |
| foreground | Default text colour | var(--foreground) | |
| card | Card surface | var(--card) | |
| card-foreground | Card text colour | var(--card-foreground) | |
| popover | Popover surface | var(--popover) | |
| muted | Muted surface | var(--muted) | |
| muted-foreground | Muted text colour | var(--muted-foreground) | |
| accent | Accent surface | var(--accent) | |
| border | Default border | var(--border) | |
| input | Input border | var(--input) | |
| ring | Focus ring | var(--ring) | |
| destructive | Destructive action | var(--destructive) |