Style guide

Grid system

THE TABLE OF GRID SYSTEM SIZES

Device width

≥1025px
<1024px
<767px
<479px

Container Width

1170px

100%

100%

100%

Spacing system

SPACING - DESKTOP

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

SPACING - TABLET

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

SPACING - MOBILE

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

Color pallete

Primary

#1a1717
#fd8558
#3a0f73

Secondary

#70b446
#999999
linear-gradient
#ffcf6d
#fd8558

TYPOGRAPHY

HEADERS - DESKTOP

font-family: Poppins;

Heading 1

70px/1.22em

Heading 2

50px/1.2em

Heading 3

40px/1.35em

Heading 4

32px/1.3em
Heading 5
18px/1.1em
Heading 6
14px/1.1em

HEADERS - tablet

font-family: Poppins;

Heading 1

48px/1.22em

Heading 2

38px/1.2em

Heading 3

35px/1.35em

Heading 4

28px/1.3em
Heading 5
18px/1.1em
Heading 6
14px/1.1em

HEADERS - mobile

font-family: Poppins;

Heading 1

35px/1.22em

Heading 2

32px/1.2em

Heading 3

26px/1.35em

Heading 4

22px/1.3em
Heading 5
18px/1.1em
Heading 6
14px/1.1em
BODY - DESKTOP
font-family: Poppins;
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Donec nisl leo, porttitor ut tortor et, efficitur
vehicula ipsum.
15px/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.
15px/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.
15px/1.6em
LINKS - DESKTOP
font-family: Poppins;
LINKS - TABLET
font-family: Poppins;
LINKS - MOBILE
font-family: Poppins;

Buttons

font: Poppins 700
16px/1.15em;
paddings: 11px 35px;
background: #fd8558;
border: 2
color: #ffffff;
background (hover): #fd8558;
background: #fd8558;
border: 2
color: #ffffff;
background (hover): #fd8558;