Light and dark, multi-brand: should it be considered from the start or added later?
The question is not whether to build it all at once or later, but whether the token structure allows for flexibility.
You should consider the structure from the start, even if you don't need to build the complete dark interface or each brand immediately. The key is that all color values, sizes, and spacing need to be placed at the base token layer and controlled through the semantic token layer, so later on, changing themes or adding brands does not require reworking components. If you skip the semantic layer and let components read raw colors directly, adding a dark mode or a second brand later is almost equivalent to starting over.
- already aware there will be a dark mode, many sub-brands
- industry of finance or healthcare requiring high contrast
- serving various customer segments
- ensure only one brand per mode (still maintain semantic layers)
This question often arises when a design system project is still in its infancy: should we build both light and dark interfaces and support multiple brands from the start, or just finish the main version first and figure it out later? Sinh Vũ answers directly: you don't need to build everything right away, but the structure must allow for growth from phase one. The difference lies in the semantic token layer.
Three levels of tokens: foundational must-haves
A design system with a solid token structure needs at least three clear layers.
- Raw token (primitive token): stores all raw values, such as a specific blue color, font size 14px, spacing 8px. This layer does not carry contextual meaning.
- Semantic token (semantic token): named according to role, for example "primary background color", "secondary text color", "warning border". This layer points to the raw token and is where themes and branding are controlled.
- Component token: each component only reads semantic tokens, never reads the raw tokens directly.
When this structure holds firm, changing the subject means altering the mapping at the semantic level. Components do not need to know how many subjects are currently in existence.
Set all values at the base token layer, control themes and brands at the semantic layer, core components remain unchanged.
Material Design 3; Nathan Curtis, EightShapes
Dark mode is not color inversion
This misunderstanding leads to many systems having strange dark modes, unreadable text, and brand colors being off. A true dark mode is a separate semantic token set, where each color role points to a different base token value suitable for a dark background.
For example: "primary background color" in light mode refers to a light white value, while in dark mode it refers to a dark gray value, not the mathematical inverse of the light white value. This is why it's necessary to establish layers of meaning from the beginning, even if there are no plans to implement dark mode in the next six months.
For industries with high contrast requirements such as finance or healthcare, it is advisable to check contrast readability in both modes from the foundational design stage, rather than waiting until the new feature launch to discover issues.
Multi-branding: one set of components, many sets of tokens
The most costly mistake Sinh Vũ encounters in hastily built systems is duplicating components for each brand. When a sub-brand is created, the team copies the entire component library and adjusts the colors. From then on, every update must be done twice, then three times.
The correct approach: maintain a core set of shared components, with each brand having its own semantic token set pointing to that brand's original token. When a component is displayed, it only asks, "What is the primary background color?" The answer depends on which semantic token set is being loaded.
Supplement later: Saves time in the initial phase. When expansion is needed, almost every component must be checked and corrected, or the token structure must be rebuilt while the system is already running. The risk of errors is much higher.
When you can defer
Sinh Vũ does not say that everything must be done immediately. Some parts can be left for later stages without affecting the structure.
- You don't need to build the entire dark interface if the product hasn't launched that feature.
- Not necessary to fill out the complete semantic token set for the second brand if that brand doesn't have a specific plan.
- Not necessary to write detailed documentation for each mode right now.
What cannot be postponed: the decision to place semantic layers into the structure or not. This is a one-way decision, and making the wrong choice at this stage will significantly increase the cost of corrections later.
The viewpoint of Sinh Vũ
Sinh Vũ defaults to delivering a three-layer token set that supports both light and dark modes right from Phase 1, adhering to the principle of leaving room in the structure. For multi-brand clients using a shared codebase, the semantic layer is where brands can be separated without disrupting the core components.
If you currently have only one brand and one mode throughout the entire product lifecycle, this is a rare case where you might consider a simpler structure. However, in reality, most growing businesses will need at least one of two: a dark mode or a sub-brand. Leaving room from the start is a safer decision.
Decision checklist
Topic: Light and dark branding: should it be considered from the start or added later?. Sinh Vũ guide, sinhvu.com
Select each item you find appropriate, then print or save as PDF to take with you.
If you have marked most of the signs above, this is the time to discuss in more detail. Sinh Vũ can help you review and propose a direction.
References
Material Design 3, Design tokens overview. Nathan Curtis, Tokens in Design Systems (EightShapes). Color tokens and light/dark guidance in the design system (Bootcamp). Practical experience of Sinh Vũ through multi-brand projects.
Frequently asked questions
If there is currently only one brand and one lighting mode, is it necessary to create a semantic layer?
Yes. Even if there is only one brand and one mode today, the semantic layer still needs to be maintained from the start because the cost of leaving room at this stage is almost zero, while the cost of adding later is very high. When adding a dark mode or a second brand, you only need to map the semantic tokens to the new value set, without needing to modify any components.
Can dark mode be done by automatically inverting colors?
You should not. Automatic color inversion often results in incorrect contrast, making text hard to read and skewing brand colors. A true dark mode is a separate semantic token set pointing to the appropriate original tokens, not a technical inversion. This is even more critical for industries with high contrast requirements, such as finance or healthcare.
Does multi-brand mean having to create multiple sets of components?
No. This is the most costly mistake that Sinh Vũ often encounters in rushed systems. With the correct token structure, you only need a shared core component set, while the brand is differentiated by changing the semantic token value set. Each sub-brand has its own semantic token set pointing to the original token of that brand.