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; }