Design System
Ein Design System ist eine verbindliche Sammlung aus Bausteinen, Regeln und fertigen Code-Elementen, mit denen ein Unternehmen alle seine Apps und Webseiten einheitlich gestaltet. Es sorgt dafür, dass ein Knopf überall gleich aussieht, gleich funktioniert und nicht jedes Team ihn neu erfindet.
Große Unternehmen betreiben oft dutzende Webseiten und Apps. Damit die alle zusammengehörig wirken, legt man vorher fest, wie sie aussehen und sich verhalten sollen. Genau diese Sammlung von Festlegungen heißt Design System. Sie enthält die erlaubten Farben, die Schriftarten, die Abstände zwischen Elementen und fertige Bausteine wie Knöpfe, Suchfelder oder Warnhinweise. Dazu kommen Texte, die erklären, wann man welchen Baustein benutzt und wann besser nicht. Ein Design System ist also kein einzelnes Bild und kein einzelnes Programm, sondern eine Mischung aus Regelwerk, Bausteinkasten und Nachschlagewerk.
Was ein einheitlicher Bausteinkasten spart
Ohne gemeinsame Grundlage baut jedes Team seine eigenen Elemente. In einem Konzern entstehen so schnell zwanzig leicht verschiedene Varianten desselben Knopfes. Jede davon muss einzeln gepflegt, getestet und irgendwann repariert werden. Das kostet Arbeitszeit, die niemand für neue Funktionen einsetzen kann. Ein Design System entfernt diese Doppelarbeit, weil es die Bausteine nur einmal gibt.
Der zweite Grund ist die Wirkung nach außen. Nutzer erkennen eine Marke nicht nur am Logo, sondern an wiederkehrenden Details. Wenn der Bestellknopf in der App grün und auf der Webseite blau ist, wirkt das unprofessionell und verunsichert. Vertraute Muster machen eine Anwendung außerdem schneller bedienbar, weil man nicht jedes Mal neu suchen muss.
Ein dritter Punkt ist Barrierefreiheit, also die Bedienbarkeit für Menschen mit Einschränkungen. Regeln zu Kontrast, Schriftgröße und Bedienung per Tastatur lassen sich zentral in die Bausteine einbauen. Wer den Baustein benutzt, erfüllt die Anforderungen automatisch. Das ist zuverlässiger, als bei jedem Projekt einzeln daran zu erinnern.
Von Farbwerten bis zur Komponentenbibliothek
Die unterste Ebene besteht aus sogenannten Tokens. Das sind benannte Werte wie „Primärfarbe“ oder „Abstand mittel“, hinter denen ein konkreter Zahlenwert steckt. Ändert man den Wert an einer Stelle, ändert er sich in allen Produkten mit. Darüber liegen die Komponenten, also die fertigen Bausteine aus Tokens: Knöpfe, Formularfelder, Menüs, Dialogfenster.
Diese Komponenten existieren doppelt. Einmal als Vorlage in einem Gestaltungsprogramm wie Figma, damit Designer damit Entwürfe zusammensetzen können. Und einmal als echter Programmcode in einer Bibliothek, die Entwickler in ihr Projekt einbinden. Beide Fassungen müssen zueinander passen, sonst entwirft jemand etwas, das später nicht gebaut werden kann. Dieses Synchronhalten ist die eigentliche Schwierigkeit im Alltag.
Dazu kommt die Dokumentation. Sie beschreibt in Worten, wofür ein Baustein gedacht ist, welche Varianten es gibt und welche Fehler häufig passieren. Ein Design System ohne Dokumentation wird selten benutzt, weil niemand weiß, was schon existiert. Gepflegt wird das Ganze meist von einem eigenen Team, das Anfragen sammelt und neue Versionen veröffentlicht. Ein Design System ist damit ein laufendes Produkt und kein Projekt, das irgendwann fertig ist.
Bekannte Beispiele und der Bezug zu KI
Viele Design Systeme sind öffentlich einsehbar. Googles Material Design prägt das Aussehen von Android-Apps, Apples Human Interface Guidelines das von iPhone-Programmen. Auch Behörden nutzen so etwas: Der Bund pflegt ein eigenes Regelwerk, damit staatliche Onlinedienste einheitlich wirken. Wenn zwei fremde Apps sich verdächtig ähnlich anfühlen, steckt oft dasselbe Design System dahinter.
In Stellenanzeigen taucht der Begriff regelmäßig auf, etwa bei Rollen wie „Design System Engineer“. In Tech-News geht es meist um größere Umstellungen, wenn ein Konzern sein System überarbeitet und damit das Aussehen aller Produkte auf einmal verändert. Solche Umbauten dauern oft Jahre.
Neu ist der Bezug zu KI-Werkzeugen. Programme, die aus einer Beschreibung Oberflächen erzeugen, liefern bessere Ergebnisse, wenn sie auf die Bausteine eines Design Systems zurückgreifen dürfen. Ein häufiger Irrtum ist übrigens, ein Design System sei nur eine Sammlung von Farbvorgaben. Solche Vorgaben, oft Styleguide genannt, beschreiben nur das Aussehen. Ein Design System liefert zusätzlich benutzbaren Code.