Style Guide

farben

Marken Farben

ORANGE
Hex: #F2C42E
RGB: 242 / 196 / 46

LIGHT BROWN
Hex: #877F7A
RGB: 135 / 127 / 122

RED
Hex: #FD5A5C
RGB: 253 / 90 / 92

BROWN
Hex: #423733
RGB: 66 / 55 / 51

Neutrale Farben

WHITE
Hex: #ffffff
RGB: 255 / 255 / 255

LIGHT GREY
Hex: #E2E2E2
RGB: 226 / 226 / 226

GREY
Hex: #7F7F7F
RGB: 127 / 127 / 127

Black
Hex: #3d3d3d
RGB: 61 / 61 / 61


Bilder

Teaserbild (Seiten)

Bild Verhältnis: 22:5 (1100 px * 250 px)

Bilder im Artikel

Bild Verhältnis: 21:9 (Normale Breite: 1024 px * 439 px; Weite Breite: 1100 px * 471 px; Volle Breite: ??)


Typographie

Absatz

Font: Arial / Weight: 500 / Color: Black

Normaler Text: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Fetter Text: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Kursiver Text: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Link

Überschriften

Font: Arial / Weight: 900 / Color: White, Black and Blue

H1 Überschrift

H2 Überschrift

H3 Überschrift

H4 Überschrift

H5 Überschrift
H6 Überschrift

Listen

Font: Arial / Weight: 500 / Color: Black

  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum

Aufzählungen

Font: Arial / Weight: 500 / Color: Black

  1. Lorem ipsum
  2. Lorem ipsum
  3. Lorem ipsum
  4. Lorem ipsum


Boxen

Font: Arial / Weight: 500 / Color: Black

Wusstest du schon?

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Achtung!

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tipp

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Was bedeutet „XYZ“? tl;dr

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Gruppe


Zitate

Font: Arial / Weight: 500 / Color: Black


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem Ipsum

Marketing

SERP Snippets (Pillar pages)

SERP Snippets (Standard)