Mesh’s Design System
Building a cohesive system
Before I joined Mesh, there was just one designer. Then, during a hiring boom, our design team grew to four, and the product team quadrupled in size.
As we scaled, we quickly became a bottleneck—features needed to ship faster than we could design them in Figma. It became clear that this was the perfect time to pause, set a strong foundation, and build a design system to ensure consistency and efficiency moving forward.
Research
What are we even doing?
Before diving in, we wanted to determine the best way to structure our design system. We explored several existing systems for inspiration—like those from Monday, Google, and Atlassian. In the end, we chose to align closely with the MUI (Google) design system since it serves as the foundation for our development team’s framework and library.
Gameplan
If we’re gonna do it, we’re gonna do it right
To build our design system, we first reviewed past Figma files and compared them to the developed versions in Storybook. Using MUI as our foundation, we defined our components and created a spreadsheet to track progress and ensure alignment with the development team.
Implementation
Slow and steady wins the race
We started by building out the “Fundamentals”—the essential building blocks of our design system, following the atom-based model. These core components laid the foundation for more complex design elements to come.
Components
Peace. Love. Components and Variants.
Ongoing evolutions
Evolving and developing
By establishing both current and past assets, we were able to start planning for the future with a clearer vision of the direction we want to evolve.
See approver view to see the design system in action
