Global Tokens

1 min read

Design Tokens are parameters that affect the overall UI appearance, 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.

Global Tokens

FastStore uses a default theme called Brandless, which provides structural styles for your components and pages. Please read Brandless's page for further information about the themeable architecture.

Its presets are defined on src/base/tokens.scss in @faststore/ui, and it's separated in these main areas:

Colors
The store palette with all the tones needed.
See more
Typography
A standard scale and basic definitions for your text: font family,weight and sizes.
See more
Spacing
All tokens used for spacings on the store: padding, margins and sizes. It's also used as base for grid tokens.
See more
Grid & Layout
Padding, Container, Gaps and Breakpoints definitions.
See more
Interactive Controls
Tap, States and Sizing definitions.
See more
Refinements
Transition, Borders and Shadow definitions.
See more

Global Tokens.css-17dhml5{min-width:18px;min-height:18px;width:18px;height:18px;}

Global Tokens