Color Systems That Survive a Year of Feature Creep

The most common failure mode for design systems I have audited is the same one: a color palette that looks rigorous on Friday and falls apart by Wednesday. Three months later, the team is using fifteen shades of grey because they could not find the one they wanted.

The fix is structural, not aesthetic. You need three layers, and you need to discipline yourself to use only the middle one in components.

Layer 1 — Primitives

Raw color stops. Neutral 0 through 950. A single accent ramp. Semantic ramps for like, success, warning, danger. Never used in components directly.

Layer 2 — Semantic Tokens

What components reference. --bg-primary, --text-secondary, --accent. These are the contract. They map to primitives, and the mapping changes when you switch themes.

Layer 3 — Component Tokens

For the rare case where a component needs a value the semantic layer cannot give you. Use these sparingly; the more of them you have, the less of a system you have.

The discipline is in the second layer. If a designer asks for a new background color, the answer is not "add it to the primitives." The answer is "which existing semantic token does that overlap?" Constraints are the system.