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

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

SPACING - TABLET

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

SPACING - MOBILE

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

COLOR PALETTE

PRIMARY

  • #ff3f39
  • #131c21
  • rgba(19,28,33,0.6)

SECONDARY

  • #ebebeb
  • #ffffff
  • #d9b995

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

font-family: Poppins;

Lorem ipsum dolor sit amet.

15px;

LINKS - TABLET

font-family: Poppins;

Lorem ipsum dolor sit amet.

15px;

LINKS - MOBILE

font-family: Poppins;

Lorem ipsum dolor sit amet.

15px;

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

JOHN DOE

Designer

ICON SET

NAVIGATION 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): #2f434e;

Light Button

background: #ffffff;

color: #ff3f39;

background (hover): #ff3f39;

color (hover): #ffffff;

Light Button

color: #ff3f39;

color(hover):#dc0d06;