Design Tokens

Design tokens are used to store values that helps creating a modular design system. Tokens are primitive values such as colors, spacings, typography settings etc. We use it inplace of hardcoded values.

Our design tokens are just css variables.

Global Tokens

Tokens that are constants that store a value across the application scope

Example. --sf-white

Contextual Tokens

Token that carry has a special meaing in the application

Example. --sf-primary represents the brand's primary color

Component specific tokens

Components also bring their own set of tokens that are helpful for composing their UI. They may contain an excaustive list. Components tokens has no meaning outside its(particular component's) scope

Example. --sf-button-primary

info

You will come across design tokens when we talk about style guide later.