Design systems are the critical infrastructure for large-scale brand refreshes¶
Insight: A well-maintained design system made a cross-platform brand refresh (16 web and native apps) possible in ~6 weeks. Without it, the task would have been "impossible and painful." However, the system only works as a "single source of truth" if it's actually the only source — legacy component libraries that haven't been deprecated create significant pain and compromise.
Detail: Trys Mudford led the engineering rollout at Motorway. Key techniques: (1) Pre-release color and typography token references from the DS into consuming apps weeks before launch, so go-live was just a DS update, (2) Used CSS custom properties with fallbacks to control legacy components from the design system (var(--thc-input-border-radius, 4px)), reducing the number of synchronized launches, (3) Used the refresh as an opportunity to improve accessibility (color contrast, typographic hierarchy), performance, and simplify visual clutter, (4) Deleted 20% of legacy components as a bonus. The naming convention changes to space and typographic design tokens were described as "fundamental and scary" but worth doing during the refresh when every CSS file was being touched anyway.
Sources
- Trys Mudford — "Lessons from a Brand Refresh" (2025-04-09)