Design tokens

What are they?

Design tokens are stored values used to apply Delish styles such as color, typography, spacing, or elevation, eliminating the need for hardcoding pixels and hex codes. Our token system allows us to speak a common language and ensure consistent designs across platforms and disciplines. Delish uses two layers of tokens: global and alias.
 

Global tokens

Global tokens are context-agnostic and store raw values, like hex codes for color. They also store information for typography, corner radius and stroke width.
 


 

Alias tokens

These are our second token layer and add semantic meaning to the stored values.

 


 

Alias naming

We name alias tokens in a way that makes their function instantly recognizable. This allows you to quickly understand where and how to apply consistent styles without needing to know the exact values.