Design tokens and multi-brand theming · Build
A new brand or a dark theme is a new set of token values
Components take every color and size from tokens, so their code stays the same for each brand. One library of about 100 components serves 30+ brands.
EngagementHourly · remote
Hours9–18 CET · 4 h overlap
StackDesign tokens · Figma · JSON
Proof2 case studies
The service in 4 parts
01 · Who it’s for
You sell your product under other companies’ brands, or you need a light and a dark theme without maintaining two of everything.
02 · What we’ve built
- A white-label product for construction companies, sold under more than thirty brands, each with its own colors, logos and imagery. About a hundred components take all of that from tokens that were exported from Figma to JSON and generated into SCSS. One developer built the library in two months.Case study 02 →
- In our cross-platform design system, a theme token becomes a CSS variable on the web and a value the native resolver fills in on the phone. Each color is defined once for every platform.Case study 01 →
- On one page built three ways for comparison, a brand color change meant editing 58 places in plain HTML and one token in the design system version, which applied it on all three platforms.Blog post →
03 · How we work
01 · TOKEN NAMES IN COMPONENTSNo component has a color or a size of its own. It asks for a token by name, and each brand decides the values behind those names.
02 · SPACING AND SIZES TOOWe put spacing and sizes into tokens along with colors. A wrong color gets noticed the same day, while inconsistent spacing can go unseen for months. In the hand-written styled-components version of the same comparison page, colors used variables but 196 pixel values were typed in by hand.
03 · ONE VERSIONED PACKAGETokens and components ship as one versioned, documented package that every product installs, so a brand changes in one place. The thirty-brand library had custom-built documentation, which became one more thing to maintain. Today we would use a standard tool.
04 · Stack
Design tokensFigmaJSONSCSSCSS variablesTypeScriptnpm packages
Proof
Where we’ve done this before
Case study 02 · Platforms~100 / 30+A white-label product for construction companies, sold under more than thirty brands, each with its own colors, logos and imagery. About a hundred components take all of that from tokens that were exported from Figma to JSON and generated into SCSS. One developer built the library in two months.Read the case study →Case study 01 · Platforms74 / 678In our cross-platform design system, a theme token becomes a CSS variable on the web and a value the native resolver fills in on the phone. Each color is defined once for every platform.Read the case study →WritingA half-built design system made our page bigger than plain HTMLOn one page built three ways for comparison, a brand color change meant editing 58 places in plain HTML and one token in the design system version, which applied it on all three platforms.Read the post →
FAQ
Questions about this service
A new brand is a new set of token values for its colors, type and imagery, and the component code doesn’t change. That is how one library stayed maintainable across more than thirty brands.
Not necessarily. We built the thirty-brand library to work without any particular framework because two different products used it. Tying it to one framework would have meant implementing the same design a second time for the other product.
Yes, if no color is written directly into the components. Our own marketing page, rebuilt on semantic tokens, worked in light and dark without extra work, while the original version had its colors hard-coded and existed only in dark.
They can. In 2022 the thirty-brand library’s tokens were exported from Figma into JSON. Our current system gets them through an MCP server automatically, as the Figma to code page describes.
Next step
Describe the problem and we’ll come back with three options.
The first call takes 30 minutes, and you’re under no obligation.