CI-Leitfaden
Akzent #B80000 · CTA #FFB400
Typografie

H1 – Präzise Headlines mit Barlow Condensed

Lead-Text: klar, kontraststark, gut lesbar. Fließtext bleibt Source Sans Pro 18px.

H2 – Schlank, linear, ausdrucksstark

H3 – Für Unterabschnitte und Module

H4 – Funktionsüberschriften

H5 – Metaebene
H6 – Dezente Labels

Standardabsatz. Sichtbarer Link. Fett und kursiv zur Betonung. Kleine Hinweise (Meta-Text).

StilFontGrößeGewichtBeispiel
H1Barlow Condensed2.8rem700Mehr Leads. Weniger Reibung.
H2Barlow Condensed2.2rem700Schnell zur Anfrage
H3Barlow Condensed1.8rem700CTA im Fokus
BodySource Sans Pro1rem400Lesbarer Fließtext
SmallSource Sans Pro.9rem400Hinweis / Label
Farben
Hintergrund
#222222

Basis dunkel. Text hell für WCAG AA/AAA je nach Größe.

Text
#F5F5F5

Primärtext auf dunkel. Kontrast >> 7:1.

CTA
#FFB400

Buttons, Highlights. Textfarbe #1e1e1e.

Akzent Rot
#B80000

Linien, Border-Left, Unterstreichungen.

Card
#383838

Panele, Module, Formularflächen.

Border
#4A4A4A

Dezente Trennlinien.

Komponenten

Buttons

CTA #FFB400 auf dunkel erfüllt Kontrast AA.

Formular

Listen & Links

  • Klarer Nutzen über der Falz
  • Ein primärer CTA pro Sichtbereich
  • Rot nur als Akzentlinie

Beispiel-Link im Textfluss.

Textboxen über Bildern
Zutaten und Fleisch auf Brett

Event-Catering ohne Umwege

Dunkler Scrim, roter Border-Left, sichere Lesbarkeit.

Köchin serviert am Tisch

Feines Fingerfood. Starke Wirkung.

CTA warm, nicht aufdringlich.

Hinweis: Bei sehr hellem Bild ggf. background:rgba(20,20,20,.78) erhöhen.

Richtlinien