Design tokens for multi-brand button theming

WHAT THIS TESTS This checks foundational token knowledge and whether you grasp the alias layering that makes theming and multi-brand support clean.

A GOOD ANSWER COVERS 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.

COMMON WRONG ANSWERS 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.

LIKELY FOLLOW-UPS Why not point the Button at a primitive directly? How do you add a third brand? How do dark mode and brands compose?

ONE 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.