Design-Systeme im Mittelstand

Design-Systeme gelten oft als Thema für Konzerne mit eigenen Design-Teams. Tatsächlich profitieren gerade kleinere und mittelständische Unternehmen von einem schlanken, gut gepflegten Design-System — weil sie meistens nicht die Kapazität haben, jede neue Seite oder Funktion neu zu erfinden. Ein Design-System ist hier weniger Selbstzweck als pragmatisches Werkzeug, das Konsistenz sichert und Folgekosten senkt.

Dieser Artikel ordnet ein, wann sich ein Design-System lohnt, was wirklich hineingehört — und wo das Konzept überspannt wird.

Ein Design-System ist eine gemeinsame Sprache für die visuellen und funktionalen Bausteine eines Auftritts. Es legt fest, wie Farben heißen, welche Schriftgrößen erlaubt sind, wie Buttons aussehen, wann welche Komponente verwendet wird — und sorgt dafür, dass diese Festlegungen sowohl im Design als auch im Code konsistent gelebt werden.

Im Kern besteht ein Design-System aus drei Schichten:

• Design Tokens — die kleinsten, wiederverwendbaren Werte: Farbcodes, Abstände, Schriftgrößen, Radien, Schattierungen. Sie werden zentral gepflegt und überall referenziert.
• Komponenten — Buttons, Eingabefelder, Karten, Navigationselemente. Visuell und funktional definiert, mit klaren Regeln, wann sie eingesetzt werden.
• Muster — Kombinationen aus Komponenten, die wiederkehrende Aufgaben lösen: Formulare, Listen, Detailseiten, Dialoge.

Erst alle drei Schichten zusammen ergeben ein Design-System, das Konsistenz wirklich sichert.

Ein gepflegtes Design-System bringt im Alltag mehrere konkrete Vorteile:

• Konsistenz über Zeit. Erweiterungen, neue Bereiche und kleine Anpassungen fügen sich harmonisch ein, statt ein Flickenteppich zu werden. Auch nach Jahren wirkt der Auftritt wie aus einem Guss.
• Schnellere Entscheidungen. Wenn Farben, Abstände und Komponenten festgelegt sind, müssen sie nicht in jedem neuen Projekt von vorne diskutiert werden. Das spart Wochen an Abstimmung.
• Geringere Folgekosten. Komponenten, die einmal sauber gebaut wurden, lassen sich beliebig oft wiederverwenden. Statt für jede neue Seite ein eigenes „Karten-Layout" zu bauen, greifen Sie auf den vorhandenen Baustein zurück.
• Saubere Skalierung. Wenn aus einer Website später ein Kundenportal oder eine zweite Sprache wird, wächst das System mit — statt jedes Mal bei null anzufangen.
• Markenwirkung. Ein konsistenter Auftritt vermittelt Verlässlichkeit. Inkonsistenz hingegen wirkt selten kreativ, sondern meist unaufgeräumt.

Nicht jedes Projekt braucht ein vollständiges Design-System. Eine kurze Daumenregel:

Sinnvoll, wenn...

• die Website mehrere Bereiche hat (Unternehmen, Produkte, Karriere, News).
• das Unternehmen mehr als einen Web-Auftritt plant — etwa Hauptwebsite plus Kundenportal.
• regelmäßig neue Inhalte oder Module entstehen sollen, ohne dass jedes Mal grundsätzlich diskutiert wird.
• mehrere Personen am Auftritt mitwirken — Marketing, Produktverantwortliche, externe Texter.
• langfristige Markenwirkung und Wiedererkennbarkeit ein erklärtes Ziel ist.

Nicht sinnvoll, wenn...

• die Website klein und statisch bleibt — fünf bis zehn Seiten, kaum Erweiterung geplant.
• es um eine einmalige Kampagne geht, die nach wenigen Monaten abgeschaltet wird.
• noch keine Marken-Klarheit besteht — ein Design-System auf wackliger Markengrundlage zementiert die Unklarheit.

In vielen Fällen reicht ein schlanker Styleguide als Vorstufe: Farben, Schriften, Buttons, Abstände — auf zwei bis drei Seiten dokumentiert. Daraus kann später ein vollständiges Design-System wachsen, wenn der Bedarf entsteht.

Drei Punkte, an denen Design-System-Initiativen regelmäßig scheitern:

• Zu groß gedacht. Ein Design-System mit 200 Komponenten, das niemand pflegt, ist wertlos. Lieber 20 Komponenten, die wirklich gelebt werden, als 200, die niemand kennt.
• Vom Code entkoppelt. Wenn Design-Tokens in Figma anders definiert sind als im Code, driften beide Welten auseinander. Ein gutes Design-System lebt in einer Quelle, nicht in zweien parallel.
• Ohne Pflegeprozess. Ein Design-System veraltet, wenn niemand für seine Pflege verantwortlich ist. Wer es einführt, muss auch klären, wer Änderungen freigibt, dokumentiert und einarbeitet.

Ein bewusst pragmatischer Ansatz für mittelständische Projekte:

1. Klein anfangen. Mit Tokens beginnen — Farben, Schriften, Abstände, Radien. Diese Grundwerte sind das Fundament jedes konsistenten Auftritts.
2. Komponenten aus echten Seiten ableiten. Statt theoretisch zu sammeln, was es alles geben könnte: aus den realen Seiten herausarbeiten, was wirklich wiederkehrt.
3. Direkt im Code dokumentieren. Komponenten leben dort, wo sie verwendet werden — als wiederverwendbarer Code mit Beispielen. Kein paralleles Figma-System, das auseinanderdriftet.
4. Mit dem Projekt wachsen lassen. Erst wenn eine Komponente das dritte Mal gebraucht wird, gehört sie ins System. Vorher entsteht oft Vorratshaltung, die niemand nutzt.
5. Pflege einplanen. Wer macht Änderungen, wer dokumentiert? Auch im kleinen Maßstab gehört das geklärt — sonst veraltet das System schneller, als es aufgebaut wurde.

Das Ergebnis ist meist kein imposantes „Design-System mit Dutzenden Modulen", sondern eine schlanke, konsequent gelebte Grundlage, die im Alltag wirklich Zeit spart und Konsistenz sichert.