Color
One accent doing real work, a disciplined neutral ramp, and calm status families that only ever appear inside components. Every swatch is a live CSS custom property — nothing here is a painted hex.
Gray ramp
Eleven neutral steps, 50 to 950. Every surface, border and text tone in the system is built from these.
Semantic roles
The everyday roles, each shown doing its actual job rather than as an empty swatch.
Primary
Solid actions and primary emphasis.
Secondary
Quiet, secondary actions.
Muted
Recessed fields and metadata.
Draft · not yet published
Accent
Hover and selected surfaces.
Selected row
Destructive
Irreversible, destructive actions.
Border
Hairlines, dividers, field edges.
Material name
Overlays
Translucent black and white scrims over a real material — the transparency only reads against texture.