A Design Language from a Mobile Rebuild
A component library and token architecture, built mobile-first and scaled across the platform
All case studies are shared under NDA for portfolio review purposes only. The platform serves investment professionals conducting research, deal sourcing, and portfolio monitoring. Exact metrics values are withheld and replaced with proxy phrasing due to confidentiality constraints. Happy to walk through the details personally.
Problem given
The platform's visual language had not evolved in over five years. The legacy web design system and the old mobile component library alongside it both had hardcoded colour values, no token architecture, and no dark mode support. A new mobile app was being built from scratch, which created the opening to rebuild the design language for the whole platform.
Problem framed
Rather than patching the legacy system, I used the fresh mobile build as the starting point for a new platform-wide design language: mobile-first, token-based, with dark mode designed into the foundation from day one, and with the explicit intention of migrating the web products onto it afterward.
Constraints
Mobile-first approach with uncertain web migration path; system built alongside the mobile product rather than in a dedicated project phase; sole designer maintaining and governing the system
My role
Sole designer on the system. Owned design principles, token architecture, component library, documentation, and governance process
What shipped
Semantic token architecture, light and dark mode with dual grey temperature, comprehensive component library, typography and spacing scale, cross-product visual language
Impact
First dark mode implementation across the platform; scaled beyond mobile to multiple web products; consistent visual language across mobile, web, Chrome extension; introduced design system governance where none existed