Every design system starts in agreement. There is a kit, there is a library, the names line up, and for a while a handoff is a link rather than a conversation. The interesting question is never how a system begins. It is what happens eighteen months in, when the kit has grown a spacing value no token holds, the library has grown a prop the kit never heard about, and both teams have quietly started measuring from screenshots again because neither artifact is trusted enough to build from.

Drift starts with a deadline, not a disagreement

Nobody decides to break parity. A launch is three days out and a card needs a slightly tighter border radius, so it gets one, locally, with a note to fold it back into the system later. The note is real and the intention is genuine, and the change ships without ever reaching the other side. Repeat that a dozen times across two teams and the two representations of the same system no longer describe the same product.

The cost compounds in a way that is easy to miss because it never appears as a bug. It appears as meetings. Every handoff becomes a negotiation about which of two sources is current, every estimate carries a margin for that negotiation, and eventually somebody rebuilds a component from a screenshot because that felt faster than establishing what the component was supposed to be.

Parity is a promise about names

The unit of agreement is not the pixel, it is the name. If a variant in the kit is called subtle and the same variant in code is called ghost, both are defensible in isolation and useless together, because no conversation and no tool can move between them without a translation step that somebody has to maintain in their head. Matching names are not a cosmetic preference. They are the interface between the two halves of the system.

That is also what makes the system legible to anything automated. A schema, a linter or an assistant can map a design decision onto a component only when the vocabulary is shared, and the same shared vocabulary is what lets a designer and an engineer disagree productively, because they are at least disagreeing about the same thing.

Mirror the variant matrix, not the screenshot

A component is not a picture, it is a matrix: size by tone by state by density, multiplied again by whatever it contains. A kit that draws the three combinations that appeared in the last marketing page leaves every other cell of that matrix to interpretation, and interpretation is where drift lives. Orvain mirrors more than eight thousand Figma variants one to one with the code, nested instances included, and the point of that number is not the number. It is that the combination somebody reaches for on a Tuesday afternoon already exists on both sides.

Nested instances matter for the same reason. Real screens are compositions, so a kit that only mirrors leaf components still leaves the interesting decisions: what a table row does when it holds an input, what a card does when it holds a chart: undocumented in the place people actually design.

What each side owes the other

Design owes the code no new values. A colour that is not a token, a radius that is not on the scale and a gap that is not a step are all requests to break the system, and they should be proposed as changes to the system rather than shipped as exceptions. Engineering owes the kit no quiet divergence: a renamed prop, a dropped variant or a changed default is a change to a shared contract, and it belongs in the same conversation as a changed design.

In practice this works when there is one moment where both sides look at a change together, before it lands on either side. It does not need to be heavy. It needs to exist, and it needs to be the only door.

Parity is maintained, not declared

No system stays in sync because someone wrote down that it is in sync. It stays in sync because the tokens have a single source that both sides read, because releases say what changed in language both sides use, and because the gap between the two representations is something a person is accountable for closing rather than a thing everyone notices and nobody owns.

What a team gets back for that discipline is the thing the system was supposed to provide in the first place. Handoff stops being a translation exercise, review moves off whether this matches the design and onto whether the design was right, and the component that gets built is the component both sides already agreed on.

The Orvain UI team

Writing about design systems and the tools that ship them.

All articles