Style Guide

Colors

Primary

ORANGE 600
#a98920

ORANGE 500
#dab029

ORANGE 400
#f2c42e

ORANGE 300
#f6d66d

ORANGE 200
#fae7ab

ORANGE 100
#fef9ea

Accents

BROWN 500
#423733

BROWN 500
#6c6662

BROWN 400
#877f7a

BROWN 300
#aba5a2

BROWN 100
#cfccca

BROWN 100
#f3f2f2

RED 600
#4c1b1c

RED 500
#ca484a

RED 400
#fd5a5c

RED 300
#fd6b6c

RED 200
#fe9c9d

RED 100
#ffefef

BLUE 600
#12463e

BLUE 500
#258d7c

BLUE 400
#2eb09b

BLUE 300
#6dc8b9

BLUE 200
#97d8cd

BLUE 100
#ffefef

GREEN 600
#35651a

GREEN 500
#517b39

GREEN 400
#73b051

GREEN 300
#8fc074

GREEN 200
#fe9c9d

GREEN 100
#f1f7ee

Neutral

GREY 600
#3d3d3d

GREY 500
#595959

GREY 400
#7f7f7f

GREY 300
#e2e2e2

GREY 200
#e2e2e2

WHITE
#ffffff

Inspiration by refactoringui.com and maketintsandshades.com

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)