AI-Ready Design System

The same action looked and behaved differently depending on which screen you were on, so users were relearning tasks as they moved through the platform. It surfaced as bug reports and support tickets themed around visual mismatch and technical misalignment. Underneath was years of incremental development with no shared foundation between design and engineering.

I catalogued every duplicated pattern across the platform: colour values, spacing units, component variants. Alongside that I ran working sessions with the front-end engineers and Product on which components they avoided, where they had built workarounds instead of raising a ticket, and which areas felt fragile to touch. That is what shaped prioritisation.

A full rebuild would not fit the six-month runway, and the PM pushed back on a system-wide clean-up competing with roadmap delivery. I proposed a middle path: upgrade the highest-traffic screens inside the deadline, defer the complex workflows to a dated follow-up so they could not drift indefinitely, and codify the standard as we went.

Building tokens on top of 22 divergent button variants would have frozen the inconsistency into the system, so consolidation came first. Five variants, primary through anchor, covered every state the product actually needed. Each retired variant was mapped to its replacement before anything was swapped, so engineering changed values rather than rewrote behaviour.

Primitives hold raw values, semantics hold decisions. Background/Primary points at Color/Neutrals/0, so a rebrand changes one primitive and every surface follows. Engineering co-defined the naming convention and the governance model rather than receiving them, with Figma Variables as the design source and Storybook as the implementation spec.

Density is the real constraint in this product, so the visual system has to do the work that decoration cannot. One type scale carries all hierarchy. Eight neutral steps build structure and three brand steps are reserved for action, which is what keeps a dense screen readable. Space, radius, stroke and control tokens set a repeating rhythm across every layout.

The library was published with variant controls, so the fastest route to a new pattern was always an existing component. Anything genuinely new needed a full state set, documentation and a named owner before publishing. Contrast was encoded in the semantic pairs, and focus states and target sizes were defined in the components themselves.

I ran training sessions for Product and Engineering on the new standards. Documentation and working examples meant the team could self-produce on-pattern concepts, and Figma Make prompt templates linked directly to the component library kept that output on-system. I presented the system to leadership so adoption was a decision rather than a request.

The token set and component library above are the mechanism. Here's what they produce in a live product screen — Project Wizard's summary view, built entirely from published components with zero one-off styling.

The system stopped being a source of inconsistency and became something Product and Engineering could work from without designer guidance. Token-based handoff replaced annotation-heavy specs, new features no longer needed debt remediation before shipping, and the refreshed priority modules landed on time.