design-token

Design tokens are structured variables for color, spacing, and typography that store visual design attributes. By applying a unified token taxonomy, teams map global properties to component tokens, ensuring visual consistency and reducing drift across cross-platform products.

Structure design tokens using a tiered taxonomy of global, alias, and component tokens. Apply the {category}-{property}-{variant}-{state} naming pattern across categories like color and spacing to support scalable theming and cross-project reuse.

Use the {category}-{property}-{variant}-{state} pattern for component token naming conventions. This taxonomy maps alias tokens to specific UI elements, enabling clear theming and consistent cross-platform mapping for properties like elevation and motion.

Yes, you can map global color tokens to component tokens to enforce cohesive theming across different projects. This alias token strategy centralizes visual attributes, allowing cross-project reuse and reducing rework in design systems.

A complete design token taxonomy should cover color, spacing, typography, elevation, border, and motion. Defining tokens across these categories establishes a unified design language and fulfills functional requirements for cross-platform mapping.

Alias tokens provide an abstraction layer between global tokens and component tokens, enabling scalable theming. They allow you to redirect design system values across projects without altering the underlying global token structure or component code.