The System Beneath the System: Re-Architecting Tokens for 48+ Brands

Executive Summary

Years of legacy token bloat, detached Figma workflows, and hardcoded overrides had left the design system fractured and unsustainable. I led the end-to-end rebuild of our token infrastructure—designing a scalable model of primitives, semantic aliases, and brand themes, delivered through a centralized pipeline via Style Dictionary and the Figma REST API. This system powered live theme switching across 48+ brands, eliminated overrides, and established design–code parity at scale. More importantly, it laid the groundwork for real-time design system analytics—turning tokens into an operational source of truth.

Problem: Token Chaos at Scale

What we called “tokens” were just scattered raw values—no structure, no hierarchy, no source of truth. Designers manually edited JSON files to apply brand themes. Engineering had no reference beyond inconsistent one-off values like

My Role

As Principal Design Systems Architect, I owned the strategy, design, and delivery of the new token infrastructure—bridging design and engineering to align tools, teams, and outputs. I led a full audit of all legacy token sources and component variants, exposing systemic duplication and drift. I designed and implemented a structured token model—moving from raw values to a three-tier architecture of

The Solution

I designed a platform-oriented token architecture to unify scale, flexibility, and governance. At the foundation were normalized primitives—colors, spacing, radii, typography, and elevation—extended through semantic aliases like

Using Style Dictionary, I built a custom token pipeline that transformed these definitions into multiple target formats—CSS variables, Tailwind tokens, JS/TS constants, and JSON for the Figma REST API. This enabled true cross-platform parity and allowed token updates to instantly cascade across codebases and design tooling.

On the Figma side, I automated token creation and theme application using the REST API. Tokens were injected into a white-label base library, with mode switching enabled for brand-specific themes—eliminating the need for designers to detach components or apply styles manually. Previewing brand themes became instant, reliable, and scalable.

Results

Lessons & Next Step

Design tokens aren’t a design system detail—they’re organizational infrastructure. When centralized and systematized, they become the glue between design, engineering, and QA—accelerating velocity, reducing risk, and eliminating ambiguity. This work proved that a well-architected token pipeline doesn’t just improve theming—it redefines how product teams scale UI. It also opened the door to intelligent design system analytics—tracking which tokens are used, changed, or extended across brands and platforms. Ultimately, the success of this system helped influence executive buy-in for Figma Enterprise—turning REST API sync from a prototype into a strategic investment.