Vorlage für Website-Markenrichtlinien: die Web-Regeln, die ein Logo-PDF auslässt

Eine Vorlage für Markenrichtlinien, geschrieben für Websites statt für Print: Logoeinsatz auf hellem und dunklem Hintergrund, eine Farbtabelle mit bestandenen Kontrastpaaren, eine Typo-Skala, Button- und Link-Zustände, Regeln für Bildsprache und Tonalität sowie eine Freigabe-Checkliste für alle, die eine Seite bauen.

Die meisten Markenrichtlinien wurden für Designer gemacht, die eine Broschüre setzen. Sie zeigen das Logo auf Weiß, listen Farben in CMYK und Pantone, nennen eine Schrift, die die Website nicht laden kann, und sagen nichts darüber, wie ein Button aussieht, wenn man mit der Maus darüberfährt. Dann muss ein Entwickler, ein Kunde oder ein Website-Builder raten. Diese Vorlage deckt die Entscheidungen ab, die eine Website tatsächlich braucht, in der Reihenfolge, in der jemand sie beim Bau einer Seite braucht, mit bereits eingearbeiteten Werten zur Barrierefreiheit.

Wer Web-Markenrichtlinien liest

Schreiben Sie für drei Leser. Eine Designerin, die neue Seiten gestaltet und das System verstehen will. Einen Entwickler oder Website-Bauer, der exakte Werte braucht: Hex-Codes, Schriftnamen, Pixelgrößen. Und eine Content-Redakteurin, oft die Inhaberin selbst, die in zwei Jahren eine Seite hinzufügt und wissen muss, was sie nicht tun sollte. Kann die dritte Person eine Regel nicht anwenden, wird sie nicht überleben.

Halten Sie es kurz. Eine einseitige Zusammenfassung mit den Kernwerten plus eine längere Referenz schlägt ein 60-seitiges Dokument, das niemand öffnet. Wenn Sie schnell einen ersten Entwurf der Werte brauchen, erstellt unser kostenloser Generator für Marken-Styleguides einen; in diesem Leitfaden geht es darum, was in die fertige Version gehört.

1. Logo

Websites platzieren Logos an Orten, die Print nie kennt: ein 32-Pixel-Browsertab, ein Header im Dark Mode, ein mobiles Menü, eine E-Mail-Signatur. Legen Sie fest:

Element	Einsatz	Format
Primärlogo für helle Hintergründe	Header, Footer bei hellen Themes	SVG, plus PNG in 2x
Logo für dunkle Hintergründe	Dunkler Header, Dark Mode, Footer auf Dunkel	SVG, plus PNG in 2x
Kompaktes Zeichen (nur Symbol)	Mobiler Header, App-Icons, Social-Media-Avatare	SVG, quadratisches PNG
Favicon	Browsertab und Lesezeichen	Vereinfachtes Zeichen, das bei 16-32px noch erkennbar ist

Dann die Regeln: minimale Darstellungsbreite (zum Beispiel „das vollständige Logo nie schmaler als 96px, darunter das Zeichen verwenden“), Schutzraum drumherum, die Hintergründe, auf denen es stehen darf, und zwei oder drei Beispiele für Fehlgebrauch (gestreckt, umgefärbt, auf einem unruhigen Foto). Stellen Sie die dunkle Version immer als eigene Datei bereit; wer jemanden bittet, das Logo „zu invertieren“, bekommt jedes Mal ein anderes Logo.

2. Farbe, mit bereits geprüftem Kontrast

Der häufigste Barrierefreiheitsfehler auf gebrandeten Websites ist eine Markenfarbe, die keinen Text tragen kann. Die Kontrastanforderung der WCAG (Erfolgskriterium 1.4.3) verlangt mindestens 4.5:1 für normalen Text und 3:1 für großen Text, den das W3C als mindestens 18 Punkt oder 14 Punkt fett definiert, etwa 24px oder 18.5px. Das W3C weist darauf hin, dass die Werte nicht gerundet werden dürfen: 4.499:1 besteht nicht. Buttons, Formularrahmen und Icons, die Menschen erkennen müssen, haben eine eigene Anforderung von 3:1 gegenüber angrenzenden Farben (1.4.11).

Listen Sie Farben daher nicht für sich allein auf. Listen Sie sie mit den Kombinationen, in denen sie erlaubt sind:

Name	Hex	Rolle	Erlaubter Text darauf	Nicht erlaubt
Forest	#1F5130	Primäre Buttons, Überschriften	Weißer Text, jede Größe	Schwarzer Text
Sage	#8DB596	Hintergründe, Illustrationen	Dunkler Text (#1A1A1A)	Weißer Text in jeder Größe
Ember	#E4572E	Akzente, große Display-Texte	Pro Größe prüfen; oft nur großer Text	Fließtext, Links auf Weiß
Ink	#1A1A1A	Fließtext	Auf Weiß, Paper, Sage	Auf Forest
Paper	#FAF7F2	Seitenhintergrund	Ink, Forest	Text in Sage

Die Hex-Werte oben sind ein Beispiel; messen Sie Ihre eigenen Paare mit einem beliebigen Kontrastprüfer und notieren Sie das Verhältnis neben jedem erlaubten Paar. Definieren Sie Farben außerdem nach Rolle, nicht nur nach Name: „primäre Aktion“, „Link“, „Fehler“, „Erfolg“, „Rahmen“. So kann ein Entwickler ein Theme und einen Dark Mode bauen, ohne zu raten.

3. Typografie

Print-Schriften sind oft nicht für das Web lizenziert oder zu schwer, um schnell zu laden. Legen Sie fest:

Webfonts: exakte Familiennamen und Schnitte, die Sie laden. Zwei Familien und drei oder vier Schnitte reichen völlig; jede zusätzliche Datei verlangsamt die erste Ansicht.
Fallbacks: die Systemschriften, die verwendet werden, solange der Webfont lädt oder falls er fehlschlägt.
Eine Typo-Skala: Größen für jede Ebene, Desktop und Mobil.

Ebene	Desktop	Mobil	Schnitt	Zeilenhöhe
H1	48px	34px	700	1.1
H2	34px	26px	700	1.2
H3	24px	20px	600	1.3
Fließtext	18px	17px	400	1.6
Klein	15px	14px	400	1.5

Ergänzen Sie Regeln, die gern gebrochen werden: kein Fließtext in Großbuchstaben, kein Blocksatz, Zeilenlänge bei etwa 60-80 Zeichen, Links im Fließtext unterstrichen, damit sie nicht allein auf Farbe angewiesen sind.

4. Buttons, Links und Zustände

Diesen Abschnitt haben Print-Richtlinien nie, und Websites brauchen ihn immer. Legen Sie für jeden Button-Typ jeden Zustand fest:

Element	Standard	Hover	Tastaturfokus	Deaktiviert
Primärer Button	Füllung Forest, weißer Text, Radius 999px	Dunkleres Forest	Sichtbarer 2px-Rahmen mit 2px Abstand	Graue Füllung, Text weiterhin lesbar, nicht klickbar
Sekundärer Button	Kontur Forest, Text Forest	Blasse Füllung Sage	Gleiche Rahmenregel	Graue Kontur
Textlink	Forest, unterstrichen	Dickere Unterstreichung	Rahmen	-

Entfernen Sie den Fokusrahmen nie aus ästhetischen Gründen; Tastaturnutzer sind darauf angewiesen. Legen Sie Eckenradius, Innenabstand und die Schreibweise der Button-Beschriftungen fest. Ein primärer Button pro Ansicht ist eine gute Regel, die Sie festhalten sollten.

5. Layout und Abstände

Geben Sie eine Abstandsskala vor (zum Beispiel 4, 8, 12, 16, 24, 32, 48, 64, 96px) und legen Sie fest, dass alle Abstände daraus stammen. Nennen Sie die maximale Inhaltsbreite, den Seitenrand auf Mobilgeräten und wie viele Spalten das Raster bei jeder Breite nutzt. Diese Regeln sorgen dafür, dass Seiten, die Monate auseinander von verschiedenen Menschen gebaut wurden, wie eine Website aussehen.

6. Bildsprache und Icons

Fotografie: echte Menschen und Orte statt Stockfotos; beschreiben Sie Licht und Stimmung mit zwei guten und zwei schlechten Beispielen.
Zuschnitt: welche Seitenverhältnisse Sie nutzen (zum Beispiel 16:9 für Hero-Bereiche, 4:3 für Karten, 1:1 für Teamfotos).
Alt-Text: eine Regel zum Schreiben: beschreiben, was das Bild zeigt und warum es da ist; leerer Alt-Text bei rein dekorativen Bildern.
Icons: ein Icon-Set, eine Strichstärke, eine Größenskala. Gemischte Icon-Stile lassen eine Website am schnellsten zusammengestückelt wirken.

7. Tonalität und Wortwahl

Markenstimme im Web dreht sich vor allem um Klarheit. Notieren Sie drei oder vier Merkmale der Tonalität mit je einem „so, nicht so“-Beispiel, dann die Mikroregeln: wie Sie Daten, Preise, Telefonnummern und den Firmennamen schreiben, welche Wörter Sie vermeiden und was auf Buttons steht („Besuch buchen“, nicht „Absenden“). Nehmen Sie Fehlermeldungen und leere Zustände auf; auch sie sind Marke.

8. E-Mails und Logins

Besucher begegnen Ihrer Marke auch außerhalb der Website: Bestätigungs-E-Mails, Passwort-Zurücksetzungen, eine Login-Seite für ein Kundenportal. Legen Sie fest, welches Logo, welche Farben und welchen Absendernamen diese verwenden und wer dafür verantwortlich ist. Eine Passwort-E-Mail, die nicht zur Marke passt, wirkt wie Phishing.

Freigabe-Checkliste für jede neue Seite

Das Logo ist die richtige Version für den Hintergrund und über der Mindestgröße.
Jede Text-Hintergrund-Kombination steht auf der erlaubten Liste oder wurde mit 4.5:1 gemessen (3:1 für großen Text).
Nur die festgelegten Schriften und Schnitte werden verwendet; Größen stammen aus der Skala.
Buttons zeigen Hover und einen sichtbaren Tastaturfokus.
Abstände nutzen die Skala; die Inhaltsbreite hält das Maximum ein.
Bilder folgen den Regeln für Zuschnitt und Alt-Text; Icons stammen aus dem einen Set.
Texte folgen der Tonalität und den Mikroregeln.

Richtlinien über viele Websites hinweg anwenden

Agenturen und Organisationen mit vielen Websites haben ein schwierigeres Problem: Einmal angewandte Richtlinien verwässern, wenn verschiedene Menschen bearbeiten. Was sie bewahrt, ist, die Kernwerte in die Plattform statt in ein PDF zu legen. Auf der White-Label-Plattform von We.Inc wird eine Marke einmal mit Namen, hellem und dunklem Logo, Favicon, Markenfarben, einer Google-Schrift und Button-Stil eingerichtet, und diese Werte ziehen sich durch Kunden-Login, Dashboard und E-Mails. Unsere Seiten zu individuellem Branding und Marken-Governance gehen weiter ins Detail.

Getrennte helle und dunkle Logos plus ein Favicon, passend zu Abschnitt 1 der Vorlage, mit optionalen Hintergrundbildern für Light und Dark Mode.

Primär-, Akzent- und Sekundärfarbe als Hex-Werte, plus die Google-Schrift der Marke. Prüfen Sie den Kontrast jeder Textkombination selbst; die Plattform zertifiziert ihn nicht.

Farben und Eckenrundung der primären und sekundären Buttons, die Standardwerte aus Abschnitt 4.

Die Marke zieht sich bis zum Kunden-Login durch, um den es in Abschnitt 8 geht.

System-E-Mails nutzen Logo und Farben der Marke und werden vor dem Versand in der Vorschau angezeigt.

Um eine vollständig eingerichtete Marke in einer Demo zu sehen, vereinbaren Sie eine Demo.

Quellen

Zuletzt geprüft am 2026-10-25.

Häufige Fragen

Was sollten Website-Markenrichtlinien enthalten?

Logoversionen für helle und dunkle Hintergründe plus Favicon, Farben mit den erlaubten Textkombinationen, Webfonts und eine Typo-Skala, Button- und Link-Zustände, Abstände, Regeln für Bildsprache und Icons, Regeln für Tonalität und Mikrotexte sowie das Aussehen von E-Mails und Logins.

Welchen Kontrast brauchen Markenfarben für Text?

WCAG 1.4.3 verlangt mindestens 4.5:1 für normalen Text und 3:1 für großen Text (18 Punkt oder 14 Punkt fett). Werte werden nicht gerundet, daher besteht 4.499:1 nicht.

Wie unterscheidet sich ein Web-Styleguide von einem Print-Markenhandbuch?

Er ergänzt Dinge, die Print nie braucht: Logos für dunkle Hintergründe und Favicons, auf Kontrast geprüfte Farbkombinationen, ladbare Webfonts mit Fallbacks, responsive Schriftgrößen und interaktive Zustände wie Hover und Tastaturfokus.

Wie halten Agenturen viele Kunden-Websites markenkonform?

Indem sie die Kernwerte in die Plattform statt in ein PDF legen. Auf der White-Label-Plattform von We.Inc werden Logos, Farben, eine Schrift und der Button-Stil einmal pro Marke festgelegt und ziehen sich durch Kunden-Login, Dashboard und E-Mails.