ENUK
All work
Meta-case · live demo

Aurum Multibrand

One casino lobby in four brands, light and dark, on one set of components. A working model of the system I build for teams that run more than one brand.

Scope
4 brands × 2 themes · 29 components
Role
Product design · Design system · Token pipeline
Status
Live demo · Public repository
Stack
Figma · Tokens Studio · GitHub · React · CSS variables
Open the live demoHow it is built

Context

White-label and iGaming platforms ship one product under several brands. Each brand wants its own colors, type and shapes; the product team wants one codebase. Aurum Multibrand models that setup: a casino lobby with promos, game tiles, tournaments, a shop and account screens, styled only by tokens. Switch the brand or the theme and the whole interface re-skins without a reload.

Problem

  1. Brand values live in components

    When colors and radii sit inside a button or a card, every new brand means editing every component.

  2. Brands multiply with themes

    Four brands in light and dark are eight combinations. Kept by hand, they drift out of sync.

  3. Design and code drift apart

    Variables in Figma and CSS in the repository are edited separately, and contrast is checked by eye.

Solution

Six token layers. Components ask for a meaning, the theme maps meanings to the brand, and only the brand file holds raw values. Tokens Studio pushes JSON to GitHub, a build script turns it into CSS variables and checks it.

  1. componentsWhat each component asks for: button.primary.bg, chip.selected.bg.548 · 29 components
  2. themeMeanings for light and dark: fill, text, border, surface.73 × 2
  3. typographyText styles shared by every brand.25
  4. mapRamps generated from brand colors: 100 to 900.41
  5. brandThe only per-brand file: colors, fonts, radii, spacing.55 × 4changes per brand
  6. coreRaw scales: dimensions, radii, widths.59
The Brand collection in Figma: one mode per brand, same variable names.
The commit that added Ultra: a new brand file and theme entries. components.json is not touched.

Result

  • 55values in a brand fileThe same keys in every brand. A new brand is a copy of this file with new values.
  • 0changes in components for a new brandComponents reference meanings only. The checker fails the build if one reaches for a raw value.
  • 8brand × theme combinationsFrom one component library and one CSS file, switched by two attributes on the root element.

What I would do differently

I would add automated contrast checks before the second brand, not after the fourth. When the checker arrived, it found that text.accent in the light theme misses WCAG AA in every brand: Aurum 2.13, Nova 1.67, Fiesta 1.42, Ultra 3.03 against the required 4.5. The good news is where the fix lives: one change in the shared theme layer corrects all four brands at once.

Talk about your brandsOpen the live demo