A design system that shipped governance alongside its components.
Built and led an enterprise design system spanning five product lines and three brands - with semantic tokens, behavioral contracts, and a governance pipeline that survived the team it was built by.
FIG.01 · System architecture - five layers, one contract
DM-DS / 001
The organization ran five product lines under three brand
identities - each with its own design team, its own React (or
Vue) component library, and its own opinions about a
Button. The drift wasn't an accident; it was the
natural outcome of solving similar problems in parallel for too
long.
The brief was the usual one - "consolidate the design system" - but framed honestly it was three problems stacked: visual consistency, technical consistency, and governance. The first two are tractable; the third is where most enterprise design systems quietly die.
So the engagement was scoped around governance first, components second, and tokens as the artifact that made both possible.
02 / Tokens
Semantic, not literal.
The token layer was the leverage point. Treating tokens as semantic - describing intent, not appearance - was what let three brands consume the same component library without forking, and what let dark / light / dense modes drop in with no component changes.
Token
Value (Brand A)
Value (Brand B)
Used for
surface.canvas
oklch(0.13 0.004 80)
oklch(0.97 0.004 80)
App background, lowest layer
surface.fg
oklch(0.94 0.006 80)
oklch(0.18 0.006 80)
Primary text on canvas
accent.intent
oklch(0.78 0.12 55)
oklch(0.55 0.13 240)
Interactive, brand-resolved
signal.danger
oklch(0.72 0.18 25)
oklch(0.55 0.18 25)
Destructive intent, errors
signal.success
oklch(0.78 0.14 145)
oklch(0.50 0.14 145)
Confirmation, healthy state
border.default
oklch(0.26 0.005 80)
oklch(0.84 0.005 80)
Dividers, low-contrast outlines
Excerpt - full token set: 240+ semantic tokens · 18 themes · machine-readable JSON contract.
03 / Components
Each component shipped with a contract.
128 components, one shape. Every component shipped with the same five artifacts: anatomy, props contract, states, motion, and an explicit list of what the component is not for. That last one prevented more cross-team arguments than any other piece of the system.
DS · Button / 042
Button
Three variants × four sizes × five states. Intent is always carried by token, not by hex.
DS · Input / 017
Text Field
Single source of truth for all input surfaces - including search, filter, and inline edit.
DS · Switch / 031
Toggle
Reserved for binary state with immediate effect. Not a checkbox; not a confirm action.
04 / Governance
The pipeline a change moves through.
What most design systems get wrong is treating governance as a policy document. Foundations treated it as a pipeline - every proposed change moves through the same five stages, with explicit ownership at each.
01 · PROPOSE
RFC opened
Anyone can open one. Template: problem, proposed change, blast radius.
Owner - proposer
02 · REVIEW
Architecture review
Async review by the systems council; weekly sync if contested.
Owner - DS team
03 · DRAFT
Prototype + spec
Code + Figma + docs land together in a draft branch. Visible org-wide.
Owner - proposer + DS
04 · SHIP
Versioned release
SemVer release with migration notes. Old API kept for 1 minor cycle.
Owner - DS team
05 · DEPRECATE
Sunset path
Old patterns marked deprecated with codemod + 90-day removal.
Owner - DS teamThe components were the cheap part. The expensive part was the agreement - and the system Demi designed kept that agreement legible long after the original team had rotated.
- VP of Product, exit interview
A design system that can't measure its own adoption is just a Figma file. Foundations shipped with an adoption telemetry layer - a small package that products imported alongside the components, reporting (anonymously) which components were in use, which props were being overridden, and which deprecation paths were lagging.
That telemetry made three things possible:
- Audit, not blame.Every product team could see exactly where they were on the migration path. No nagging Slack threads.
- Evidence-based deprecation.A component was retired only when usage hit zero - measurable, not negotiated.
- Better next decisions.Patterns no one used told us as much as patterns everyone used. Both shaped the roadmap.
A system that survived the team that built it.
128
Components shipped
Across React and Vue, semantically aligned, one source of truth.
~74%
Adoption at handoff
Telemetry-measured, across five product lines and forty-plus teams.
3 → 1
Brand systems unified
Three forked brand libraries collapsed onto one token contract.
∞
Arguments retired
The "what does this component mean" debate, fully owned by the system.
All figures are directional, paraphrased from internal retrospectives. NDA-redacted.