So how might we design a multi-brand system that not only scales consistently but also empowers cross-functional teams to collaborate effectively and deliver exceptional products with greater speed and clarity?

The Problem

In complex product ecosystems, particularly those involving multiple brands, teams often find themselves entangled in a web of recurring issues that are all too familiar to anyone working in digital design and development. Visual inconsistencies creep in as each product team makes isolated decisions, leading to fragmented user experiences across apps and platforms. Without a shared library of components or reusable assets, work gets duplicated. What’s designed once is rebuilt again and again, wasting time and introducing variation.

The disconnect between design and development adds another layer of friction. Designers operate in Figma, while developers implement interfaces in code, and without a common source of truth, the two perspectives inevitably drift apart. This gap is widened by the lack of a clear structure or consistent naming convention, which slows onboarding and makes it difficult for teams to navigate or repurpose existing work effectively.

Over time, the consequences compound. Design debt begins to build up due to the absence of a systematic way to manage updates, track changes, or align on shared standards. The result? Teams move slower, users experience inconsistency, and businesses bear the cost through extended timelines and rising maintenance overhead.

The Solution

To address these challenges, we took a unified, system-first approach that brings together people, tools, and tokens into one coherent workflow. At the core is a shared design language, established through a structured architecture of tokens that acts as a single source of truth across teams. Figma’s Dev Mode help bridge the gap between design and code, ensuring that what gets prototyped is exactly what gets built. Collaboration between designers and developers is continuous and tightly integrated, from joint pull requests to regular design critiques and shared repositories. Rather than stitching together isolated fixes, we approached the system holistically, designing for consistency, scalability, and long-term maintainability from the ground up.

How We Work: A Look Inside the System

Currently, our design team is developing a multi-brand Design System for a client operating several digital products across different brand identities.

Our goal is to create a single, robust system that:

• — accelerates designers’ workflows,
• — unifies user experience across products,
• — and simplifies life for developers.

At the heart of the system are design tokens. With Figma Variables, we’ve moved from flat lists to semantic hierarchies, including groups, categories, and modes. We maintain a shared light/dark theme, but also define integrated brand-specific modes. This means switching the entire visual identity of an app takes a simple mode toggle, without touching a line of code. Tokens serve as the single source of truth for both universal components and brand-specific ones. This scales beautifully across a product portfolio.
To further support maintainability and reuse, the system is built using Atomic Design principles — allowing us to compose complex interfaces from smaller, modular parts that scale naturally across multiple brands and contexts.

For designers, that means access to component libraries with ready-made variants and clear usage guidelines, speeding up wireframing and reducing errors.

For developers, it means working with the same token structure mapped directly in Figma’s Dev Mode, enabling clear inspection and faster handoff without guesswork or misalignment.

For business, it means brand consistency, faster time-to-market, and lower long-term costs.

Key Enablers: Communication and Structure

Success doesn’t come from tools alone. We emphasize direct, frequent communication: regular design crits, dev syncs, and collaborative pull requests to the token repository.

Our token architecture isn’t dogma. The critical thing is that naming conventions and taxonomy are consistent, intuitive, and project-specific. If a junior team member can find brand-color-primary-600 without asking, the structure is working.

Best practices include:

— a clear changelog,

— semantic versioning, and

— a transparent process for accepting new patterns.

These steps help us control quality and keep everyone aligned.

A Design System is a living organism. After each release, we review components, update tokens, and refine documentation. This continuous evolution keeps us lean and avoids chaotic backtracking.

Accessibility and Innovation

As the design systems landscape evolves, a new wave of tools and methods — including AI-assisted workflows — is beginning to support teams in maintaining consistency and scaling accessibility. While we haven’t applied these solutions directly in our current project, we’re closely observing emerging trends that can complement system-driven design work in the near future.

AI-powered tools are increasingly being used to automate repetitive tasks, generate component variants, and run visual regression tests — reducing manual effort and allowing teams to focus on higher-level design challenges. More importantly, these technologies are starting to make inclusive design more accessible. Features like high-contrast themes, dyslexia-friendly variants, or accessibility modes can now be explored and tested with greater speed and precision. New capabilities such as readability enhancements, dynamic text scaling, and even voice-controlled UI patterns are making it easier to accommodate a wider spectrum of user needs. Particularly for neurodivergent users, patterns that reduce cognitive load — like simplified layouts, minimal animation, or predictable navigation — are gaining attention and can be integrated into future iterations of a design system as accessibility expectations continue to grow.

Conclusion

Design systems, particularly in multi-brand environments, go far beyond being just a set of design tools. They function as strategic infrastructure that underpins how digital products are built, scaled, and maintained. When thoughtfully architected, they not only reduce design and technical debt but also elevate the overall quality and consistency of the user experience. By creating a common language and framework, they strengthen collaboration across disciplines, aligning teams around shared standards and accelerating delivery. Ultimately, a well-functioning design system empowers teams to move with greater clarity and speed, allowing them to ship better products — and in doing so, generate more value for both users and the business.

---

Andrzej Waś

_{Design Lead}