Style Guide

Grid System

The table of grid system sizes

Device Width

≥ 992px

< 922px

< 767px

<479px

Container Width

1170px

100%

Spacing System

Spacing - Desktop

120 px

55 px

120 px

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

Spacing - Tablet

75 px

55 px

75 px

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

Spacing - Mobile

50 px

35 px

50
px

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

Color Palette

Primary

#141733

#ff8a00

#bec0cd

Secondary

#000000

#8e8f9a

#ffffff

Typography

Headers - Desktop

Heading 1

font-family: Muli;
font-size: 90px;
font-weight: 800;
line-height: 1.07em;

Heading 2

font-family: Muli;
font-size: 45px;
font-weight: 800;
line-height: 1.1em;

Heading 3

font-family: Muli;
font-size: 35px;
font-weight: 800;
line-height: 1.2em;

Heading 4

font-family: Muli;
font-size: 27px;
font-weight: 800;
line-height: 1.2em;

Heading 5

font-family: Muli;
font-size: 20px;
font-weight: 800;
line-height: 1.2em;

Heading 6

font-family: Muli;
font-size: 16px;
font-weight: 800;
line-height: 1.5em;

Headers - Tablet

Heading 1

font-family: Muli;
font-size: 65px;
font-weight: 800;
line-height: 1.07em;

Heading 2

font-family: Muli;
font-size: 36px;
font-weight: 800;
line-height: 1.1em;

Heading 3

font-family: Muli;
font-size: 26px;
font-weight: 800;
line-height: 1.2em;

Heading 4

font-family: Muli;
font-size: 24px;
font-weight: 800;
line-height: 1.2em;

Heading 5

font-family: Muli;
font-size: 20px;
font-weight: 800;
line-height: 1.2em;

Heading 6

font-family: Muli;
font-size: 16px;
font-weight: 800;
line-height: 1.5em;

Headers - Mobile

Heading 1

font-family: Muli;
font-size: 45px;
font-weight: 800;
line-height: 1.07em;

Heading 2

font-family: Muli;
font-size: 32px;
font-weight: 800;
line-height: 1.1em;

Heading 3

font-family: Muli;
font-size: 26px;
font-weight: 800;
line-height: 1.2em;

Heading 4

font-family: Muli;
font-size: 24px;
font-weight: 800;
line-height: 1.2em;

Heading 5

font-family: Muli;
font-size: 20px;
font-weight: 800;
line-height: 1.2em;

Heading 6

font-family: Muli;
font-size: 16px;
font-weight: 800;
line-height: 1.5em;

Body

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.

font-family: Muli;
font-size: 16px;
font-weight: 400;
line-height: 1.6em;

Links

Lorem ipsum dolor sit amet

font-family: Muli;
font-size: 16px;
font-weight: 400;
line-height: 1.2em;
color: #8e8f9a;

Lorem ipsum dolor sit amet

font-family: Muli;
font-size: 16px;
font-weight: 400;
line-height: 1.2em;
color:#8e8f9a;

Buttons

Get started

font-family: Muli;
font-size: 17.5px;
font-weight: 800;
line-height: 1.2em;
color: 141733;
padding: 20px 40px;
background-color: transparent

Get started

font-family: Muli;
font-size: 17.5px;
font-weight: 800;
line-height: 1.2em;
color: #ffffff;
padding: 20px 40px;
background-color: transparent

font-family: Muli;
font-size: 17.5px;
font-weight: 800;
line-height: 1.2em;
color: #ffffff;
padding: 20px 25px;
background-color: #ff6138