Four teams, four button components, four opinions about spacing. A shared system nobody had to be forced into.
Design systems
Frontend engineering
Four component libraries consolidated into one
Net removal of 14,000 lines of CSS
New surfaces built in days rather than sprints
The problem
Harbor's four product teams had each built their own component layer. The
libraries agreed on nothing, and every cross-team feature paid a translation
tax. Two previous attempts at a shared system had been announced, adopted by
one team, and abandoned.
What we did
We started from what the teams already had rather than from a blank file.
Every component in the new system began as the most-used variant of the four
existing ones, so adoption meant deleting code rather than rewriting it.The token layer landed first and independently: teams could adopt colour and
spacing without touching a single component. By the time we shipped
components, three of the four teams were already on the tokens.
What made it stick
Nobody was told to migrate. The system was faster to use than the thing it
replaced, and the teams that adopted it early were visibly shipping faster.
The fourth team migrated on its own six weeks later.