The brief

A growth-stage company with 200 employees and three product surfaces — web app, mobile app, marketing site — had three separate design systems, three separate component libraries, and roughly nine months of accumulated drift between them. New product work was getting blocked on "which button do we use" debates. The design leadership wanted one system, accepted across all surfaces, that could survive future organisational changes.

The strategy

The technical work was straightforward; the political work was not. The system would only work if every team agreed to use it. So we ran the project as a six-month engagement structured around three principles:

  • Tokens first, components second. We started by getting agreement on the token layer (colours, spacing, type, motion) before designing a single component. Once teams agreed on tokens, components followed naturally.
  • Migrate the highest-traffic surfaces first. Login, dashboard, and the marketing homepage went first. Visible wins built trust.
  • Make adoption easier than non-adoption. Every new component shipped with codemods, Storybook examples, and migration guides.

What we built

  • A token source file that compiled to CSS custom properties, Figma variables, Swift constants, and Kotlin constants.
  • A 60-component React library, with React Native equivalents for the mobile app.
  • A Figma library matching the code library 1:1 — same component names, same prop names.
  • Documentation auto-generated from the codebase, deployed on every merge.
  • A dedicated Slack channel and weekly office hours run by the system's two-person team.

The hard part

The migration was where projects like this usually die. We avoided that by deliberately phasing it. The marketing site was first because it was the smallest and most visible — success there built credibility. The product app followed over four months. The mobile app last, with React Native components built as the web components stabilised.

Throughout, we measured adoption as a percentage of components and pages migrated, and reported it weekly to leadership. Visibility kept the project alive across organisational changes.

The outcome

  • By the end of the engagement, 92% of production pages used design system components exclusively.
  • The two product rebrands that happened in the following 18 months were executed as token changes — both completed in under two weeks.
  • Product team velocity (story points / sprint) increased 30% in the quarter after full adoption.
  • The system survived a major reorganisation, which is the real test.

Three years later, the system is still in use. The two-person team that owned it has changed personnel, but the system's role has stayed consistent. That's the goal — a system that outlasts its creators.