How Many Steps Should a Design System Palette Have?
The industry answer is somewhere between 10 and 18. IBM Carbon uses 12. Adobe Spectrum uses 18. Both score above 88 in the benchmark — the two highest-scoring systems in the analysis.
So is 12 or 18 better? And why not 20?
Start With Even
Before counting steps, parity matters. Even step counts score higher than odd consistently across all 11 benchmarked systems. The reason is arithmetic: WCAG 4.5:1 maps to a minimum contrast span K = ⌈0.501 × (N−1)⌉. For even N, K lands exactly at N/2 — every shade has an accessible text partner. For odd N, the ceiling pushes K one step higher, wasting density.
Pick even: 12, 14, 16, or 18.
What the Benchmark Shows
From the 11-system benchmark:
| System | Steps | Score |
|---|---|---|
| Adobe Spectrum | 18 | 88.59 |
| IBM Carbon | 12 | 88.46 |
| U.S. Web Design System | 12 | 87.67 |
| Salesforce Lightning | 14 | 86.31 |
| GitHub Primer | 12 | 85.45 |
The top five all use even steps. Three use 12. One uses 18. One uses 14.
12 and 18 both achieve K = N/2 — full contrast coverage. The difference is granularity. 18 gives more shades between any two contrast anchors, which matters when a design system needs to handle many UI states (hover, active, selected, disabled, focused) in a narrow lightness range.
The Spacing Argument for 18
Spacing uniformity measures how consistent the perceptual distance (ΔE₂₀₀₀) is between adjacent steps. A 12-step palette has 11 gaps to distribute across the lightness range. A 18-step palette has 17 — finer, and easier to keep consistent.
At 12 steps, each gap carries approximately ΔE ≈ 8–9. One poorly placed shade creates a jump that's proportionally large relative to the total range. At 18 steps, each gap is approximately ΔE ≈ 5–6 — the same absolute error in placement has less proportional impact on uniformity.
The benchmark confirms this: Adobe Spectrum (18 steps, U=0.772) and IBM Carbon (12 steps, U=0.792) have similar uniformity scores — both engineered carefully. For a palette built with less manual attention, 18 steps is more forgiving.
Why 20 Doesn't Win
More steps means smaller average ΔE between adjacent shades. At N=20, ΔE_avg ≈ 5.26 — lower than 18's ΔE_avg ≈ 5.88. Smoother on paper.
But lightness linearity reveals the problem. The lightness range in OKLCH is not perceptually uniform. The Helmholtz–Kohlrausch effect means chromatic colors appear lighter than their measured L* value — correction requires Equivalent Achromatic Lightness (EAL). Near-white and near-black zones are perceptually compressed: a fixed L* step in those zones is perceived as a smaller visual change than the same step in the midrange.
At N=20, the two extra steps compared to N=18 tend to land in these compressed extreme zones. The raw ΔE between them is small, but the perceptual return is smaller still — those steps are spending ΔE budget in regions where the eye barely notices the difference. The coefficient of variation (CV = σ/μ of step ΔE values) does not drop enough to justify the cost.
Result: N=20 has a lower average ΔE but worse effective uniformity at the extremes. N=18 uses its 17 gaps more evenly across the perceptually active range.
The Answer
18 for production design systems.
- Even: K=9 = N/2, full contrast coverage, no wasted shades
- Granular: 17 gaps at ΔE ≈ 5–6, forgiving for multi-state UI
- Efficient: no steps wasted in perceptually compressed extreme zones
12 is a valid choice when palette size is a constraint and the palette is carefully engineered. 14 and 16 are reasonable middle grounds.
Avoid 20 and above: the extra steps fall in compressed perceptual zones, the token count grows, and the structural efficiency doesn't improve over 18.
→ Why Even Steps Score Higher → Spacing Uniformity — When Adjacent Shades Feel Too Close or Too Far → Lightness Linearity — Why Equal Steps Look Unequal → Which Design System Has the Best Palette?