The tenth screen should cost less than the first

Here is a test you can run on any website project. Ask what it would cost to add a new page in the same style as an existing one. If the answer involves a designer, a developer and a week, the site is a collection of pages. If the answer is an afternoon, it is a system.

The difference is not talent or budget. It is a decision made in the first fortnight about whether to build the screens or build the vocabulary the screens are assembled from - and the first option is almost always faster for about six weeks.

Why the first option wins the argument

Building pages directly produces something to look at immediately. Building a system produces tokens, components and states, none of which photograph well in a status meeting. Three weeks in, the page-first project has four screens and the system-first project has a button, a grid and an argument about spacing.

Six weeks in, they are level. Six months in, the page-first project has eleven templates that have quietly diverged, and changing the button means checking all of them.

What the vocabulary actually is

• Tokens: the values nothing is allowed to invent - colour, type scale, spacing ramp, motion durations.
• Components: the parts, with their states defined including the unglamorous ones - empty, loading, error, too long.
• Rules: written down, because a system held in one person's head is that person, not a system.

A design system is not a component library. It is the set of decisions nobody has to make twice.

The part people skip

Almost everyone builds the components. Far fewer write down the rules, and that is where systems decay. Without a written rule, the third developer to need a slightly different card makes one, reasonably, and now there are two cards. After a year there are nine, and the system is a folder.

The fix is unglamorous: a short document that says what each component is for, what it must not be used for, and what to do when neither applies. It takes an afternoon and it is the difference between a system and a first draft of one.