Ein kleines Designsystem

In den vorigen Lektionen dieses Kurses haben Sie viele Einzelentscheidungen kennengelernt: eine Typografie mit Skala, eine Farbpalette mit Rollen, ein Raster, ein Abstandssystem, eine Bildsprache, ein Icon-Set, Logoregeln. Jede davon macht einen Auftritt besser. Ihre volle Wirkung entfalten sie aber erst, wenn sie zusammengeführt, dokumentiert und von allen Beteiligten genutzt werden. Genau das leistet ein Designsystem. Große Organisationen wie Google, IBM oder die britische Regierung pflegen umfangreiche Designsysteme mit Hunderten von Seiten. Für ein mittelständisches Unternehmen genügt ein kleines – und schon das verändert die Arbeit spürbar.

1. Was ein Designsystem ist

Ein Designsystem ist mehr als ein Styleguide. Ein klassischer Styleguide beschreibt, wie das Logo aussehen soll und welche Farben erlaubt sind. Ein Designsystem geht weiter: Es enthält fertige, getestete Bausteine, die direkt verwendet werden können – im Gestaltungsprogramm ebenso wie im Code. Wer eine neue Seite baut, erfindet keine Knöpfe, Formulare oder Karten mehr, sondern setzt vorhandene zusammen.

2. Vier Ebenen

Abb. 4.1Vom Token zur Seite

Die Grundlage bilden die Tokens: benannte Werte für Farben, Schriften, Schriftgrößen, Abstände, Radien und Schatten. Sie sind die Entscheidungen, die Sie in den vorigen Modulen getroffen haben, nur in einer Form, die Gestaltungsprogramme und Code gleichermaßen verstehen. Aus Tokens werden Komponenten gebaut, aus Komponenten Muster, aus Mustern Seiten. Der Vorteil dieser Schichtung zeigt sich bei Änderungen: Wird die Primärfarbe angepasst, ändert man ein einziges Token, und alle Knöpfe, Links und Hervorhebungen folgen automatisch.

3. Probieren Sie es aus

Im Baukasten verändern Sie vier Tokens. Beobachten Sie, wie Karte, Eingabefeld und Knöpfe gleichzeitig reagieren, und wie sich die Tokens unten als Daten darstellen.

{
  "farbe.primaer": "#4f5bff",
  "farbe.text": "#0f1115",
  "farbe.flaeche": "#f6f7fb",
  "radius.m": "12px",
  "abstand.einheit": "8px",
  "schrift.basis": "Grotesk"
}

Diese Demonstration zeigt im Kleinen, was ein Designsystem im Großen leistet: Entscheidungen werden einmal getroffen und dann überall konsistent angewendet. Das spart Zeit, verhindert Abweichungen und macht Änderungen beherrschbar.

4. Ein Designsystem für den Mittelstand

Ein kleines Designsystem für ein Unternehmen mit einer Website, einigen Landingpages und den üblichen Dokumenten braucht keinen eigenen Mitarbeiterstab. Es genügt eine überschaubare Zahl von Bausteinen, die sorgfältig gemacht sind.

Wichtig ist, dass das System an einem Ort lebt, an dem alle es finden: in einer Figma-Bibliothek für die Gestaltung, als Komponentenbibliothek im Code der Website und als kurze, gut lesbare Dokumentation für alle anderen. Die Dokumentation muss nicht umfangreich sein. Für jede Komponente genügen ein Beispiel, die Varianten, ein Satz zum richtigen Einsatz und ein Satz zu typischen Fehlern.

5. Einführen und pflegen

Das größte Risiko eines Designsystems ist nicht ein Gestaltungsfehler, sondern dass es nicht genutzt wird. Deshalb gehören zur Einführung drei Dinge. Erstens eine klare Zuständigkeit: Eine Person oder ein kleines Team entscheidet über Änderungen und Ergänzungen. Zweitens eine Einweisung für alle, die Inhalte erstellen – Marketing, Vertrieb, Personal, Agenturen. Drittens ein einfacher Weg, Wünsche einzubringen: Wer einen Baustein vermisst, meldet das, statt eine eigene Lösung zu bauen.

Die Pflege folgt einem ruhigen Rhythmus. Einmal im Quartal wird geprüft, welche Bausteine fehlen, welche nicht mehr gebraucht werden und wo sich Abweichungen eingeschlichen haben. Größere Änderungen werden gesammelt und gemeinsam eingeführt, statt jede Woche etwas zu ändern. Und jede Änderung wird dokumentiert, damit nachvollziehbar bleibt, warum etwas so ist, wie es ist.

Der Nutzen zeigt sich schnell. Neue Seiten entstehen in Stunden statt Tagen, weil vorhandene Bausteine zusammengesetzt werden. Agenturen und Freelancer arbeiten sich schneller ein. Barrierefreiheit muss nicht auf jeder Seite neu geprüft werden, weil sie in den Komponenten steckt. Und der Auftritt wirkt über alle Kanäle hinweg einheitlich, was Vertrauen und Wiedererkennung stärkt. Mit dieser Lektion endet das Modul Bild und Marke. Im letzten Modul des Kurses geht es um Design in der Praxis: Gestaltung beurteilen, briefen, Feedback geben und mit KI-Werkzeugen arbeiten.

6. Klein anfangen: ein Fahrplan

Wie beginnt man ein Designsystem, ohne sich zu übernehmen? Ein bewährter Weg führt in vier Schritten zum Ziel. Im ersten Schritt wird eine Bestandsaufnahme gemacht: Screenshots aller wichtigen Seiten, Präsentationen und Dokumente werden nebeneinandergelegt, und man zählt, wie viele verschiedene Knöpfe, Schriftgrößen, Farben und Abstände tatsächlich verwendet werden. Das Ergebnis überrascht fast immer und liefert zugleich die Begründung für das Vorhaben.

Im zweiten Schritt werden die Grundlagen festgelegt, also die Tokens: Farbrollen, Schriftskala, Abstandssystem, Radien. Hier fließen die Entscheidungen aus den vorigen Modulen dieses Kurses ein. Im dritten Schritt entstehen die zehn bis fünfzehn Komponenten, die am häufigsten gebraucht werden, und zwar gleich in Gestaltung und Code. Im vierten Schritt wird eine erste Seite vollständig aus dem System gebaut, um zu prüfen, ob alles zusammenpasst. Erst danach werden weitere Seiten umgestellt, eine nach der anderen, am besten beginnend mit den Seiten, die am häufigsten besucht werden.

Dieser Weg dauert je nach Größe des Auftritts einige Wochen, liefert aber von Anfang an sichtbare Ergebnisse. Wichtig ist, nicht auf Perfektion zu warten. Ein Designsystem wächst mit seinen Aufgaben, und vieles zeigt sich erst im Gebrauch. Wer mit einer soliden, überschaubaren Grundlage startet und sie konsequent pflegt, hat nach einem Jahr ein System, das den Alltag spürbar erleichtert – und einen Auftritt, der in jedem Detail wie aus einem Guss wirkt. Genau diese Einheitlichkeit ist es, die Besucher als professionell und vertrauenswürdig wahrnehmen, auch wenn sie die einzelnen Regeln dahinter nie bemerken.

Auch für die Zusammenarbeit mit Agenturen verändert ein Designsystem viel. Statt jedes Projekt mit einem neuen Entwurf zu beginnen, arbeitet die Agentur mit den vorhandenen Bausteinen und ergänzt nur, was wirklich fehlt. Das spart Budget, verkürzt Abstimmungen und sorgt dafür, dass Kampagnenseiten, Produktseiten und die Hauptwebsite zusammenpassen. Viele Unternehmen stellen fest, dass sich die Investition in ein Designsystem schon nach wenigen Projekten bezahlt macht. Hinzu kommt ein oft unterschätzter Vorteil: Wenn die Zusammenarbeit mit einer Agentur endet, bleibt das Wissen im Unternehmen. Das Designsystem dokumentiert alle Entscheidungen, sodass ein neuer Dienstleister nahtlos anknüpfen kann, statt bei null zu beginnen und den Auftritt wieder neu zu erfinden. Das schafft Unabhängigkeit und Planungssicherheit für die kommenden Jahre.

Stand: September 2026. Kursmaterial der Klarwerk Akademie.