Reusable and scalable design system

Anonymized

One shared design system for a multi-product enterprise B2B SaaS platform.

Design system foundations: colour palettes, typography and button states

Problem

An enterprise B2B SaaS platform with several product lines (web app and native desktop app) on one shared codebase. Each team customized the component library in its own way, which led to inconsistent UI and a trail of small bugs as the product scaled. The platform needed one shared, practical design system that engineers could adopt right away within their existing workflow.

Design decisions

Instead of rebuilding from scratch, the system was built on the existing technical foundation (atomic design integrated with MUI) to lower the barrier to adoption. A translation table maps components from design language to code, so design and engineering speak the same language; tokens map straight into the theme; each component is defined once, with every state and one shared API. When the product is rebuilt, the design system updates in sync.

Results

Teams no longer rebuild components on their own, and the UI stays consistent as the number of product lines grows. A dashboard built with engineering measures design system usage every month, turning improvement from gut feeling into evidence. Multiple squads ship more consistently and faster on a released enterprise product.