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

200px
80px
200px

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

SPACING - TABLET

150px
60px
150px

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

SPACING - MOBILE

100px
40px
100px

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

Color Palette

PRIMARY

#111

#f4f

#fff

Typography

HEADERS - DESKTOP

font-family: Poppins;

Heading 1

90px/1.3;

Heading 2

48px/1.4;

Heading 3

36px/1.5;

Heading 4

28px/1.3;

Heading 5

20px/1.7;

Heading 6

18px/1.5;

HEADERS - TABLET

font-family: Poppins;

Heading 1

90px/1.3;

Heading 2

40px/1.4;

Heading 3

30px/1.3;

Heading 4

24px/1.3;

Heading 5

20px/1.7;

Heading 6

18px/1.5;

HEADERS - MOBILE

font-family: Poppins;

Heading 1

50px/1.3;

Heading 2

34px/1.4;

Heading 3

30px/1.3;

Heading 4

24px/1.3;

Heading 5

20px/1.7;

Heading 6

18px/1.5;

BODY - DESKTOP

font-family: Poppins;

Paragraph

15px/1.9;

BODY - TABLET

font-family: Poppins;

Paragraph

15px/1.9;

BODY - MOBILE

font-family: Poppins;

Paragraph

15px/1.9;

Buttons

Links Typography

LINKS - DESKTOP

Freedom of Imagination

LINKS - TABLET

Freedom of Imagination

LINKS - MOBILE

Freedom of Imagination
Buy this Tempate
More Templates