What is a design token versus a CSS or Sass variable?

WHAT THIS TESTS: This question tests whether you understand the architectural boundary between design decisions and platform implementation. Interviewers want to know if you view tokens as a cross-platform interoperability standard rather than a web-only convenience layer. The distinction matters because senior engineers must decide when to introduce token pipelines versus relying on native theming.

A GOOD ANSWER COVERS: First, define design tokens as vendor-neutral representations of design decisions maintained in a standardized format. Mention that the W3C Design Tokens Community Group specifies a format for encoding colors, typography, spacing, and themes so tools like Figma and Style Dictionary can share a single source of truth. Second, contrast CSS custom properties which are runtime web values scoped to the browser cascade, and Sass variables which are compile-time abstractions that vanish in the output CSS. Third, emphasize that tokens generate platform-specific deliverables for iOS, Android, web, and Flutter from one file, whereas CSS and Sass are web-only. Fourth, note advanced token features like aliases, inheritance, and multi-brand theming that exceed what simple preprocessor variables offer.

COMMON WRONG ANSWERS: A red flag is saying tokens are just variables with semantic names. Another mistake is claiming Sass variables and tokens solve the same problem because both use names; this ignores the cross-platform delivery pipeline. Confusing tokens with CSS custom properties is also weak because it misses the design-to-code workflow and tool interoperability that the W3C specification enables.

LIKELY FOLLOW-UPS: The interviewer may ask how you would migrate an existing Sass-based theme to a token architecture, or how to handle token versioning across native mobile and web releases. They might also probe performance by asking whether runtime CSS variables or build-time token resolution is preferable for theme switching.

ONE CONCRETE EXAMPLE: Imagine a multi-brand system supporting light and dark modes. A token file defines color-background-primary as an alias to color-core-blue-500 in brand A and color-core-green-500 in brand B, with a dark-mode override to the 700 shade. This single token file feeds Style Dictionary to emit Swift constants, Android XML, and CSS custom properties. A Sass variable cannot produce Swift or Android output, and a CSS variable cannot encode the design-tool semantics or cross-brand aliases.