multi brand design system
What is a multi-brand design system?
A multi-brand design system is a scalable framework that enables different brands under one mother company to maintain consistency while preserving their unique identity. It starts with a white-labeled design system as the foundation—a universal set of core components, guidelines, and principles.
Why do we need a multi-brand design system?
With multiple brands under one umbrella, a shared system streamlines workflows, reduces duplication, and accelerates development.
You may wonder why the typical mapping (tokenization) is not working. Mapping is particularly challenging as each brand operates within its own design system framework and corporate identity, making alignment complex and resource-intensive.
A multi-brand design system eliminates these barriers by providing a shared foundation that adapts to diverse brand needs while maintaining consistency.
How to build a multi-brand design system?
The first step to getting brands to buy into a multi-brand design system is to demonstrate its practical value and scalability. We started with the most-used design patterns in concept phases as a Proof of Concept  (PoC).
By showcasing how these shared patterns improve workflows, ensure consistency, and accelerate design iterations, we provided a tangible example of the Tariff Card. This hands-on approach helped brands see its potential for larger-scale adoption, making the transition smoother and more compelling.
What are the next steps?
With more teams adopting the UI Block approach, together with the Design System team, we have successfully established a series of UI Blocks that accommodate various design concepts. This ensures design consistency across different feature teams while being implemented within a single app.
Additionally, it reduces the workload for developers, as each UI Block only needs to be implemented once in the codebase, eliminating redundant development efforts.
What can be improved?
While using UI Blocks, we found that to some extend, it lacks flexibility for different brand needs. For example, if one brand left-aligns text, all must follow unless manually adjusted in code, which is inefficient.
Also, when a UI Block contains multiple nested UI Blocks in Figma, it becomes time-consuming for designers to configure.Since not all UI Blocks are built and developed simultaneously, some redundancy naturally occurs over time. To address this, the team conducts regular reviews to streamline UI Blocks and ensure UI block lib remain optimized and up to date
