All roles are CSS custom properties on :root (light) and [data-theme="dark"] (dark).
| Token | Value |
|---|
--color-background | — |
--color-surface | — |
--color-surface-raised | — |
| Role | Usage | Contrast pair |
|---|
--color-background | Page canvas | paired with --color-text |
--color-surface | Cards, panels | paired with --color-text |
--color-surface-raised | Dropdowns, modals | paired with --color-text |
| Token | Value |
|---|
--color-border | — |
--color-border-strong | — |
| Role | Usage | Minimum contrast |
|---|
--color-border | Default borders | 3.0:1 vs background |
--color-border-strong | Emphasized/active borders | 3.0:1 vs background |
| Token | Value |
|---|
--color-text | — |
--color-text-inverse | — |
--color-text-muted | — |
--color-text-disabled | — |
| Role | Usage | Minimum contrast |
|---|
--color-text | Body text | 4.5:1 vs background |
--color-text-inverse | Text on colored backgrounds | 4.5:1 vs primary |
--color-text-muted | Secondary / captions | 4.5:1 vs background |
--color-text-disabled | Disabled state | Below AA (intentional) |
| Token | Value |
|---|
--color-primary | — |
--color-primary-hover | — |
--color-focus-ring | — |
| Role | Usage |
|---|
--color-primary | Primary actions and interactive elements |
--color-primary-hover | Hover state on primary |
--color-focus-ring | Keyboard focus outline |
| Token | Value |
|---|
--color-danger | — |
--color-warning | — |
--color-info | — |
--color-success | — |
| Role | H° | Usage |
|---|
--color-danger | 27° (red) | Errors, destructive actions |
--color-warning | 80° (amber) | Warnings, caution |
--color-info | 240° (blue) | Informational messages |
--color-success | 155° (green) | Positive outcomes |
| Token | Value |
|---|
--color-accent | — |
--color-accent-hover | — |
--color-brand-accent | — |
| Role | Generated when |
|---|
--color-accent | Seed hue has sufficient chroma range |
--color-accent-hover | With --color-accent |
--color-brand-accent | Seed hue has sufficient spread |
