Material 3 Upgrade
Background
Our V10 product is a white-label collaboration app, every new enterprise customer gets their own branded version.
But applying brand colors was a bottleneck: a designer had to manually derive accessible color values for light and dark modes, check WCAG contrast ratios, fix failures, and hand off to engineering for implementation and QA. A single customer’s color setup could take a full day across multiple team members.
Why now, why M3
Three conditions converged in mid-2022:
- Our design team was migrating from Sketch to Figma (creating a natural rebuild window)
- Material 3’s dynamic color system offered a direct solution to the branding bottleneck, and our Android app still carried significant design debt from an iOS-inherited M2 system that needed clearing.
- This is as a single strategic window to solve all three problems in one move rather than three separate efforts.
The hard decisions
The core challenge was finding the right boundary between system-native components and custom product components — leveraging platform defaults (navigation, toggles, inputs) for stability and user familiarity, while building a custom layer for our product-specific patterns (workspaces, flows, CTAs).
We introduced a two-tier token strategy: a platform tier that aliases OS-level semantic tokens through our naming, and a product tier for brand colors and component-specific values. This decoupled us from platform update cycles while preserving visual coherence. M3’s dynamic color system fully replaced our manual branding workflow — customers’ brand palettes now generate accessible light and dark themes automatically.
A key constraint was that design assets updated faster than the MDC-Android implementation library, and our SDK served multiple customers who could not always adopt the latest version. I phased the rollout accordingly, distinguishing between components that would auto-update with the system and those requiring manual migration.
Outcome
Led the Material 2 → Material 3 migration across 200+ components with a small cross-platform team. Replaced a full-day, multi-team manual branding process with automated color generation from a single brand input. The two-tier token architecture has sustained two years of platform updates without structural rework, and the system/custom decision framework is still used by the team for every new component decision.