Tokens pipeline

One source of truth for colour, type and spacing, from Figma variables to CSS.

Company: Northwind (demo)
Year: 2023
Role: Did it solo
Team: Just me

The same Northwind screen in light and dark, both generated from one set of tokens

manual token edits since launch

Problem

Design tokens were copied by hand between Figma and code, so they drifted within weeks.

My part

I designed and built the pipeline myself in TypeScript, then handed it over to the platform team.

Approach

A small build step reads Figma variables, validates naming, and emits CSS custom properties and a typed TypeScript map. It runs in CI and fails the build on drift.

Outcome

Zero manual token copying since launch. Theme changes now take minutes instead of a sprint.

Figma variables, the generated tokens.json, and the CSS and TypeScript output side by side — Figma variables in, CSS and TypeScript out. Nobody copies a value by hand.

Keel colour documentation listing semantic tokens with light and dark values — Semantic tokens, each with a light and a dark value.

Hand resting on a printed colour swatch book — Checking the palette on paper before it became variables.

Diagram of the token naming pattern: category, role, variant and an optional state — One naming pattern. CI rejects anything that doesn't follow it.

Merged pull request renaming a token, with passing checks and a small diff — A rename is a reviewed pull request, with visual diffs from Storybook.

CI output failing because two token values were edited by hand — When someone edits a value by hand, the build says where to fix it.

Keel documentation for type styles and the spacing scale — Type and spacing come from the same variables as colour.

Skills

Design tokensTypeScriptCI/CDDesign systems