Styleguide für die Website erstellen: Inhalte, Aufbau und Pflege
Farben, Schriften, Buttons und Abstände einmal festlegen – und dann überall gleich verwenden. Wir zeigen, was in einen Website-Styleguide gehört, wie Sie ihn aufbauen und warum er gerade kleinen Teams Zeit und Abstimmungsrunden spart.
Inhaltsverzeichnis
- Was ist ein Styleguide für die Website?
- Warum sich ein Styleguide lohnt
- Was in einen Website-Styleguide gehört
- Design-Tokens: Werte einmal festlegen, überall nutzen
- Styleguide erstellen in sieben Schritten
- Barrierefreiheit gleich mitdenken
- Den Styleguide lebendig halten
- Checkliste für Ihren Website-Styleguide
- Häufige Fragen
- Ein Website-Styleguide legt fest, wie Farben, Schriften, Abstände, Buttons, Formulare und Bilder auf der Website eingesetzt werden – mit konkreten Werten, nicht nur mit Beispielen.
- Er ist enger gefasst als ein Designsystem und praktischer als ein klassisches Corporate-Design-Handbuch, das oft für Druck geschrieben wurde.
- Der größte Nutzen für kleine Teams: Neue Seiten sehen automatisch stimmig aus, und Diskussionen über „welches Blau“ entfallen.
- Barrierefreiheit gehört von Anfang an hinein, etwa Kontrastwerte nach WCAG und sichtbare Fokuszustände.
- Mit Design-Tokens und globalen Einstellungen im Page-Builder werden die Werte einmal gepflegt und überall übernommen.
Auf vielen Firmenwebsites sieht man es nach ein, zwei Jahren: Der Button auf der Startseite ist abgerundet, der auf der Leistungsseite eckig. Die Überschriften wechseln die Größe, das Blau hat drei leicht unterschiedliche Töne, und die Landingpage der letzten Kampagne wirkt wie von einer anderen Firma. Meist steckt keine Absicht dahinter, sondern das Fehlen von Regeln. Jeder, der eine Seite anlegt, entscheidet neu.
Ein Styleguide verhindert das. Dieser Ratgeber zeigt, was hineingehört, wie Sie ihn aufbauen und wie er im Alltag gepflegt wird.
Was ist ein Styleguide für die Website?
Ein Website-Styleguide ist ein Regelwerk für die Gestaltung der Website. Er beschreibt nicht nur, wie Dinge aussehen, sondern auch, wann sie eingesetzt werden: Welche Farbe hat ein Haupt-Button, welche ein zweiter Button? Wie groß ist eine Überschrift der zweiten Ebene? Wie viel Abstand liegt zwischen zwei Sektionen?
Die Nielsen Norman Group ordnet den Styleguide als Bestandteil eines Designsystems ein: Neben dem Styleguide mit Gestaltungsregeln gehören dazu eine Bibliothek wiederverwendbarer Bausteine und eine Sammlung typischer Muster wie Seitenvorlagen. Sie unterscheidet außerdem drei Arten von Styleguides: für die Marke (Logo, Farben, Schriften), für Inhalte (Tonalität, Sprache) und für die visuelle Gestaltung und Interaktion im Web.
| Begriff | Inhalt | Typisch für |
|---|---|---|
| Corporate-Design-Handbuch | Logo, Hausfarben, Hausschrift, Geschäftspapiere, Fahrzeuge, Druck | Unternehmen mit Markenauftritt, oft vor der Website entstanden |
| Website-Styleguide | Farbrollen, Schriftgrößen, Abstände, Buttons, Formulare, Bilder, Bausteine fürs Web | Jede Website, an der mehr als eine Person arbeitet |
| Designsystem | Styleguide plus Komponentenbibliothek mit Code, Muster, Dokumentation, Prozesse | Größere Organisationen mit mehreren Websites oder Apps |
Ein Handwerksbetrieb oder eine Steuerkanzlei braucht kein Designsystem mit hunderten Komponenten. Ein Styleguide von wenigen Seiten oder ein gut gepflegter Bereich in den Einstellungen des Page-Builders genügt, solange er die wiederkehrenden Entscheidungen festhält.
Warum sich ein Styleguide lohnt
Die Nielsen Norman Group nennt als Vorteile von Designsystemen unter anderem schnellere Gestaltung und Entwicklung durch wiederverwendbare Elemente, eine gemeinsame Sprache im Team und ein einheitliches Erscheinungsbild. Für kleine und mittlere Unternehmen zeigen sich diese Vorteile ganz praktisch:
- Neue Seiten gehen schneller: Wer eine Landingpage für eine Kampagne baut, nimmt vorhandene Bausteine, statt neu zu gestalten.
- Weniger Abstimmungsrunden: Fragen wie „Welche Farbe hat der Button?“ sind einmal beantwortet.
- Wechsel bleiben folgenlos: Kommt eine neue Mitarbeiterin ins Marketing oder wechselt die Agentur, bleibt die Website trotzdem stimmig.
- Vertrauen: Ein einheitlicher Auftritt wirkt professioneller. Uneinheitliche Gestaltung dagegen lässt Besucher eher zweifeln, ob sie noch auf derselben Website sind.
- Weniger Fehler bei der Barrierefreiheit: Wenn Kontraste und Fokuszustände einmal geprüft im Styleguide stehen, werden sie nicht auf jeder Seite neu falsch gemacht.
Die Nielsen Norman Group nennt auch die Kehrseite: Ein Regelwerk muss aufgebaut, erklärt und gepflegt werden. Wer es einmal anlegt und dann vergisst, hat wenig gewonnen.
Was in einen Website-Styleguide gehört
Farben mit festen Rollen
Nicht nur die Hausfarben auflisten, sondern jeder Farbe eine Aufgabe geben: Hauptfarbe für Buttons und Links, Textfarbe, Hintergrundfarben, Rahmen, Farben für Erfolg, Warnung und Fehler. Zu jeder Farbe gehören die genauen Werte (zum Beispiel HEX) und die geprüften Kombinationen. Die WCAG verlangen für normalen Text ein Kontrastverhältnis von mindestens 4,5:1, für großen Text 3:1. Wie Sie Farben auswählen und kombinieren, erklärt der Ratgeber Farben für die Firmenwebsite.
Typografie
Schriftarten, Schriftgrößen für Fließtext und Überschriften der Ebenen H1 bis H4, Zeilenabstände, Schriftschnitte und die Darstellung auf dem Smartphone. Konkrete Werte und Empfehlungen finden Sie im Ratgeber Typografie im Webdesign.
Abstände und Raster
Ein festes Abstandssystem, etwa in Schritten von 4 oder 8 Pixeln, sorgt dafür, dass Sektionen, Karten und Textblöcke gleichmäßig wirken. Dazu gehören die maximale Inhaltsbreite und das Spaltenraster für Desktop, Tablet und Smartphone.
Buttons und Links
Haupt-Button, zweiter Button, Textlink – jeweils mit allen Zuständen: normal, beim Darüberfahren mit der Maus, bei Tastaturfokus, gedrückt und deaktiviert. Der Fokuszustand wird oft vergessen, ist aber für alle wichtig, die mit der Tastatur navigieren.
Formulare
Eingabefelder, Beschriftungen, Pflichtfeld-Kennzeichnung, Fehlermeldungen, Checkboxen, Auswahlfelder und die Erfolgsmeldung nach dem Absenden.
Bilder und Symbole
Bildstil (echte Fotos aus dem Betrieb, Bildausschnitte, Seitenverhältnisse), Regeln für Alternativtexte und ein einheitlicher Symbolsatz in einer Strichstärke.
Bausteine
Wiederkehrende Sektionen wie Kopfbereich, Leistungskacheln, Kundenstimme, Ablauf, FAQ und Kontaktaufforderung – mit Beispiel und Hinweis, wann sie eingesetzt werden.
Sprache und Tonalität
Siezen oder Duzen, Schreibweisen von Fachbegriffen, Formulierung von Buttons („Angebot anfordern“ statt „Absenden“) und Regeln für Zahlen, Daten und Uhrzeiten.
Wir entwickeln Styleguides, die im Page-Builder direkt nutzbar sind.
Design-Tokens: Werte einmal festlegen, überall nutzen
Ein Styleguide als PDF hilft nur, wenn jemand hineinschaut. Wirksamer ist es, die Werte direkt dort zu hinterlegen, wo gebaut wird. Dafür hat sich der Begriff Design-Tokens durchgesetzt: benannte Werte wie „farbe-primaer“, „abstand-m“ oder „schrift-h2“, die an einer zentralen Stelle gepflegt und überall verwendet werden.
Die Design Tokens Community Group, eine Community-Gruppe beim W3C, hat im Oktober 2025 die erste stabile Version ihres Austauschformats veröffentlicht. Es soll ermöglichen, solche Werte zwischen Design-Werkzeugen und Code auszutauschen. Laut Ankündigung unterstützen oder implementieren unter anderem Figma, Penpot, Sketch und Framer das Format. Ein offizieller W3C-Standard im engeren Sinn ist es nicht, sondern ein Bericht einer Community-Gruppe.
Für eine typische WordPress-Website ist das weniger abstrakt, als es klingt:
- Globale Farben und Schriften im Theme oder Page-Builder anlegen und nur diese verwenden – keine individuell eingetippten Farbwerte in einzelnen Elementen.
- CSS-Variablen für Farben, Abstände und Radien definieren, damit eine Änderung an einer Stelle überall wirkt.
- Vorlagen für Sektionen speichern, statt Bausteine jedes Mal von Hand nachzubauen.
Ein Beispiel aus dem Alltag: Ein Elektrobetrieb möchte seine Hauptfarbe etwas kräftiger haben. Sind alle Buttons, Links und Akzentflächen an die globale Farbe „Aktion“ gekoppelt, ist das eine Änderung an einer einzigen Stelle. Wurden die Farbwerte dagegen in jedem Element einzeln eingetragen, muss jemand Seite für Seite durchgehen – und übersieht erfahrungsgemäß einige Stellen.
Nennen Sie eine Farbe „Aktion“ statt „Blau“. Wird das Blau später zu einem Grünton, stimmt der Name immer noch – und niemand muss rätseln, warum „Blau“ jetzt grün ist.
Styleguide erstellen in sieben Schritten
- Bestand aufnehmenScreenshots aller Buttons, Überschriften, Farben und Formulare auf der aktuellen Website sammeln. Oft zeigt schon diese Übersicht, wie viele Varianten sich eingeschlichen haben.
- Vorhandenes Corporate Design prüfenHausfarben und Hausschrift übernehmen, aber auf Bildschirmtauglichkeit prüfen: Nicht jede Druckfarbe hat am Bildschirm genug Kontrast.
- Grundwerte festlegenFarbrollen, Schriftgrößen, Abstandsstufen, Radien, maximale Breite.
- Bausteine definierenButtons, Formulare, Karten, wiederkehrende Sektionen – mit allen Zuständen.
- Barrierefreiheit prüfenKontraste messen, Fokuszustände testen, Mindestgrößen für Klickflächen festlegen.
- Im System hinterlegenWerte als globale Einstellungen, Variablen und Vorlagen anlegen.
- Dokumentieren und übergebenKurze Erklärung mit Beispielen, wer was ändern darf und an wen man sich bei neuen Anforderungen wendet.
Ideal ist es, den Styleguide gleich bei der Gestaltung einer neuen Website aus den abgestimmten Entwürfen abzuleiten. Wie diese Entwurfsstufen ablaufen, erklärt der Ratgeber Wireframe, Mockup, Prototyp.
Barrierefreiheit gleich mitdenken
Ein Styleguide ist der beste Ort, um Barrierefreiheit dauerhaft abzusichern, weil Fehler hier nicht auf einer Seite, sondern auf allen auftreten oder verhindert werden. Halten Sie mindestens fest:
- Welche Text- und Hintergrundfarben miteinander kombiniert werden dürfen – mit gemessenem Kontrast.
- Wie der Tastaturfokus aussieht, und dass er nie entfernt wird.
- Dass Informationen nicht allein über Farbe vermittelt werden, etwa bei Fehlermeldungen in Formularen.
- Mindestgrößen für Schrift und für antippbare Flächen auf dem Smartphone.
Welche Kriterien die WCAG im Einzelnen stellen, erklärt der Ratgeber WCAG 2.2 einfach erklärt.
Ein häufiger Konflikt: Die Hausfarbe, etwa ein helles Gelb oder Hellgrün, erreicht als Textfarbe auf Weiß nicht den nötigen Kontrast. Die Lösung ist nicht, die Marke zu ändern, sondern im Styleguide festzulegen, wofür die Farbe genutzt wird – zum Beispiel für Flächen und Akzente, während Text in einer dunkleren Variante steht.
Den Styleguide lebendig halten
Ein Styleguide ist nie ganz fertig. Neue Leistungen brauchen neue Bausteine, Kampagnen bringen neue Anforderungen. Damit er nicht veraltet, helfen ein paar einfache Regeln:
- Eine verantwortliche Person, intern oder bei der Agentur, die Änderungen freigibt.
- Neue Bausteine erst prüfen, dann aufnehmen: Gibt es schon etwas Ähnliches, das sich erweitern lässt?
- Regelmäßige Durchsicht, etwa einmal im Jahr oder vor größeren Kampagnen, ob die Website noch den Regeln entspricht.
- Änderungen dokumentieren, damit nachvollziehbar bleibt, warum ein Wert angepasst wurde.
Checkliste für Ihren Website-Styleguide
- Jede Farbe hat eine feste Rolle und einen genauen Wert.
- Erlaubte Text-Hintergrund-Kombinationen sind mit Kontrastwert dokumentiert.
- Schriftgrößen für Fließtext und alle Überschriftenebenen sind festgelegt – auch mobil.
- Es gibt ein Abstandssystem und eine maximale Inhaltsbreite.
- Buttons und Links sind mit allen Zuständen beschrieben, inklusive Fokus.
- Formulare, Fehlermeldungen und Erfolgsmeldungen sind einheitlich gestaltet.
- Bildstil, Bildformate und Regeln für Alternativtexte sind festgehalten.
- Die Werte sind als globale Einstellungen im System hinterlegt.
- Es ist klar, wer Änderungen am Styleguide freigibt.
Häufige Fragen
Was kostet die Erstellung eines Styleguides?
Das hängt stark vom Umfang ab: Ein schlanker Styleguide, der bei einer neuen Website aus den Entwürfen abgeleitet wird, ist oft Teil des Projekts. Ein nachträglich erstellter Styleguide für eine gewachsene Website mit vielen Varianten erfordert mehr Bestandsaufnahme und Aufräumarbeit. Eine Einordnung der Kosten für Webprojekte insgesamt finden Sie in unserem Leitfaden zu den Webdesign-Kosten.
Kann ich einen Styleguide auch für eine bestehende Website erstellen?
Ja, und das ist sogar häufig der Fall. Der erste Schritt ist dann eine Bestandsaufnahme aller vorhandenen Varianten. Daraus wird festgelegt, welche Variante künftig gilt. Danach werden die Seiten nach und nach angeglichen – oft zuerst die meistbesuchten. Bei stark gewachsenen Websites kann ein Styleguide auch der Anlass sein, über einen Relaunch nachzudenken.
Welche Werkzeuge eignen sich für einen Styleguide?
Für die Gestaltung werden häufig Design-Werkzeuge wie Figma oder Penpot genutzt, in denen Farben, Schriften und Komponenten als Bibliothek angelegt werden. Für die Website selbst sind die globalen Einstellungen des Themes oder Page-Builders entscheidend. Die Dokumentation kann ein einfaches PDF, eine interne Wiki-Seite oder eine versteckte Seite auf der Website sein, die alle Bausteine zeigt.
Wie unterscheidet sich ein Styleguide von einem Briefing?
Ein Briefing beschreibt Ziele, Zielgruppen, Inhalte und Rahmenbedingungen eines Projekts – es steht am Anfang. Ein Styleguide hält das Ergebnis der Gestaltung fest: konkrete Farben, Schriften, Abstände und Bausteine. Er entsteht also meist während oder nach dem Design und begleitet die Website danach dauerhaft.
Quellen
- Nielsen Norman Group: Design Systems 101 (2021) – Styleguide als Bestandteil eines Designsystems
- W3C Design Tokens Community Group: Design Tokens specification reaches first stable version (2025)
- W3C: Understanding Success Criterion 1.4.3 Contrast (Minimum)
H. Kiassif leitet das Marketing bei NEUZEITWERBER und betreut Websites, Kampagnen und Anfragestrecken für Betriebe aus Handwerk und Mittelstand.
