Was ist ein Design-System? Und was gehört dazu

Ein Design-System ist die eine verbindliche Quelle dafür, wie ein Produkt oder eine Marke aussieht und funktioniert: alle Farben, Schriften, Abstände, Komponenten und Regeln, gepflegt an einem Ort und direkt nutzbar im Design-Tool und im Code. Der Unterschied zu klassischen Dokumenten in einem Merksatz: Brand-Guidelines liest man, einen Styleguide schlägt man nach, ein Design-System importiert man.

Das klingt nach Konzern-Werkzeug, und in der Vollausbaustufe ist es das auch. Trotzdem lohnt der Blick für alle, die mit Websites arbeiten: Das Prinzip dahinter skaliert nach unten. Erst die Bestandteile, dann die ehrliche Frage, wer was davon braucht.

Was zu einem Design-System gehört

1. Design-Tokens

Die kleinste Einheit: benannte Werte statt loser Zahlen. Nicht „irgendein Blau“, sondern eine definierte Grundfarbe mit Namen; nicht „16 oder 18 Pixel, je nach Laune“, sondern feste Schriftstufen und Abstände. Ändert sich ein Token, ändert er sich überall, wo er verwendet wird. Das ist der Mechanismus, der Konsistenz erzwingt, statt sie zu erhoffen.

Ein Detail, das viel ausmacht: Gute Systeme benennen Tokens nach Rolle, nicht nach Aussehen. „Blau-500“ sagt nur, wie der Wert aussieht. „Primärfarbe“ sagt, wofür er da ist. Beim nächsten Rebranding tauschst du dann den Wert hinter dem Namen, und alles andere bleibt stehen.

2. Komponenten-Bibliothek

Wiederverwendbare Bausteine: Button, Formularfeld, Karte, Navigation. Entscheidend ist die Spiegelung: Dieselbe Komponente existiert im Design-Tool und im Code, mit denselben Zuständen (normal, aktiv, deaktiviert, Fehler). Designer und Entwickler reden dann über dasselbe Ding, nicht über zwei Versionen davon.

3. Muster

Komponenten allein machen noch keine Seite. Muster legen fest, wie sie zusammenspielen: Wie ein Formular aufgebaut ist, wie Fehlermeldungen erscheinen, was eine leere Liste anzeigt, wie eine Navigation auf dem Handy funktioniert. Muster sind das Gedächtnis für gelöste Probleme, damit sie niemand zum fünften Mal anders löst.

4. Regeln und Prinzipien

Das Warum hinter den Bausteinen: Wann welcher Button-Typ, wie Tonalität in Texten klingt, welche Kontraste Pflicht sind. Gut gemachte Systeme backen Barrierefreiheit hier ein, als Standard in jeder Komponente statt als Prüfpunkt am Ende.

5. Dokumentation

Der Teil, der aus einer Sammlung ein System macht: eine lebende Referenz, in der jede Komponente mit Beispielen, Do-und-Don'ts und Code steht. Lebend heißt: Sie wird mit dem Produkt aktualisiert. Ein Dokument, das niemand pflegt, ist kein System, sondern ein Archiv.

Bekannte Beispiele

Die großen Vorbilder sind öffentlich einsehbar und taugen als Anschauung: Googles Material Design ist ein volles Design-System, mit dokumentierten Komponenten, Tokens und Regeln für ganze Produktfamilien. Apples Human Interface Guidelines heißen bewusst Guidelines: Sie liefern die Prinzipien und Komponenten-Regeln für alle Apple-Plattformen, die fertigen Bausteine stecken in Apples Entwickler-Werkzeugen. Man muss nichts davon übernehmen. Aber wer einmal durchscrollt, versteht das Prinzip besser als durch jede Definition.

Wozu der Aufwand?

Ein Design-System lohnt sich dort, wo viele Hände an einem Produkt arbeiten oder ständig Neues entsteht. Es beantwortet gestalterische Grundsatzfragen einmal statt in jedem Projekt neu, hält zehn Seiten so konsistent wie eine und verhindert die schleichende Drift, bei der jede neue Unterseite ein bisschen anders aussieht.

Wie diese Drift aussieht, kennt jeder: Nach zwei Jahren hat die Website fünf Blautöne, drei Button-Formen und vier Schriftgrößen für Überschriften. Das hat niemand entschieden. Es ist passiert, weil jede einzelne Änderung für sich plausibel war und nirgends stand, was gilt.

Der Preis: Aufbau und Pflege kosten echte Zeit. Ein System, das aufwendiger ist als das Produkt, dem es dient, ist Selbstzweck.

Was kleine Unternehmen wirklich brauchen

Für eine Firmen-Website mit einer Handvoll Seiten ist ein volles Design-System Verwaltung ohne Nutzen. Was sich aber immer lohnt, ist die Mini-Version des Prinzips: definierte Tokens (Farben mit Rollen, zwei Schriften mit festen Stufen, ein Abstandsraster), eine kleine Menge wiederverwendeter Bausteine und eine Seite mit Regeln. Die Grundlage dafür liefert der Styleguide; was hineingehört, steht im Artikel Was ist ein Styleguide. Auch die Schriftwahl gehört von Anfang an dazu, denn sie ist der Token, den man am häufigsten sieht.

So arbeite ich auch bei meinen Webdesign-Projekten: Aus dem Styleguide werden benannte Werte im Code, jede Sektion nutzt dieselben Bausteine, und neue Seiten entstehen aus Vorhandenem statt bei null. Der Kunde merkt davon nur das Ergebnis: Alles sieht aus wie aus einem Guss, und Änderungen sind schnell, weil sie an einer Stelle passieren.

Kurz: Ein Design-System ist das Prinzip „einmal entscheiden, überall gelten lassen“, in groß. Ob du die Konzern-Ausbaustufe brauchst, ist eine Frage der Größe. Das Prinzip selbst braucht jede Website.