What is a design system's 'tokens' and how are they used?

• A. Tokens refer to runtime data objects.
• B. Tokens are design variables (colors, typography, spacing) applied consistently across components.
• C. Tokens are only used to store user input values.
• D. Tokens define backend API endpoints.

Answer: (B)

Design tokens are named design variables that store the visual decisions of a design system—colors, typography scales, spacing, borders, shadows, and other styling values—so components can reference a single source of truth rather than hard-coded numbers. This makes styling consistent across all parts of the interface and across platforms. When a token is updated, every place that uses that token updates accordingly, enabling easy global theming and design refinements without touching individual components. Tokens help translate design intent into code by mapping to platform-specific values (like CSS variables or native resource files) while keeping the design language coherent, scalable, and accessible. They cover more than just colors; typography, spacing, radii, and motion values are typically tokenized to enforce uniformity across the system. The concept is not about runtime data, user input values, or API endpoints, which lie outside the design system’s styling decisions.