Style Guide

GRID SYSTEM

THE TABLE OF GRID SYSTEM SIZE

Device Width

≥ 992px

< 992px

< 767px

< 479px

Container Width

1170px

100%

100%

100%

SPACING SYSTEM

SPACING - DESKTOP

Spacing System

60 px

130 px

130 px

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

SPACING - TABLET

Spacing System

100 px

100 px

60 px

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

SPACING - MOBILE

Spacing System

60 px

60 px

40 px

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

COLOR PALETTE

PRIMARY

#e9204f

#ff8a00

#00ffa8

SECONDARY

#000000

#0e0e0e

#ff8a00

#ffffff

TYPOGRAPHY

HEADERS - DESKTOP

font-family: Montserrat;

Heading 1

60px/72px

Heading 2

45px/54px

Heading 3

34px/40px

Heading 4

27px/32px

Heading 5

23px/30px

Heading 6

20px/25px

HEADERS - TABLET

font-family: Montserrat;

Heading 1

45px/54px

Heading 2

40px/48px

Heading 3

34px/40px

Heading 4

27px/32px

Heading 5

23px/30px

Heading 6

20px/25px

HEADERS - MOBILE

font-family: Montserrat;

Heading 1

35px/42px

Heading 2

30px/36px

Heading 3

28px/33px

Heading 4

25px/30px

Heading 5

23px/30px

Heading 6

20px/25px

BODY- DESKTOP

font-family: Montserrat;

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

15px/26px

BODY - TABLET

font-family: Montserrat;

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

15px/26px

BODY - MOBILE

font-family: Montserrat;

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

15px/26px

LINKS- DESKTOP

font-family: Montserrat;

Text Link

15px/26px

LINKS - TABLET

font-family: Montserrat;

Text Link

15px/26px

LINKS - MOBILE

font-family: Montserrat;

Text Link

15px/26px

BUTTONS

Dimensions

font: Montserrat 800
16px/28px
paddings: 13.5px 34px

Primary Button

background: transparent;
color: #ffffff;
background(hover): #e9204f;

Light Button

background: #ffffff;
color: #000000;
background(hover):
transparent;
color(hover): #ffffff;

Light Button

background: transparent;
color: #ffffff;
border: 2px solid #e9204f;
border(hover):
2px solid #ffffff;