Global Tokens
Design tokens are parameters that affect all UI look 'n' feel and they are the main configuration file of a Theme. Component-specific tokens often inherit from global tokens but are named specifically to apply those tokens in component development.
Its presets are defined on src/styles/global/tokens.scss
and it's separated in these main areas:
![](https://vtexhelp.vtexassets.com/assets/docs/src/colors___038effcf345acf3d037bc63ed8671455.png)
Colors
The store palette with all the tones needed.
![](https://vtexhelp.vtexassets.com/assets/docs/src/typography___318fbc78202402728a2113e63b47241f.png)
Typography
A standard scale and basic definitions for your text: font family
,weight
and sizes
.
![](https://vtexhelp.vtexassets.com/assets/docs/src/spacing___ca1d02b0bcc238811347eddc66a807ad.png)
Spacing
All tokens used for spacings on the store: padding
, margins
and sizes
. It's also used as base for grid tokens.
![](https://vtexhelp.vtexassets.com/assets/docs/src/grid___6dfb4949712be94273bc119b7945babf.png)
Grid & Layout
Padding
, Container
, Gaps
and Breakpoints
definitions.
![](https://vtexhelp.vtexassets.com/assets/docs/src/controls___a8302bd539d61653e60cb0aacd1c18e7.png)
Interactive Controls
Tap
, States
and Sizing
definitions.
![](https://vtexhelp.vtexassets.com/assets/docs/src/refinements___ca4c7814b2771e84601f4a6d457612fd.png)
Refinements
Transition
, Borders
and Shadow
definitions.