UX-Glossar
Design System
Ein Design System ist ein gemeinsamer Baukasten aus wiederverwendbaren Bausteinen und Regeln. Damit gestalten und entwickeln Teams Oberflächen, die überall einheitlich aussehen und sich gleich verhalten.
Stell dir eine Online-Bank vor, deren App, Website und Kundenportal von drei verschiedenen Teams gebaut werden. Auf der Website ist der wichtigste Button blau und eckig, in der App grün und rund, im Portal steht „Absenden“ statt „Überweisen“. Jedes Team hat für sich gute Arbeit gemacht. Zusammen wirkt das Produkt trotzdem wie ein Flickenteppich.
Genau hier setzt ein Design System an: Es sorgt dafür, dass alle mit denselben Bausteinen und denselben Regeln arbeiten.
Einfach erklärt
Ein Design System ist wie ein gut sortierter Baukasten mit Bauanleitung. Die Steine sind fertige Oberflächenelemente wie Buttons, Eingabefelder oder Hinweisboxen. Die Anleitung erklärt, wann du welchen Stein verwendest und wie er sich verhält. Wer etwas Neues baut, greift in den Kasten, statt jedes Teil neu zu schnitzen.
Die Nielsen Norman Group beschreibt ein Design System sinngemäß als vollständiges Set an Standards, mit dem sich Gestaltung im großen Maßstab steuern lässt: wiederverwendbare Komponenten und Muster, die Doppelarbeit verringern und für eine gemeinsame Sprache sorgen.
Woraus ein Design System besteht
Die meisten Design Systems haben drei Ebenen. Der Styleguide legt Grundlagen fest: Farben, Schriften, Logo, Tonalität der Texte und Regeln zur Barrierefreiheit. Die Komponentenbibliothek enthält die einzelnen Bausteine, jeweils mit Namen, Beschreibung, Zuständen (etwa „deaktiviert“ oder „Fehler“) und im Idealfall dem passenden Code. Die Musterbibliothek zeigt, wie Bausteine zusammenspielen, zum Beispiel in einem Anmeldeformular oder einer Produktliste.
Darunter liegen oft Design-Tokens. Das sind benannte Werte, die Gestaltungsentscheidungen speichern, etwa „Primärfarbe“ oder „Abstand klein“. Ändert sich die Primärfarbe, passt du einen Token an und alle Stellen ziehen mit. Seit Oktober 2025 gibt es dafür mit der Design Tokens Specification 2025.10 einen ersten stabilen, herstellerübergreifenden Standard einer W3C-Community-Gruppe.
Eng verwandt ist Atomic Design, eine Methode, Komponenten vom kleinsten Element bis zur ganzen Seite aufzubauen. Mehr dazu im Artikel Was ist Atomic Design?
Ein Beispiel
Zurück zur Online-Bank. Vorher baut jedes Team seine Formulare selbst. Fehlermeldungen erscheinen mal oben, mal unter dem Feld, mal gar nicht. Ein neuer Screen dauert Tage, weil jede Kleinigkeit diskutiert wird.
Nachher gibt es ein gemeinsames Eingabefeld mit festgelegten Zuständen, ein Fehlermuster und eine Regel für Button-Texte. Ein neuer Screen entsteht aus vorhandenen Teilen, und wenn die Bank ihre Markenfarbe ändert, passt das Team einen Token an statt hunderter Dateien.
Warum das wichtig ist
Ein Design System spart Zeit bei Routinearbeit, damit mehr Energie in die wirklich schwierigen Fragen fließt: Abläufe, Inhalte, Prioritäten. Es erleichtert neuen Teammitgliedern den Einstieg. Und es schafft eine gemeinsame Sprache zwischen Design und Entwicklung, weil alle denselben „Primary Button“ meinen. Für kleinere Teams lohnt sich oft ein schlanker Start. Wie das geht, zeigt der Artikel Design Systems für kleine Teams: Wann es sich lohnt und wie du klein anfängst.
In der Praxis
- Mit dem Bestand anfangen. Sammle Screenshots aller vorhandenen Buttons, Farben und Formularfelder. Die Unterschiede zeigen dir, wo ein gemeinsamer Standard am meisten bringt.
- Design und Code zusammen denken. Eine Komponente, die nur im Design-Tool existiert, wird im Code schnell anders umgesetzt. Pflege beides gemeinsam mit der Entwicklung.
- Verantwortung festlegen. Ein Design System ist nie fertig. Kläre, wer Änderungen prüft, dokumentiert und ankündigt.
Verwandte Begriffe
Wireframe, Prototyp, Microcopy