What are design tokens and why standardize them?

WHAT THIS TESTS: This question probes whether you understand design tokens as a cross-functional infrastructure layer, not just a naming convention for CSS values. Interviewers want to see that you grasp standardization, multi-platform distribution, and the contract between design tools and production code.

A GOOD ANSWER COVERS: First, define design tokens as platform-agnostic representations of design decisions such as color, typography, spacing, and motion. Second, explain the W3C Design Tokens Community Group specification which reached its first stable version in October 2025 and provides a vendor-neutral format for sharing these decisions across tools and platforms. Third, describe the technical benefits including cross-platform code generation for iOS, Android, web, and Flutter from a single source of truth, support for modern color spaces like Display P3 and Oklch, and rich relationships through aliasing and inheritance that reduce maintenance overhead. Fourth, articulate the design-to-engineering bridge by noting that tokens act as an API contract, allowing designers to update values in Figma or Penpot while engineering pipelines through tools like Style Dictionary or Tokens Studio automatically regenerate platform-specific outputs, eliminating manual translation and reducing drift.

COMMON WRONG ANSWERS: Reducing design tokens to CSS custom properties or Sass variables without mentioning interoperability or the translation layer. Claiming they are only for web. Ignoring the W3C standard and instead describing a single company's proprietary format. Overlooking theming, multi-brand support, or the importance of aliasing which leads to duplicated token files and maintenance nightmares.

LIKELY FOLLOW-UPS: How would you structure tokens for a multi-brand system with light and dark modes? What is your migration strategy from a legacy Sass variable setup to a DTCG-compliant token pipeline? How do you handle token naming conventions at scale across hundreds of components? What tooling would you choose to sync tokens between Figma and your component library?

ONE CONCRETE EXAMPLE: A design system team maintains a color palette across web, iOS, and Android. Instead of hardcoding hex values in CSS, Swift, and XML, they define a core color token in the W3C DTCG format. They alias semantic tokens such as background-primary to reference the core token, and then map theme tokens for dark mode without duplicating files. When the brand updates its primary blue, the designer changes the core token in Tokens Studio. Style Dictionary resolves the aliases and outputs CSS custom properties, Swift UIColor extensions, and Android XML resources in the same build step. The team ships the update across all three platforms in one pull request with zero manual recoding.