Multi-brand Design System

The component library is the visible surface. The contract underneath does the work: what a token means, who is allowed to change it, what breaks if they do, and how the system surfaces those breakages loudly rather than silently.

Across multiple insurance brands with different visual identities but a single product platform, the contract had to hold three things at once: brand identity, cross-product consistency, and regulated-industry compliance. None of them could be relaxed without breaking the others.

Built in cross-functional collaboration with FE engineers, the design team, product managers, and the VP of AI Infrastructure. The AI-orchestration layer (Kiro pipeline, SkillsForge skills) was scoped with the VP directly so the design system would interoperate with the broader enterprise AI stack rather than live in its own silo.

v1 of the design system (Onyx, Delaware Life) was the pre-AI foundation. By the time it was in production across two brands, five failure modes had stacked up that no amount of more designers could fix:

• no source of truth · no Code Connect between Figma and production code. Drift kept happening because nothing authoritatively said what a component was.
• no production documentation · how components actually interacted in production was tribal knowledge. Every new feature required re-deriving it.
• two-brand scale · maintaining the system across two brands took too long. Each new component feature was hard to track and easy to lose.
• figma make prototypes · designers were prototyping in Figma Make and getting sign-off on designs the production stack couldn't actually render. Stakeholders approved things that would never ship as designed. Hosted prototype URLs had nowhere to live and kept getting lost.
• generative-AI drift · once designers started using generative AI to design, drift accelerated. The system had no mechanism for keeping AI-generated work inside the contract.

v2 had to address all five at once. The brief: one underlying system, multiple brand-themed surfaces, zero drift on the shared structural layer, and a pipeline that makes “signed off” mean the same thing in Figma as it does in the front-end repo.

Three layers, explicitly:

• tier 1 · primitive tokens · raw values per brand (the brand difference lives here)
• tier 2 · semantic tokens · purpose-named references that compose primitives (the structural sameness lives here)
• tier 3 · components · composed from semantic tokens only; never from primitives

Storybook is the source of truth. Storybook holds the canonical version of every component, and is where designers and FE engineers align on what each component actually is. Figma binds to Storybook through Code Connect, so a Figma component carries the production component's props and states with it. Designers are no longer designing in a parallel universe; they're designing against the same artifact engineers ship.

Governance rules sit on top via Style Dictionary plus a PR-time validator: a component PR that reaches across tier 2 to grab a primitive directly fails the check loudly. Same discipline as the PK/PD engine's composition-functions-over-parameters rule.

The main addition in v2 is a design-to-production pipeline that makes “signed off” into a structural event, not a Slack message. It runs end to end: from the business requirements doc upstream of design, through Kiro-templated specs, into the front-end repo.

• BRD ingestion · the AI ingests the Business Requirements Document upstream of design. Before a designer (or generative AI) drafts anything, the system already knows the functional requirements, edge cases, and constraints. Drafts that miss requirements get flagged at proposal time, not at sign-off.
• design specs use Kiro templates · every approved design produces a Kiro-formatted spec rather than a free-form Figma frame. The template enforces what an engineer needs to ship the design correctly: states, props, data shape, interaction behaviour, accessibility constraints.
• hook into the FE repo · approved specs flow directly into the front-end repository. The repo becomes the canonical home for what “signed off” means. No more hosted prototype URLs getting lost.
• engineers know when sign-off happens · the moment a design is approved, the engineering team is notified with the exact spec attached. No re-deriving, no Figma archaeology, no “wait, is this the latest version?”.
• production-exact specs · the Kiro template constrains design to what the production stack can actually render. No more sign-off on Figma Make prototypes that don't know our stack. What stakeholders approve is what ships.
• easier backend mapping · because the spec declares data shape and state explicitly, engineers map front-end state to the backend database with far less guesswork. The pipeline closes the loop from design intent all the way to persisted data.

The system grew faster than the human review loop could keep up with. Tokens proliferated; semantic-tier proposals stacked up; CLAUDE.md-style memory documents bloated as the project memory tried to hold every prior decision.

SkillsForge: scoped skills instead of a bloating instruction document. Each recurring review task became a named skill with a tight scope: token-tier-violation detector, governance-log auditor, primitive-leak finder, naming-convention validator, Kiro-spec completeness checker. Each one loaded only when triggered, kept its own memory, and stayed under a defensible cognitive budget. The bloat dissolved.

AI-assisted authoring loop. Proposing a new semantic token used to be a multi-day round-trip of design draft, engineering review, compliance check, back. With scoped orchestration, the proposal arrived pre-validated against tier rules, pre-checked for naming collisions, pre-flagged for cross-brand impact. Human review landed on judgment, not mechanics.

Token-cost discipline. AI cost is a real budget line, and the obvious implementations of either of these features would burn through it. Two mitigations kept usage defensible:

• figma map as a markdown file · instead of letting the AI hit the full Figma API on every review, I maintain a markdown file that maps Figma component IDs to their token shape, props, and production binding. The AI reads the map. Full API access only fires when the map is stale. Drops the average review from many API calls to one document read.
• batched skill runs · skills don't fire one-at-a-time on each proposal. Recurring review tasks are batched (e.g., all token-tier-violation checks across a PR run as a single skill invocation rather than one per token). Cuts call volume by an order of magnitude on busy review days.

Keeping generative-AI design inside the contract. Designers using generative AI now feed their drafts through the same Kiro-spec + token-validator pipeline. Drift gets caught at proposal time rather than at production time.

Documentation discipline. Every captured lesson (failure modes, naming traps, primitive-leak incidents, spec-completeness regressions) got typed: feedback, project, reference. Memory files became inspectable, prunable, dateable. Same discipline I now apply to every system I work on: every decision is inspectable as code, not just stated in a doc.

Plugged into the company-wide AI architecture. The design system isn't a standalone AI experiment. It plugs into a larger AI architecture the company is implementing across product, engineering, and operations. The same orchestration primitives (scoped skills, typed memory, spec-gated review) compose into the broader enterprise stack, so the design-system pipeline interoperates with sibling AI workflows upstream and downstream rather than living in its own silo.

Designers work in Figma against the tier-2 semantic library. Theming across brands is a single dropdown swap rather than a re-skin. Generative-AI drafts route through the same spec pipeline as hand-authored work.

Engineers consume Kiro-formatted specs directly in the FE repo. Tokens flow in via Style Dictionary with build-time validation that rejects primitive-leak imports. When a design is signed off they know immediately, with the full spec attached, including data shape for the backend mapping.

Compliance reviewers read the governance log: every token change carries provenance, a tier classification, and an audit trail. Every sign-off carries a Kiro spec ID, traceable from Figma to the FE repo.