Design Token

A single token represents a design decision abstracted from any specific implementation. The same color-brand-primary token can output a CSS custom property for the web, an XML resource for Android, and a UIColor for iOS.

• Write once, deploy everywhere
• Single source of truth for visual attributes
• Eliminates hard-coded values across codebases

At its core, a token is a key-value pair with optional metadata. The name follows a predictable, hierarchical naming convention like color-background-button-hover, while the value is the raw data—a hex code, a rem unit, or a cubic-bezier curve.

• Name: Semantic path describing intent, not appearance
• Value: The raw design attribute (e.g., #1A1A1A, 16px)
• Type: Categorizes the token (color, dimension, font, etc.)

Tokens can reference other tokens, creating a dependency graph of design decisions. A semantic token like color-text-interactive can alias a base token like color-blue-500. Changing the base value cascades the update everywhere the alias is used.

• Base tokens define the raw palette or scale
• Semantic tokens map base values to intent
• Component tokens apply semantics to specific UI elements

A build-time transformation engine consumes a token JSON file and generates platform-specific output files. Tools like Style Dictionary by Amazon parse the token schema, apply transforms (e.g., converting px to rem), and format output for web, iOS, Android, and more.

• Transforms: Convert values (px → rem, hex → rgba)
• Formats: Define output templates (CSS variables, Swift, XML)
• Platforms: Specify target directories and file types

The W3C Design Tokens Community Group is standardizing the token file format to ensure interoperability between tools. The emerging spec defines a JSON-based schema with explicit $type, $value, and $description properties, enabling tokens to be shared across Figma, Style Dictionary, and other ecosystems without vendor lock-in.

• Standardized $type property (color, dimension, duration, etc.)
• Composite tokens for grouped values like typography
• Theming via $extensions for tool-specific metadata

Tokens enable systematic theming by defining a single set of semantic tokens that resolve to different base values depending on context. A color-background-surface token resolves to #FFFFFF in light mode and #1A1A1A in dark mode, without changing any component code.

• Theme sets: Collections of base token overrides
• Context switching: Media queries or user preferences trigger theme changes
• Multi-brand support: Tokens can encode entire brand identities

A comprehensive collection of reusable components, guided by clear standards and design tokens, that enables an organization to build digital products with consistency and efficiency at scale. A design system consumes tokens as its single source of truth for visual attributes.

• Encapsulates UI components, patterns, and documentation
• Tokens bridge the gap between design decisions in Figma and code in production
• Enables brand consistency across multiple products and platforms

An open-source build system by Amazon that takes design tokens defined in JSON or YAML and transforms them into platform-specific output formats. It is the most common tool for implementing a token pipeline.

• Transforms a single token source into iOS, Android, CSS, and JS variables
• Supports custom transforms and formats for proprietary platforms
• Enables automated propagation of design changes across all codebases

The process of converting a raw design token value into a format consumable by a specific platform. A single base color like #0055FF may be transformed into an iOS UIColor, an Android XML resource, and a CSS custom property.

• Handles unit conversion (e.g., rem to dp)
• Applies math operations like dark mode color inversion
• Resolves alias chains where one token references another

A software design paradigm that decomposes a user interface into a collection of independent, reusable, and self-contained components. Each component consumes design tokens for its visual styling rather than hard-coded values.

• A Button component references color.primary.500 instead of #0055FF
• Changing a token value propagates instantly to every component instance
• Enables theming by swapping token sets at runtime

A back-end-only content management system that stores and delivers structured content via an API. When integrated with a design token pipeline, a headless CMS can allow non-developers to manage token values—such as brand colors or seasonal themes—without touching code.

• Decouples content editing from the presentation layer
• Tokens become structured content types managed through the CMS UI
• Enables marketing teams to run visual A/B tests by swapping token sets

A standardized semantic vocabulary of tags added to HTML to help search engines understand the meaning and relationships of information on a web page. While distinct from design tokens, both concepts rely on a single source of structured truth to ensure consistency across distributed systems.

• Uses JSON-LD format to define entities and their properties
• Parallels token philosophy: define once, propagate everywhere
• Both require rigorous schema enforcement to prevent drift