Building a multi-brand design system for a highly customizable white-label product

Caterings is a white-label e-commerce platform for diet catering businesses that allows for a lot of customisation in terms of how the storefront looks like. 

As part of designing its native mobile app, I built a design system that supports multiple brands and dark mode, handles different component variants, and stays maintainable for both design and development.

CHALLENGE

How to handle this level of customization without adding complexity?

Each catering business customizes its storefront with its own colors, typography, and component variants — product cards, for example, can appear with photos, with icons, or with neither, depending on the brand.

The system had to absorb very different brand identities while holding consistency, accessibility, and usability steady across light and dark modes. It also had to stay easy for designers to maintain and extend as the product grows.

Each catering business customizes its storefront with its own colors, typography, and component variants — product cards, for example, can appear with photos, with icons, or with neither, depending on the brand.

The system had to absorb very different brand identities while holding consistency, accessibility, and usability steady across light and dark modes. It also had to stay easy for designers to maintain and extend as the product grows.

Each catering business customizes its storefront with its own colors, typography, and component variants — product cards, for example, can appear with photos, with icons, or with neither, depending on the brand.

The system had to absorb very different brand identities while holding consistency, accessibility, and usability steady across light and dark modes. It also had to stay easy for designers to maintain and extend as the product grows.

MY RESPONSIBILITIES

End-to-end design

Variable architecture

Component library

Handoff

Team

1x Designer (me)

2x Developers

MY PROCESS

Building brand diversity on universal foundations

01 Defining the visual foundation

I started by establishing a visual direction that could hold up across very different brands, defining the shared foundations: base colors, typography, spacing, radius, icons.

02 Building the variable architecture

I built two variable collections: primitive and semantic. Primitives store raw values — hex codes and numeric scales. Semantic variables translate those raw values into meaningful UI roles.

Organizing variables by role rather than by component makes changes quicker to apply and keeps the architecture simpler.

03 Building a component library

Using an atomic approach, I built components up from simple building blocks into more complex elements, so that a change to a base element propagates everywhere it's used.

outcome

One design system that makes the multi-brand complexity easier to manage

Rather than creating variables for individual components, I organized the semantic variables around their role in the interface:

  • Text

  • Icon

  • Border

  • Surface (container fills)

The semantic collection is also where the brand themes live, each with a light and a dark mode. This setup lets me switch a full brand identity with a single click: colors, fonts, and images such as logos all swap instantly.

The same semantic roles are what drive theming in the codebase, so design and development speaks the same language.

working with ai

Automating the mundane with Claude Code and Figma MCP

As I designed more and more screens, my variable structure turned out not to be flexible enough in places and needed restructuring. Doing that by hand would have been slow and repetitive, so I delegated this kind of work to Claude Code together with Figma MCP.

I automated the mundane parts: swapping variables inside components, generating component variants such as buttons, and renaming layers in bulk. This way I saved some time for real design challenges.

Previous project

Next project

Previous project

Next project

Previous project

Next project

Thinking I'd be a good fit?

DM me.

hello@malgokruszynska.com

Created by me

Create a free website with Framer, the website builder loved by startups, designers and agencies.