Tokens
Tokens are the smallest building blocks in a design system. They represent reusable, platform-agnostic values—such as color, typography, spacing, and other stylistic attributes—that can be referenced throughout your product’s codebase and design assets. By abstracting these styles into tokens, you create a single source of truth, ensuring consistency and easier updates across multiple components, platforms, and devices.
Best practices
Use a Systematic Naming Convention
Names should reflect the token’s purpose (e.g., color-brand-primary, font-size-h1).
Keep names consistent to avoid confusion when scaling.
Keep Tokens Atomic
Each token should represent a single, indivisible style value.
Avoid combining multiple values in one token (e.g., “blue-16px-bold”).
Store Tokens in a Centralized Format
Whether using JSON, YAML, or a design tool, maintain a single source of truth.
This helps automate synchronization between design and development.
Leverage Tooling
Use scripts or plugins to convert tokens into platform-specific code (e.g., SCSS variables, Swift constants, or Android XML).
Enables consistent deployment across multiple environments.
Plan for Theming & Overrides
Anticipate scenarios where you might need to override or extend tokens (e.g., different brands, dark mode).
Provide a hierarchical structure (base tokens > theme tokens).
Iterate & Evolve
Treat tokens as living assets. Refine naming, add new tokens, or remove unused ones as your system grows and changes.
Use descriptive naming conventions for tokens (e.g., color-background-primary or spacing-md) to clarify their purpose in the design.
Summary
Tokens are fundamental style definitions that power a design system’s consistency, scalability, and maintainability. By abstracting visual properties—like colors, fonts, and spacing—into discrete, centrally managed tokens, teams can swiftly adapt designs for new themes, devices, or accessibility requirements. A well-structured token system ensures every aspect of your interface remains visually cohesive, easy to update, and aligned with brand standards.
