Design systems are for the tenth screen, not the first
Building a design system before you have a product is expensive theatre. Building one at the right moment is the cheapest thing you will ever do.
There is a stage in every product where someone proposes building a design system, and the answer depends entirely on where you are.
At screen one, a design system is a guess about what you will need. At screen ten, it is a description of what you already have. The second one is cheap and correct; the first is expensive fiction.
The signal to watch for
Start the system when you notice the third variant of something. Not the second — two variants are often genuinely different. The third is the signal that you are making the same decision repeatedly and inconsistently.
On Harbour, that moment arrived in week four. By then we knew what a data cell needed to do because we had built twenty of them.
Tokens before components
Colour, spacing, type scale and radii first. These are the decisions that create visual coherence, and they are also the ones a developer can adopt in an afternoon without changing any markup.
Components come after. A component library built on undecided tokens gets rebuilt.
Design in the browser sooner than feels comfortable
Figma is excellent for exploring and terrible for truth. Real text lengths, real data, real focus states and real loading behaviour only exist in a browser.
We move to code as soon as the direction is settled, usually within two weeks. Everything after that is designed with an inspector open.
Accessibility is a constraint, not a phase
Contrast ratios, focus order, target sizes and semantics are design decisions. Handing an inaccessible design to engineering and calling accessibility a later phase means it does not happen.
WCAG AA is a floor, and it is achievable on a normal timeline if it is a constraint from day one. It is enormously expensive as a retrofit.