How Fudo scaled faster with a brand-new design system

From day one, we involved the right people. Designers, engineers and product leads all had a seat at the table. This helped build trust in both the process and the outcome.

Together, we audited the existing experience, prioritised what to tackle first and defined a clear strategy. Our approach balanced collaboration with autonomy: Fudo’s team stayed closely involved, but we had the freedom to move fast and keep momentum.

When we started the project, Fudo’s interface still looked like an old version of Material Design. One of the first challenges was translating that into a modern look and feel that reflected their updated brand.

We didn’t aim to redesign every screen at once. Instead, we used the new system to make high-impact improvements where they mattered most. This helped Fudo adopt the design system quickly, setting a solid foundation for future updates.

The brand palette we inherited was limited and not quite ready for use in a complex product. We expanded it into a flexible, scalable system built for real-world applications.

To make colours behave predictably, we based the palette on perceived luminance. This method creates logical, consistent results — more reliable than traditional approaches to product colour design.

The colour system was built to last: adding new colours or steps to the scale would be simple, keeping the design language adaptable as Fudo continues to grow.

Accessibility was a priority from the start. The original brand colours lacked enough contrast, so we created a colour matrix to test and visualise how different combinations performed.

The matrix made it easy to see which pairings met, exceeded or failed accessibility standards. Thanks to the structured colour logic, everything behaved consistently, no matter the hue.

Colours and tokens were just the beginning. The real craft came in building the component library: a single source of truth that worked seamlessly across web and mobile.

We designed every component from scratch, following best practices to make them easy to use, maintain and scale. With Fudo’s team, we defined clear priorities, balancing scope and complexity for each piece. Once designs were finalised, we produced detailed specs for engineers, who had already been part of the journey from the start.

Documentation often gets overlooked, but for us, it’s what turns a design system into something truly usable. From the start, we treated it as a key part of the process — not an afterthought.

We built clear, practical documentation that covered everything: from implementation details for engineers to usage guidance and examples for designers.

The impact was immediate: fewer bottlenecks, smoother handovers and greater confidence on both sides. Engineers didn’t have to wait for answers, and designers could trust that the final product would stay consistent.