Multi-Brand Design Tokens

Pillar4 runs 10+ consumer media brands, and each Figma kit carried its own hex codes, spacing and radius. A global change meant one hand edit per brand, plus a QA pass. Design and engineering argued in hex codes. Work on one brand taught the next one nothing.

Primitives hold raw values: color, a 4px spacing scale, type sizes and radius. Semantics name the job, like color.text.primary or spacing.md. Components only read semantics. I applied tokens inside every component of a brand’s kit, not just the foundations, because that’s the step that makes a global change actually propagate.

Migrating one brand by hand is a week you can justify. Seven is a quarter nobody funds. So I built a Figma to Claude to Figma workflow. Claude reads a brand’s existing kit, pulls every color, spacing and type value in use, and drafts the two-tier set against the shared naming. I review it, fix what it got wrong, and write it back to Figma. That’s how five brands landed in one two-week sprint.

Tokens export through Tokens Studio to JSON, then to CSS variables. Before rolling anything out, I tested them on real, existing blocks to confirm they held up in Dev Mode. Then I wrote the handoff doc that made tokens the shared language between design and engineering.

One brand’s email kit was designed before anyone knew what the email platform could render, so Figma and the sent emails had drifted apart. I treated the platform as the source of truth and brought Figma into line: type rebuilt for desktop and mobile in light and dark, one approved button, a new spacing step to fill a gap, spacing reworked across five templates. I also added contrast-checked dark-mode palettes to seven email kits.

I wrote step-by-step docs so any designer on the team can add a brand or extend the system without me, and started how-to guides inside the Figma file so the docs live where the work lives. When a teammate designed a new component variant, I added it to the shared master file across five brands so the docs and the real system stay the same system.

Every place we’d documented a system had gone stale, because every value was typed by hand. So I built a docs hub where every cell is computed: a generator builds the pages from the UI kit’s tokens and a scrape of the production CSS. That turned documentation into an audit. It surfaced 224 gaps between kit and site, 85 of them real bugs, like headings with no size set and 47 of 202 font sizes off the type ramp. Every color got a documented accessible pair. I scoped it to one brand first, built to take more.