Enterprise Design System & Multi-Brand Token Architecture
Transform ad-hoc, fragmented UI execution into an enterprise-grade experience infrastructure
Executive TL;DR
Context: Coast Capital digital ecosystem across mobile, web, and enterprise internal platforms.
The Goal: Transform ad-hoc, fragmented UI execution into an enterprise-grade experience infrastructure. Scale mobile app quality, manage an org-wide rebrand, navigate a complete toolchain migration (InVision/Sketch $\rightarrow$ Figma/Supernova), and establish a tokenized multi-brand architecture for future M&A.
My Role: Director / Design Leader—Architected the original 0-to-1 design system, established the cross-platform governance model, led the design ops toolchain transition with zero dev downtime, and drove the 3-tier tokenization pipeline.
The Impact: Established an enterprise design infrastructure that eliminated UI debt, unified cross-platform teams during an org-wide rebrand, and supported seamless toolchain migrations without dev downtime. Evolved the platform into a brand-agnostic, tokenized architecture capable of instant multi-brand re-theming for ongoing M&A growth.
2.6 → 4.5+ Stars
Mobile App Store Rating Elevation
#1 Rated
Best Mobile CU Experience (Surviscor 2 Yrs Running)
0 Dev downtime
During Full Toolchain Migration (InVision/Sketch → Figma/Supernova)
3-Tier Token Architecture
Figma & Supernova Framework (Multi-Brand / Multi-Theme)
🎯 The Want - Strategic Context & Evolution Over Time
Over a 3-year transformation, Coast Capital shifted from localized, feature-level design to scaling platform-wide governance.
The 3-Year Maturity Timeline:
Phase 1: Foundational Governance & Rebrand (0-to-1):
Consolidate ad-hoc designer workflows into a centralized design system during a high-stakes, org-wide rebranding and Agile transformation.
Phase 2: Scale & Design Ops Toolchain Migration:
Extend system adoption beyond retail banking to broader enterprise applications across disparate tech stacks, migrating the team seamlessly from Sketch/InVision to Figma and Supernova.
Phase 3: Multi-Brand & Token Architecture (Present):
Evolve from a single-brand system to a brand-agnostic, multi-theme tokenized engine (Global $\rightarrow$ Semantic $\rightarrow$ Component) to support instant runtime re-theming and future M&A expansion.
🚧 The Obstacle - Operational Drag & Structural Friction
Ad-Hoc Fragmentation & Visual Debt: Designers were creating disparate one-off UI variants, leading to high UI regression bug counts, duplicated asset debt, and poor mobile store reviews (2.6 stars).
Rebrand & Agile Transformation Chaos: Rebranding an enterprise financial platform mid-Agile shift threatened to stall product delivery without a systematic visual governance model.
Toolchain Migration Without DesignOps: Transitioning the entire design organization from Sketch/InVision to Figma and Supernova had to be executed directly by design leadership without dedicated DesignOps resources—and with zero engineering downtime.
Multi-Brand Integration Bottlenecks: Preparing the platform for current and future mergers meant decoupling visual decisions from frontend code to avoid costly CSS overrides and refactoring across brands.
⚡ The Resolution - System Architecture & Pipeline Strategy
We built an enterprise-grade experience infrastructure that decoupled design decisions from tech stacks, creating a resilient bridge between design tokens and production code.
Strategic Innovations:
3-Tier Token Architecture: Structural separation into Global (raw values), Semantic (contextual intent like color-surface-primary), and Component-level tokens to support brand agility and instant runtime theme switching without refactoring base code.
Tokenized Multi-Brand Framework: Architected variables and themes within Figma and Supernova to decouple brand visual decisions from core application logic, preparing the platform for multi-tenant and M&A deployment.
Zero-Downtime Toolchain Transition: Led the end-to-end migration from Sketch/InVision to Figma and Supernova by setting up standardized interaction primitives, WCAG-compliant accessibility tokens, and continuous developer handoff workflows—executed without dedicated DesignOps resources.
Cross-Organizational Ecosystem: Designed system primitives to be tech-stack agnostic, allowing non-banking teams across the enterprise to utilize the same core visual language.
💡 Product Evolution
Moving from UI Kits to Strategic Experience Infrastructure. A design system’s real business value isn't component UI kits—it's organizational operational velocity and platform resilience. By evolving our design system from a basic component library into a tokenized, multi-brand engine, we transformed design from a downstream bottleneck into an enterprise growth enabler. This infrastructure protected software quality during toolchain migrations, elevated app ratings, and laid the scalable groundwork for rapid M&A brand onboarding.