Palettes fail at the edges, not the center

A color system rarely breaks on the homepage hero, where every pixel has been considered. It breaks on the error state nobody designed, the third-party embed with its own background, the dark-mode toggle someone flips at 2am. If your palette can’t gracefully handle those edges, it isn’t finished — it’s just untested.

Our fix was to stop designing colors in isolation and start designing them in pairs: every foreground color got tested against every background it could plausibly sit on, including states nobody asks about — disabled buttons, hover on hover, focus rings on top of focus rings. It’s unglamorous work, but it’s the difference between a system that holds and one that quietly degrades over eighteen months of feature additions.

Tokens over hex codes

The single highest-leverage change was naming colors by role — surface, border, accent — instead of by appearance. Roles survive redesigns. Hex codes don’t. When the brand shifted its accent hue last quarter, the change touched one token definition instead of four hundred scattered references.