Grid System

The table of grid system sizes

Device Width

≥ 992px

< 992px

< 767px

< 479px

Max Container Width

1400px

100%

100%

100%

Spacing System

Spacing - Desktop

illustration

120 px

70 px

120 px

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

Spacing - Tablet

illustration

80 px

50 px

80 px

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

Spacing - Mobile

illustration

60 px

40 px

60 px

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

Color Palette

Primary

#48C397

#F9FAFB

#101828

#4C556C

Secondary

#ffffff

#1D2939

#475467

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

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

List

  • List item
  • List item
  • List item
  • List item

Quote

Pellentesque non cursus leo, eu vestibulum ipsum. Aliquam in elit lorem. Aliquam vulputate velit a dignissim mattis. Mauris ac semper nisi, vitae gravida tortor. Maecenas vestibulum massa a ultricies.

Buttons

Primary Button

Secondary Button