Behind the interface
Making Exact’s design tokens visible and usable across design and development.
Situation
Exact’s product suite ran on hardcoded values and per-component props. Light and dark were bolted onto each component, spacing and colour were repeated by hand, and the underlying decisions had no single home. It worked, but it could not scale. The tokens that did exist were buried in code, where only developers saw them: the people making design decisions could not see the system they were deciding on.
Approach
We treated each token as a decision rather than a value. Colour, typography, spacing and breakpoints were named into one hierarchy, with light and dark turned from per-component props into modes the whole suite shares. A two-way sync carried the same tokens to the repository and to Figma variables, and the first components moved onto them. Then the step most token work skips: a live site where the whole team can browse every token, mode and theme.
Result
The engagement delivered what the plan set out: a token architecture synced both ways to Figma and the repository, the first components moved onto it and a deployed token site. Exact’s suite now has its decisions in one place instead of values repeated across components. The site turns a token file into a token system: tokens stopped being something only developers encountered and became something the whole team reaches for.