Skip to content
RED SAGSkills
hardUI/UX Designer interview question

Your company runs three brands on one product platform, each with light and dark themes. How would you structure the design tokens?

What the interviewer wants to hear

  • Layered tokens: primitive, semantic, component
  • Brand and mode as separate dimensions
  • Components reference only semantic tokens
  • Single source of truth synced between Figma and code
  • Governance, naming and contrast checks per theme

Model answer

I would use layers. Primitive tokens hold raw values, each brand having its own palette and type families. Semantic tokens express purpose, like color.surface.default, color.text.muted or color.action.primary, and these are mapped per brand and per mode, so brand and light or dark are separate dimensions rather than six copies. Components reference only semantic tokens, with a few component tokens where a component needs its own decision, such as button radius differing by brand. In Figma, this maps to variable collections with modes; in code, a pipeline like Style Dictionary generates CSS variables and platform files from one source of truth stored in the repo. Strict naming conventions, review of new tokens and automated contrast checks for every brand and mode combination keep it healthy as it grows.

Can you answer it under time pressure?

Take a timed hard round and get scored on every answer.

Start mock interview

More hard UI/UX Designer questions