When I joined the UX team at Kargo, there wasn’t a formal Design System in place. As our team expanded and our product offerings evolved, it became clear that a scalable solution was essential. This project showcases the initiative I led to create our Figma Design System, work in close partnership with engineering, and roll out the system across our product suite.
V1 Theme
This was the original theme our development team had built by customizing an outdated set of MUI/React components. Knowledge of the system was limited to just a few developers, and no corresponding Figma design system existed. As a result, our team had to manually customize each component for every use case. Recognizing both the business value and the impact on our products, we saw that investing in a design system would significantly streamline workflows across both UX and Development teams.
V2 Theme
This phase marked the beginning of true collaboration within our team as we integrated approved marketing color palettes and fonts into the system. Initially, we considered building fully custom components to reflect these visual updates, but we quickly recognized the time investment required. We also encountered inconsistencies between design and development when layering custom styles over MUI-based components in both Figma and our codebase. As a result, we reevaluated our approach, licensed MUI’s v5 Figma Library, and began exploring Figma variables and design tokens—paving the way for our new direction, outlined below.
MUI v5 Design System Upgrade + New Theme
The MUI v5 upgrade was a collaborative achievement between our design and development teams. We started with MUI v5’s base Figma library and components, then tailored them using Figma variables. Once our customizations were complete, we generated design tokens and handed them off to engineering for implementation—laying the foundation for a future-proof system that supports ongoing updates. We were proud of the results: our products now offer a more modern look and feel while maintaining consistent interactions and user experiences. Read on for a detailed breakdown of the system.
We adopted MUI v5’s default type scale but customized it by applying our brand-approved font, Poppins within Figma's Text Styles panel.
We created and tested our palette by inputting our brand-approved primary color into MUI’s palette generator, ensuring it met accessible contrast standards.
Next, we entered these values into Figma’s Variables panel, allowing our primary palette to reference the correct colors through a semantic token naming structure.
We adjusted the border radius values in Figma’s Variables panel to give our components a softer, more approachable look with rounded corners instead of sharp edges.
These visual style customizations shaped the overall look and feel of our new MUI v5 components.
With stakeholder approval of the new visual style, we published the updated component and icon libraries across our Figma workspace, ensuring all team members could easily access and use them in their project files.
To prepare our component codebase for the new style tokens, engineers first had to upgrade the existing components from MUI v4 to v5 and remove the legacy style overrides applied on top of them. Once that cleanup was complete, we were able to begin implementing the new design tokens. I helped coordinate timelines and planning efforts based on our updated token implementation strategy.
After the team was ready to implement our new tokens, we used Material UI’s Figma Plugin to generate a token file based on our custom Figma variables.
Composer Ad Builder
Composer was the first product to receive the upgraded components. We used its UI as a testing ground to demonstrate the value of the update to other engineering teams before expanding it to additional products.
Fabrik CMS for Publishers
We then collaborated with the Fabrik engineering team to guide them in using our new system and component library, successfully upgrading their UI together.
Audience Builder Platform
The Audience Builder was a newly launched platform that began after our design system was established. We successfully encouraged the team to adopt the new system and components for building the front end.