FS Design System V2
@ Capital One
Summary
Amidst a company-wide brand refresh, my team and I built V2 of the Financial Services Design System (FSDS).
We delivered completely new variables, 40 web components, and experience improvements across the board. I led the design documentation, training, and adoption efforts as we brought a whole new look and system to Capital One’s auto finance division.
Key skills
Design systems
Design documentation
Education and training
Team
Designer (me)
Design lead
Tech lead
Engineer
Timeline
Q3 2024 - Q4 2024
Our task
In early 2024, Capital One’s enterprise brand team unveiled a new refreshed look and personality bringing some modernity, warmth, and rounded corners to Capital One products.
As a design system team, we were on the forefront of helping teams get the building blocks they needed to travel visually from the past to the future. Teams came forward as early adopters, wanting to get their hands on new shapes, colors, and components as soon as possible, and my team was tasked with delivering a functional, updated, modernized design system by the end of the year.
This was not just a refresh, it was an opportunity to make structural changes, bring better consistency and craft, and level-up the design system experience for everyone.
We broke up the monstrous task of redesigning the design system into phases: strategy, foundations, components, and documentation.
01 Strategy and prioritization
Before we touched anything, we took a lot of time to plan out the least disruptive but most productive path to a refreshed system. Working with enterprise brand teams, other internal design systems helped us stay aligned to their vision, and we ultimately landed on a phased approach.
Alongside our tech partners, we began with an audit of our current system, and then began to prioritize the most critical and most used elements using Figma’s library data. There were pivots along the way, but we moved forward with a roadmap in hand, and a very long to-do list.
02 Restructure foundations
We tackled the foundations of the system, the tokens, colors, spacing, typography, iconography, etc. first as it would inform and be consumed by all of the components and remaining assets in the system.
The foundations in V1 were solid, but they felt a little outdated, both visually and structurally. We took the time to dust off our organization and tools and add in what was required for the new visual direction of the brand refresh.
Our path to better foundations
Enable theming and color modes with variables
Condense or expand token set where necessary
Apply brand refresh colors and styles
Align to global design system
Ensure accessibility and contrast for all new colors
Maintain 1:1 connection to code tokens
03 Build and optimize components
With new foundations ready to be consumed, we began to create new components, prioritizing what our teams needed first as they began redesigning their products.
Our path to better components
Use component properties
Link variables in all components
Nest and expose components where useful
Simplify and standardize property names
Add in requested features from users
Fix known bugs from V1
Apply new tokens
Align visually to global design system components
Maintain accessibility for all interactive components
04 Document and share out
Our previous documentation was inconsistent. Some of the components had extremely robust documentation while the earlier ones had none. The documentation was also taking up a large majority of our file memory space in our component libraries and had forced us to break up the library into two.
Our path to better documentation
Add documentation for all components
Move documentation into its own space
Create a documentation site to house all brand refresh info
Create migration and training resources
Record demos for frequently repeated information
Share out with leadership and teams in different forums
The new system
We delivered the alpha state of FS Design System V2 in December 2024, 6 months after we began. It was a rushed version of what we dreamed of, but beautiful and functional nonetheless.
01 Foundations
Our foundations library is incredibly intentional, flexible, and better than ever. We thought twice about every decision, ensuring that we aligned to the enterprise design system while also making it easy to understand and use for designers. The library includes new accessible color tokens, brand themes, type scale and styles, holding shapes, 1000+ redesigned 2px icons, and more.
Variables for everything
Bye bye styles, hello variables. The biggest and most powerful upgrade we made to the foundations was switching to Figma variables. Color, spacing, sizing, borders, and typography all got variable treatment, which ultimately made theming and color modes possible.
Theming and color modes
With variables in place and built into all of our components, color modes and theming were unlocked. We created 3 brand themes: Capital One, Eclipse, and Legacy. We also added 4 color modes: Light, Dark, Wireframe (Light), and Wireframe (Dark).
These themes and modes gave our teams the full flexibility and efficiency they needed when designing for different themes, testing out the transition between V1 and V2, and was a fun and obvious way to see if they were using the new variables correctly throughout their work. Changing the theme with a click and seeing the screens completely transform will just never get old.
Icons and shapes
Our icon library also got a huge lift in number and in look. We added more than 1000 new 2px stroke icons to the library, a long-awaited and tedious upgrade.
Additionally, with the new refresh, there were new ‘holding shapes’ designers could use across their work. We added these in for a quick grab-and-go and to standardize these shapes as much as we could for our teams.
02 Components
V2 components are lighter, better, more versatile, and easier to use all-around. We used component properties, embedded variables, nested components, and took our learnings from V1 to make V2 components lean but powerful. For some components we reduced the variant count by 80%, while still making them more intuitive for designers to use and offering more properties and capabilities.
03 Documentation
Documentation was my personal baby, and we went all out. We tackled two main areas of documentation, the components themselves and the training that had to precede using V2.
The brand refresh was a great opportunity for us to address and write down guidance from the get-go that could spur better usage of the design system, clearer understanding, and ultimately higher quality products overall.
Everyone gets documentation
Every single component was documented with property and variant descriptions, accessibility guidance, do’s and don’ts, and more. Component documentation became easily findable both in Figma and on our brand new documentation site.
Resources that really help
In addition to component documentation, I created training resources for both designers and developers to reference as they onboarded to the new system. It included foundational design system knowledge as well as new guidance specific to the brand refresh; everything a team would need to get started on the right foot.
This was a living resource, updated with new information as it came. It became the basis for our live training workshop, and the link I probably sent around the most as people were asking more and more questions.
How it impacted our teams
Within the first few weeks of soft-launching V2 alpha we had more than 10,000 instances in Figma and were the first local design system within Capital One to release fully refreshed web components. V2 of the FS Design System set the bar across Capital One for the next step in our brand modernization and the next step for design systems. As of December 2024, we are still working to test and improve the components and bring them to a more stable beta and to a full V2 release.
As teams begin adopting, we hope to see better token usage than ever before, cohesiveness and consistency across all experiences, and of course, more rounded corners and muted blues.
Early birds get the worm
Early adopters could begin re-designing their products and crafting their transition strategy before the rest.
Design system love affair
We got to know the teams personally, and they got to know us. Design system engagement was high, and better usage meant better products.
More beautiful products
FSDS V2 was the first local design system in Capital One that allowed product designers to bring the new brand to life in digital products.
Change made simpler
The resources, tools, step-by-steps, and personal advice made big transitions simple and helped teams adopt with confidence.
This was absolutely the hardest thing I or my team ever completed, but the curiosity and the awe and excitement of the teams using it made it mostly worth it.
Praise for the work
“Christine & the team have been instrumental in helping us set and cascade standards for our design system while building a positive culture of collaboration and creativity within our FS community.
Specifically Christine’s training sessions on FSDS V2 reflect that spirit and help us collectively ensure we’re maintaining a high quality bar across our teams in a supportive and clear way.”
-Ashley H, Experience Design Lead
