Colors
A purpose-built palette grounded in purple primaries, semantic surfaces, and accessible contrast.
Primitive Palettes
Primary
Neutral
Error
Success
Warning
Semantic Tokens
Mapped from primitive palettes. Automatically adapts between light and dark themes.
Surface
| Token | CSS Variable | Light | Dark |
|---|---|---|---|
| surface-primary | Neutral 10 | Neutral 90 | |
| surface-secondary | Neutral 20 | Neutral 80 | |
| surface-elevated | White | Neutral 80 | |
| surface-brand | Primary 10 | Primary 90 | |
| surface-critical | Error 10 | Error 90 | |
| surface-success | Success 10 | Success 90 | |
| surface-warning | Warning 10 | Warning 90 |
Fill
| Token | CSS Variable | Light | Dark |
|---|---|---|---|
| fill-brand | Primary 60 | Primary 60 | |
| fill-brand-hover | Primary 70 | Primary 50 | |
| fill-critical | Error 50 | Error 50 | |
| fill-success | Success 50 | Success 50 | |
| fill-warning | Warning 50 | Warning 50 |
Content (Text)
| Token | CSS Variable | Light | Dark |
|---|---|---|---|
| content-primary | Neutral 100 | Neutral 10 | |
| content-secondary | Neutral 60 | Neutral 40 | |
| content-tertiary | Neutral 50 | Neutral 50 | |
| content-brand | Primary 60 | Primary 40 | |
| content-error | Error 60 | Error 40 | |
| content-success | Success 60 | Success 40 |
Border
| Token | CSS Variable | Light | Dark |
|---|---|---|---|
| border-primary | Neutral 30 | Neutral 70 | |
| border-secondary | Neutral 20 | Neutral 80 | |
| border-brand | Primary 60 | Primary 60 | |
| border-error | Error 50 | Error 50 | |
| border-focus | Primary 60 | Primary 50 |