Company
Invitae
Role
Lead Product Designer
Invite Core Design System
A design system helps teams work faster and stay consistent across products. It makes design and development easier by providing a shared set of tools and guidelines. This improves the user experience, supports the brand, and helps everyone build better products together.
The Challenge
As the design team grew, we noticed that designers were duplicating each other’s work, and developers were repeatedly rebuilding the same components. This led to wasted effort, slower development, and inconsistencies in the product—ultimately impacting the user experience. Both the design and development teams agreed that a design system was needed to help us work more efficiently and stay aligned.
Process
Audit
Collaborated with fellow designers to create a list of core components that would serve as the foundation of the design system.Define Style
Established the company’s color palette, selected a modern and readable typeface for both web and print, and defined a clear type scale for consistent use across products.Collaboration
Partnered with the development team to plan implementation phases for both the website and internal portal. We worked together to develop design tokens and ensured all components met web accessibility standards.Documentation
Worked closely with the development team to document use cases and build guidelines, ensuring other teams had clear expectations for using the components. The development team also created React packages to easily share and implement the components across products.
Learnings & Iterations
Choosing the right font turned out to be one of the trickiest parts of the process. We explored a few strong contenders—Univers, Frutiger, and Inter—for their clarity and readability. After some passionate (but healthy) team debates, we landed on Futura Next. We divided testing across web and print, working with our lead engineer and marketing designer to run different scenarios and catch any potential issues.
During testing, unexpected quirks started to show up. The line height felt off, the question mark looked too stylized, and we ran into problems with ligatures, apostrophes, and spacing—especially for web.
To fix it, we worked directly with the type foundry and invested in custom adjustments. The result: our own version of the font, which we named Futura Allele—a nod to genetics, since an allele is a variant form of a gene.
After initially building the design system in Sketch, our team decided to transition to Figma to take advantage of its more collaborative and flexible features. While I was able to convert some components directly, others needed to be rebuilt due to Figma’s more advanced layout and component structure.
Although the migration required extra time and effort, the switch significantly improved our workflow. Figma offers a better user experience for designers, making it easier and faster for us to collaborate, maintain components, and work more efficiently as a team.
Impact
Having a design system in place made a huge difference across teams. It brought consistency to the user experience, saved time by reducing duplicate work, and gave both designers and developers a shared language to work from. Instead of reinventing components for every project, teams could focus on solving bigger problems. The system also helped unify the brand across products and made onboarding new team members faster and smoother. Overall, it created a more efficient, collaborative, and scalable design process.