How does white-label theming work in Orvain UI?
Orvain UI is built so that colour, radius, spacing and type resolve from design tokens, not from values written into components, which means a rebrand is one change to the token values and the same components can serve several brands without being forked.
By the Orvain team. Orvain UI is made by Oussema Ajmi, founder. Published October 4, 2026, updated October 4, 2026.
What is white-label theming?#
White-label theming means a product can be re-branded without changing its components, usually by swapping design token values, so one codebase serves several brands. It is what agencies, multi-brand companies and products sold under a customer's name need from a design system.
How are Orvain's design tokens organised?#
In three tiers, and references only point downward, one step at a time.
- Primitives: the raw material, such as the palette, the type scale, the spacing steps and the radii, named for what they are.
- Semantic tokens: roles rather than appearances, such as surface, ink, muted ink, accent, border and danger. Each role points at a primitive.
- Component tokens: the few values a single component needs, pointing at a semantic token.
A component that reaches past the semantic tier and grabs a palette value directly would not follow a rebrand, which is why the rule matters.
Why do semantic names matter?#
A token called danger keeps its meaning when the brand's error colour changes from red to orange, whereas a token called red becomes wrong. The same argument decides dark mode: a role such as surface can point at a light value in one theme and a dark one in another, and nothing that reads it has to know.
What does a rebrand involve?#
Changing token values. Colour is the visible part, but radii change the character of an interface at least as much, the type scale decides whether it reads as dense or generous, and the spacing scale makes two brands built from identical components feel like different products. Orvain's configuration is meant to own all four, so none of them stays hard-coded.
Can one product carry several brands?#
Yes. Tokens resolve through CSS custom properties, which are declared at a scope and inherited by everything inside it. Scope them to a subtree instead of the whole document and one section of a page can carry a different brand. That is what a white-label product needs.
Does theming cost performance?#
Not at runtime. Because the theme resolves through the browser's own custom-property resolution, Orvain ships zero runtime CSS for theming. The theme is not computed in JavaScript on every render.
How do the tokens appear in Figma?#
The Figma library carries 130+ design tokens as variables, with the same names the code uses, so a designer changing a brand colour in Figma is changing the token a developer will read.
Questions#
Does white-label theming need JavaScript?
No. Tokens resolve through CSS custom properties, which the browser handles itself.
Is the theming configuration available today?
The Figma library, with its design tokens, is available now. The code library and its single configuration file are still being built, so this describes how theming is designed to work rather than something you can install today.
Is theming only about colour?
No. Colour, radius, spacing and type are all tokens, because radii, type and spacing change the character of a brand as much as its palette does.
Related#
- White-label tokens from one config file: the engineering write-up behind this page.
- Colour foundations: every ramp, with the token behind each value.
- Typography foundations: the type scale and what each step is for.
- Orvain UI for SaaS teams: multi-brand and white-label products.
- Glossary: design tokens, white-label theming and related terms.