Spacing

Reference scale for the construction and positioning of the UI elements on an interface.

Spacing Scale

The spacing scale is based on 8px, defining the elements dimensions and distances using multilples of 8.
An exception of this scale is the smaller size, 4px, to separate elements that should be intrinsically closer by their natural relationship.

CSS Val

None

CSS Val

Base

CSS Val

XXL

Uniform Spacing

Uniform spacing is applied to all sides of an element. Margin and Padding share the same scale with their respective classes.

Example

Size

Padding Class

Margin Class

CSS Variable

CSS Val

.padding-none

.margin-none

--space-none

CSS Val

.padding-xs

.margin-xs

--space-xs

CSS Val

.padding-s

.margin-s

--space-s

CSS Val

.padding-base

.margin-base

--space-base

CSS Val

.padding-m

.margin-m

--space-m

CSS Val

.padding-l

.margin-l

--space-l

CSS Val

.padding-xl

.margin-xl

--space-xl

CSS Val

.padding-xxl

.margin-xxl

--space-xxl

Directional Spacing

Directional spacing is applied to an individual side of an element. Margin and Padding share the same scale with their respective classes.

Top

Right

Bottom

Left

Vertical

Horizontal

Example

Size

Padding Class

Margin Class

CSS Variable

CSS Val

.padding-top-none

.margin-top-none

--space-none

CSS Val

.padding-top-xs

.margin-top-xs

--space-xs

CSS Val

.padding-top-s

.margin-top-s

--space-s

CSS Val

.padding-top-base

.margin-top-base

--space-base

CSS Val

.padding-top-m

.margin-top-m

--space-m

CSS Val

.padding-top-l

.margin-top-l

--space-l

CSS Val

.padding-top-xl

.margin-top-xl

--space-xl

CSS Val

.padding-top-xxl

.margin-top-xxl

--space-xxl

Example

Size

Padding Class

Margin Class

CSS Variable

CSS Val

.padding-right-none

.margin-right-none

--space-none

CSS Val

.padding-right-xs

.margin-right-xs

--space-xs

CSS Val

.padding-right-s

.margin-right-s

--space-s

CSS Val

.padding-right-base

.margin-right-base

--space-base

CSS Val

.padding-right-m

.margin-right-m

--space-m

CSS Val

.padding-right-l

.margin-right-l

--space-l

CSS Val

.padding-right-xl

.margin-right-xl

--space-xl

CSS Val

.padding-right-xxl

.margin-right-xxl

--space-xxl

Example

Size

Padding Class

Margin Class

CSS Variable

CSS Val

.padding-bottom-none

.margin-bottom-none

--space-none

CSS Val

.padding-bottom-xs

.margin-bottom-xs

--space-xs

CSS Val

.padding-bottom-s

.margin-bottom-s

--space-s

CSS Val

.padding-bottom-base

.margin-bottom-base

--space-base

CSS Val

.padding-bottom-m

.margin-bottom-m

--space-m

CSS Val

.padding-bottom-l

.margin-bottom-l

--space-l

CSS Val

.padding-bottom-xl

.margin-bottom-xl

--space-xl

CSS Val

.padding-bottom-xxl

.margin-bottom-xxl

--space-xxl

Example

Size

Padding Class

Margin Class

CSS Variable

CSS Val

.padding-left-none

.margin-left-none

--space-none

CSS Val

.padding-left-xs

.margin-left-xs

--space-xs

CSS Val

.padding-left-s

.margin-left-s

--space-s

CSS Val

.padding-left-base

.margin-left-base

--space-base

CSS Val

.padding-left-m

.margin-left-m

--space-m

CSS Val

.padding-left-l

.margin-left-l

--space-l

CSS Val

.padding-left-xl

.margin-left-xl

--space-xl

CSS Val

.padding-left-xxl

.margin-left-xxl

--space-xxl