Case study
Pioneer Design System
Led the evolution of Wells Fargo’s Pioneer Design System by defining a single-tier token architecture (72 tokens) powering 50+ enterprise applications across 3 themes + light/dark mode—bringing Vantage web and mobile into full alignment with enterprise brand standards while driving the system from 3x → 4x through component enhancements.
Overview
Led the evolution of Wells Fargo’s Pioneer Design System by defining a single-tier token architecture (72 tokens) powering 50+ enterprise applications across 3 themes + light/dark mode—bringing Vantage web and mobile into full alignment with enterprise brand standards while driving the system from 3x → 4x through component enhancements.
The Problem
Wells Fargo’s design system was not built to scale at the enterprise level.
- 50+ applications operated with inconsistent visual standards
- The existing 3x system had token sprawl and unclear structure
- Multi-theme and dark mode support introduced exponential complexity
- Vantage (web + mobile) had drifted from updated enterprise brand guidelines
The system lacked a clear, scalable foundation, making consistency difficult and slowing down product development.
What I Did
1. Defined a Single-Tier Token Architecture (72 Tokens)
Designed a highly constrained semantic token system that reduced complexity while increasing coverage.
- Consolidated the system to just 72 tokens
- Removed unnecessary abstraction layers
- Structured tokens around functional intent (background, text, border, status, etc.)
- Ensured tokens mapped directly to real UI usage
2. Scaled the System Across 50+ Applications
Built the architecture to support enterprise-wide adoption.
- Enabled consistent UI behavior across 50+ products
- Eliminated the need for product-specific token overrides
- Created a single source of truth for visual decisions
3. Supported 3 Themes + Light/Dark Mode Without Duplication
Handled complexity centrally through the system.
- One token layer powering multiple brand expressions
- Seamless support for light and dark modes
- Avoided token duplication and branching systems
4. Aligned Vantage to Enterprise Brand Standards
Bridged the gap between brand and product execution.
- Translated enterprise brand guidelines into system-level decisions
- Unified visual language across web and mobile
- Brought Vantage into full alignment with Wells Fargo’s updated brand
5. Evolved the System from 3x → 4x Through Component Enhancements
Modernized the system at the component level.
- Enhanced 75 components across the design system
- Standardized patterns, spacing, typography, and interaction
- Improved accessibility and cross-platform consistency
Outcome
- 72 tokens powering 50+ enterprise applications
- Supports 3 themes + light/dark mode from a single architecture
- 75 components enhanced, enabling the 3x → 4x evolution
- Full visual alignment across Vantage web + mobile
- Reduced system complexity and increased development velocity
- Established a scalable foundation for future enterprise growth
Key Insight
Constraint drives scale.
By limiting the system to 72 tokens, I created a foundation that scales across 50+ applications, multiple themes, and light/dark modes—without introducing fragmentation or complexity.
Less tokens. More leverage.