Design
Color Systems:
Beyond the Palette
A palette is a collection of colors. A color system is a set of rules for how they relate and where they're used. Most products have a palette. Very few have a system. Here's the difference — and why it matters at scale.
The Palette vs. System Distinction
A palette answers: what colors do we have? A system answers: which color is used for what purpose, in what context, and why? Without the system layer, a palette is a toolbox without instructions. Designers make locally correct decisions that create globally inconsistent results.
The practical symptom: a product with 40 slightly different grays in production, because each designer chose the one that "looked right" at the time. Or a dark mode that uses inverted palette colors and looks slightly wrong everywhere because the perceptual relationships weren't designed — only the raw values were flipped.
Three Layers of a Color System
| Layer | Example | Purpose |
|---|---|---|
| Primitive / Raw | gray-900: #1a1917blue-500: #3b82f6 |
The raw color values. Never used directly in components. |
| Semantic / Alias | color-bg: gray-950color-fg: gray-100color-accent: blue-500 |
Named by role, not by value. This is what components reference. |
| Component | btn-bg: color-accentbtn-text: color-bg |
Component-specific mappings from semantic tokens. Enables theming. |
When dark mode is implemented at the semantic layer — color-bg maps to a different primitive in dark vs. light — every component automatically adapts without touching individual component styles.
Dark Mode Is a Semantic Problem
Dark mode done wrong inverts the palette. Dark mode done right redesigns the semantic layer. The colors in dark mode aren't simply flipped light-mode colors — the perceptual relationships, contrast ratios, and saturation behave differently on dark backgrounds.
Primary text: full opacity warm white
Secondary text: 60% opacity. Softer, not gray.
Primary text: near-black, not pure black
Secondary text: 55% opacity. Different ratio than dark.
Notice the opacity values differ between modes. Dark mode uses 60% for secondary text; light mode uses 55%. These were tuned independently to achieve equivalent perceived contrast — they weren't derived from a single formula.
Accent Color: One, Used Surgically
The accent color is your system's single point of chromatic intensity. It exists to draw attention to one thing at a time — an active state, a CTA, a key label. When everything is accented, nothing is.
The discipline: audit your UI and count the accent instances. If there are more than 2–3 per screen, some are structural (borders, backgrounds) masquerading as emphasis. Move those to a neutral scale. Reserve the accent for true points of action or attention.
The Neutral Scale Is the Real Work
Brands obsess over their accent color. The neutral scale — the 8–12 steps of gray that make up 90% of the UI — receives almost no attention and causes almost all the inconsistency.
A well-designed neutral scale is perceptually uniform: the visual difference between step 1 and step 2 feels the same as between step 7 and step 8. This doesn't happen automatically with linear value steps — it requires HSL or LCH tuning, or a tool like Radix UI's color scale methodology.
With a consistent neutral scale, the typography hierarchy and spacing system finally click into place. The UI looks considered rather than assembled.