ROOTS

You can explore the live system on Figma Community and if you’re curious about the behind-the-scenes journey, check out the full case study on Behance

Overview

Every new project used to start the same way building a design system from scratch, recreating components, redefining rules, and trying to keep everything consistent. It worked… but it wasn’t efficient.

That’s when we started thinking:
what if we had one strong foundation that could flex and scale with every project, instead of starting over each time?

This idea evolved into a centralized design system. A shared, living resource that allows our team to move faster, maintain consistency, and focus on what truly matters: crafting meaningful user experiences rather than redoing UI elements for every project.

Project Goals

• Build once, use everywhere: create a reusable system that scales across projects.
• Save time and effort: reduce repetitive setup work so designers can focus on UX.
• Design smarter: allow more time for problem-solving rather than UI setup.
• Collaborate better :establish a shared language for designers and developers alike

Challenges

• Finding the right balance between flexibility and consistency was critical. We needed a system that could grow without becoming restrictive.
• Aligning teams with different workflows required clear communication and iteration.
• Maintaining documentation and version control became as important as designing components themselves.

Through continuous testing, feedback, and collaboration, we shaped a system that works not just in theory, but in everyday design practice.

The Process

Exploring current workflows

Building on our vision for a centralized design system, we started by exploring how our team currently approached design systems for different projects. Through collaborative interviews with designers and developers, we uncovered individual practices, pain points, and expectations.

Atomic design for Roots

We integrated Atomic Design into our system to transform how we manage components. By breaking elements into smaller, reusable building blocks, we created a modular structure that’s flexible, scalable, and easy to maintain. This approach allows our design team to make precise, efficient adjustments while keeping designs consistent across evolving projects.

Building on the insights from our research, we introduced the “Roots Pack”, composed of three key modules: the Design System, Colors, and Prototype Components. The Design System is our custom-built foundation, while Colors and Prototype Components serve as centralized resources to support our workflow. These modules are continuously updated, ensuring they grow alongside our team’s needs.

Available on Figma

After months of testing, iteration, and collaboration, we’re thrilled to announce that Roots is now available for free on the Figma Community! We can’t wait to see how fellow designers use it to create, innovate, and push the boundaries of design.

Roots design system on figma community

Usability testing & iterating

Before the official launch, we put the system through three rounds of testing to evaluate its speed, accessibility, and flexibility. Internal feedback from the design team was overwhelmingly positive, highlighting how well the system addressed the challenges we had identified. These tests confirmed that Roots not only streamlined workflows but also provided the adaptability our projects required.

Impact and Results

With the Roots Design System in place, our studio has seen noticeable improvements in project efficiency, client satisfaction, and team morale. Every project now starts with a solid foundation, ensuring a minimum level of design fidelity even when time is tight. This allows designers to focus more on user experience and problem-solving rather than rebuilding UI elements from scratch.