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.”
All
Spacing
Shadow
Color
Typography
Animation
Name
Value
--
anim-ease-in-out
ease-in-out
--
anim-ease-out
ease-out
--
anim-ease-in
ease-in
--
anim-duration-lg
500ms
--
anim-duration-md
300ms
--
anim-duration-sm
100ms
--
shadow-4
box-shadow: 0px 4px 8px 4px rgba(10, 13, 16, 0.12);
--
shadow-3
box-shadow: 0px 3px 6px 3px rgba(10, 13, 16, 0.11);
--
shadow-2
box-shadow: 0px 2px 4px 2px rgba(10, 13, 16, 0.1);
--
shadow-1
box-shadow: 0px 1px 2px 1px rgba(10, 13, 16, 0.09);
--
shadow-0
box-shadow: none;
--
core-10
40px
--
core-9
36px
--
core-8
32px
--
core-7
28px
--
core-6
24px
--
core-5
20px
--
core-4
16px
--
core-3
12px
--
core-2
8px
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/