Design tokens are crucial elements in a design system that define properties such as colors, spacing, and typography. They act as a single source of truth, ensuring consistency between design and code, and facilitating efficient management and scaling of the design system.
There are two main categories of design tokens: core tokens and semantic tokens.
Core design tokens are the fundamental, low-level options in a token set, like a range of color values. They don't carry contextual meaning.
Semantic design tokens, on the other hand, are higher-level tokens that provide context on usage, such as associating a color with a specific role like 'success-subtle.' These tokens can adapt to different system color modes, maintaining consistency across various themes.