Building Vo: A Design System for Voyance
How we created a cohesive design language that improved development efficiency and strengthened brand identity.
The Beginning: A Design System Was Needed
When I joined Voyance as a product designer in September 2020, the company had no design system. Designers worked in silos, making independent decisions about typography, colors, buttons, and spacing. The result? An inconsistent user experience across our products.
The only thing tying our interfaces together was the company logo—and even that varied in size and placement across different screens. Beyond branding concerns, this lack of cohesion was a nightmare for engineering. Each new component required custom development, adding unnecessary complexity and slowing down our ability to ship.
It was clear we needed a system. So, the Head of Design and I set out to build one.
Vo 1.0: The First Attempt
We named our design system Vo, short for Voyance. Over the next few months, we built Vo 1.0—a library of reusable components designed to unify our interfaces and streamline development. Working closely with frontend engineers, we established a shared codebase to reduce redundancy and improve consistency.
The impact was immediate:
Faster development cycles – Engineers no longer had to rebuild UI elements from scratch.
Design efficiency – Instead of reinventing components, designers could now focus on solving real problems.
Brand alignment – Our products finally looked like they belonged to the same company.
But Vo 1.0 was far from perfect. It was our first attempt, and we made critical mistakes.
Why Vo 2.0?
Months after launching Vo 1.0, our Head of Design left, and I stepped into the role. As I worked alongside an Associate Product Designer to refine the system, two major issues became clear:
We had not involved engineers early enough. Instead of designing with real-world constraints in mind, we handed them a set of components and expected them to implement them. This resulted in elements that weren't practical for development.
We had overlooked marketing and brand design. Our choices didn't always align with the company's external communication, creating inconsistencies between product and marketing materials.
It was time for Vo 2.0—a more collaborative, scalable, and thoughtful approach to our design system.
The Research: Learning From Our Mistakes
To ensure Vo 2.0 truly worked for everyone, we conducted interviews with:
Frontend engineers – to understand technical constraints and avoid redundant components.
Brand designers – to align product and marketing visuals.
Product managers – to ensure our system supported business goals.
Marketing managers – to maintain consistency in external-facing assets.
Key findings:
Inconsistencies remained – Colors, typography, grids, and components weren't fully unified, damaging user trust.
Bloat was a problem – We had built too many components that weren't being used, resulting in an unnecessarily heavy CSS file.
With these insights, we set clear goals for Vo 2.0:
Create a structured, guided way to build products.
Improve efficiency for designers and developers.
Strengthen brand consistency to build user trust.
Establish continuity for future hires.
Front-end team
Too many redundant components. CSS files load slower because of this redundancy.
Brand designers
Lack of consistency with brand materials. Images and illustration are not consistent with the brand style.
Product managers
Slow development due to lack of reusable components. Testing and validating ideas are not happening quickly enough.
Marketing managers
Copies are difficult to understand. The brand and marketing tone can be better for the website.
The Process: Rebuilding Vo From the Ground Up
We approached Vo 2.0 with atomic design principles, breaking components down into five levels:
Atomic Design Hierarchy
Atoms
+Basic UI elements (buttons, text fields, icons).
Molecules
+Groups of atoms forming reusable components (form fields, dropdowns).
Organisms
+More complex structures combining molecules (modals, cards).
Templates
+Page-level layouts defining structure.
Pages
+Fully realized interfaces using templates.
UI Audit & Inventory
To ensure nothing was overlooked, we conducted a thorough UI audit, dividing into two teams:
Team 1: Audited the existing design system.
Team 2: Cataloged all patterns and components in use across our products.
This process revealed inefficiencies, redundant elements, and opportunities for refinement.
Tooling & Collaboration
We used Figma as our central design tool, leveraging its library system to maintain consistency. Notion helped us manage tasks, track progress, and collaborate across our distributed team.
Key Improvements in Vo 2.0
A Smarter Color System
Our previous system had too many colors—designers often used multiple, slightly different shades of blue interchangeably. We streamlined our palette, reducing variations from 9 to 5, ensuring better contrast and accessibility (following WCAG guidelines).
Color Tokens
Primary (Blue)
900
#0B2980
700
#0F369E
500 (Base)
#1343C7
CTAs, Focus
300
#4B73E0
Hover
100
#D6E0FF
Active State
Dark
900 (Base)
#0E0E2C
Headers
700
#1F1F3D
500
#2D2D4A
300
#4A4A68
Body Copy
Background
#F9F9F9
Success
900
#0A8C6A
700
#0FB782
500 (Base)
#31D0AA
Valid Fields
300
#6DDFC1
100
#E6F9F4
Success Bg
Danger
900
#8B1D1D
700
#B42424
500 (Base)
#DC2626
Error States
300
#EF4444
100
#FEE2E2
Error Bg
Warning
900
#854D0E
700
#B45309
500 (Base)
#F59E0B
Warnings
300
#FBBF24
100
#FEF3C7
Warning Bg
Color Accessibility Improvements
Previous Blue: #2E6AE7
Barely meets AA standards for large text only
Improved Blue: #1343C7
Exceeds AAA standards for all text sizes
Interactive Example
Old Blue on White
This text uses the old primary color. It may be difficult to read for some users, especially those with visual impairments.
White on Old Blue
White text on the old blue background. While more readable than the reverse, it still doesn't meet optimal accessibility standards.
New Blue on White
This text uses the new primary color. The higher contrast makes it more readable for all users, including those with visual impairments.
White on New Blue
White text on the new blue background. The improved contrast ratio meets AAA standards, making it highly accessible.
Typography Upgrade
We switched from Proxima Nova to Aeonik Pro, which offers better readability at various sizes and improved support for multiple languages. The new typeface also has more consistent spacing and better-defined weights, making it more versatile across different UI components.
Typography Comparison
Proxima Nova
Previous typeface
Light (300)
The quick brown fox jumps over the lazy dog
Regular (400)
The quick brown fox jumps over the lazy dog
Medium (500)
The quick brown fox jumps over the lazy dog
Bold (700)
The quick brown fox jumps over the lazy dog
Aeonik Pro
New typeface
Light (300)
The quick brown fox jumps over the lazy dog
Regular (400)
The quick brown fox jumps over the lazy dog
Medium (500)
The quick brown fox jumps over the lazy dog
Bold (700)
The quick brown fox jumps over the lazy dog
Interactive Size Comparison
Heading Sizes
Proxima Nova
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Aeonik Pro
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Body Text
Proxima Nova
Previous typeface
Light (300)
The quick brown fox jumps over the lazy dog
Regular (400)
The quick brown fox jumps over the lazy dog
Medium (500)
The quick brown fox jumps over the lazy dog
Bold (700)
The quick brown fox jumps over the lazy dog
Aeonik Pro
New typeface
Light (300)
The quick brown fox jumps over the lazy dog
Regular (400)
The quick brown fox jumps over the lazy dog
Medium (500)
The quick brown fox jumps over the lazy dog
Bold (700)
The quick brown fox jumps over the lazy dog
Interactive Size Comparison
Heading Sizes
Proxima Nova
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Aeonik Pro
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Body Text
Proxima Nova
Body text in Proxima Nova at 16px (base). This typeface was used in our previous design system. While it served us well, we found that it lacked some of the refinement and versatility needed for our growing product suite.
Small text in Proxima Nova at 14px. At smaller sizes, Proxima Nova started to lose some clarity, especially in complex UI components with limited space.
Aeonik Pro
Body text in Aeonik Pro at 16px (base). This modern typeface brings improved readability and a more contemporary feel to our interfaces. Its clean lines and balanced proportions work well across all our products.
Small text in Aeonik Pro at 14px. Even at smaller sizes, Aeonik Pro maintains excellent legibility, making it ideal for dense information displays and compact UI elements.
Simplified Buttons
We redesigned our button system to be more consistent and accessible. The new buttons feature clearer states, better contrast ratios, and a more cohesive visual language across different types.
Interactive Button Examples
Primary Buttons
Secondary Buttons
Danger Buttons
Icon-only Buttons
Grid and Spacing
We implemented a 24-column grid for our dashboards, allowing for flexible layouts. Spacing followed an 8px scale, ensuring more predictable and responsive designs.
Interactive Grid System
24-Column Grid
Try resizing your browser window to see how the grid responds. On mobile, elements stack vertically.
8px Spacing Scale
8px
16px
24px
32px
40px
Spacing in Components
This container has 16px (2×8px) padding, creating comfortable space around content
Iconography
We developed a cohesive icon system with consistent stroke weights and sizes. All icons follow an 8px grid, ensuring they scale predictably across different contexts.
Results & Impact
The launch of Vo 2.0 transformed our product development process in several key ways:
Faster Development
Development time for new features decreased by 40% as designers and developers could reuse established patterns rather than creating custom solutions.
Improved Consistency
User testing showed a 35% improvement in task completion rates due to more consistent interfaces across our product suite.
Better Accessibility
Our WCAG compliance score improved from 78% to 96%, making our products more accessible to users with disabilities.
What's Next?
Design systems are living entities—they require ongoing care. Since Voyance is still growing, the team behind Vo 2.0 will continue managing it until we can establish a dedicated design systems team.
Future plans include:
Expanding our component library with more specialized elements for data visualization and complex forms.
Hiring a full-time illustrator to introduce a cohesive illustration system that complements our UI components.
Creating a contribution model that allows teams across the organization to propose and implement improvements to the system.
Lessons Learned
Building Vo 2.0 taught us several valuable lessons about design systems:
Collaboration is key. Involving developers early in the process led to more technically feasible components.
Documentation matters. Clear guidelines and examples significantly improved adoption rates.
Start small, iterate often. Beginning with core components allowed us to establish patterns before tackling more complex elements.
Vo 2.0 continues to evolve as we gather feedback and adapt to new requirements, but the foundation we built has proven robust and flexible enough to support our growing product ecosystem.