Describe a robust architecture for implementing theming using design tokens

WHAT THIS TESTS: This question evaluates whether you can architect a separation of concerns between visual identity and UI implementation. The interviewer wants to see that you understand design tokens as an abstraction layer rather than just variables, and that you know how to make theme switching performant at runtime in a production application. They are looking for familiarity with token taxonomy, build-time transformation, and runtime delivery mechanisms.

A GOOD ANSWER COVERS: First, describe a three-tier token architecture. Tier 1 contains raw primitives like color-brand-green or border-radius-large. Tier 2 provides semantic mapping such as theme-color-primary-background or theme-border-radius. Tier 3 binds those semantics to specific components like button-primary-background or card-border-radius. This insulates components from raw values. Second, explain build-time token management using a tool like Style Dictionary to generate platform-specific outputs from JSON source files. Third, address runtime performance by emitting CSS custom properties from the tokens so the browser can swap themes instantly via a class or data attribute on the HTML root element without React re-renders or JavaScript style recalculation. Fourth, discuss theme composition where core tokens are shared and brand, sub-brand, or white-label themes are layered as overrides, preventing duplication and enabling per-customer configurations.

COMMON WRONG ANSWERS: A major red flag is suggesting Sass or LESS variables alone for runtime theming because they compile to static values and require rebuilding stylesheets to change themes. Another mistake is putting hex codes directly in component files rather than referencing tokens. Proposing that every component subscribes to a theme context and recalculates styles in JavaScript is also wrong because it destroys performance by forcing layout thrashing across the tree. Finally, suggesting a single flat token file shows lack of experience with scaling across multiple brands or platforms.

LIKELY FOLLOW-UPS: The interviewer may ask how you would handle theme switching without a flash of unstyled content on server-rendered applications. They might probe how to support high-contrast or accessibility modes within the same architecture. Another common follow-up is how you would version and distribute tokens across micro-frontends or native mobile apps. You should also be ready to discuss how designers consume these tokens in Figma or Sketch.

ONE CONCRETE EXAMPLE: Imagine a banking white-label platform. The core theme defines spacing and elevation. The base brand theme maps Tier 1 colors to Tier 2 semantic names like action-primary. A specific bank white-label theme overrides only Tier 1 color values and a few Tier 2 mappings. At build time, Style Dictionary generates CSS custom properties for each theme. At runtime, the app injects the correct theme stylesheet or toggles a data-theme attribute. The result is a single component library that renders Chase branding for one route and Wells Fargo for another with no component code changes and zero runtime JavaScript style overhead.

Source: bradfrost.com