Design system as the hero of a brand refresh — CSS custom properties bridge legacy and new¶
Insight: Motorway's brand refresh across 16 web and native applications succeeded because of their design system ("The Highway Code") — and exposed every place the system wasn't fully adopted. The key engineering pattern: use CSS custom properties with fallbacks to control legacy components from the design system, enabling pre-release of legacy libraries without visual changes until the DS updated the custom property values. This decoupled deployment timing from visual change timing, dramatically reducing launch-day risk.
Detail: Three lessons from Mudford (design engineer leading the rollout): (1) DS as prerequisite — "I cannot stress how impossible and painful this would have been without this design system." The atomic, foundational system allowed fundamental visual refresh by updating components at the base layer. (2) Legacy pain — Three design systems existed (The Highway Code + two legacy libraries never properly deprecated). Fix: replace all legacy color/typography references with DS references first, so go-live only needed DS updates. For stubborn legacy components, wrap existing values in custom properties: .multiselect { border-radius: var(--thc-input-border-radius, 4px); } — the fallback preserved current behavior until the DS set the new value. (3) Ambition vs. scope — They didn't just swap colors/logos; they redesigned UI elements (e.g., replacing dropdown menus with radios/checkboxes for better mobile UX). This required accepting that not everything would be pixel-perfect on day one and running a "snagging" period post-launch. Also removed 20% of legacy components during the process.
Sources
- Trys Mudford — "Lessons from a Brand Refresh" (2025-04-09)
Related: existing entry "The craft matters more than the output" in external/design-engineering.md — COMPLEMENTS