The questions start the moment you hand the design over. “How do these cards sit when there are three?” “What if the title wraps to two lines?” “What shows when the list is empty?” You handed over twenty screens, and the twenty-first still is not drawn.
Trying to solve that by drawing more screens never ends. The number of possible layouts grows with the content, and the day a designer has drawn them all does not arrive. The goal of a handoff is not to draw every screen; it is to make sure the developer can build the screens you never drew.
A screen is a result; a rule is what produced it
Every composition contains dozens of decisions: why this gap is 24, why this text is 18, why this grey differs from that one. Hand over only the file and those decisions become values that have to be measured back out. The developer reads 24 here, reads 26 on the next screen, cannot tell which one was intended, and comes back to ask.
Send one line alongside it — “spacing is chosen from a four-based scale” — and the same developer decides for themselves which of 24 and 26 is the slip. Rules do not replace compositions; they answer the questions a composition cannot.
The handoff bundle — four parts
What actually travels is four things, listed in order of importance.
The token scales are the complete list of values this site is allowed to use: ten colours, twelve spacing steps, eight type sizes — with the promise that nothing outside the list gets used. Given a list, nobody has to invent a value when a new screen appears.
The component list is a set of name tags for the repeating pieces — card, badge, notice, button — and the developer uses the same names. The next part is about nothing but getting those names to match.
States and edge cases are the most frequently omitted and the most expensive to omit. Ship only the happy path and the empty state and the error state get imagined during implementation, and that imagination rarely matches what you had in mind.
What goes wrong when a part is missing
The short version: a composition is the artefact that is easiest to see and carries the least information. Without the decisions behind it, those decisions get made again during implementation, and this time the designer is not the one making them.
WordPress is a good container for these rules. Put the tokens into the theme’s style layer and every later screen is built from that list, so editors can write freely without the design drifting. Related articles live in the development workflow archive, and the order the work actually runs in is published on our process page.
Next part
We start with the second item in the bundle: matching component names. When design and code use different words for the same thing, every conversation carries a permanent translation step.