Designsysteme: eine Quelle der Wahrheit

Eine Website wächst selten nach Plan. Eine Aktionsseite kommt hinzu, ein neues Formular, eine zweite Sprache. Jedes Mal wählt jemand einen Button, eine Farbe und einen Abstand, und jedes Mal etwas anders. Nach ein paar Jahren hat Ihre Website vier Arten von Buttons und drei Töne Ihres eigenen Blaus, und niemand weiß mehr, welcher der richtige ist.

Ein Designsystem verhindert das. In diesem Beitrag lesen Sie, was es ist, wie es sich von einem Styleguide oder Brandbook unterscheidet, was hineingehört, wann eine Website eines kleinen oder mittleren Unternehmens eines braucht und wann es zu viel ist, wie Sie es aufbauen und pflegen und was Sie bei der Übergabe erwarten dürfen.

Was ist ein Designsystem?

Ein Designsystem ist der feste Satz, aus dem jeder Bildschirm Ihrer Website oder App entsteht, mit den Regeln dazu. Es besteht aus vier Schichten:

• Tokens: die kleinsten Gestaltungsentscheidungen mit einem Namen, etwa eine Farbe, eine Schriftgröße oder ein Abstand.
• Komponenten: die Bausteine, die Sie immer wieder verwenden, etwa ein Button, ein Eingabefeld, eine Karte oder ein Hinweis.
• Muster: feste Kombinationen von Komponenten für eine Aufgabe, etwa ein Formular mit Fehlermeldungen oder eine Reihe von Karten mit einem Filter.
• Richtlinien: wann Sie was verwenden, und warum.

Das wichtigste Wort ist „eine“. Design und Code schöpfen aus derselben Quelle. Ändert sich die Hauptfarbe, ändert sie sich an einer Stelle, und jeder Button, jeder Link und jede Überschrift, die sie nutzt, ändert sich mit. Deshalb heißt ein Designsystem auch eine Quelle der Wahrheit.

Was unterscheidet es von Styleguide, Brandbook und Komponentenbibliothek?

Die Begriffe gehen durcheinander, und das macht Angebote schwer vergleichbar. So hängen sie zusammen:

Ein Brandbook betrifft Ihre ganze Marke, auch auf einem Lieferwagen oder einer Visitenkarte. Ein Designsystem betrifft Bildschirme. Es übernimmt die Farben und Schriften aus dem Brandbook, regelt aber zusätzlich Dinge, die ein Brandbook nicht regelt: wie ein deaktivierter Button aussieht, was passiert, wenn ein Feld falsch ausgefüllt ist, und welcher Grünton auf weißem Hintergrund lesbar genug ist. Mehr zum Brandbook lesen Sie unter Branding.

Was bringt ein Designsystem?

Vier Dinge, wenn es gepflegt wird:

• Ein Gesicht. Jede Seite wirkt gleich, auch die Seite, die in zwei Jahren hinzukommt.
• Weniger Entscheidungen pro Seite. Wer eine neue Seite erstellt, wählt aus vorhandenen Komponenten, statt neu zu gestalten.
• Ändern an einer Stelle. Eine neue Farbe oder eine größere Schrift passen Sie einmal an, nicht auf vierzig Seiten.
• Dieselbe Sprache. Designer und Entwickler nennen eine Komponente beim selben Namen, also wird beim Bau weniger geraten.

Oft heißt es, eine neue Seite stehe dann in Stunden statt in Tagen. Wie viel Zeit es tatsächlich spart, hängt von der Website ab und davon, wer sie pflegt. Das haben wir nicht gemessen, deshalb nennen wir keine Zahl.

Was gehört in ein Designsystem?

Tokens: Gestaltungsentscheidungen mit einem Namen

Die W3C Design Tokens Community Group, eine Gruppe aus Designern, Entwicklern und Herstellern von Designprogrammen, beschreibt ein Token als Information mit einem lesbaren Namen, mindestens als Paar aus Name und Wert. Am 28. Oktober 2025 erschien die erste stabile Version ihrer Spezifikation (2025.10). Sie legt fest, wie Sie Tokens in einer JSON-Datei notieren, damit Designprogramme und Code sie austauschen können. Das Format kennt unter anderem Tokens für Farbe, Maß, Schriftfamilie, Schriftstärke und Dauer.

Der Nutzen liegt in den Ebenen. Die Dokumentation von Material Web, den Webkomponenten von Googles Material Design, beschreibt drei Arten von Tokens: Referenztokens mit einem festen Wert, etwa einem Farbcode, Systemtokens, die eine Rolle festlegen, und Komponententokens für eine einzelne Komponente. Ein Button verwendet dann nicht „Grün #1C6A45“, sondern „die Farbe für die Hauptaktion“, und diese Rolle verweist auf den Farbcode. In Material Web sind Tokens CSS-Variablen.

Diese Rollen sehen Sie auf den Fallstudien unserer Kunden. Bei Ikiz trägt Nachtblau die Website, und Seegrün markiert, was Sie sehen sollen, etwa Labels und Buttons. Bei TaalPro ist Orange die Farbe der Buttons, und jedes Sprachniveau hat eine eigene Farbe, von Rotorange für A1 bis Bernstein für C1.

Komponenten: Bausteine mit all ihren Zuständen

Ein Button ist kein einzelnes Bild. Er hat Zustände: normal, gedrückt, deaktiviert, und was erscheint, wenn etwas schiefgeht. Ein Eingabefeld hat mehr: leer, ausgefüllt, mit der Tastatur angewählt, fehlerhaft und korrekt. Eine gute Komponente hat all diese Zustände ausgearbeitet, sodass der Entwickler nicht selbst erfinden muss, wie eine Fehlermeldung aussieht. Das ist auch der Unterschied zwischen einem schönen Entwurf und einem brauchbaren System: Der Entwurf zeigt den Normalzustand, das System alle Zustände.

Muster: Komponenten zusammen für eine Aufgabe

Ein Muster ist eine feste Lösung für etwas, das immer wiederkommt: ein Formular in Schritten, ein Suchfeld mit Ergebnissen, ein Preisblock, eine Reihe von Fragen und Antworten. Es legt fest, welche Komponenten hineingehören und in welcher Reihenfolge. Eine neue Leistungsseite muss dann nicht neu gestaltet werden; sie bekommt denselben Aufbau wie die anderen.

Richtlinien: Wann verwenden Sie was?

Richtlinien sind die kurzen Sätze, die falschen Gebrauch verhindern. Ein Hauptbutton pro Bildschirm. Die Akzentfarbe nur auf dunklem Hintergrund. Fehlermeldungen sagen, was falsch ist und wie Sie es beheben. Auch die Worte auf Buttons und in Meldungen gehören dazu; mehr dazu lesen Sie in unserem Beitrag über Microcopy.

Barrierefreiheit: im System, nicht hinterher

Hier gewinnt ein Designsystem am meisten. Prüfen Sie den Kontrast einmal sorgfältig in den Tokens, stimmt er auf jeder Seite, die sie verwendet. Umgekehrt gilt es auch: Ein Fehler in einem Token steckt sofort überall. Die Anforderungen kommen aus den WCAG, den Richtlinien des W3C. Für Farbe sind dies die wichtigsten auf Stufe AA:

Laut W3C dürfen Sie das Ergebnis nicht runden: 4,499:1 reicht nicht. Eine Farbe, die in Ihrem Logo gut funktioniert, ist also nicht automatisch gut genug für Text. Deshalb hat ein Designsystem manchmal zwei Töne derselben Markenfarbe: einen für die Marke und einen für Text. Was das Gesetz verlangt, lesen Sie in unserem Beitrag zum Barrierefreiheitsgesetz.

Braucht die Website eines kleinen Unternehmens ein Designsystem?

Eine leichte Version ja, ein vollständiges System längst nicht immer. Eine Website mit fünf Seiten, die Sie alle paar Jahre erneuern, kommt mit festgelegten Farben, Schriften, Abständen und einer Handvoll Komponenten aus. Ein Satz, in dem jede Komponente alle Zustände hat, mit ausformulierten Mustern und Richtlinien, ist ein eigenes Projekt. Das lohnt sich erst, wenn viele Bildschirme hinzukommen oder mehr Menschen daran arbeiten.

Ein Beispiel für den letzten Fall ist NL Design System, eine Initiative der niederländischen Verwaltung. Es schreibt selbst, dass es kein gewöhnliches Designsystem ist, sondern eine Sammlung von Designsystemen, unter anderem von Gemeinden und Behörden, die gemeinsam herausfinden, welche Komponenten sich in der Praxis bewähren. Ein Corporate Design kann dort als Thema hinterlegt werden. Für diese Größenordnung ist ein vollständiges System gedacht. Für die meisten Websites kleinerer Unternehmen ist es eine Nummer zu groß, aber es zeigt gut, wie Tokens und Themen zusammenwirken.

Was ändert sich bei einem hellen und einem dunklen Thema?

Mit Tokens ist ein zweites Thema keine zweite Website. Jede Rolle bekommt pro Thema einen eigenen Wert, und die Komponenten bleiben gleich. Die Arbeit steckt im Nachrechnen: Jede Kombination aus Text und Hintergrund muss in beiden Themen die Kontrastanforderungen erfüllen. Eine Farbe, die auf Weiß gut lesbar ist, ist es auf fast Schwarz oft nicht.

Sittard Taxi hat zwei vollständige Themen. Die Website öffnet dunkel, ein Button schaltet sie hell, und diese Wahl wird gespeichert. Wer nachts ein Taxi bestellt, schaut nicht in einen grellweißen Bildschirm. Jedes Thema hat eigene Farben; das dunkle ist kein umgedrehtes helles. Der Akzent ist Mint (#00C896) im hellen Thema und Neonmint (#7CFFB4) im dunklen. Auch Basestep, unser eigenes Produkt, hat einen dunklen und einen hellen Modus, mit einem Button oben auf jeder Seite.

Und bei mehreren Sprachen?

Jede Sprache macht Texte länger oder kürzer, und das muss in jeden Bildschirm passen. Ein Button, der auf Niederländisch passt, kann auf Deutsch über zwei Zeilen laufen. Eine Sprache, die von rechts nach links läuft, spiegelt zudem das ganze Layout. Bei TaalPro gibt es jede Seite dreimal, auf Niederländisch, Englisch und Farsi; das Farsi spiegelt das ganze Layout, mit Vazirmatn als Schrift. Ein System, das das von Anfang an berücksichtigt, erspart viele einzelne Korrekturen.

Wie bauen Sie ein Designsystem auf?

Wir beginnen bei den Tokens, dann folgen die Kernkomponenten, dann die Muster, die sie kombinieren. Bei uns entsteht alles in Figma, vom Wireframe bis zum Designsystem mit Tokens und Komponenten. In Schritten:

1. Sehen Sie nach, was schon da ist. Bei einer bestehenden Website sammeln Sie jeden Button, jedes Feld und jede Farbe, die jetzt darauf steht. Diese Übersicht zeigt, was doppelt ist und was fehlt.
2. Legen Sie die Tokens fest. Farben mit einer Rolle, Schriften mit ihren Größen, Abstände in einer festen Reihe. Prüfen Sie den Kontrast, bevor es feststeht.
3. Erstellen Sie die Kernkomponenten. Button, Link, Eingabefeld, Auswahlkästchen, Karte, Hinweis, Menü. Jede mit all ihren Zuständen, auch für die Tastatur.
4. Bauen Sie die Muster. Die festen Kombinationen für die Aufgaben auf Ihrer Website: anfragen, buchen, suchen, vergleichen.
5. Übertragen Sie es in Code. Dieselben Namen und Werte wie im Design, sodass das, was Sie sehen, auch das ist, was gebaut wird. Für den Bau stehen Abstände, Verhalten und Ausnahmen fest.
6. Schreiben Sie es auf. Pro Komponente, wann Sie sie verwenden und wann nicht. Kurz, mit einem Beispiel.

Fangen Sie nicht mit allem an. Die erste Version muss nur enthalten, was Sie jetzt brauchen. Was später hinzukommt, schließt an dieselben Tokens an. Wie das in einem vollständigen Projekt läuft, lesen Sie unter UI/UX-Design; für eine gewöhnliche Website unter Webdesign.

Wie halten Sie ein Designsystem aktuell?

Ein Designsystem, das nicht gepflegt wird, veraltet schneller als die Website selbst. Jemand hat es eilig, baut einen Button am System vorbei, und ein Jahr später sind es wieder vier. Fünf Gewohnheiten halten es zusammen:

• Eine verantwortliche Person. Jemand entscheidet, was hineinkommt. Das kann Ihr Entwickler sein oder jemand aus Ihrem eigenen Team.
• Zuerst im Satz nachsehen. Scheint eine neue Komponente nötig, prüfen Sie zuerst, ob eine bestehende es kann. Wenn nicht, fügen Sie sie dem System hinzu statt einer einzelnen Seite.
• Im Token ändern, nicht auf der Seite. Eine Farbe, die auf einer Seite von Hand angepasst wurde, geht bei der nächsten Änderung verloren.
• Aufräumen mit Ankündigung. Eine Komponente, die wegfallen soll, markieren Sie zuerst als veraltet. Die Spezifikation des W3C hat dafür sogar ein eigenes Feld.
• Kontrast erneut prüfen. Nach jeder Farbänderung, in jedem Thema.

Kleine Dinge passen Sie selbst an: einen Text, ein Bild. Wer später einen Bildschirm hinzufügt, nimmt aus dem festen Satz. Größere Eingriffe in den Aufbau laufen über uns oder über einen Wartungsvertrag, wenn Sie das lieber abgeben.

Was erhalten Sie bei der Übergabe?

Fragen Sie jede Agentur, auch uns. Das gehört bei uns standardmäßig dazu:

• Ein Styleguide: Farben, Typografie und Komponenten, festgehalten. Er gehört zu den drei Dokumenten, die Sie bei jeder Übergabe erhalten, neben einer Anleitung zur Inhaltspflege und technischen Notizen.
• Die Designdateien in Figma, mit vollem Zugriff. Nach der Bezahlung laufen sie auf Ihren Namen, genau wie Domain, Code und Daten.
• Eine Übergabe an den Bau mit Abständen, Verhalten und Ausnahmen. Das gilt für unseren Bau, aber auch, wenn ein anderer Partner baut.
• Bei einem Corporate-Design-Projekt Ihre Farben und Schriften auch als Code, damit ein Entwickler sie direkt nutzen kann.

Nur unsere allgemeinen Bausteine bleiben bei uns. Wie die sechs Phasen eines Projekts ablaufen, lesen Sie in unserem Ablauf. Bei einer kleinen Website mit wenigen Seiten genügt eine leichte Version, und das sagen wir dann auch.

Wann das nicht gilt

Haben Sie eine Website mit einer Handvoll Seiten, die sich selten ändert, ist ein vollständiges Designsystem vor allem zusätzliche Arbeit. Festgelegte Farben und Schriften und ein paar feste Komponenten reichen dann. Arbeiten Sie mit einem gekauften Theme in einem bestehenden System, bestimmt dieses Theme schon vieles; ein eigenes Designsystem daneben kann doppelte Arbeit bedeuten.

Was wir nicht wissen: Wir haben nicht gemessen, wie viel Zeit ein Designsystem bei unseren Kunden spart. Kontrast ist nur ein Teil der Barrierefreiheit; automatische Tests finden längst nicht alle Probleme, und auch ArtsenPool bezeichnet sich noch als teilweise konform. Das Format der Design Tokens Community Group ist seit Oktober 2025 stabil; welche Programme es schon vollständig lesen, haben wir nicht geprüft.

Häufige Fragen

Möchten Sie wissen, wie viel System Ihre Website braucht? Sagen Sie uns, wie groß sie ist und wer sie pflegt, dann sagen wir Ihnen, ob eine leichte Version genügt. Was es kostet, steht unter Preise. Sie arbeiten direkt mit Nawid zusammen; für jedes Projekt stellt er ein festes Team von Spezialisten zusammen.

Quellen

Abgerufen am 3. November 2026.

• W3C, Design Tokens Community Group (erste stabile Version am 28. Oktober 2025)
• Design Tokens Community Group, Design Tokens Format Module 2025.10 (28. Oktober 2025)
• W3C, Understanding WCAG 2.2: 1.4.3 Contrast (Minimum)
• W3C, Understanding WCAG 2.2: 1.4.11 Non-text Contrast
• W3C, Understanding WCAG 2.2: 2.4.7 Focus Visible
• Material Web (Google) auf GitHub, Theming: design tokens
• NL Design System
• Empireyo, Fallstudie ArtsenPool
• Empireyo, Fallstudie Sittard Taxi
• Empireyo, Fallstudie TaalPro
• Empireyo, Fallstudie Ikiz
• Empireyo, Fallstudie Basestep
• Empireyo, Ablauf (Styleguide, Anleitung zur Inhaltspflege und technische Notizen)
• Empireyo, UI/UX-Design (Zustände pro Komponente, Figma, leichte Version)
• Empireyo, Webdesign (Designsystem mit Tokens und Komponenten in Figma)
• Empireyo, Logo und Corporate Design (Farben und Schriften als Code)