Color tokens

Every surface, text, status & data-viz color is a role token — light, dark and all 12 accents retheme for free.

Spacing scale
Foundation

Surfaces & borders

The glass-stack the whole UI is layered on. Click a chip to copy its var.

Foundation

Text colors

Five emphasis steps, each AA-legible on every surface.

Semantic

Status palette

Success, warning, danger & info — each ships a 50 wash, 200 mid & 500 solid for tints, fills and badges.

Color never the only signal — pair with ▲▼ & glyphs
Constant across all 12 accents

Data-viz palette

The six categorical chart colors stay fixed so series keep their identity when the accent changes.

Theme-aware

Accent ramp

Switch presets in the customizer — this whole ramp re-derives live.

--ax-accent --ax-accent-wash --ax-link

Never hard-code a hex

Reference a role token — color:var(--ax-text-muted), background:var(--ax-surface), border-color:var(--ax-border). That single rule is what makes light, dark and all 12 accent presets work with zero per-component overrides.