One system, two frameworks.
A design system delivered simultaneously to React and Angular codebases from a single source of truth — tokens, behaviour contracts, accessibility and performance budgets included.
01Problem
An enterprise mid-migration lives in two worlds: new surfaces in React, a decade of Angular still serving customers. Two implementations of every button meant double the bugs, drifting brands, and accessibility that depended on which year a screen was built.
02Approach
- Tokens as the treaty. Color, type, spacing, motion and state live in one token pipeline; both frameworks consume generated outputs. Design changes land everywhere or nowhere.
- Behaviour contracts. Each component has a framework-agnostic spec — states, keyboard map, ARIA contract — and both implementations are tested against the same spec suite.
- Budgets in CI. Bundle size and interaction latency are budgeted per component; a regression fails the build, not the user.
- Migration tooling. Codemods map legacy component usage onto the system, making adoption a command rather than a quarter.
03Impact
1
Source of truth for both frameworks
AA
Accessibility contract, tested in CI
0
Visual drift between stacks
04Lessons
A design system is a political artifact wearing an engineering costume. The token pipeline and spec suite mattered because they ended arguments — the system became the place where decisions, once made, stayed made.