Every growing product hits the colour wall: fourteen greys, three near-identical blues, and a red that means "error" on one screen and "brand" on another. The fix isn't fewer colours — it's a system where every colour has a job title.
Separate palettes from roles
Keep two layers. The palette holds raw values (blue-500, sand-200). Tokens assign roles: surface, border, text-primary, action, danger. When marketing rebrands, you remap tokens — not hunt hex codes across 300 screens.
Build ramps, not swatches
Each hue needs a predictable ramp from whisper-light to near-black so hover, pressed, disabled and dark-mode states derive themselves. If your ramp can't produce an accessible text-on-fill pair, the hue isn't finished.
"Name colours by role, not appearance — 'desert-sand' survives a rebrand, 'light-orange' doesn't."
Test with real eyes
Check every text pairing for WCAG contrast, then simulate colour-vision deficiency on your error and success states. Colour should never be the only signal — pair it with icons and copy.