Design-system automation

A bridge between design tokens and code: a single source that flows down to the components without manual copying.

Role: Design & build, end to end
Stack: TypeScript · Tailwind CSS · Style Dictionary

02

The problem: On a product that grows, the design system drifts. A color changes in the design tool but not in the code, a spacing value exists in two versions, and every screen replays the same decisions by hand. Consistency becomes a proofreading task instead of a property of the system.
The craft: The principle is to hold a single source of truth for the tokens — color, type, spacing, radius — and let it flow down by generation rather than by copy. Tokens become theme variables, the variables feed the primitives, and the primitives are the only place a visual decision is ever written. The work is as much about the generation pipeline as about the discipline it enforces: you can no longer hard-code a value — the system refuses the deviation by construction.

03

On its real screens

04

In detail

The intent

Design plumbing rather than a screen. The question: how do you stop a design system from drifting as the product grows and more than one hand touches it.

A single source

The tokens — color, type, spacing, radius — live in one place. Everything else flows down from it: theme variables, then primitives. The rule is simple and hard: a visual value is written only at the top, never case by case inside a component.

Generation as a guardrail

Rather than copying values from a design tool into code, you generate them. The benefit isn’t the time saved but the impossibility of drift: if the value isn’t in the source, it doesn’t exist in the interface.

The constraint is the product

The value of the exercise is in what it forbids. No hard-coded color, no arbitrary spacing, no second version of the same token. Consistency stops being a proofreading pass and becomes a property of the system.

Scope

In development. A ground to hold rigour over time.

Start a similar project All work