A design system in code, built from the tokens up
Airtm's visual language lived in Figma. I built the system in code from zero: tokens first, then 35 React components, a Storybook and a docs site, and six checks that compare Figma, the code and what the app ships. Then I prototyped with it.
Airtm · 2026 · In use, May–Sep 2026
Project sheet
- Led it
- Design team, 1 PM, engineers
- 1 month to first release
It was a design team initiative, and I drove it: getting the system from Figma into code, running Storybook, and auditing what matched Figma and what didn't. I built it with AI tools and reviewed every decision it records.
- Problem
- Airtm's design lived in three places that disagreed: several Figma libraries, the production component library, and each designer's memory of both.
- Decision
- Make the code the working reference, and let scripts, not opinions, say where Figma and production drift from it.
- Result
- 35 components plus 6 prototype-kit modules, with Storybook and a docs site, six automated checks, and 52 of 56 colour primitives matching production on the first run.
Try it
The Button from the library, transcribed for this page. Change the intent, emphasis, size, state and theme; the panel follows each colour to its token and measures the contrast. The default already shows a finding: white on the brand blue is 4.49:1, just under AA. It is one of the 30 pairs the check found.
Intent
Emphasis
Size
State
Theme
<Button intent="primary" emphasis="solid" size="md">Where the colours come from
Contrast
4.49:1
The Button from the Airtm library, transcribed. Every colour is a token; the contrast is measured the way the library's check measures it.
Nothing could stop
Figma stayed the designers' tool, production kept shipping its own library, and nobody had time for a rewrite. Whatever I built had to sit next to both, and be useful from the first week.
Why it had to be code
Two reasons. The team needed to see the system run: Storybook, every state, and an honest audit of what matched Figma. And I wanted to prototype faster, with components 100% faithful to the Figma designs. Prototypes built from real components get to value sooner, are easier to share with stakeholders, and make user tests better, because people react to the product and not to a drawing of it.
How it's built
Three layers. Primitives are the raw values from the Figma foundations. Semantic tokens say what a colour is for, a background or a status, and components use only those, never a hex. Each component exposes the choices a designer actually makes: the Button has three intents, three emphases and three sizes, plus loading and disabled, with the paddings from the Figma auto layout. That structure is what lets a check follow any colour back to its source.
The code as the reference
I rebuilt the system in React, tokens first and then each component with its states. Prototypes import these same components, so a prototype and the system can't quietly drift apart.
Checks settle it
Six scripts run together. They compare the tokens to Figma, the tokens to production, the components to their Figma sources, the navigation to its taxonomy, and every text and background pair to WCAG contrast in both themes. A disagreement becomes a line in a report that anyone can check.
Production as the third source
When the production library arrived, I added it as a snapshot and checked against it. 52 of 56 colour primitives matched on the first run. The four that didn't were real findings, including a grey that had been wrong in the printed foundations for months.
Findings go to people
The checks don't fix anything on their own. When the code and production disagree, it's a decision for the design team. The checks queued 14 of them, and each one got a record.
How I used AI
I built it with AI coding tools. I set the structure and what each check had to prove, and reviewed every decision the system records. That's how the first release came out in a month. What the system should be stayed a decision for me and the design team.
One source of truth
There are still three sources of truth: Figma for design, the code for intent, production for what users see. I stopped trying to merge them and made the differences visible instead. The cost is maintenance: someone has to keep the snapshots fresh.
What it built, and what it found
- Built
- 35 components and 6 prototype-kit modules, Storybook, a docs site, and an inventory of all 156 modules in the production library, on one page.
- Found
- 30 colour pairs under WCAG AA, the two whites behind a long-running inconsistency, and component names published twice in Figma.
- Used
- My prototypes and handoffs at Airtm were built from it, from May to September 2026. Production kept its own library; the checks measure the distance.
Next: the checks in CI
Run the checks in CI on every design system change, and take the 30 contrast pairs through triage with the team. That list is the most direct accessibility work the system has left.