Tokens
Design tokens are named variables that store and standardize visual design values like colors, spacing and fonts across Basis Design System.
Tokens
Design tokens are named variables that store and standardize visual design values like colors, spacing and fonts across Basis Design System.
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.”
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/
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.”
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/