Design tokens are visual styles decomposed into the smallest values. Each token is connection of a specific name and one value. For example:
- space-300 = 4px
- radius-200 = 8px
- color-action-primary-default = #29616f
So using design tokens instead of hardcoded values can streamline the work of building, maintaining, and scaling products.
Developers work with tokens thanks to SCSS technology and designers use tokens as a values in ↗ Figma styles
Thanks to the design tokens, you can set up Spirit UI according to any brand. For more info, look at How to guide
- If you use token exporters from Supernova, all changes will happen through it
- If you need edit any existing tokens, contact us in the #spirit-design-system_cs_en channel