Design Token

Design tokens are named values that store the visual design decisions of a product: colors, typography scales, spacing units, border radii, shadow definitions, and similar properties. Rather than hardcoding values like #0057FF or 16px scattered throughout a codebase or design file, a team defines a token once and references it by name everywhere.

The benefit becomes clear when something changes. If the primary brand color shifts, updating a single token propagates the change across the entire product automatically, rather than requiring a search-and-replace through dozens of files. The same logic applies to spacing systems, font sizes, or any visual property that should stay consistent across an interface.

Tokens also serve as the bridge between design tools and code. Figma can define tokens that export directly to CSS custom properties, JavaScript objects, or platform-specific formats for iOS and Android. This means designers and developers reference the same value by the same name, reducing translation errors during handoff. Tools like Style Dictionary by Amazon are commonly used to transform a single source of token definitions into multiple output formats.

Design systems like Material Design and Carbon from IBM publish their tokens publicly. For teams building across web, iOS, and Android simultaneously, tokens are often the most practical way to maintain visual consistency without duplicating effort. The discipline of naming tokens meaningfully -- semantic names like color-button-primary rather than blue-500 -- determines how useful they are when the design evolves.