Scaling with Purpose: Building a Multi-Brand Design System for Growth

In previous internal design systems, both the UX team and our brand partners often felt constrained. The systems were rigid. Built with good intentions, but not with scalability or flexibility in mind. As brand needs evolved, the system couldn’t keep up. Customization became the norm, leading to bloated style libraries, inconsistent UI, and duplicated efforts across teams.

One major inefficiency was building separate systems for each brand, even though they all shared the same platform. Any update, like a change to a button or typography, had to be made in multiple places. This fragmentation created friction, slowed us down, and introduced risk. It was clear: we needed a unified, scalable system that could flex with brand needs and evolve over time.

With the release of Figma typography variables in 2024, I saw a turning point. This feature, along with component properties and nested variants, opened the door to a smarter, more modular approach. I began by auditing past systems to identify what truly needed to be a component, what could be simplified, and where we were over-engineering.

I noticed a pattern: many atomic components were rebuilt multiple times just to fit into different organisms. This led to inconsistencies, if one atom was updated, others didn’t always follow. I rethought our atomic structure:

• What truly needs to be an atom or molecule?
• Where can we use component properties instead of duplicating components?
• How can we build flexible atoms that can be reused across organisms without breaking?

This system became an opportunity to rethink everything—not just what we were building, but how we were building it. I leaned into resources like UI Collective’s design system videos on YouTube, which offered helpful frameworks, but I still needed to tailor the system to our internal brand ecosystem.

The result was a system grounded in flexibility, scalability, and clarity—designed to empower teams, not limit them.

The foundation of this system was built on a principle that had been missing from our previous design systems: simplicity first, scalability second.

Rather than over-engineering from the start, I focused on creating a lean, modular architecture that could evolve as brand needs and platform capabilities grew. The goal was to reduce friction for designers and developers while ensuring the system could flex to support eight brands, each with their own voice, tone, and visual identity.

Key Architectural Decisions:

• Token-Driven Design: Leveraging Figma’s latest variable features (string, color, number) to create a token-based system that allowed for brand-level theming without duplicating components.
• Component Hierarchy: Established a clear structure of atoms, molecules, and organisms; but only where it made sense. I avoided unnecessary nesting and instead used component properties to introduce flexibility without redundancy.
• Brand-Agnostic Core: Built a neutral core library of components that could be skinned per brand using color tokens, typography styles, and color and number variables, ensuring consistency in UX while allowing for visual differentiation.
• Interaction & Animation Layer: Integrated micro-interactions and motion patterns directly into components using Figma’s interactive features, ensuring that animations were consistent, reusable, and accessible.
• Documentation-First Approach: Every component was documented inline and in a shared system file, making it easy for engineers, brand designers, and merchandisers to understand usage, variants, and constraints.

As the system evolved, so did its file size. While I was building this system solo, I was in constant collaboration with our six other UX team members. They leaned on me for guidance as they worked within their existing systems, and I leaned on them for insights into what was and wasn’t working across brands.

At the same time, a smaller group of three of us began exploring how to build a similar system for our “big three” brands. During this iteration, it became clear that housing UI styling, variables, and all system components in a single file was creating performance issues. The file was becoming slow, bloated, and difficult to manage.

We took a step back and audited the system together. What emerged was a clear and logical division of elements that would allow us to scale without sacrificing speed or clarity:

• UI + Annotations Kit: Combined foundational UI styling (typography, color, spacing) with our global annotations components—used by UX and engineering to communicate intent and behavior.
• Design System Library: Contained all shared, brand-agnostic components—atoms, molecules, and organisms—built for flexibility and reuse.
• Brand Kit: A dedicated space for CMS-specific components and brand styling, including unique elements like email signup modals and homepage hero layouts.

This modular breakup not only improved performance but also made the system easier to maintain, onboard, and evolve. Each library had a clear purpose and updates could be made without disrupting the entire ecosystem.