Elf Blautöne in einem Produkt
Ein SaaS-Team kam vor einiger Zeit zu uns. Ihr Produkt sah auf jeder Seite ein bisschen anders aus.
Wir haben nachgezählt: elf verschiedene Blautöne. Fünf Button-Varianten. Drei Arten, ein Datum anzuzeigen.
Niemand hatte das so entschieden. Es war einfach passiert, Sprint für Sprint, Entwickler für Entwickler.
Das ist kein Designproblem. Es ist ein fehlendes Design-System.
Was ein Design-System eigentlich ist
Ein Design-System ist die zentrale Quelle der Wahrheit dafür, wie ein Produkt aussieht und funktioniert.
Es ist mehr als eine hübsche Farbpalette. Es bündelt die Bausteine der Oberfläche, die dazugehörigen Code-Komponenten und die Regeln, wie alles zusammenspielt. An einem Ort.
Der entscheidende Punkt ist die Verbindung von Design und Code. Ändert jemand im System die Hauptfarbe, ändert sie sich überall, wo ein Button sie nutzt. Automatisch.
Genau diese Verdrahtung trennt ein echtes Design-System von einer Sammlung schöner Vorlagen.
Die vier Bausteine
Ein Design-System besteht aus vier Schichten, die aufeinander aufbauen.
Design-Tokens. Das sind die kleinsten Einheiten: ein Farbwert, ein Abstand, eine Schriftgröße. Statt überall “blau” zu schreiben, verweisen alle auf denselben Token. Profis unterscheiden hier drei Ebenen: einfache Werte, ihre Bedeutung (etwa “Primärfarbe”) und ihren Einsatzort (etwa “Button-Hintergrund”).
Komponenten. Wiederverwendbare Bausteine wie Buttons, Eingabefelder oder die Navigation. Einmal sauber gebaut, überall gleich.
Muster. Wie Komponenten zusammenarbeiten, um eine Aufgabe zu lösen. Ein Anmeldeformular, ein Bezahlvorgang, eine Suchmaske. Nicht das einzelne Teil, sondern das Zusammenspiel.
Dokumentation. Das Rückgrat. Sie sagt, wann man welche Komponente nutzt und welche nicht. Ohne Doku ist ein Design-System nur ein Ordner voller Dateien.
Was es konkret bringt
Schön und gut, aber was hat ein Unternehmen davon? Drei Dinge, die sich direkt in Zeit und Geld übersetzen.
Erstens, Tempo. Wenn der Button schon existiert, baut ihn niemand zum vierten Mal. Neue Funktionen entstehen aus vorhandenen Teilen, nicht aus dem Nichts.
Zweitens, Konsistenz ohne Disziplin. Das System macht den richtigen Weg zum einfachsten Weg. Niemand muss sich an elf Blautöne erinnern, weil es nur noch einen gibt.
Drittens, leichteres Einarbeiten. Ein neuer Entwickler oder eine neue Agentur greift auf dokumentierte Bausteine zu, statt das gewachsene Chaos zu entschlüsseln. Aus Tagen werden Stunden.
Der Effekt wächst mit der Zeit. Je größer das Produkt, desto teurer ist sein Fehlen.
Zurück zum SaaS-Team mit den elf Blautönen. Nach drei Monaten hatten sie einen klaren Token-Satz, eine schlanke Komponentenbibliothek und eine knappe Doku.
Aus elf Blautönen wurde einer. Neue Seiten entstanden in Stunden statt Tagen, weil niemand mehr bei null begann. Niemand musste dafür umgeschult werden.
Design-System, Styleguide, Komponentenbibliothek
Diese drei Begriffe werden ständig vermischt. Sie meinen nicht dasselbe.
Ein Styleguide beschreibt das Aussehen. Farben, Schriften, Logo-Abstände. Er ist ein Dokument, kein laufender Code.
Eine Komponentenbibliothek ist die Sammlung der Code-Bausteine. Sie liefert den Button, aber nicht die Regel, wann man ihn einsetzt.
Ein Design-System umfasst beides und mehr. Es fügt Muster, Prinzipien und Governance hinzu. Und es verzahnt Design und Code so, dass eine Änderung durch das ganze Produkt wandert.
Kurz gesagt: Der Styleguide sagt, wie es aussieht. Die Bibliothek liefert die Teile. Das System hält alles zusammen.
Was ein Design-System nicht ist
Drei hartnäckige Missverständnisse halten sich.
Es ist keine Figma-Datei. Eine schöne Sammlung von Bildschirmen in einem Designtool ist ein Anfang, bleibt aber ohne Code nur ein Bild. Lebendig wird das System erst, wenn Design und Implementierung verbunden sind.
Es ist kein einmaliges Projekt. Ein Design-System ist ein Produkt, das gepflegt wird. Komponenten kommen dazu, andere verschwinden, die Doku altert.
Und es ist nicht nur etwas für Konzerne. Gerade kleine Teams profitieren, weil sie sich Doppelarbeit am wenigsten leisten können. Der Umfang wächst einfach mit: ein paar Tokens für die einen, eine ausgewachsene Bibliothek für die anderen.
Drei Anzeichen, dass Sie eines brauchen
Hier die ehrliche Antwort, die Ihnen kein Tool-Anbieter gibt: nicht jeder braucht ein Design-System.
Für eine einzelne kleine Website ist ein vollwertiges System Overhead. Sie lösen ein Problem, das Sie noch nicht haben.
Drei Anzeichen sprechen dafür, dass der Zeitpunkt da ist:
- Mehr als eine Handvoll Menschen arbeitet an derselben Oberfläche.
- Ein zweites Produkt oder eine App kommt dazu.
- Ihr Team baut dieselbe Komponente immer wieder neu.
Trifft eines davon zu, kippt die Rechnung. Das System ist anfangs Mehraufwand, der sich später als gesparte Zeit auszahlt.
Es ist dieselbe Logik wie bei der Frage Eigenentwicklung oder Standardsoftware: Der richtige Zeitpunkt hängt an Ihrer Größe und Ihrem Tempo, nicht an einem Trend.
Ein wichtiger Nebeneffekt: Barrierefreiheit
Ein gut gebautes Design-System trägt Barrierefreiheit in seinen Knochen. Kontraste, Fokus-Zustände, Tastaturbedienung: einmal in der Komponente richtig gelöst, überall richtig.
Das ist kein Luxus mehr. Seit dem Barrierefreiheitsstärkungsgesetz ist es für viele Unternehmen Pflicht.
Ein System, das Barrierefreiheit erzwingt, statt sie dem Zufall zu überlassen, spart hier doppelt. Compliance und Nacharbeit gleichzeitig.
Wie Sie klein anfangen
Der größte Irrtum ist, ein Design-System als Großprojekt zu denken. Niemand baut es an einem Stück.
Fangen Sie bei den Tokens an. Sammeln Sie Ihre Farben, Abstände und Schriftgrößen und reduzieren Sie sie auf einen klaren Satz. Allein das beseitigt die elf Blautöne.
Dann die häufigsten Komponenten. Button, Eingabefeld, Karte. Die drei oder vier Teile, die auf jeder Seite vorkommen, zuerst.
Erst danach die Dokumentation und der Rest. Schritt für Schritt, am echten Produkt, nicht in einer Parallelwelt. So liefert das System ab Woche eins Wert, statt monatelang nur Kosten zu verursachen.
Werkzeuge gibt es reichlich. Für Tokens hat sich Style Dictionary etabliert: ein Build-System, das Token-Definitionen in CSS-Variablen, iOS-Konstanten und andere Formate übersetzt. Für die lebende Doku hat sich Storybook durchgesetzt.
Aber verlieren Sie sich nicht im Tooling. Das wichtigste Werkzeug ist die Entscheidung, überhaupt anzufangen.
Wer pflegt das System?
Ein Design-System ohne Eigentümer verwildert. Nach einem halben Jahr stehen wieder konkurrierende Buttons im Code, und keiner weiß, welcher der richtige ist.
Es braucht also Regeln. Wer darf eine neue Komponente aufnehmen? Wer entscheidet über Änderungen an den Tokens? Das ist mit “Governance” gemeint, und sie muss nicht schwergewichtig sein.
In einem kleinen Team reicht oft eine Person, die das System hütet, plus eine klare Stelle, an der Vorschläge landen. Wichtig ist nur, dass die Verantwortung benannt ist.
Sonst zerfällt das System genau in das Chaos, gegen das es gebaut wurde. Und Sie stehen in einem Jahr wieder bei elf Blautönen.
Selbst bauen oder übernehmen?
Sie müssen nicht bei null anfangen. Es gibt drei Wege.
Erstens, ein fertiges System übernehmen. Material Design, Carbon, Shopify Polaris und andere sind ausgereift und kostenlos. Schnell, aber Ihr Produkt sieht aus wie viele andere.
Zweitens, eine offene Basis nehmen und sie zu Ihrer Marke umfärben. Der pragmatische Mittelweg für die meisten KMU.
Drittens, alles selbst bauen. Volle Kontrolle, voller Aufwand. Sinnvoll nur, wenn das Design ein echtes Unterscheidungsmerkmal ist.
Für die meisten KMU ist der Mittelweg die kluge Wahl. Sie bekommen eine getestete Grundlage geschenkt und investieren Ihr Budget dort, wo Ihre Marke sichtbar wird. Statt Monate in ein eigenes Fundament zu stecken, das es längst gibt.
Welcher Weg passt? Das hängt davon ab, wie viel Ihre Marke am visuellen Auftritt hängt. Dieselbe Abwägung wie bei der Wahl des richtigen Tech-Stacks: nicht das Glänzendste gewinnt, sondern das Passende.
Ein Design-System ist am Ende kein Designprojekt. Es ist eine Infrastruktur-Entscheidung, die Ihr Tempo für Jahre prägt.
Überlegen Sie, ob ein Design-System für Ihr Produkt der nächste Schritt ist? Sprechen Sie mit uns. In unserer Design-Partnerschaft bauen wir Systeme, die mitwachsen, statt im Weg zu stehen.
