Grid System

The table of grid system sizes

Device Width

≥ 992px

< 992px

< 767px

< 479px

Max Container Width

1200px

100%

100%

100%

Spacing System

Spacing - Desktop

130 px

100 px

130 px

- Paddings Tops for blocks - 130 px
- Inside of Blocks (between headlines and inside a content block) - 100 px
- Paddings Bottom for blocks - 130 px

Spacing - Tablet

100 px

60 px

100 px

- Paddings Tops for blocks - 100 px
- Inside of Blocks (between headlines and inside a content block) - 60 px
- Paddings Bottom for blocks - 100 px

Spacing - Mobile

80 px

60 px

80 px

- Paddings Tops for blocks - 80 px
- Inside of Blocks (between headlines and inside a content block) - 40 px
- Paddings Bottom for blocks - 80 px

Color Palette

Primary

#1c276d

#ff7eae

#213344

Secondary

#ffffff

#e5f33c

#f7f7f7

#eaf7fb

Typography

Headers - Desktop

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Headers - Tablet

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Headers - Mobile

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Body

Paragraph Small

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.

Paragraph

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.

Paragraph Large

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.

Links

Link With Icon

Buttons

Primary Button
Primary Button Pink
Secondary Button
webflow icon
Buy this Template
All Templates
Get Unlimited Webflow Development and Design at fraction of Cost by wCopilot