Style Guide

GRID SYSTEM

THE TABLE OF GRID SYSTEM SIZES

Device Width
992px
< 992px
< 767px
<479px
Max Container Width
1170px
100%
100%
100%

SPACING SYSTEM

SPACING - DESKTOP

spacing tablet
130px
70px
130px

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

SPACING - TABLET

spacing tablet
80px
60px
80px

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

SPACING - MOBILE

spacing mobile
60px
40px
60px

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

COLOR PALETTE

#004ae2

#222222

#f7f7f7

#ffffff

TYPOGRAPHY

HEADERS - DESKTOP

font-family: Poppins;

Heading 1

90px/1.1em;

Heading 2

48px/1.15em;

Heading 3

35px/1.2em;

Heading 4

25px/1.2em;

Heading 5

18px/1.55em;

Heading 6

14px/1.6em;

HEADERS - TABLET

font-family: Poppins;

Heading 1

70px/1.1em;

Heading 2

40px/1.15em;

Heading 3

30px/1.2em;

Heading 4

25px/1.2em;

Heading 5

18px/1.55em;

Heading 6

14px/1.6em;

HEADERS - MOBILE

font-family: Poppins;

Heading 1

40px/1.1em;

Heading 2

30px/1.15em;

Heading 3

26px/1.2em;

Heading 4

20px/1.2em;

Heading 5

16px/1.55em;

Heading 6

13px/1.6em;

BODY - DESKTOP

font-family: Poppins;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl leo, porttitor ut tortor et, efficitur vehicula ipsum.

14px/1.6em;

BODY - TABLET

font-family: Poppins;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl leo, porttitor ut tortor et, efficitur vehicula ipsum.

14px/1.6em;

BODY - MOBILE

font-family: Poppins;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl leo, porttitor ut tortor et, efficitur vehicula ipsum.

14px/1.6em;

LINKS - DESKTOP

14px;

LINKS - TABLET

14px;

LINKS - MOBILE

14px;

ICON SET

NAVIGATION ICONS

SOCIAL ICONS

BUTTONS

font: Poppins 600
14px/1em;
paddings: 19px 45px 19px 30px;
border: 1px solid #004ae2;

font: Poppins 600
14px/1em;
paddings: 22px 30px;
border: 1px solid #004ae2;