Design tokens explained to a project manager in five minutes

Minute one: design is where decisions are made

Before anyone writes a line of code, someone decides what a button looks like, how a table behaves and what happens when there is no data. Design is the phase in which those decisions are made deliberately, rather than a hundred times by accident later on.

Minute two: a token is a decision with a name

Instead of instructing developers to use a particular shade of orange, I give that decision a name, such as “primary”. Every button, link and highlight then requests “primary” rather than the shade itself. The same applies to spacing, corners, shadows and type sizes. Those names are tokens.

Minute three: components are built from tokens

A button, a card or a form field is assembled from tokens, and pages are assembled from those components. It resembles a building made from a modest set of standard parts: once the parts are right, every room you add is quicker and more reliable.

Minute four: why this saves time and money

When the client changes their brand colour, I alter one token rather than four hundred screens. When a new page is required, the team composes it from parts that already work. Estimates become more dependable, because most of the work is no longer novel.

Minute five: why the design phase matters

A decision made in design costs a conversation. The same decision made during development costs a sprint, and after launch it costs a project. That is why I invest real time in the system early on. It isn’t decoration before the real work; it is the part that decides how expensive the real work will be.

If I cannot explain a decision in five minutes, it usually means I have not genuinely made it yet.