Style Guide

SPACING SYSTEM

SPACING - DESKTOP

spacing tablet
130px
90px
130px

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

SPACING - TABLET

spacing tablet
80px
50px
80px

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

SPACING - MOBILE

spacing mobile
60px
30px
60px

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

GRID SYSTEM

THE TABLE OF GRID SYSTEM SIZES

Device Width
1025px
< 1024px
< 767px
<479px
Container Width
1170px
100%
100%
100%

COLOR PALETTE

PRIMARY

#111

#fff

TYPOGRAPHY

HEADERS - DESKTOP

font-family: Bebas Neue;

Heading 1

80px/1.2;

Heading 2

45px/1.2;

Heading 3

35px/1.2;

Heading 4

27px/1.2;

Heading 5

20px/1.2;

Heading 6

18px/1.2;

HEADERS - TABLET

font-family: Bebas Neue;

Heading 1

60px/1.2;

Heading 2

40px/1.2;

Heading 3

32px/1.2;

Heading 4

27px/1.2;

Heading 5

20px/1.2;

Heading 6

18px/1.2;

HEADERS - MOBILE

font-family: Bebas Neue;

Heading 1

50px/1.2;

Heading 2

30px/1.2;

Heading 3

28px/1.2;

Heading 4

27px/1.2;

Heading 5

20px/1.2;

Heading 6

18px/1.2;

BODY - DESKTOP

font-family: Bebas Neue;

15px/1.6;

BODY - TABLET

font-family: Bebas Neue;

15px/1.6;

BODY - MOBILE

font-family: Bebas Neue;

15px/1.6;

Links TYPOGRAPHY

LINKS - DESKTOP

GET STARTED

LINKS - TABLET

GET STARTED

LINKS - MOBILE

GET STARTED
Phone westgreen design
Call us now!