Design tokens for multi-brand button theming
token fundamentals and tiered theming.
tokens as named design decisions, primitive-versus-semantic layers, per-brand themes mapping semantic to primitive.
hardcoding hex values per brand instead of a shared semantic token.
What's really being asked
This checks foundational token knowledge and whether you grasp the alias layering that makes theming and multi-brand support clean.
The full answer
Design tokens are named, platform-agnostic design decisions stored as data, for example a color or spacing value with a meaningful name, generated into CSS variables, JS objects, or native formats from one source. Use a tiered structure. Primitive or base tokens hold raw values like blue-500 equals a specific hex and green-500 equals another. Semantic or alias tokens express intent, such as color-action-primary, and point at a primitive. The Button never references a raw value or even a primitive; it references the semantic token color-action-primary for its background. Theming then becomes swapping which primitive each semantic token maps to. Brand A's theme sets color-action-primary to blue-500; Brand B's theme sets it to green-500. The same Button code renders blue for Brand A and green for Brand B simply by loading a different theme, with no component changes.
The mistakes people make
Defining tokens as just variables with no semantic layer. Hardcoding hex per brand. Referencing primitives directly in the component, which couples it to a palette. Forgetting tokens are cross-platform.
What usually comes next
Why not point the Button at a primitive directly? How do you add a third brand? How do dark mode and brands compose?
A concrete example
The Button uses background color of color-action-primary. The Brand A theme maps color-action-primary to blue-500; the Brand B theme maps it to green-500. Loading Brand A's CSS variables paints the button blue; loading Brand B's paints it green, all from identical component code.
Interview question
Why should the Button reference a semantic token like color-action-primary rather than a primitive token like blue-500 directly?
- a.It removes the need for any primitive tokens
- b.Semantic references let each brand remap the intent to its own color without changing the componentCorrect
- c.Semantic tokens render faster at runtime
- d.Primitive tokens cannot be used in CSS variables
Why? this is the answer
Referencing the semantic token decouples the component from any specific color, so a brand theme can remap the intent to blue or green without touching component code. Primitives still exist underneath; the indirection is what enables theming.
Just read this? Test yourself on what you have been reading.
Read the original → designtokens.org
- #design-tokens
- #theming
- #multi-brand
- #semantic-tokens
- #fundamentals
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on design-tokens — each one lists the topics its interview covers.
See open roles