Color System
The palette plus the rules for applying it — semantic roles, contrast requirements, and the values behind each mode.
Deliverables & ArtifactsA 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
You may ask
Frequently Asked Questions
What is the difference between a color palette and a color system?
A palette is the set of colours. A system adds semantic roles — what each colour is for — plus contrast rules and per-mode value maps, so components reference meaning rather than a specific hex.
How many colors should a design system have?
Usually one neutral ramp of 9–12 steps, one or two brand ramps, and semantic colours for success, warning, danger and info. What matters is the number of roles, which should stay small enough that the right choice is obvious.
How do you handle dark mode in a color system?
Define semantic roles once and give each mode its own value map. Inverting lightness algorithmically does not work — dark surfaces need different steps and usually lower-saturation brand colours.
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.
Defined by Mara Last reviewed .
Let's talk about your product.
Happy to look at what you're building and say where design would move the needle.
Contact Us