Style Guide

GRID SYSTEM

THE TABLE OF GRID SYSTEM SIZES

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

SPACING SYSTEM

SPACING - DESKTOP

spacing tablet
130px
60px
130px

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

SPACING - TABLET

spacing tablet
100px
60px
100px

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

SPACING - MOBILE

spacing mobile
60px
40px
60px

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

COLOR PALETTE

PRIMARY

#ff3f39

#121c45

rgba(19,28,33,0.6)

SECONDARY

#ebebeb

#ffffff

TYPOGRAPHY

HEADERS - DESKTOP

font-family: Poppins;

Heading 1

80px/90px;

Heading 2

45px/54px;

Heading 3

35px/42px;

Heading 4

25px/32px;

Heading 5

18px/28px;

Heading 6

13px/22px;

HEADERS - TABLET

font-family: Poppins;

Heading 1

65px/73px;

Heading 2

45px/54px;

Heading 3

35px/42px;

Heading 4

25px/32px;

Heading 5

18px/28px;

Heading 6

13px/22px;

HEADERS - MOBILE

font-family: Poppins;

Heading 1

45px/55px;

Heading 2

35px/44px;

Heading 3

25px/35px;

Heading 4

20px/32px;

Heading 5

18px/28px;

Heading 6

13px/22px;

BODY - DESKTOP

font-family: Poppins;

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

15px/1.7em;

BODY - TABLET

font-family: Poppins;

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

15px/1.7em;

BODY - MOBILE

font-family: Poppins;

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

15px/1.7em;

LINKS - DESKTOP

Lorem ipsum dolor sit amet.

LINKS - TABLET

Lorem ipsum dolor sit amet.

LINKS - MOBILE

Lorem ipsum dolor sit amet.

LIST

LIST - DIST

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Quisque purus lorem nibh
  • Sed aliquam nibh aliquam

spaces inside: 10px;
bullet size: 7px;

LIST - DECIMAL

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Quisque purus lorem nibh
  4. Sed aliquam nibh aliquam

spaces inside: 10px;

QUOTE

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.

JOHN DOE

Designer

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.

JOHN DOE

Designer

ICON SET

NAVIGATION ICONS

SOCIAL ICONS

BUTTONS

Dimensions

font: Poppins 500
16px/1.15em;
paddings: 20px 35px;

Primary Button

background: #ff3f39;
color: #ffffff;
background (hover): #dc0d06;

Dark Button

background: #131c21;
color: #ffffff;
background (hover): #313d6b;

Light Button

background: #ffffff;
color: #ff3f39;
background (hover): #ff3f39;
color (hover): #ffffff;

Light Button

color: #ff3f39;
color(hover):#dc0d06;