Live preview
Ready
Review
Token-driven surfaces
Accent, semantic, and text tokens should stay readable when you switch presets or theme modes.
Theme Explorer
Live token values, preset switching, and WCAG contrast preview. Use the theme toggle in the top bar for dark, system, and OLED modes.
Reading computed tokens for Default tokens
Token explorer
First app-owned overrides by job — values refresh from computed styles.
Page
--chirpui-bg
canvas
--chirpui-bg-subtle
bands
Surface
--chirpui-surface
panel
--chirpui-border
edge
Text
--chirpui-text
primary
--chirpui-text-muted
secondary
Accent
--chirpui-accent
action
--chirpui-accent-hover
hover
--chirpui-on-accent
on-action
Semantic
--chirpui-success
success
--chirpui-warning
warning
--chirpui-error
error
Focus
--chirpui-focus-ring
halo
--chirpui-state-focus-outline
keyboard
Radius
--chirpui-radius-sm
compact
--chirpui-radius-lg
panel
Elevation
--chirpui-elevation-card-rest
rest
--chirpui-elevation-overlay
float
Typography
--chirpui-ui-font-family
ui
--chirpui-ui-lg
scale
Motion
--chirpui-motion-base
timing
--chirpui-ease-standard
curve