Spacing

Spacing

Colors

Spacing

Rounding and Elevation

Spacing Values

Margins

Desktop

48

Tablet

32

Phone

16

Max Width

1280

Vertical Padding

192

96 on top and bottom

192

96 on top and bottom

128

64 on top and bottom

Spacing Scale

4px

(16 x 0.25)

8px

(16 x 0.5)

12px

(16 x 0.75)

16px

(16 x 1)

24px

(16 x 1.5)

32px

(16 x 2)

48px

(16 x 3)

64px

(16 x 4)

96px

(16 x 6)

128px

(16 x 8)

192px

(16 x 12)

256px

(16 x 16)

384px

(16 x 24)

512px

(16 x 32)

640px

(16 x 48)

768px

(16 x 64)

Build your next site with Blocs

Never start from scratch again. Launch your site from start to finish in 10 minutes, not 10 days.

Get Blocs

A desktop breakpoint of a hero section with centred heading, text and buttons with a full width image
A component control panel of a tooltip component with various settings, such as the variant, text control, a shortcut toggle, a shortcut text input, and a dropdown for the direction of the caret

Build your next site with Blocs

Never start from scratch again. Launch your site from start to finish in 10 minutes, not 10 days.

Get Blocs

A desktop breakpoint of a hero section with centred heading, text and buttons with a full width image
A component control panel of a tooltip component with various settings, such as the variant, text control, a shortcut toggle, a shortcut text input, and a dropdown for the direction of the caret

Build your next site with Blocs

Never start from scratch again. Launch your site from start to finish in 10 minutes, not 10 days.

Get Blocs

A desktop breakpoint of a hero section with centred heading, text and buttons with a full width image