Spacing

Spacing

Spacing ScaleSpacing Padding ClassesSpacing Margin Classes

Spacing Scale

Component and typographic spacing is done in 4 pixel increments. A typical baseline grid is not used in typography. Instead, line heights are specified in 4 px increments, and spacing is measured from the text box's edges.

For components or sections, use the spacing scale. It creates acceptable spatial relationships for detail-level designs by using small increments. This scale is used and applied across all components and sections. By adding the following spacing classes to your components and sections, you can apply spacing to them.
‍
The system has the following accessible space:

Spacing Padding Classes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Spacing Padding All

Space Padding size px

Class Name

Text Sample

Icon Sample

S P 0

space

open_with

S P 2

space

open_with

S P 4

space

open_with

S P 8

space

open_with

S P 12

space

open_with

S P 16

space

open_with

S P 24

space

open_with

S P 32

space

open_with

S P 48

space

open_with

S P 64

space

open_with

S P 128

space

open_with

Space Padding Top and Bottom

Space Padding Top size px

Class Name

Text Sample

Icon Sample

S P T 2

space
stop

S P T 4

space
stop

S P T 8

space
stop

S P T 12

space
stop

S P T 16

space
stop

S P T 24

space
stop

S P T 32

space
stop

S P T 48

space
stop

S P T 64

space
stop

S P T 128

space
stop

Space Padding bottom size px

Class Name

Text Sample

Icon Sample

S P B 2

space
stop

S P B 4

space
stop

S P B 8

space
stop

S P B 12

space
stop

S P B 16

space
stop

S P B 24

space
stop

S P B 32

space
stop

S P B 48

space
stop

S P B 64

space
stop

S P B 128

space
stop

Space Padding Left and Right

Space Padding Top size px

Class Name

Text Sample

S P L 2

space
stop

S P L 4

space
stop

S P L 8

space
stop

S P L 12

space
stop

S P L 16

space
stop

S P L 24

space
stop

S P L 32

space
stop

S P L 48

space
stop

S P L 64

space
stop

S P L 128

space
stop

Space Padding bottom size px

Class Name

Text & Icon Sample

S P R 2

space
stop

S P R 4

space
stop

S P R 8

space
stop

S P R 12

space
stop

S P R 16

space
stop

S P R 24

space
stop

S P R 32

space
stop

S P R 48

space
stop

S P R 64

space
stop

S P R 128

space
stop

Spacing Margin Classes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Space Margin All

Space Padding size px

Class Name

Text Sample

Icon Sample

S M 0

space

open_with

S M 2

space

open_with

S M 4

space

open_with

S M 8

space

open_with

S M 12

space

open_with

S M 16

space

open_with

S M 24

space

open_with

S P 32

space

open_with

S M 48

space

open_with

S M 64

space

open_with

S M 128

space

open_with

Space Margin Top and Bottom

Space Padding Top size px

Class Name

Text Sample

Icon Sample

S M T 2

space

stop

S M T 4

space

stop

S M T 8

space

stop

S M T 12

space

stop

S M T 16

space

stop

S M T 24

space

stop

S M T 32

space
stop

S M T 48

space
stop

S M T 64

space
stop

S M T 128

space
stop

Space Padding bottom size px

Class Name

Text Sample

Icon Sample

S M B 2

space
stop

S M B 4

space

stop

S M B 8

space
stop

S M B 12

space
stop

S M B 16

space
stop

S M B 24

space
stop

S M B 32

space
stop

S M B 48

space
stop

S M B 64

space
stop

S M B 128

space
stop

Space Margin Left and Right

Space Padding Top size px

Class Name

Text Sample

S M L 2

space
stop

S M L 4

space
stop

S M L 8

space
stop

S M L 12

space
stop

S M L 16

space
stop

S M L 24

space
stop

S M L 32

space
stop

S M L 48

space
stop

S M L 64

space
stop

S M L 128

space
stop

Space Padding bottom size px

Class Name

Text & Icon Sample

S M R 2

space
stop

S M R 4

space
stop

S M R 8

space
stop

S M R 12

space
stop

S M R 16

space
stop

S M R 24

space
stop

S M R 32

space
stop

S M R 48

space
stop

S M R 64

space
stop

S M R 128

space
stop