Twelve screens, one system

First week

A starter system is a set of decisions, not a library of everything. I printed all twelve screens, laid them on a table with the team and circled every element that appeared on more than two of them. That list became the scope: sixty-four components and nothing else.

Decisions

Tokens came first: colour, type, spacing and radius, named by use rather than by value. Each component shipped in Figma and in the team's code on the same day with the same name, and the docs page shows one do and one do-not per component.

If a component isn't on a real screen, it isn't in the starter.

We migrated the twelve screens in order of traffic, so the most visible ones improved first and the team saw the gain early.

Two engineers paired with me for the whole six weeks. Every Friday we reviewed what had shipped, removed anything nobody had used yet and agreed the next five components. Keeping the list short every week was the hardest part and the most useful one, because it stopped the system from growing faster than the screens needed.

The docs page lives next to the code, so a change to a component and its notes goes out in the same release.

Launch

The plan said Friday 15 November, two weeks before the big release. We finished on the Wednesday. All twelve core screens use the system, and a new screen takes about three hours to assemble instead of two days. The team added six components of their own in the next quarter, each with the same docs format, which is the best sign a system is working.