The design was great. The build that shipped wasn't.
Almost every team that comes to us with an existing brand and a live site describes the same gap: the design system looked considered — real type scale, real spacing logic, a point of view — and the live product looks like a rough translation of it. Buttons that don't quite match. Spacing that drifts page to page. States nobody designed for — empty, loading, error — improvised by whoever built them under deadline.
The instinct is to blame execution. It's rarely that. It's the handoff itself. A design system delivered as a file — Figma, a PDF, a style guide — is a set of intentions, not a set of instructions a build team can follow without interpretation. Every interpretation loses something. Multiply that by however many components a real product has, and the drift compounds until the live thing barely resembles the file it came from.
The usual fix people reach for is more documentation: annotate every state, spec every spacing token, hand over a design system instead of a mood board. That helps. It doesn't solve the underlying problem, because the interpretation gap exists the moment two different teams — one that designed the system, one that has to build it under its own deadline pressure — sit on either side of a handoff at all.
The actual fix is removing the handoff. When the same team that designed the system is accountable for shipping it, there's no translation step to lose fidelity in — the person writing the component knows exactly what the spacing token means, because they set it. That's the entire argument for treating design and engineering as one operation instead of two vendors who happen to work sequentially. Not a nicer process. A structurally different one, where the gap this article describes has nowhere to open up.
Keep reading
All writing↗