Skip to main content

Design Tokens

Design tokens are the smallest, reusable building blocks of your design system. They store design decisions in a way that ensures consistency across platforms and products. These tokens represent visual style properties like color, typography, spacing, and more, encoded in a format that can be used in code and design tools alike.

Why are design tokens important?​

  • Consistency: Tokens ensure a uniform visual identity across all interfaces and platforms.
  • Scalability: Changes made to a token are automatically reflected across the system.
  • Efficiency: Developers and designers work faster with a shared source of truth for style properties.
  • Platform-Agnostic: Tokens can be exported into various formats (e.g., CSS variables, JSON, SCSS) for integration into any technology stack.

Base Tokens​

Base tokens define raw values, such as colors, dimension units, or font sizes. They are the foundational values that do not imply specific context or usage.

$cdsbt-dimension-16

Semantic Tokens​

Semantic tokens build on base tokens to define contextual usage. They are tied to specific components or design intentions, making them more meaningful within the system.

$cds-elevation-medium

Best Practices​

  • Avoid Hardcoding: Always use tokens instead of static values.
  • Stay Consistent: Use existing tokens wherever possible instead of creating new ones.
  • Document Changes: When updating tokens, ensure changes are documented and communicated to the team.