Colors
The color system uses semantic tokens to ensure accessible contrast across themes, backed by a set of numeric primitive scales.
Semantic Tokens
Surface
Backgrounds and containers.
background
var(--color-background)
background-subtle
var(--color-background-subtle)
surface
var(--color-surface)
surface-hover
var(--color-surface-hover)
Typography
Content readability.
foreground
var(--color-foreground)
foreground-subtle
var(--color-foreground-subtle)
foreground-muted
var(--color-foreground-muted)
Accent
Brand highlights.
accent
var(--color-accent)
accent-hover
var(--color-accent-hover)
accent-contrast
var(--color-accent-contrast)
accent-border
var(--color-accent-border)
Primitives
Neutral
Neon Pink (Accent)
Neon Yellow (Dark Mode Accent)
Neon Orange (Light Mode Accent)
Brand 1 (Blue)
Opacity
/90/75/50/25