Design System
Building a Design System for 46 applications
A shared component and token system gave web and mobile teams a safer way to stay consistent and evolve.
Problem
Multiple web and mobile applications needed a shared foundation that approximately 108 engineers could adopt without making consistency a bottleneck.
Constraints
The system had to support 32 components, meet WCAG AAA colour contrast, and provide visual regression testing and semantic versioning across 46 applications.
Decision and implementation
The Design System used Style Dictionary for design tokens, visual regression testing for confidence in the UI, and semantic versioning to define release boundaries. Migration codemods built with jscodeshift handled repetitive changes, while documentation, tooling, support, and AI skills helped teams adopt the system.
Trade-off
Standardisation only works when teams have a migration path. Codemods and explicit versions reduced the cost of change instead of asking every application to migrate by hand.
Impact and lesson
The 32-component system was used across 46 web and mobile applications by approximately 108 engineers. A Design System is also an enablement product: adoption depends on the tools and support around the components.