Composable

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. It 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.

Timeline & Process

Phase 01

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

Phase 02

VQA testing

Conduct simultaneous testing across Web, iOS, and Android, verifying token implementation in both modes, documenting discrepancies, and communicating findings with engineering

Phase 03

Iteration & refinement

Re-test after each engineering fix, address emergent issues, and repeat until all discrepancies are resolved

Phase 04

Secondary updates

Implement additional color token changes months later, re-verify the entire component library across all platforms and re-check color contrast

Research & Discovery

Audited data visualization components across chart types and interactive states
Ran contrast testing against backgrounds, adjacent colors, and selected vs. unselected states
Balanced accessibility requirements with visual clarity for data interpretation

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

Back