Style Guide

Spacing System

Spacing - DESKTOP

120px
60px
120px

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

Spacing - TABLET

90px
50px
90px

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

Spacing - MOBILE

60px
40px
60px

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

Grid System

The table of grid system sizes

Device Width

≥ 992px

< 992px

< 767px

< 479px

Max Container Width

1200px

100%

100%

100%

Color Palette

Primary

#041d24

#ffffff

Typography

Headers - DESKTOP

font-family: DM Sans;

Heading 1

55 px/1.3;

Heading 2

36 px/1.3;

Heading 3

32 px/1.3;

Heading 4

24 px/1.3;

Heading 5

17 px/1.3;

Heading 6

15 px/1.3;

Headers - TABLET

font-family: DM Sans;

Heading 1

40 px/1.3;

Heading 2

36 px/1.3;

Heading 3

32 px/1.3;

Heading 4

24 px/1.3;

Heading 5

17 px/1.3;

Heading 6

15 px/1.3;

Headers - MOBILE

font-family: DM Sans;

Heading 1

30 px/1.3;

Heading 2

28 px/1.3;

Heading 3

26 px/1.3;

Heading 4

22 px/1.3;

Heading 5

17 px/1.3;

Heading 6

15 px/1.3;

Body - DESKTOP

font-family: Open Sans;

15 px/1.6;

Body - TABLET

font-family: Open Sans;

15 px/1.6;

Body - MOBILE

font-family: Open Sans;

15 px/1.6;

Links Typography

Links - DESKTOP

font-family: Open Sans;

Text Link

Links - TABLET

font-family: Open Sans;

Text Link

Links - MOBILE

font-family: Open Sans;

Text Link

Button

Primary

font: DM Sans 700;
15px/1.6;
backgrounds: transparent;
color: #ffffff
effects(hover): opacity 30%;

font: DM Sans 700;
15px/1.6;
backgrounds: #ffffff;
color: #000000
backgrounds(hover): transparents;
color(hover): #ffffff

Back to pronovos.com