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

What's really being asked

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.

The full answer

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.

The mistakes people make

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.

What usually comes next

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.

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