Menu

Landing page Thorsten

GRID SYSTEM

THE TABLE OF GRID SYSTEM SIZES

Device Width
Container Width
≥ 1200px
1140px
≥ 992px
960px
≥ 768px
720px
≥ 576px
540px
< 576px
100%

Based on the Bootstrap 4 grid system across different screen sizes

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
80px
60px
80px

- Paddings Tops and Bottom for blocks - 80px

- Inside of Blocks (between headlines and inside a content block) - 60px

Spacing - Mobile
50px
40px
50px

- Paddings Tops and Bottom for blocks - 50px

- Inside of Blocks (between headlines and inside a content block) - 40px

COLOR PALETTE

Primary

#ff8c5f

alter

#e9f6ff

grey

#999999

light

#ffffff

dark

#000000

dark2

#18304b

TYPOGRAPHY

HEADERS - DESKTOP

font-family: Roboto Slab;

Heading 1

50px/1.2em;

Heading 2

40px/1.2em;

Heading 3

36px/1.2em;

Heading 4

24px/1.2em;

Heading 5

20px/1.2em;

Heading 6

16px/1.2em;

HEADERS - TABLET

font-family: Roboto Slab;

Heading 1

50px/1.2em;

Heading 2

40px/1.2em;

Heading 3

36px/1.2em;

Heading 4

24px/1.2em;

Heading 5

20px/1.2em;

Heading 6

16px/1.2em;

HEADERS - MOBILE

font-family: Roboto Slab;

Heading 1

50px/1.2em;

Heading 2

40px/1.2em;

Heading 3

36px/1.2em;

Heading 4

24px/1.2em;

Heading 5

20px/1.2em;

Heading 6

16px/1.2em;

BODY - DESKTOP

font-family: Roboto Slab;

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

15px/1.8em;

BODY - TABLET

font-family: Roboto Slab;

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

15px/1.8em;

BODY - MOBILE

font-family: Roboto Slab;

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

15px/1.8em;

LINKS - DESKTOP

font-family: Roboto Slab;

Lorem ipsum dolor sit amet.

15px;

LINKS - TABLET

font-family: Roboto Slab;

Lorem ipsum dolor sit amet.

15px;

LINKS - MOBILE

font-family: Roboto Slab;

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

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Quisque purus lorem nibh
  • Sed aliquam nibh aliquam
spaces inside: 10px;

LIST - ZERO & DECIMAL

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Quisque purus lorem nibh
  • Sed aliquam nibh aliquam
spaces inside: 10px;

QUOTE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
John Doe
Designer
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
John Doe
Designer

ICON SET

NAVIGATION ICONS

SOCIAL ICONS

BUTTONS

Dimensions
font: Roboto 400 15px/2em;
letter-spacing: .02em;
paddings: 12px 42px;
border: 1px solid #ff8c5f;
border-radius: 0px;
Primary Button
background: #ff8c5f;
color: #ffffff;
background (hover): #18304b;
Dark Button
background: #18304b;
color: #ffffff;
background (hover): #ff8c5f;
Light Button
background: #ffffff;
color: #ff8c5f;
color (hover): #18304b;
Inline Button
color: #ff8c5f;
color (hover): #18304b;

FORM FIELDS

font: Mukta 400 16px/16px;
background: #f6f6f6;
padding: 17px 30px;
border-radius: 33px;
font: Mukta 400 16px/16px;
background: #f6f6f6;
padding: 17px 30px;
border-radius: 33px;
font: Mukta 400 16px/16px;
background: #f6f6f6;
padding: 17px 30px;
border-radius: 33px;
border: solid #181e2b;
border-radius: 5px;
border-color (hover): #181e2b;

DESIGN EXAMPLES

IMG_5518
IMG_5518