A design system delivered with its own quality gate

The client was rebuilding its platform with neither a settled visual language nor a library. The brief was for screens; the design system became unavoidable within the first few of them, because redrawing every button by hand on a product this size is paid for later — the moment the developer asks “and in this case, what does it look like?”.

Raw values — colours, spacing, radii — live in a primitives collection. A second, semantic collection names intentions: surface, border, text, state. Components only ever read that second layer. That is what makes it possible to change a brand colour without opening a single component, and to discuss decisions with the client in terms of roles rather than hex codes.

• a Figma kit — tokens as variables, components and patterns published as an asset library;
• guidelines as a PDF — anatomy, states, usage rules, accessibility constraints;
• a Claude review skill — it reads the interfaces as built and flags deviations from the guidelines.

A design system degrades the moment it leaves Figma: the developer interprets, undocumented cases get invented, and six months later the product no longer resembles the library. The third deliverable answers that. The skill reads the interfaces produced, checks them against the guidelines and returns the gaps — the check becomes a step in development instead of a design review that keeps getting postponed.

WCAG constraints are carried by the semantic tokens: a text/surface pair is validated once, at system level, and every component using it inherits the contrast. Checking a screen then comes down to checking that it did not bypass the system.