⚠️ After March 18, 2024, the FastStore documentation will be migrated to the Developer Portal. For more information, access the official release note.

Overview

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.

Global Tokens

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

Its presets are defined on src/base/tokens.scss in @faststore/ui (opens in a new tab) 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
OverviewColors