← WorkDesign system

Zero to seven brands on one token architecture — five of them in a single two-week sprint

A performance-marketing publisher operating 10+ owned consumer media brands had no shared styling vocabulary. Every brand's Figma kit carried its own hardcoded hexes and its own spacing improvisations, so a styling change was N hand-edits and a QA pass. I built a two-tier token architecture, then built the Figma → Claude → Figma workflow that migrated five brands in one sprint instead of five.

OutcomesMulti-brand publisher
CS-02 / 06
Brands on a shared token architecture
0 → 7+
Brands migrated in one two-week sprint
5
Token tiers — primitive, then semantic
2
Email UI kits given dark-mode palettes
7
Client
Multi-brand publisher
Role
Sole owner — architecture, migration tooling, documentation, governance
Scope
4 months, ongoing · 2026

Nobody is paid to own the shared layer

A publisher with a portfolio of brands has the same design system problem as a company with a portfolio of products, except worse. Every brand's roadmap is measured on its own revenue, so nobody is incentivized to own the layer underneath all of them. Each kit accumulates its own hexes, its own spacing improvisations, and its own idea of what a border radius is.

The cost never lands on the brand that caused it. It lands in three other places:

  • Every global change is N changes. A refresh, an accessibility fix, a dark-mode requirement from the email platform — each one is per-brand manual work that scales linearly with the portfolio.
  • Design and engineering argue in hex codes. With no named values, handoff is a screenshot and a hope, and drift starts on day one of the build.
  • Nothing compounds. Work done for the first brand teaches the second brand nothing, because there is no artifact shared between them.

The architecture

Two tiers, and components only ever touch the second one.

  • Primitives carry raw values: color, a 4px spacing scale, type sizes, radius. A value like blue-500 lives here and nowhere else.
  • Semantics carry usage: color.text.primary, spacing.md, and their siblings. Components consume these only, which is what makes a global change one edit instead of a search-and-replace.
  • An export pipeline that ends in production: Figma → Tokens Studio → JSON → CSS custom properties, tested against real existing blocks to confirm Dev Mode compatibility before anything rolled out. A token system that survives only in Figma is decoration.
  • A dev handoff document establishing tokens as the shared vocabulary between design and engineering, rather than a designer-side convention engineering never agreed to.
  • Component-level application. Foundations alone do not propagate. Tokens were pushed into every component in a brand's kit, which is the step that makes theming actually work and the step most token projects skip.

The part that made it scale: Figma → Claude → Figma

Migrating one brand by hand is a week you can justify. Migrating seven is a quarter nobody funds. So the second half of the job was building the migration rather than performing it.

Claude reads a brand's existing UI kit, extracts every color, spacing, and type value already in use, and generates the two-tier hierarchy against the shared naming convention. I review, correct, and write it back to Figma. The brand-specific work collapses to judgment calls — which of four near-identical greys is the real one — instead of transcription.

That is how five brands landed in one two-week sprint, and it is the same install SteelForge runs for clients: the system, plus the machine that maintains it.

Architecture without governance drifts back

A system that depends on its author is a liability with good intentions. Four things shipped alongside the tokens for that reason:

  • Step-by-step process documentation, so any designer on the team can extend the system without me.
  • A how-to guide system built inside the Figma file itself, so the docs live where the work lives instead of rotting in a wiki nobody opens.
  • Shared component maintenance: a new container variant propagated across all five brands, so the documented system and the real system stay the same system.
  • A brand guidelines audit and an organizing framework. The guidelines were scattered across three tools with no maintainable home, and a token system inherits that mess otherwise.

The email case is the whole argument in miniature

One brand's email kit had been designed in Figma before anyone established what the sending platform could actually render. The file and the shipped emails had diverged.

The fix was not a redesign. It was to treat the platform as the source of truth and bring Figma into line with it: typography rebuilt for desktop and mobile across light and dark, a missing spacing step added, the CTA consolidated to the one approved button, spacing reworked across all five templates.

Design systems earn trust by matching production. When they stop matching, people stop opening the file, and everything after that is drift.

What the deliverable actually is

A token system is not the deliverable. The deliverable is that the next brand takes a sprint instead of a quarter, and that it does so whether or not I am still there.

Next stepCS-02 / 06

Want the same shape of outcome?

Send the problem in plain language. You get a read on whether it’s worth doing, what it would take, and what it would cost — before anyone signs anything.