Style Guide

Ein Style Guide ist ein Dokument, das alle gestalterischen Entscheidungen einer Marke oder eines Projekts festhält. Farben, Schriften, Abstände, Ikonografie, Bildsprache, Tonalität. Wer damit arbeitet, muss nicht jedes Mal neu entscheiden, wie etwas aussehen soll.

Der Unterschied zum Design System: Ein Style Guide ist meistens ein statisches Dokument, oft als PDF oder Webseite. Ein Design System ist ein lebendes, interaktives System mit Komponenten, das direkt im Design-Tool oder Code verankert ist. Style Guides sind der ältere Begriff und häufig der Einstieg, bevor ein vollständiges Design System entsteht.

Was ein guter Style Guide enthält

• Farbpalette: Primär-, Sekundär- und Neutralfarben mit genauen Hex-Werten, RGB- und CMYK-Werten für digitale und Printanwendungen.
• Typografie-Regeln: Welche Schriftarten werden eingesetzt, in welchen Größen, mit welchem Zeilenabstand und für welche Inhaltstypen.
• Logo-Verwendung: Abstandsregeln, erlaubte und nicht erlaubte Varianten, Mindestgrößen und Hintergrundregeln.
• Tonalität: Wie kommuniziert die Marke? Formell oder locker? Direkt oder erklärend? Auch das gehört in einen vollständigen Style Guide.

Für Webflow-Projekte empfiehlt es sich, den Style Guide direkt im Webflow Designer als eigene Seite anzulegen. So sehen alle Beteiligten sofort, wie Komponenten im echten Kontext aussehen, ohne ein externes Dokument öffnen zu müssen.