Project Background
When the Manhattan Design System embarked on dark mode, our entire component library needed systematic updates with semantic color tokens supporting both light and dark themes across three platforms and multiple brands. This wasn't simply inverting colors...t required auditing every component to ensure tokens were properly assigned and functionally accurate across Web, iOS, and Android, while maintaining consistency across Chase Masterbrand, Chase for Business, JPMorgan Masterbrand, and other brand themes
Main Goals
- Assign semantic color tokens to all components for light and dark mode support
- Audit data visualization components with appropriate token assignments
- Verify visual quality through comprehensive multi-platform testing
The Team & My Role
I partnered with two senior designers on the dark mode initiative, and collaborated closely with engineering partners throughout the entire process. I led the audit and token assignment specifically for data visualization components while conducting VQA testing of the entire component library across Web, iOS, and Android.
Research & Discovery
I audited all data visualization components to understand how colors functioned across chart types and interactive states. Selecting dark mode colors required systematic contrast testing against backgrounds, between adjacent colors, and across states like selected vs. unselected elements. This iterative process balanced accessibility requirements with the visual clarity essential for data interpretation.
Timeline & Process
- Color Token Assignment: Assign semantic color tokens to components for light and dark mode, with specialized focus on auditing data visualization components across all platforms.
- VQA Testing: Conduct simultaneous testing across Web, iOS, and Android, verifying token implementation in both modes, documenting discrepancies, and communicating findings with engineering.
- Iteration & Refinement: Re-test after each engineering fix, address emergent issues, and repeat until all discrepancies are resolved.
- Secondary Updates: Implement additional color token changes months later, re-verify entire component library across all platforms and re-check color contrast.
Project Impact
By building dark mode support directly into the design system, we enabled product teams across Chase to adopt dark mode with significantly reduced effort. The initiative also established a rigorous multi-platform VQA testing process that continues to benefit future design system updates.
Key accomplishments include:
- Implemented semantic color tokens across the entire component library supporting multiple brand themes
- Completed comprehensive audit of data visualization components with appropriate token assignments
- Enabled consistent dark mode experience across Web, iOS, and Android
- Created framework and documentation for product teams to audit and update their own applications
