Primary ramp
Open full cardBrand hue. A theme replaces this ramp in place.
Color
Seven OKLCH ramps, six surface levels, and the pairing rule.
Ramps
The raw hues, eleven steps each. Nothing in a component names one.
Neutral ramp
Open full card11 steps, OKLCH. The white-label default.
Secondary ramp
Open full cardThe second brand hue: secondary fills, the duotone sweep, the second chart colour.
Red ramp
Open full cardDanger.
Amber ramp
Open full cardWarning. Note the dark foreground — amber needs it.
Green ramp
Open full cardSuccess.
Cyan ramp
Open full cardInfo.
Violet ramp
Open full cardA spare hue for illustration and charts. The secondary ramp ships with its values.
Roles
What a component actually reads. Each one resolves to a step of a ramp above.
Surfaces
Open full cardSix levels, not two. Dense UI needs the hierarchy.
Text roles
Open full cardFour weights of emphasis, plus link and inverse.
Border roles
Open full cardThree weights of separation.
Foreground pairs
Open full cardEvery background role ships with its foreground. Use them as a set.
Action states
Open full cardFour variants × resting, hover, active, disabled.
Feedback surfaces
Open full cardSubtle backgrounds with matched border and text.
Dark surfaces
Open full cardThe same semantic names, re-pointed. No component changes.
Brand and texture
Full-bleed roles for a section, not a control: a solid or gradient fill, a muted tint, and a pattern built from two gradients rather than an image.
Brand fills and texture
Open full cardFull-bleed brand colour, a muted tint, and a dot or grid pattern, all built from tokens.
Spectrum
Six fixed hues round the wheel, for decoration that means nothing: not brand, not status. No theme or brand colour changes them.
Spectrum
Open full cardSix fixed hues round the wheel, for decoration that means nothing: not brand, not status. No theme changes them.