Color
Every value is generated from three brand names. Components pick an intent (what it means) and an emphasis (how loud); text picks a level. Switch the brand, mode and surface in Customize.
Intents
One set per intent. The bare name is the hue for text and icons, never a fill; solid and subtle are fills with their own text; border is the edge. Primary and destructive follow the brand.
One status pattern per intent
A state is a subtle Badge. A dot or a hue only next to a label that names it; a Alert for a notice.
Data colors
A color the workspace picked (a label, a category) is data, not an intent. Badge and StatusDot take it as color, exclusive with intent; Badge derives its solid, subtle and outline from it.
Categories
Eight hues for things told apart, not ranked, when no one picked a color: take them in order. Static, not branded; each mode has its own step. bg-category-N for a swatch, var(--category-N) as a data color.
Text
Four levels, from titles to disabled.
Surfaces
From back to front.
Fills
Quiet fills read one step from the surface they sit on.
Lines
Three border levels; the focus ring is not decorative.