Tokens

Spacing

Spacing classes provides you set of classes which will help you to build and maintain consistent spacing across components, blocks, sections, etc.

Spacing Scale

Use the spacing scale for components or sections. This scale is applied and used within all components and sections. Spacing available in the system:

  • 2px

  • 4px

  • 8px

  • 12px

  • 16px

  • 24px

  • 32px

  • 48px

  • 64px

  • 120px

Spacing Classes

Spacing classes represented with Stack, Inline, Indent, Inset, Section classes and G Stack, G Inline group classes. Use them to provide proper spacing across components, blocks and sections.

Stack

Stack is a global class which adds bottom margin. Bellow you'll find table of existing stack scale.

Spacing Class
Stack Z
Stack XXS
Stack XS
Stack S
Stack M
Stack L
Stack XL
Stack 2XL
Stack 3XL
Value
0 px    0 px    0 px    0px
0 px    0 px    2 px    0px
0 px    0 px    4 px    0px
0 px    0 px    8 px    0px
0 px    0 px    12 px    0px
0 px    0 px    16 px    0px
0 px    0 px    24 px    0px
0 px    0 px    48 px    0px
0 px    0 px    64 px    0px
Inline

Inline is a global class which adds right margin. Bellow you'll find table of existing inline scale.

Spacing Class
Inline Z
Inline XXS
Inline XS
Inline S
Inline M
Inline L
Inline XL
Inline 2XL
Inline 3XL
Value
0 px    0 px    0 px    0 px
0 px    2 px    0 px    0 px
0 px    4 px    0 px    0 px
0 px    8 px    0 px    0 px
0 px    12 px    0 px    0 px
0 px    16 px    0 px    0 px
0 px    24 px    0 px    0 px
0 px    48 px    0 px    0 px
0 px    64 px    0 px    0 px
Indent

Indent is a global class which adds left margin. Bellow you'll find table of existing indent scale.

Spacing Class
Indent Z
Indent XXS
Indent XS
Indent S
Indent M
Indent L
Indent XL
Indent 2XL
Indent 3XL
Value
0 px    0 px    0 px    0 px
0 px    0 px    0 px    2 px
0 px    0 px    0 px    4 px
0 px    0 px    0 px    8 px
0 px    0 px    0 px    12 px
0 px    0 px    0 px    16 px
0 px    0 px    0 px    24 px
0 px    0 px    0 px    48 px
0 px    0 px    0 px    64 px
Inset

Inset is a global class which adds equal margin around the element. Bellow you'll find table of existing inset scale.

Spacing Class
Inset Z
Inset XXS
Inset XS
Inset S
Inset M
Inset L
Inset XL
Inset 2XL
Inset 3XL
Value
0 px    0 px    0 px    0 px
2 px    2 px    2 px    2 px
4 px    4 px    4 px    4 px
8 px    8 px    8 px    8 px
12 px    12 px    12 px    12 px
16 px    16 px    16 px    16 px
24 px    24 px    24 px    24 px
48 px    48 px    48 px    48 px
64 px    64 px    64 px    64 px
Group spacing

Group spacing such as G Stack and G Inline are global classes and used to add spacing inside of elements groups.  

G Stack

Uses flexbox (vertical direction) to provide space between group of elements.

Spacing Class
G Stack Z
G Stack XXS
G Stack XS
G Stack S
G Stack M
G Stack L
G Stack XL
G Stack 2XL
G Stack 3XL
Value
Row 0px
Row 2 px
Row 4 px
Row 8 px
Row 12 px
Row 16 px
Row 24 px
Row 48 px
Row 64 px
G Inline

Uses flexbox (horizontal direction) to provide space between group of elements.

Spacing Class
G Inline Z
G Inline XXS
G Inline XS
G Inline S
G Inline M
G Inline L
G Inline XL
G Inline 2XL
G Inline 3XL
Value
Column 0 px
Column 2 px
Column 4 px
Column 8 px
Column 12 px
Column 16 px
Column 24 px
Column 48 px
Column 64 px
Section

With section classes you can set top and bottom margins for a whole section.

Spacing Class
Section
Z
Section
XXS
Section
XS
Section
S
Section
M
Section
L
Section
XL
Section
2XL
Section
3XL
Value
0 px    0 px    0 px    0px
24 px    0 px    24 px    0px
32 px    0 px    32 px    0px
48 px    0 px    48 px    0px
64 px    0 px    64 px    0px
80 px    0 px    80 px    0px
96 px    0 px    96 px    0px
120 px    0 px    120 px    0px
168 px    0 px    168 px    0px

Contents

Scale
Stack
Inline
Inset
Indent
G Stack
G Inline
Section