Scaling a token-driven design system across platforms
Unified three product platforms on a single token-driven system, closing the gap between design and engineering.
- Principal Designer
- 2024
- Jan 2024 – Dec 2024
Overview
Three products had grown up independently, each with its own buttons, spacing, and color decisions. The result was visible drift, duplicated engineering effort, and a brand that felt different on every surface. The mandate was to design a single source of truth that scaled — without slowing teams down while it landed.
Role & contribution
I owned the system end to end: the token architecture, the contribution model, and the rollout strategy. I partnered closely with engineering to make sure every design decision had a single, themeable representation in code.
“A design system is only real once a team would rather adopt it than route around it.
”
Approach
I started with an audit, then defined a three-tier token model so that brand, semantic, and component-level decisions stayed independent and themeable.
The semantic layer is where multi-theme support lives. Components never reference a raw value — only a semantic token that resolves per theme.
- --color-surface
- {neutral.0}
- --color-ink
- {neutral.950}
- --color-accent
- {blue.600}
- --radius-control
- 0px
Outcome / impact
Adoption was driven by making the system the path of least resistance: documented, generated, and integrated into the build.
Reflection
The hardest part was never the tokens — it was the contribution model. Given more time, I’d have invested earlier in the governance ritual that keeps a system alive after the launch energy fades.