Design System.

Ein Design System bündelt alles, was ein Unternehmen für eine einheitliche digitale Gestaltung braucht: Regeln, wiederverwendbare Bauteile wie Schaltflächen, Formularfelder oder Karten und eine Dokumentation, wie diese Teile zusammengehören. Die Nielsen Norman Group beschreibt ein Design System als vollständigen Satz von Standards, mit dem sich Design über viele Produkte und Seiten hinweg steuern lässt. Für ein Unternehmen zählt das, sobald mehrere Teams oder Agenturen an Website, Karriereportal und Kampagnenseiten arbeiten. Ohne gemeinsame Grundlage sieht jede neue Seite etwas anders aus.

So funktioniert ein Design System

Ein Design System besteht aus mehreren Schichten, die aufeinander aufbauen. Laut Nielsen Norman Group gehören dazu ein Styleguide mit Gestaltungsregeln und Prinzipien, eine Komponentenbibliothek mit einzelnen Bauteilen und eine Musterbibliothek mit größeren Zusammenstellungen wie Kopfbereichen oder Formularstrecken. Im Idealfall existiert jedes Bauteil zweimal: im Designwerkzeug und im Code, mit demselben Namen und denselben Werten.

Die kleinste Einheit sind sogenannte Design Tokens. Laut Spezifikation der Design Tokens Community Group beim W3C ist ein Token eine Information mit einem lesbaren Namen, im einfachsten Fall ein Paar aus Name und Wert, etwa eine Hausfarbe oder ein Abstand. Die Spezifikation liegt seit Oktober 2025 in Version 2025.10 als abschließender Bericht der Community Group vor, ist laut eigener Angabe aber kein offizieller W3C-Standard. Ändert ihr den Wert eines Tokens, ändert er sich überall, wo er verwendet wird.

What You Should Keep in Mind at Work

Plant ein Team für die Pflege ein, nicht nur ein Projekt für den Aufbau. Die Nielsen Norman Group nennt als Mindestbesetzung eine Person für Interaktionsdesign, eine für visuelles Design und eine für die Entwicklung. Ein System, das nach dem Start niemand betreut, veraltet schnell und wird umgangen.

Prüft zuerst, ob eine leichtere Stufe reicht. Laut Nielsen Norman Group lohnt sich ein Design System vor allem, wenn ein Unternehmen über Jahre wiederkehrende Gestaltungsarbeit vor sich hat. Ab welcher Größe sich das rechnet und welche Zwischenstufen es gibt, zeigt unser Ratgeber Design System für die Unternehmenswebsite: Ab welcher Größe es sich rechnet.

Leitet das System aus eurem bestehenden Erscheinungsbild ab. Farben, Schriften und Logo kommen aus dem Corporate Design. Das Design System übersetzt sie in Bildschirmwerte, Zustände wie Fokus oder Fehler und Regeln für Abstände. In Relaunch-Projekten sehen wir oft, dass Druckfarben ungeprüft übernommen werden und auf dem Bildschirm zu wenig Kontrast haben.

Baut Barrierefreiheit in die Bauteile ein. Erfüllt eine Schaltfläche einmal die Anforderungen der WCAG, erbt jede Seite diese Eigenschaft. Ein barrierefreies Bauteil macht eine Seite aber nicht automatisch barrierefrei, denn Texte, Reihenfolge und Bilder gehören dazu.

Häufige Fragen zum Design System

Ist ein Design System dasselbe wie ein Styleguide? Nein. Der Styleguide beschreibt Regeln und Beispiele. Das Design System enthält zusätzlich die fertigen Bauteile im Code, ihre Dokumentation und die Abläufe, mit denen Teams Änderungen einbringen.

Kann man ein bestehendes Design System nutzen? Ja. Laut Nielsen Norman Group ist das der günstigste Weg. Ihr passt dann Farben und Schriften an euer Erscheinungsbild an, statt alles selbst zu bauen.

Wenn eure Website über die Jahre aus vielen Einzelteilen gewachsen ist, ordnen wir Bauteile und Stile im Website-Relaunch neu, bevor neue Seiten dazukommen.