The copy-paste tax

Every design token system eventually grows a second copy of itself.

A designer sets a colour in Figma. An engineer copies the hex value into a stylesheet. Three weeks later the designer changes the colour. The stylesheet still holds the old value, and the only symptom is a pixel that no longer matches the design.

The copy is the bug. Not the Figma file, not the CSS, and not anyone's diligence.

This post shows one way to remove it. Figma variables become a committed JSON file. That file generates CSS custom properties and a TypeScript type. Product code asks for tokens by name through a typed API, so a token that does not exist is a compile error instead of a blank box.

The example is a real pnpm and Nx workspace. Every command printed below was run against it, with three exceptions. The scaffold commands were not re-run here, though the generators they name are the ones that built the workspace and each one exists.…