Design tokens

Design tokens encode product decisions — color roles, spacing, typography, radii, shadows, motion, breakpoints — as reusable named values. Raw tokens store primitives (`blue-500`); semantic tokens express intent (`color-text-primary`, `space-stack-md`).

					:root {
  --color-blue-500: #3b82f6;
  --color-text-primary: var(--color-gray-900);
  --color-accent: var(--color-blue-500);
}
[data-theme="dark"] {
  --color-text-primary: var(--color-gray-100);
}
				

Tokens may ship as CSS variables, JSON for design tools, or platform outputs (iOS, Android). Governance — who adds tokens, deprecation, and aliasing — matters at scale.

On interviews: raw versus semantic tokens, theme support, and integration with CSS variables or build pipelines.

The trade-off is strict token governance versus shipping speed when one-off values bypass the system.

Common pitfalls: naming tokens after hex values; too many one-off tokens hiding inconsistent design.

Checklist:

• Separate raw primitives from semantic roles.
• Document ownership and deprecation.
• Expose runtime variables for theming.
• Audit one-offs that bypass the system.