Capital One
·
Financial Services
FS Design System V1
FS Design System V1
FS Design System V1
Establishing a division-first design system for Financial Services.
Establishing a division-first design system for Financial Services.
A scalable design system built from the ground up to serve all Financial Services products at Capital One. Born from the success of the Auto Navigator Library, FSDS V1 established shared foundations, reusable components, and clear governance—giving designers and developers a consistent, high-quality starting point and accelerating the division’s transition from Sketch to Figma.
A scalable design system built from the ground up to serve all Financial Services products at Capital One. Born from the success of the Auto Navigator Library, FSDS V1 established shared foundations, reusable components, and clear governance—giving designers and developers a consistent, high-quality starting point and accelerating the division’s transition from Sketch to Figma.
Role
Design System Lead, Manager
Timeline
Dec 2020 – Apr 2024
3 years 4 months
Team
1 Head of Design
1 Design System Lead (me)
1 Senior Designer
1 Development Lead
1 Front-End Developer
1 Accessibility Specialist
Multiple community contributors
Tools
Figma
Adobe Illustrator
Google Workspace
Jira
Skills
Accessibility (WCAG)
Design Strategy
Design Systems
Design Tokens
Documentation
Educational Resources
Figma Auto Layout
Figma Libraries
Figma Variables
Governance
Iconography
Native Mobile
Prototyping
Research
Responsive Web
Typography
UI Design
Version Control
Visual Design
Web Components
Challenge
A division, divided
As Financial Services scaled, product teams were solving the same problems in isolation—designing from scratch, duplicating work, and producing inconsistent UI that often failed to meet accessibility standards and enterprise brand guidelines.
Designers created siloed libraries that only served individual products. Developers lacked a shared source of truth in code. Meanwhile, the Auto Navigator Library had already demonstrated the power of reusable components—but its impact was limited to a single team.
Then came a turning point: a cybersecurity mandate to move the entire design org from Sketch to Figma. We had just 3–4 months to stand up a new, scalable design system—one that would unify the division and set a new standard for quality, efficiency, and accessibility.
Process
Planning the work.
Working the plan.
After the success of the Auto Navigator Library, I was invited to join the newly formed Design Architecture team as the Design System Lead. At the time, the team consisted of just me, a front-end dev lead, and our Head of Design Architecture—starting scrappy, but nimble enough to move fast.
I spent the first few weeks learning Figma and translating core assets from Sketch. In parallel, I audited the design work across FS to identify shared patterns and opportunities for normalization across products.
I prioritized the most high-impact assets first—establishing design tokens, typography, spacing, and color primitives—and tracked progress in a centralized Google Sheet that doubled as both a naming model and build tracker.
Process makes perfect
What began as a nimble, scrappy initiative quickly matured into a highly structured system for delivering high-quality assets at scale.
Over time, we defined a clear, repeatable process—complete with workflow diagrams, Jira checklists, quality benchmarks, and contribution guidelines. These helped us deliver components that were accessible, scalable, and production-ready.
These principled processes balanced speed with precision, reduced ambiguity across teams, and set a high bar for quality that designers and developers could rely on.
Solution
Architecting the system
We structured the FS Design System as two distinct layers: a set of core libraries and a suite of extension libraries.
Core libraries—Foundations, Components, and Utilities—provided the global building blocks shared across all Financial Services products. These included the design tokens, base UI components, and design utilities that would be used by all teams in FS.
Extension libraries—created to support common customer segments and platforms. Associate, B2B, B2C, and Servicing teams each maintained their own libraries of audience-specific components and patterns, built on top of the core.
Working out in the open
To ensure transparency and foster cross-team collaboration, we explored all proposals in public standalone Figma files. These served as open playgrounds where everyone could see the work in-progress, weigh in on decisions, and test usability—before anything was finalized.
Each file followed a consistent, systematic structure—mirroring our design process from discovery and exploration to final specs—making it easier for contributors to engage, provide feedback, and align around shared outcomes.
Property parity
To bridge the gap between design and development, we established a high level of parity between our Figma components and the coded components in Storybook. Every property in Figma—from variants to responsive behaviors—had a clear, one-to-one match in code.
By aligning APIs, naming conventions, and interactive states, we created a shared language between design and code—dramatically reducing ambiguity, increasing confidence in implementation, improving consistency and velocity across teams.
Meta is a must
I added descriptions and keywords, as metadata, to every style, icon, and component in the library.
This made searching for assets easier for teams to find what they were looking for quickly.
Less guesswork. More flow state.
1,500+ 🍜
noodles served
When Figma released Interactive Components, I added support to every component within a week. This gave product teams a more realistic way to test prototypes—bringing their ideas to life.
Do:
Documentation
We produced comprehensive design documentation alongside each component—covering usage, anatomy, variants, states, formatting, behaviors, dos and don’ts, content guidelines, accessibility, and specs.
This guidance empowered teams to use components correctly and reduced dependency on the core system team for everyday support.
Critical comms
We established a robust communication strategy that included sprint updates in Slack, quarterly newsletters, weekly office hours, and real-time support—often responding in under 15 minutes.
Listening tours, surveys, and demos kept us closely aligned with team needs—building trust, encouraging contributions, and driving the system forward.
Results
Graceful growth
What began as a blank slate grew into a fully-formed design system over the course of 3+ years. Version 1 of the FS Design System had a lasting impact on the division and helped shape the direction of enterprise design system efforts at Capital One.
300+
Design tokens
400+
Icons
40+
Components
4.2k+
Variants
2.5M+
Figma instances
1.2M+
Package installs
73
NPS score
100%
Adoption
A strong first impression for Financial Services
Version 1 of the FS Design System had a lasting impact on the division and helped shape the direction of enterprise design system efforts at Capital One.
Seamlessly migrated 100% of FS designers from Sketch to Figma within 3 months
Consolidated 20+ local libraries into a single, shared design system
Delivered the division’s first set of production-ready Web Components
Earned self-review status for accessibility—recognized as Capital One’s first trusted department
Significantly improved consistency, accessibility, and performance
Achieved 100% adoption across 50+ teams
Built, maintained, and governed 3 core libraries and 4 extension libraries
Enabled dozens of community contributions
Managed a dedicated Slack channel for 280+ designers and developers, centralizing announcements, discussions, and issue resolution
Selected as a coalition leader to help shape Capital One’s enterprise design system
Received the Mark of Distinction Award, becoming the first non-product team to achieve this recognition
Reflection
Memory meltdown
In V1, we leaned heavily on base components in Figma. It made life easier for us as system maintainers—but as the libraries scaled, it created performance and memory issues that slowed teams down.
When we rebuilt for V2, we ditched base components in favor of smarter component properties. The result? We cut down on variants by over 80%—creating a faster, leaner experience for everyone.
Sometimes the best solution for the system isn’t the best for the user. That shift in thinking shaped how we approached V2.
Challenge
A division, divided
As Financial Services scaled, product teams were solving the same problems in isolation—designing from scratch, duplicating work, and producing inconsistent UI that often failed to meet accessibility standards and enterprise brand guidelines.
Designers created siloed libraries that only served individual products. Developers lacked a shared source of truth in code. Meanwhile, the Auto Navigator Library had already demonstrated the power of reusable components—but its impact was limited to a single team.
Then came a turning point: a cybersecurity mandate to move the entire design org from Sketch to Figma. We had just 3–4 months to stand up a new, scalable design system—one that would unify the division and set a new standard for quality, efficiency, and accessibility.
Process
Planning the work.
Working the plan.
After the success of the Auto Navigator Library, I was invited to join the newly formed Design Architecture team as the Design System Lead. At the time, the team consisted of just me, a front-end dev lead, and our Head of Design Architecture—starting scrappy, but nimble enough to move fast.
I spent the first few weeks learning Figma and translating core assets from Sketch. In parallel, I audited the design work across FS to identify shared patterns and opportunities for normalization across products.
I prioritized the most high-impact assets first—establishing design tokens, typography, spacing, and color primitives—and tracked progress in a centralized Google Sheet that doubled as both a naming model and build tracker.
Process makes perfect
What began as a nimble, scrappy initiative quickly matured into a highly structured system for delivering high-quality assets at scale.
Over time, we defined a clear, repeatable process—complete with workflow diagrams, Jira checklists, quality benchmarks, and contribution guidelines. These helped us deliver components that were accessible, scalable, and production-ready.
These principled processes balanced speed with precision, reduced ambiguity across teams, and set a high bar for quality that designers and developers could rely on.
Solution
Architecting the system
We structured the FS Design System as two distinct layers: a set of core libraries and a suite of extension libraries.
Core libraries—Foundations, Components, and Utilities—provided the global building blocks shared across all Financial Services products. These included the design tokens, base UI components, and design utilities that would be used by all teams in FS.
Extension libraries—created to support common customer segments and platforms. Associate, B2B, B2C, and Servicing teams each maintained their own libraries of audience-specific components and patterns, built on top of the core.
Working out in the open
To ensure transparency and foster cross-team collaboration, we explored all proposals in public standalone Figma files. These served as open playgrounds where everyone could see the work in-progress, weigh in on decisions, and test usability—before anything was finalized.
Each file followed a consistent, systematic structure—mirroring our design process from discovery and exploration to final specs—making it easier for contributors to engage, provide feedback, and align around shared outcomes.
Property parity
To bridge the gap between design and development, we established a high level of parity between our Figma components and the coded components in Storybook. Every property in Figma—from variants to responsive behaviors—had a clear, one-to-one match in code.
By aligning APIs, naming conventions, and interactive states, we created a shared language between design and code—dramatically reducing ambiguity, increasing confidence in implementation, improving consistency and velocity across teams.
Meta is a must
I added descriptions and keywords, as metadata, to every style, icon, and component in the library.
This made searching for assets easier for teams to find what they were looking for quickly.
Less guesswork. More flow state.
1,500+ 🍜
noodles served
When Figma released Interactive Components, I added support to every component within a week. This gave product teams a more realistic way to test prototypes—bringing their ideas to life.
Do:
Documentation
We produced comprehensive design documentation alongside each component—covering usage, anatomy, variants, states, formatting, behaviors, dos and don’ts, content guidelines, accessibility, and specs.
This guidance empowered teams to use components correctly and reduced dependency on the core system team for everyday support.
Critical comms
We established a robust communication strategy that included sprint updates in Slack, quarterly newsletters, weekly office hours, and real-time support—often responding in under 15 minutes.
Listening tours, surveys, and demos kept us closely aligned with team needs—building trust, encouraging contributions, and driving the system forward.
Results
Graceful growth
What began as a blank slate grew into a fully-formed design system over the course of 3+ years. Version 1 of the FS Design System had a lasting impact on the division and helped shape the direction of enterprise design system efforts at Capital One.
300+
Design tokens
400+
Icons
40+
Components
4.2k+
Variants
2.5M+
Figma instances
1.2M+
Package installs
73
NPS score
100%
Adoption
A strong first impression for Financial Services
Version 1 of the FS Design System had a lasting impact on the division and helped shape the direction of enterprise design system efforts at Capital One.
Seamlessly migrated 100% of FS designers from Sketch to Figma within 3 months
Consolidated 20+ local libraries into a single, shared design system
Delivered the division’s first set of production-ready Web Components
Earned self-review status for accessibility—recognized as Capital One’s first trusted department
Significantly improved consistency, accessibility, and performance
Achieved 100% adoption across 50+ teams
Built, maintained, and governed 3 core libraries and 4 extension libraries
Enabled dozens of community contributions
Managed a dedicated Slack channel for 280+ designers and developers, centralizing announcements, discussions, and issue resolution
Selected as a coalition leader to help shape Capital One’s enterprise design system
Received the Mark of Distinction Award, becoming the first non-product team to achieve this recognition
Reflection
Memory meltdown
In V1, we leaned heavily on base components in Figma. It made life easier for us as system maintainers—but as the libraries scaled, it created performance and memory issues that slowed teams down.
When we rebuilt for V2, we ditched base components in favor of smarter component properties. The result? We cut down on variants by over 80%—creating a faster, leaner experience for everyone.
Sometimes the best solution for the system isn’t the best for the user. That shift in thinking shaped how we approached V2.
Challenge
A division, divided
As Financial Services scaled, product teams were solving the same problems in isolation—designing from scratch, duplicating work, and producing inconsistent UI that often failed to meet accessibility standards and enterprise brand guidelines.
Designers created siloed libraries that only served individual products. Developers lacked a shared source of truth in code. Meanwhile, the Auto Navigator Library had already demonstrated the power of reusable components—but its impact was limited to a single team.
Then came a turning point: a cybersecurity mandate to move the entire design org from Sketch to Figma. We had just 3–4 months to stand up a new, scalable design system—one that would unify the division and set a new standard for quality, efficiency, and accessibility.
Process
Planning the work.
Working the plan.
After the success of the Auto Navigator Library, I was invited to join the newly formed Design Architecture team as the Design System Lead. At the time, the team consisted of just me, a front-end dev lead, and our Head of Design Architecture—starting scrappy, but nimble enough to move fast.
I spent the first few weeks learning Figma and translating core assets from Sketch. In parallel, I audited the design work across FS to identify shared patterns and opportunities for normalization across products.
I prioritized the most high-impact assets first—establishing design tokens, typography, spacing, and color primitives—and tracked progress in a centralized Google Sheet that doubled as both a naming model and build tracker.
Process makes perfect
What began as a nimble, scrappy initiative quickly matured into a highly structured system for delivering high-quality assets at scale.
Over time, we defined a clear, repeatable process—complete with workflow diagrams, Jira checklists, quality benchmarks, and contribution guidelines. These helped us deliver components that were accessible, scalable, and production-ready.
These principled processes balanced speed with precision, reduced ambiguity across teams, and set a high bar for quality that designers and developers could rely on.
Solution
Architecting the system
We structured the FS Design System as two distinct layers: a set of core libraries and a suite of extension libraries.
Core libraries—Foundations, Components, and Utilities—provided the global building blocks shared across all Financial Services products. These included the design tokens, base UI components, and design utilities that would be used by all teams in FS.
Extension libraries—created to support common customer segments and platforms. Associate, B2B, B2C, and Servicing teams each maintained their own libraries of audience-specific components and patterns, built on top of the core.
Working out in the open
To ensure transparency and foster cross-team collaboration, we explored all proposals in public standalone Figma files. These served as open playgrounds where everyone could see the work in-progress, weigh in on decisions, and test usability—before anything was finalized.
Each file followed a consistent, systematic structure—mirroring our design process from discovery and exploration to final specs—making it easier for contributors to engage, provide feedback, and align around shared outcomes.
Property parity
To bridge the gap between design and development, we established a high level of parity between our Figma components and the coded components in Storybook. Every property in Figma—from variants to responsive behaviors—had a clear, one-to-one match in code.
By aligning APIs, naming conventions, and interactive states, we created a shared language between design and code—dramatically reducing ambiguity, increasing confidence in implementation, improving consistency and velocity across teams.
Meta is a must
I added descriptions and keywords, as metadata, to every style, icon, and component in the library.
This made searching for assets easier for teams to find what they were looking for quickly.
Less guesswork. More flow state.
1,500+ 🍜
noodles served
When Figma released Interactive Components, I added support to every component within a week. This gave product teams a more realistic way to test prototypes—bringing their ideas to life.
Do:
Documentation
We produced comprehensive design documentation alongside each component—covering usage, anatomy, variants, states, formatting, behaviors, dos and don’ts, content guidelines, accessibility, and specs.
This guidance empowered teams to use components correctly and reduced dependency on the core system team for everyday support.
Critical comms
We established a robust communication strategy that included sprint updates in Slack, quarterly newsletters, weekly office hours, and real-time support—often responding in under 15 minutes.
Listening tours, surveys, and demos kept us closely aligned with team needs—building trust, encouraging contributions, and driving the system forward.
Results
Graceful growth
What began as a blank slate grew into a fully-formed design system over the course of 3+ years. Version 1 of the FS Design System had a lasting impact on the division and helped shape the direction of enterprise design system efforts at Capital One.
300+
Design tokens
400+
Icons
40+
Components
4.2k+
Variants
2.5M+
Figma instances
1.2M+
Package installs
73
NPS score
100%
Adoption
A strong first impression for Financial Services
Version 1 of the FS Design System had a lasting impact on the division and helped shape the direction of enterprise design system efforts at Capital One.
Seamlessly migrated 100% of FS designers from Sketch to Figma within 3 months
Consolidated 20+ local libraries into a single, shared design system
Delivered the division’s first set of production-ready Web Components
Earned self-review status for accessibility—recognized as Capital One’s first trusted department
Significantly improved consistency, accessibility, and performance
Achieved 100% adoption across 50+ teams
Built, maintained, and governed 3 core libraries and 4 extension libraries
Enabled dozens of community contributions
Managed a dedicated Slack channel for 280+ designers and developers, centralizing announcements, discussions, and issue resolution
Selected as a coalition leader to help shape Capital One’s enterprise design system
Received the Mark of Distinction Award, becoming the first non-product team to achieve this recognition
Reflection
Memory meltdown
In V1, we leaned heavily on base components in Figma. It made life easier for us as system maintainers—but as the libraries scaled, it created performance and memory issues that slowed teams down.
When we rebuilt for V2, we ditched base components in favor of smarter component properties. The result? We cut down on variants by over 80%—creating a faster, leaner experience for everyone.
Sometimes the best solution for the system isn’t the best for the user. That shift in thinking shaped how we approached V2.
