Four brands that read as one family, never as stand-ins for each other. One token structure runs them all.

Overview

Prism runs four fictional brands, Cobalt, Iris, Coral, and Harbour, from one token structure. Each brand owns its color, type, geometry, density, and motion. None of that lives inside the components.

Adding a fifth brand takes 109 tokens and one new mode. No component changes.

My foundation, extended with Claude. I started Prism in May 2026 and built its foundation on my own: the token structure, the brands, and the first components. In August, I brought in Claude, working inside Figma through the Figma MCP. It started with an audit of what I'd built. From there, we improved the system and built what was missing. I set the direction, made every design call, and reviewed every result.

The brands are fictional on purpose. I built them to stress-test one question: can a single system serve brands that must never look interchangeable?

Challenge

Multi-brand systems usually fail in one of two ways. Teams fork components for each brand, and maintenance doubles. Or they reskin one brand with new colors, and the brands start to feel swappable.

I wanted to avoid both, and to measure every decision instead of eyeballing it.

Two questions about AI

Prism was also a test of AI tools. I wanted answers to two questions:

1. Can AI help maintain a multi-brand design system? Keeping four brands in sync is the work that wears teams down. I wanted to see if AI could carry that load.
2. Can AI implement an existing system, or does it quietly reinvent it along the way? An AI agent can produce screens that look right. The real question is whether it uses the system underneath.

The constraint: clearly related, never interchangeable

These products share a portfolio, so a family resemblance is fine. The real risk is that one brand could pass for another. So every brand differs on five axes at once: color, typeface, corners, density, and motion.

Color alone would make them variants. Type, geometry, density, and timing make them brands.

My role

I was the sole designer. I started Prism and owned the token architecture, accessibility, and documentation decisions. Claude came in later, through the Figma MCP. It audited the system first, then helped me improve it and build new variables, components, and docs.

CoralHarbour

751 tokens across four brands and two themes is too much to re-measure by hand every time a value moves. So I split the work clearly.

What Claude did

• Audited the system I'd started, to find gaps and errors
• Built new components and documentation from my direction
• Ran 416 text and 192 non-text contrast pairs across every brand and theme
• Scanned for unbound paints and layer-skipping aliases
• Verified that all 696 brand × theme × token combinations resolved
• Checked chart palettes against colorblind ΔE gates

What stayed mine

• Every hue, ramp anchor, and token structure
• Rejecting a fix that passed one test and failed another
• Deciding which flagged items were defects and which were correct
• Catching that an audit script reported 68 false positives

That last one taught me something. The fix wasn't patching the script. It was confirming that a checker passes known-good cases, not just that it catches bad ones.

Key decisions

Decision 01

Separate identity from meaning

Before this split, one color did two jobs. Blue meant both "Cobalt" and "info." Change one, and you broke the other.

So every token now flows through four layers:

1. Primitives (raw values), e.g. cobalt/primary/500. 436 variables, hidden from the picker.
2. Brand (identity), e.g. brand/primary/500. 158 rows, 4 modes, one per brand.
3. Semantic (meaning), e.g. bg/fill/primary. 100 tokens, 2 modes: light and dark.
4. Components, e.g. Button / Primary. 58 components that bind only to Semantic tokens.

Switching the brand mode swaps the whole palette, and no component gets edited. The mistake isn't just fixed. It's now impossible.

Trade-off: Four layers are more to learn than one flat palette. In return, a brand change can never redefine what a color means.

Decision 02

Measure the hue, don't guess the shade

Cobalt's accent started as a bright yellow, #FFC801. With white text on top, it scored 1.55:1. The minimum is 4.5:1.

I didn't try yellows until one passed. I measured how much saturation each hue keeps once it's dark enough to pass. The answer explained something I'd already noticed: every warm accent looked dull.

So the accent became magenta, #CE1CC7. It passes at 4.55:1.

Trade-off: Cobalt gave up its bright yellow accent. The brand lost a signature color but gained one that passes.

Decision 03

Fix the failure, don't move it

White text on dark-mode buttons sat at 3.1:1. I tested two fixes side by side before shipping either.

Darkening the button fixed the text, but the button dropped to 2.4:1 against the page. The failure moved. It didn't go away.

Keeping the button bright and darkening the label passed both checks. I shipped that one.

Putting it to work

Where a designer still matters

Claude helped build Prism, but not always right on the first try. These are the AI flops I caught:

• Reinventing instead of reusing. Sometimes Claude rebuilt a component from scratch and nested parts of the original inside.
• Hiding instead of instancing. In some cases, Claude took an existing component, hid the parts it didn't need, and wrapped it in a new frame. One "new" card was just a wrapper around an existing card. It reached the right tokens, but it wasn't a real instance.
• False alarms. An early audit script flagged 68 tokens as broken. They were fine.

Each flop looked fine at a glance. That's the real risk: AI mistakes rarely look broken. They look almost right.

Some parts still need a designer's refinement before Prism is production-ready:

• Spacing in some layouts
• Button sizes: Claude didn't always pick the right size for the context
• New components Claude created to fill gaps, like task cards and project lists, still need a design review

The flops are getting rarer. With each round of building, Claude needs fewer corrections.

Outcome

Tokens across 7 collections, zero external bindings

751751

Contrast pairs verified across every brand and theme

608608

The answers so far

Can AI help maintain a multi-brand system? Yes, with a designer checking its work. Claude kept four brands and two themes in sync. It verified 608 contrast pairs and all 696 brand × theme × token combinations, which is far more than I could re-check by hand.

Does it use the system or reinvent it? Mostly, it uses it. Brand and theme switching worked on the first try across the whole dashboard. But Claude sometimes rebuilt components instead of reusing them. A designer still has to catch that.

• 608 contrast pairs verified: 416 text and 192 non-text, across every brand and theme
• 751 tokens across 7 collections, with zero external bindings
• 696 brand × theme × token combinations, with zero unresolved
• 58 components documented, with zero broken instances and zero forked per brand
• 4 brands from one component set
• 109 tokens to add a fifth brand, with nothing downstream changing

What's still unproven

Prism is still a work in progress, and it keeps improving with each round. It also hasn't been used by a real product team yet. I've built with it myself, but the true test is another designer or engineer picking it up without me. That's the next step.

Reflection

The most interesting part wasn't designing the system. It was finding out how much it still got wrong when I re-measured it, and again when I used it. A token I'd logged as a near-miss in one brand was failing in all four.

Systems don't drift because people are careless. They drift because nobody re-measures.

AI can build a design system fast. Knowing when it's almost right, but wrong, is still a designer's job.