Color System
The palette plus the rules for applying it — semantic roles, contrast requirements, and the values behind each mode.
A palette is a list of colours. A colour system is the layer above it: named roles that say what a colour is for, mapped to values that can change without touching a single component. `surface`, `surface-raised`, `text-primary`, `border-subtle`, `danger` — a component references the role, and dark mode becomes a second value map rather than a second design.
Roles are what make dark mode tractable. Products that hardcode hex values ship a dark theme as a parallel set of overrides that drifts within two releases. Products with roles change the mapping once. The same indirection is what lets a brand refresh land without a component rewrite.
Contrast is a constraint, not a review step
Every text-on-surface pair has to meet WCAG contrast — 4.5:1 for body text, 3:1 for large text and UI boundaries. Checking that when the ramp is defined is free; discovering it at audit means re-deriving the palette and revisiting every screen built on it.
In practice
A B2B product picked its greys by eye across a year of screens and ended with 23 distinct values, six of which failed contrast on white. Collapsing to a nine-step ramp with semantic roles took two days and removed a category of accessibility findings permanently — new screens could no longer reach a failing value.
Where teams get it wrong
- Naming colours by appearance — `blue-500` — so a rebrand means renaming everything.
- Deriving dark mode by inverting lightness, which produces muddy surfaces and glowing text.
- Checking contrast at review rather than building it into the ramp.
- Semantic roles that multiply until nobody knows whether to use `surface-alt` or `surface-secondary`.
- Colour carrying meaning with no secondary signal — status, errors and chart series all need a shape or a label too.
( Learn more )
Related terms
All terms- Design TokenA named variable holding one design decision — a colour, spacing step, radius or type size — so the value can change everywhere from one place.
- Design SystemThe single source of truth for how a product looks and behaves: tokens, components, patterns, usage rules and the process for changing them.
- WCAGThe Web Content Accessibility Guidelines — the standard almost every accessibility law and procurement contract points at.
- Typography ScaleThe fixed set of text sizes a product is allowed to use, and the line heights and weights that travel with each one.