Colors

OKLCH-based color system with perceptually uniform scaling and CVD-safe pairings.

Plum (Primary)

The primary accent. Used for interactive elements, focus rings, and brand presence.

Amber (Secondary)

CVD-safe secondary color. Used for call-to-action buttons and warm highlights.

Warm Neutrals

The backbone of the system. Backgrounds, borders, text — all warm-toned for cohesion.

Status Colors

Semantic Tokens

These tokens are what you actually use in components. They map to the raw palette and flip automatically in dark mode. Click to copy the CSS variable.