MODES UI Design System
Contributed to MODES UI, a design system unifying 3 company identities through a major industrial merger. 95 components, 71 releases, adopted across 26+ products and 3 frontend frameworks.
Design Impact
26+
Products adopted
71
Public releases
~95
Components
React · Vue · Angular
Frameworks
340 members
Community
The Problem
Metso's product portfolio was vast and fragmented — 26+ products, three engineering frameworks, and a design team that grew from 2 to 12. The system needed to survive a major merger and two rebrands without being rebuilt from scratch. Teams were actively skeptical.
The Solution
Built a semantic token system for colour, typography, spacing, and iconography as variables that could be swapped per theme without touching component logic. Shipped 4 complete themes (Light to Dark) passing AA accessibility. Created a template library for industrial software patterns.
See the full case study
The detailed screens, design process, visual decisions, and video walkthroughs for this project are available with a password.