Benefits
Consistency
Design tokens help maintain visual consistency across various the various experiences in Basis.¹
Scalability
Tokens allow us to abstract design decisions into reusable variables and apply consistent styles without duplicating effort. ²
Efficiency
Tokens make it easier to update designs programmatically, reducing manual updates and risk of inconsistency. ²
Basics
A token holds a raw value and is assigned a context-independent name. For instance, the hex color value #0A0D10 is stored as “charcoal-grey.” The name “charcoal-grey” doesn’t specify its intended usage, allowing it to be reused in various contexts.
Styles
Styles can combine multiple tokens to create a more intricate set of design decisions. These styles have “semantic” names, which clearly indicate their intended usage, such as “type-body-regular-large.”
All
Spacing
Shadow
Color
Typography
Animation
Additional Reading
Design tokens for dummies https://uxdesign.cc/design-tokens-for-dummies-8acebf010d71
What are design tokens? https://www.uxpin.com/studio/blog/what-are-design-tokens/