Structuring tokens for brand and sub-brand inheritance

WHAT THIS TESTS The interviewer wants to see if you understand tiered design tokens and reference-based inheritance. The goal is overriding the minimum needed per sub-brand while keeping shared values in one place.

A GOOD ANSWER COVERS Describe three tiers. Primitive tokens hold raw values: hex colors, a font stack, spacing scale. Semantic tokens give them meaning and reference primitives, such as color.primary pointing at a brand blue, or font.body pointing at a typeface. Component tokens reference semantics, like button.background pointing at color.primary. The core brand defines all three. Each sub-brand provides a thin override file that only redefines the semantic tokens that differ, here the primary palette and the font families, and inherits everything else through references. Because component tokens reference semantics, a sub-brand's new primary automatically flows into every component without touching component tokens.

COMMON WRONG ANSWERS Copying the entire token set per sub-brand, which immediately drifts and means every core change must be replicated three times. Overriding component tokens directly, which is verbose and misses the inheritance benefit. Flattening everything into one tier so there is nothing to inherit.

LIKELY FOLLOW-UPS How do you handle a sub-brand that needs to override one component but not its semantic token? How do you resolve and build these layered references? How do you prevent circular references?

ONE CONCRETE EXAMPLE Core defines primitive blue.500 = #0A74FF, semantic color.primary = {blue.500}, and component button.bg = {color.primary}. Sub-brand A ships only an override: color.primary = {green.500} and font.body = {Poppins}. Its buttons turn green and its text uses Poppins automatically, while spacing, radii, and every other component token stay inherited from core, so a core spacing change propagates to all brands at once.