Skip to content

How the system is built

The technical side for people who will maintain it: layers, axes, pipeline and proof in code.

Three layers of tokens

A component asks for a meaning. A meaning points to a primitive. Only primitives hold raw values, so nothing above them ever hardcodes a color.

Component

Reads a meaning. Never a raw value.

button.primary.bg

Semantic

Says what a value is for: text, fill, border.

color.fill.primary

Primitive

The only layer with real colors, sizes and fonts.

color.product1.500

Two axes: brand and mode

Brand and light/dark are independent. Four brands times two modes give eight combinations from the same components. Pick a cell to see that lobby.

LightDark

Components

Component sets in Figma and the properties each one exposes. The same component appears in every brand.

Button set rendered from the demo: primary, secondary and text in five sizes, icon and disabled states

Card set rendered from the demo in Aurum dark: game tiles and tournament cards

Chips rendered from the demo in Nova light: category menu pills, chips in two sizes, badge tones

Button instance properties and the component variables it applies, with values from the demo

The same component markup in four brands, light theme: Aurum, Nova, Fiesta, Ultra

Pipeline

From a design decision to a CSS variable in production, with checks on the way.

Figma

Variables and Token Studio sets.

GitHub

Tokens as JSON in the repository.

Build

Token JSON to CSS custom properties, with checks.

CSS

One file of variables per brand and theme.

Tokens Studio GitHub sync settings for OzerovAndrey/multibrand-design-system and the push that added Ultra (real file stats)

The tokens/ folder in the demo repo, with aurum.json and ultra.json side by side: same keys, different values

Generated CSS variables for Aurum and Nova side by side, and the build-css output: 1039 tokens

Terminal: the demo build and the portfolio token and style checks pass (real output)

Proof in code

Open DevTools on the demo: the brand is an attribute on the root element, and the computed values follow it.

data-brand

The root element

<html data-brand="aurum">

Pick another brand to see what changes.