A design system AI can build with

1. Foundations

   Colour, type, space, radius and motion as tokens named for their job, so an agent picks the right one, not the nearest number. Contrast checked on every pair.

   • Tokens named for their jobPage background, body text, muted text, the rule between sections. Pages use the role, never the raw value, and a check fails any hard-coded colour.

   • Scales, not free valuesType sizes, spacing, radii and elevations each come as a short, fixed set. A value between two steps is a finding for the owner.

   • Contrast, measured renderedText is measured against the ground it actually sits on, on the rendered page, and fails below AA.

   • One sourceThe token files in the repo are the source. The design tool is updated from them, never the other way round.

2. Components and templates

   The parts your product uses, in code, with states, limits and usage rules. Templates for repeating screens, so AI starts from what exists.

   • Reuse before drawingAn agent looks for an existing component first, and changes it only through its props, never by copying its markup.

   • One structure per jobA problem, a step, a decision and a result each have one component, so the same kind of content looks the same on every page.

   • Limits written as rulesOne filled button per view, two card widths, big numbers only for results. Each rule has an ID and one line you can pass or fail.

   • Templates with a fixed orderRepeating screens start from a template whose sections come in a set order, so a new page starts complete.

3. Drift review

   What AI invents is tagged and reviewed: it becomes a component with rules, or is replaced by one that exists. Drift is caught in the pull request, not in a redesign a year later.

   • Proposals, markedWhen nothing fits, the agent draws the part and marks it as a proposal: what it does, the components it considered, and why each was wrong.

   • Four verdictsThe owner rules on each proposal: promote it to the system, fold it into the component that already does the job, keep it on its page, or retire it.

   • Exact swaps, automaticA hard-coded value that equals a token is swapped without asking. One a few steps off goes to the owner, with the nearest token and a recommendation.

   • Checks on every changeThe source rules run first, then every page is rendered at desktop and phone width. A change is done when both pass.

4. Docs an agent can read

   A docs site your team browses and a coding agent parses: every part, its contract, and what to use instead.

   • One rules fileEvery rule has an ID, one line and the check that holds it, so a person and an agent read the same thing.

   • A table from job to tokenAn agent looks up the job (page background, muted text) and gets the token, instead of matching a colour by eye.

   • A decisions logEvery verdict is written down the same day, with what it rules out, so a rejected idea does not come back.

   • A progress fileWhat is done, what waits on the owner and what comes next, so the next session starts where the last one stopped.

How the system is refined

1. 01The owner rules on something that was built, and the verdict is written down the same day.
2. 02If a machine can check it, the verdict becomes a rule with an ID and one line you can pass or fail.
3. 03The rule gets a check. Checks run on every change: the source first, then the rendered pages at desktop and phone width.
4. 04What AI invents stays a proposal until the owner rules on it, and that verdict starts the loop again.

Either way, work lands in your repo as it goes: one standing review, the rest asynchronous, docs written along the way.