Design System aufbauen: Wann sich der Aufwand für dein Unternehmen lohnt
von Paul Albrecht am 22.09.2026
In Kürze: Ein Design System ist die verbindliche Sammlung aus Design Tokens, wiederverwendbaren Komponenten und Regeln zu ihrer Verwendung. Es lohnt sich ab etwa drei parallelen Oberflächen oder zwei Teams, die gleichzeitig gestalten. Für eine einzelne Unternehmenswebsite reicht ein dokumentierter Styleguide mit sauber gebauten Komponenten im CMS.
Design System ist einer der Begriffe, die in den letzten Jahren von der Konzernwelt in den Mittelstand gewandert sind. Meist mit dem Versprechen, dass danach alles schneller, günstiger und einheitlicher wird.
Das stimmt sogar. Es stimmt nur ab einer bestimmten Größe, und unterhalb dieser Größe bindet ein Design System mehr Kapazität, als es freisetzt. Die spannende Frage ist deshalb nicht, wie man eins baut, sondern ob man eins braucht.
Inhaltsverzeichnis:
Was ein Design System von einem Styleguide unterscheidet
Woraus ein Design System besteht
Design Tokens
Komponenten
Regeln und Dokumentation
Ab wann es sich rechnet
Was ein Design System kostet
Der schlanke Einstieg
Die häufigsten Fehler
Fazit
Was ein Design System von einem Styleguide unterscheidet
Ein Styleguide beschreibt, wie etwas aussehen soll. Ein Design System stellt das Gestaltete als benutzbaren Baustein bereit und legt fest, wann er eingesetzt wird. Der Unterschied liegt in der Verbindlichkeit und im Zugriff.
Im Styleguide steht: „Primärbutton, Hintergrund Rot, Radius 6 Pixel, Schrift halbfett.“ Im Design System liegt eine Button-Komponente, die genau das ausgibt, in Figma für das Design und im Code für die Umsetzung, mit einer Notiz, dass pro Ansicht höchstens ein Primärbutton verwendet wird.
Zwischen beiden liegt die Pattern Library, also eine reine Sammlung von Bausteinen ohne die Regeln zu ihrer Verwendung. Sie ist das, was viele Unternehmen tatsächlich haben, wenn sie von ihrem Design System sprechen.
Woraus ein Design System besteht
Ein funktionierendes Design System hat drei Schichten, die aufeinander aufbauen. Fehlt eine davon, zerfällt das System innerhalb weniger Monate.
Design Tokens
Design Tokens sind die kleinsten Einheiten: Farbwerte, Abstände, Schriftgrößen, Radien, Schatten. Sie werden einmal benannt und überall referenziert, statt an jeder Stelle neu eingetippt zu werden.
Der praktische Nutzen zeigt sich beim ersten Rebrand. Wenn die Primärfarbe als Token definiert ist, ändert sie sich an einer Stelle. Wenn sie an 140 Stellen als Hexwert im Code steht, wird daraus ein Suchen-und-Ersetzen-Projekt mit ungewissem Ausgang. In unseren Projekten liegen Tokens als CSS Custom Properties vor, bei Tailwind CSS zusätzlich in der Theme-Konfiguration.
Komponenten
Auf den Tokens sitzen die Komponenten: Buttons, Formularfelder, Karten, Navigationselemente, Teaser. Wichtig ist, dass jede Komponente in beiden Welten existiert, also im Designwerkzeug wie Figma und im tatsächlichen Frontend-Code. Ein Design System, das nur in Figma lebt, ist eine Absichtserklärung.
Die Aufteilung nach Atomic Design von Brad Frost hat sich als Denkmodell bewährt, muss aber nicht dogmatisch umgesetzt werden. In der Praxis reichen meist drei Ebenen: Grundelemente, zusammengesetzte Bausteine und ganze Seitenabschnitte.
Regeln und Dokumentation
Die dritte Schicht wird am häufigsten weggelassen und entscheidet über die Lebensdauer. Zu jeder Komponente gehört die Information, wofür sie gedacht ist, wann sie eingesetzt wird und welche Zustände sie kennt.
Dazu kommen Barrierefreiheitsanforderungen aus den WCAG: Welcher Kontrast gilt, wie verhält sich die Komponente bei Tastaturbedienung, welche ARIA-Attribute sind gesetzt. Wenn das einmal pro Komponente sauber gelöst ist, muss es nie wieder pro Seite gelöst werden. Das ist aus meiner Sicht der am meisten unterschätzte Effekt eines Design Systems.
Ab wann es sich rechnet
Ein Design System amortisiert sich über Wiederverwendung. Der Aufwand entsteht einmal am Anfang, der Nutzen entsteht bei jeder weiteren Oberfläche. Daraus folgt eine einfache Schwelle.
Ausgangslage | Empfehlung |
|---|---|
Eine Website mit einem gestaltenden Team, kein Umbau geplant | Styleguide plus sauber gebaute CMS-Komponenten reichen |
Website plus Onlineshop oder Kundenportal | Tokens gemeinsam definieren, Komponenten pro System |
Drei oder mehr Oberflächen, mehrere Teams | Vollständiges Design System mit eigener Pflege-Zuständigkeit |
Mehrere Marken oder Landesgesellschaften | Design System mit Theming-Ebene über den Tokens |
Die Grenze verläuft also entlang der Zahl paralleler Oberflächen und der Zahl gleichzeitig arbeitender Teams. Ein einzelnes Unternehmen mit einer Website und einer Person, die gestaltet, gewinnt durch ein formales Design System nichts, das ein guter Styleguide nicht auch liefert.
Die Nielsen Norman Group hat dazu im Juli 2026 ein Reifegradmodell mit sechs Dimensionen veröffentlicht, das gut zeigt, wie unterschiedlich weit ein System entwickelt sein kann. Der wichtigste Gedanke daraus: Reife misst sich an der Passung zwischen System und Organisation, und ein bewusst kleines System kann reifer sein als ein aufgeblähtes.
Was ein Design System kostet
Der Aufbau selbst ist der kleinere Posten. In unseren Projekten liegt ein schlankes System mit rund 25 Komponenten, Tokens und Dokumentation im Bereich eines mittleren Website-Projekts. Teurer wird der Betrieb.
Ein Design System braucht eine Person, die entscheidet, ob ein neues Bedürfnis eine neue Komponente rechtfertigt oder eine bestehende erweitert. Ohne diese Rolle wächst die Bibliothek unkontrolliert, und nach anderthalb Jahren gibt es vier Button-Varianten, von denen niemand mehr weiß, welche gilt. Das ist der Punkt, an dem Design Systeme in kleineren Organisationen scheitern, und er hat nichts mit Design zu tun.
Der schlanke Einstieg
Wenn du unterhalb der Schwelle liegst, aber trotzdem Ordnung willst, empfehlen wir diesen Weg:
Bestandsaufnahme: Alle bestehenden Buttons, Überschriftengrößen und Abstände auf der eigenen Website sammeln. Die Zahl überrascht fast immer.
Reduzieren: Auf drei Schriftgrößen-Stufen, eine Abstandsskala und zwei Buttonarten eindampfen.
Als Tokens festschreiben, im CSS und im Designwerkzeug identisch benannt.
Die zehn bis fünfzehn Komponenten bauen, aus denen sich achtzig Prozent der Seiten zusammensetzen lassen.
Pro Komponente drei Sätze zur Verwendung notieren, inklusive Barrierefreiheits-Hinweis.
Das Ergebnis ist kein Design System im strengen Sinn, deckt aber den größten Teil des Nutzens ab. Sollte das Unternehmen später wachsen, ist der Schritt zum vollständigen System klein, weil die Tokens schon stehen.
Die häufigsten Fehler
Der teuerste Fehler ist der Start bei den Komponenten statt bei den Tokens. Wer erst Buttons baut und die Farbwerte hineinschreibt, hat eine Komponentensammlung ohne gemeinsame Grundlage und muss beim ersten Rebrand von vorn anfangen.
Der zweite Fehler ist die Trennung von Design und Code. Solange Figma-Bibliothek und Frontend getrennt gepflegt werden, laufen sie auseinander. Nach unserer Erfahrung dauert das etwa ein halbes Jahr, danach glaubt niemand mehr der Figma-Datei. Werkzeuge wie Storybook helfen, weil sie den tatsächlichen Code als Bibliothek darstellen.
Der dritte Fehler ist Vollständigkeitsdenken. Ein System, das jede denkbare Situation abbilden will, wird nie fertig und nie benutzt. Fünfzehn gute Komponenten schlagen achtzig halbfertige.
Fazit
Ein Design System ist ein Werkzeug für Organisationen, die an mehreren Stellen gleichzeitig gestalten. Für alle anderen ist es die teurere Variante eines Styleguides.
Mein Rat: Fang bei den Tokens an, egal wie groß dein Unternehmen ist. Sie kosten wenig, ordnen viel und sind der einzige Teil, den du später bereust, wenn er fehlt. Alles darüber baust du, wenn die zweite Oberfläche dazukommt.
