Colors

All colors are defined in OKLCH, so steps are perceptually even and hue shifts stay predictable. Toggle dark mode (top right) to see every swatch on this page re-resolve live.

Gray ramp

Near-neutral with a faint cool cast. This ramp does most of the work in the system: backgrounds, fills, borders and text all come from it.

Accent ramp

A restrained blue. Used for focus rings, links, selected states, and as the brand slot for themes that override it.

Semantic roles

Components never touch the ramps directly; they use these roles. Overriding a role (or the primitive it points at) restyles every component at once.

Status colors

Each status ships four tokens: a solid, a subtle wash, a border, and a long-form text color that holds contrast on the wash.