Styleguide

Stand: 11.03.2024

Farben

Schriftfarben

– schwarz: #2a2a2e
– hellblau: #00aeff, (interner Name: accent): für Links, Spitzmarken und h3

– weiß, #ffffff (interner Name: base-2) für Text auf farbigem Hintergrund

Texthintergründe

contrast

#191e34

contrast-2

#6e6e6e

contrast-3

#bebebe

base

#f7f7f7

global-color-17

#ffce00

accent

#ff7701

accent-2

#25b05f

accent-3

#27c468


Typografie

Fließtext

Font-Stack: Helvetica, “Helvetica Neue”, -apple-system, Arial, sans-serif, “Segoe UI”
Farbe: #2a2a2e (interner Name: schwarz)
Größe / Zeilenhöhe: 18px / 25px
Schriftstärke: 400

Lead (1. Abschnitt auf Seiten unter Header-Bild)

Font: Helvetica
Größe / Zeilenhöhe: 26px / 35px
Schriftstärke: 400

Überschriften

Font: wie Fließtext
Farbe: #2a2a2e (außer H1 bei Seiten und H3)

H1

H1

Farbe: base-2 (#ffffff) (auf hellblauem Keil in Header-Banner-Fotos)
Größe / Zeilenabstand: 56px / 61px
Schriftstärke: 700In Blog-Beiträgen ist nicht der Titel über dem Header-Foto die h1, sondern der Beitragstitel

In Blog-Beiträgen ist nicht der Titel über dem Header-Foto die h1, sondern der Beitragstitel

H2

Größe / Zeilenabstand: 44px / 53px
Schriftstärke: 700

H3

Farbe: accent (#ff7701)
Größe / Zeilenabstand: 34px / 40px
Schriftstärke: 500

H4

Größe / Zeilenabstand: 25px / 28px
Schriftstärke: 600

H5

Größe / Zeilenabstand: 25px / 28px
Schriftstärke: 400

H6

Größe / Zeilenabstand: 18px / 20px
Schriftstärke: 400

Sonstiges

Spitzmarke

Spitzmarke Blau

Font-Stack: “Roboto Mono”, “Andale Mono”, Monaco, Helvetica, Arial, system-ui, sans-serif
Größe / Zeilenabstand: 14px / 24px
Schriftstärke: 400
text-transform: uppercase
letter-spacing (gesperrt): 0,08em (=0,33px)

Variante hellblau: accent (#00aeff)

01


Spitzmarke Zahl
Font-Stack: wie Fließtext
Farbe: accent (#00aeff)
Größe / Zeilenabstand: 60px / 60px
Schriftstärke: 700


Buttons

Font: Helvetica, Großkleinschreibung
Größe / Zeilenabstand: 18px / 25px
Schriftstärke: 400
Mouseover: weiß auf orange (accent-2 = #ff7701) + Animation (transformY -5px, 250ms ease-in-out)

Farbe: weiß (base-2 = #ffffff) auf hellblau (accent = #00aeff)

Button

Farbe: weiß (base-2 = #ffffff) auf Gelb (global-color-10 = #ffed00)

Button

Layout

Raster

– Page-Template: volle Breite, 2-, 3- oder 4-spaltig
– Blog-Template: Content / Sidebar = 2 / 1 (Content: 1- oder 2-spaltig)


Besondere Inhaltsformate

Page-Header

Wiederverwendbare Blöcke: Kategorie Header

Zitatblöcke

Wiederverwendbare Blöcke: Kategorie Zitat

Titel:
<h3>
font-style: italic

Fließtext:
Größe / Zeilenabstand: 26px / 35px
font-style: italic

Mouse-Over: Animation (scale(1.05), 600ms ease)

Cards (Kachelraster)

– weiß mit Schlagschatten (0px 0px 25px 0px rgb(0 0 0 / 10%)
– bei farbigem Hintergrund (s. Hintergrundfarben) ohne Schlagschatten


Bilder

Quellen

Dateiformat

*.webP

Abmessungen

Maximale Breite aller Bilder auf der gesamten Website: 1100px

  • Hero
    • Hauptseiten: 1100px * 400px
    • Unterseiten: 1100px * 350px
  • Blog-Posts: 730px * 413px

Darstellung

– ohne Randlinien
– ohne Schlagschatten

Text auf Bildern

– Schriftfarbe je nach Hintergrund weiß, schwarz oder hellblau
– Hervorhebungen durch Farbwechsel oder Hintergrundfarbe