Design tokens
This page gives a thorough overview of what design tokens are, why we need them, and how TDS implemented the concept.
What are design tokens
Design tokens are the small values that constructs and determines the visual design system. It connects the usage and the styles. Most cmmonly, it consists of elements like spacing, color, and typography.
What design tokens do we use
In short, we use semantic tokens. There are many ways to name a token and there are different abstraction levels. The closer the token name is to the usage, the more sustainalbe the system is. See Why do we use design token section for details.
Typography token
Our typography tokens are mapped to the use cases. Each use case has a defined weight, font, font size, weight, and line-height.
Color token
Our color tokens are semantic and indicates the usage. It’s divided into 5 big categories: text&icon, background, border, general UI, and data vitz.
Space token
Our space tokens are 8-based. It has a maximum of 1/4 division of the unit to allow flexibility.
Why do we use design token
Scalability
Design tokens make it easier to track and style choices and changes across the platforms, because tokens are reusable and usage-driven.
Sustainability
Design token makes maintanance easier, especially when there is a change.
Efficiency
Design token informs the semantic usage of the color itself. It improves the clarity and reduces the requirement on remembering the color and usage mapping on how to apply colors.
How do we use design tokens
Figma
Please use the Terra Figma library. Each color or typography has token labelled in them.
The categories in the Figma library reflect the construction of the tokens.
Code
Using Tailwind by default is strongly encouraged. Please refer to Tailwind page for details.
However, when custom CSS is needed, the tokens can be used like below.
.myClass { padding-left: $spacing-1; }