Built a 44-component design system, mobile-first with dark mode by default
Overview
Semantic tokens, dual grey temperature, and dark mode designed into the foundation. Scaled from one mobile app to web, the Chrome extension, and every surface since.
My role
Owned design principles, token architecture, the component library, documentation, and the governance process.
Team
Timeline
2023
3 weeks
Impact Overview
44
Components in the initial library. Mobile-first, token-based, three weeks
First
Dark mode on the platform. Carried in the tokens, free on every surface after
3 surfaces
Mobile, web, Chrome extension. Plus every subsequent product surface
All case studies are shared under NDA. Read more
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.
TL;DR
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