Learn

Semantic Design Tokens

Token aliases let you relate a semantic token to a base token for a specific context or to get a level of abstraction. It helps you communicate the intended purpose of a token independent of the actual/primitive value of the token.
We can think of semantic tokens as Design Decisions on style primitives.
The example below shows how to create semantic tokens that link to different tokens for dark and light themes, where :
  • White and Black are primitive tokens storing actual color values and are fixed for all themes.
  • Background Color and Text Color are semantic tokens.
In the default theme (the light theme in this example), Background Color semantic token is defined as an aliase to White , and Text Color semantic token is an aliase for Black token.
For the dark theme state, instead of changing the actual values of our primitive tokens ( Black and White tokens), we just edit our semantic tokens and switch the aliased tokens. This results in the Background Color semantic token to use the value of Black and Text Color semantic token to use the value of the White color token.
Here is a good article on semantic tokens for further reading :