When I took over my role at MakeMusic, our design system wasn’t yet what it needed to be. Developers were maintaining components across two frameworks, Ember and React, which meant the same UI patterns existed twice, 28 duplicate components in total. That kind of technical debt doesn’t disappear overnight. We knew it would take time before we could migrate the entire web app into a single framework.

This context brought up our biggest pains to the surface:

• Low governance design data wasn’t managed or delivered into code in a reliable way. Basically, without a token infrastructure any improvement or change couldn’t get done without a ton of manual work.

• Time consuming usage checks designers and developers were often guessing, constantly re-checking specs and accessibility, which slowed down production.

• Scattered design data the set of colors, type, spacing and other basics were inconsistent, decentralized outdated and inaccessible, encouraging redundant work across the design team.

We tackled this by setting up design foundations as tokens: color, typography, spacing, shapes, that would meet at least AA contrast compliance.

The token system relied on two types of variables primitives and semantic.

Primitives captured raw values like colors or spacing, while semantic tokens defined intent by referencing primitives.

An automated pipeline delivered tokens directly into code, removing manual overhead while keeping contributions aligned with the classic workflow: propose, review, and merge. To setup this pipeline we relied on figma, supernova and github. All variables were recorded in a central library file linked to Supernova. Improvements or changes within this library were picked up by a configured hook in Supernova, which triggered a pull request in Git.

This level of control provided visibility and granularity to estimate impact. Orchestrating changes became a matter of simply planning improvements.

By establishing a token infrastructure with a semantic naming, design libraries and the code reflected the same logic, which immediately reduced drift and confusion between designers and devs. Collaboration would change completely, what used to be a painful back-and-forth of checking specs and fixing inconsistencies turned into a shared language. Designers could focus on intent, developers could trust the values.

This is what we achieved

96%

Time cut for token contributions through automatic synchronisation.

80%

Drop in production design for designers.

40%

Drop in delivering interfaces for developers.

Changes flowing through the system without friction unblocked feature teams in the delivery phase, and the grounds of our system was ready to support the next stage.