Foundations
Spacing
Spacing help designers deliver effective and valuable layouts. Even more, it gives the page a harmonic look. It decides you want them to pay attention to what.
Layout scale
Layout scale is used for arranging components and other UI parts into a full page layout. It has larger increments that are used to control the density of a design.
Token
Name
px
Example
Small
x
8
Medium
1.5 x
12
Large
2 x
16
X-Large
3 x
24
X-Large
4 x
32
X-Large
6 x
48
X-Large
8 x
64
X-Large
12 x
96
X-Large
16 x
128
Implementation example
Product detail page (PDP)
Use well spacing (16-20px), because the user's intention is for exploration.
Search result page (SRP)
Use compact spacing (8-12px), because the user's intention is to choose the product.
Landing page
Use combination of compact spacing (8-12px) and well spacing (16-20px)
Layout scale
Layout scale is used for arranging components and other UI parts into a full page layout. It has larger increments that are used to control the density of a design.
Token
Name
px
Example
Small
x
8
Medium
1.5 x
12
Large
2 x
16
X-Large
3 x
24
X-Large
4 x
32
X-Large
6 x
48
X-Large
8 x
64
X-Large
12 x
96
X-Large
16 x
128
Implementation example
Product detail page (PDP)
Use well spacing (16-20px), because the user's intention is for exploration.
Search result page (SRP)
Use compact spacing (8-12px), because the user's intention is to choose the product.
Landing page
Use combination of compact spacing (8-12px) and well spacing (16-20px)
Layout scale
Layout scale is used for arranging components and other UI parts into a full page layout. It has larger increments that are used to control the density of a design.
Token
Name
px
Example
Small
x
8
Medium
1.5 x
12
Large
2 x
16
X-Large
3 x
24
X-Large
4 x
32
X-Large
6 x
48
X-Large
8 x
64
X-Large
12 x
96
X-Large
16 x
128
Implementation example
Product detail page (PDP)
Use well spacing (16-20px), because the user's intention is for exploration.
Search result page (SRP)
Use compact spacing (8-12px), because the user's intention is to choose the product.
Landing page
Use combination of compact spacing (8-12px) and well spacing (16-20px)
