National Mortgage Lender
iOS and web design system — 4,400 variants mapped to code.
React Native + web component library spanning 41 Figma pages. Audited every family, extracted 781 tokens, connected 38 of 41 to code with Storybook documentation. Zero sprint disruption.
Industry
National Mortgage Lender
Engagement
Audit + Code Connect + Storybook
Timeline
Phased delivery — tokens first, high-usage components, then edge cases
KPIs
781 tokens · 38/41 components (93%) · ~4,400 variants cataloged
Context
A large financial services company had invested years building a React Native design system — 41 Figma pages serving multiple product teams. In a regulated industry where UI consistency is a compliance concern, the gap was becoming a risk.
The challenge
The design system wasn't broken — it was ungoverned.
Each product team had evolved their own interpretation of shared components, creating ~4,400 variants nobody could fully map. Designers couldn't tell which were canonical. Engineers couldn't tell which specs were current.
What we found
Not every variant could migrate in phase one. The highest leverage was token extraction plus connection coverage plus a prioritized remediation sequence.
Our approach
Pulled 781 design tokens directly from the Figma source: colors, spacing, typography, radii, shadows, elevations.
Mapped all 41 component families. Cataloged every variant (~4,400 total). Identified 38 with direct React Native equivalents.
Built a living Storybook reference with every mapped component rendered in isolation.
Delivered in tranches — tokens first, then high-usage components, then edge cases — so consumption started immediately.
Before & after
Documented tokens
Scattered across Figma
781 codified tokens
Component mapping
Informal knowledge
38/41 mapped (93%)
Variant catalog
Unknown total
~4,400 cataloged
Design-code bridge
Manual interpretation
Storybook with live renders
Onboarding time
2-3 weeks
Browse Storybook on day 1
Results
What changed.
Engineering teams could browse Storybook instead of DM'ing designers for specs.
Token consistency eliminated an entire category of design review feedback.
In a regulated industry, the system moved from aspirational to auditable.
Proof
Connection inventory with pass/fail rationale per component.
Leadership-ready sequencing for the next program phase.
Similar challenge?
Design System Audit
$50048h assessment: token inventory, coverage map, naming drift, prioritized roadmap.
Design System Build
$5K–$20KToken extraction, component mapping, Storybook documentation, sequenced delivery.
Fractional Design Leader
$5K–$15K/moOngoing governance, compliance alignment, cross-team standards, design review.
Figures reflect the scoped program; not all variants were migrated in phase one.