Design-System für KMU: Brand-Stack ohne Konzern-Budget

„Wir bräuchten mal ein Design-System.“ Diesen Satz hören wir in zwei Varianten: einmal voller Begeisterung, einmal voller Verzweiflung. Begeisterung, wenn jemand ein 200-seitiges Konzern-Brand-Manual gesehen hat und sich vorstellt, das wäre der heilige Gral. Verzweiflung, wenn er gemerkt hat, dass niemand im Mittelstand 200 Seiten Brand-Manual durcharbeiten kann.

Die Wahrheit liegt dazwischen — viel näher am pragmatischen Ende. Ein KMU-Design-System darf eine A4-Seite sein und trotzdem hochwertig wirken. Hier ist, wie das aussieht.

Was ein Design-System ist

Ein Design-System ist ein Satz Regeln, der jede gestalterische Frage in einer Minute beantwortet: Welche Schrift in welcher Größe? Welche Farbe für welche Funktion? Wie sieht ein Button aus, wie ein Input-Feld, wie eine Karte? Wie viel Abstand zwischen Sektionen?

Wer keine Antwort auf diese Fragen festschreibt, beantwortet sie auf jeder neuen Seite neu — und meistens leicht anders als zuvor. Nach zwölf Monaten hat man eine Site mit fünf Button-Varianten, drei Karten-Stilen und uneinheitlichen Abständen. Das wirkt nicht „individuell“. Das wirkt nachlässig.

Der vierteilige Kern

1. Farbset

Vier Farben reichen für 95 % aller KMU-Sites:

• Eine Primärfarbe — der dominante Markenton. Wird sparsam eingesetzt, vor allem an wichtigen Stellen (Hero-Akzent, Hauptbutton).
• Eine Sekundärfarbe — neutralerer Hintergrund-Ton, oft eine warme oder kühle Variante des Hintergrunds.
• Ein Warm-Akzent — für Hervorhebungen mit Energie (z.B. Hinweis-Boxen, CTAs).
• Ein Neutral-Akzent — für gedeckte Hervorhebungen (z.B. Hintergrund von Zitat-Boxen).

Wichtig: Kontrast-Werte müssen WCAG-Level AA erfüllen — sonst hast du ein BFSG-Problem. Heller Text auf hellem Grund ist nicht „dezent“, sondern unzugänglich.

2. Schriftsystem

Zwei Schriften reichen, manchmal sogar eine:

• Eine Display-Schrift für Überschriften — eine Schrift mit Charakter, die deine Marke trägt. Serif-Schriften wirken oft hochwertig im KMU-Web.
• Eine Lese-Schrift für Fließtext — eine ruhige Sans-Serif oder Serif, die auf jedem Bildschirm lesbar ist.

Eine Schrift kann beide Funktionen übernehmen (z.B. eine moderne variable Sans-Serif), aber dann braucht es feine Gewichts- und Größen-Unterschiede, damit Hierarchie sichtbar bleibt. Drei Schriften oder mehr sind im KMU fast immer Überfütterung.

3. Komponenten-Kern

Vier Grund-Komponenten decken den Großteil ab:

• Button — in zwei oder drei Varianten (Primär, Sekundär, Geist), aber konsequent gleicher Form (Radius, Padding, Hover-Verhalten)
• Input-Feld — eine Variante, optional mit Fehler-Zustand. Keine fünf verschiedenen Eingabe-Stile.
• Karte — Sammlung-Container mit Titel, Untertitel, optionalem Bild. Identisch über alle Listen hinweg.
• Sektion — Layout-Block mit klarem Padding, Maximum-Breite, optionalem Hintergrund. Sektionen sind die Bausteine der Seite.

4. Spacing-Regel

Die wirksamste Premium-Regel: ein einziges Spacing-Raster (z.B. 4-Pixel-Vielfache: 4, 8, 16, 24, 32, 48, 64, 96). Jeder Abstand auf der Site ist ein Vielfaches davon. Das klingt mathematisch, aber es schafft sofort visuelle Ruhe — weil das Auge die Gleichmäßigkeit unbewusst spürt.

Premium durch Disziplin, nicht durch Vielfalt

Die größte Versuchung im KMU-Design: Vielfalt als Qualität missverstehen. Mehr Schriften, mehr Farben, mehr Komponenten-Varianten — das wirkt nach „aufwendig“, ist aber das Gegenteil von Premium.

Echte Premium-Sites haben weniger als andere Sites, nicht mehr. Eine Schrift, zwei Farben, vier Komponenten. Aber die werden mit absoluter Konsistenz eingesetzt. Diese Konsequenz ist sichtbar — auch wenn niemand sie bewusst erkennen kann.

Brand-Stack ohne Konzern-Budget

Wer im KMU ein Design-System aufbaut, hat weder Geld noch Zeit für ein 200-seitiges Brand-Manual. Realistische Größenordnung:

• Eine A4-Seite mit Farb-Codes (Hex-Werte), Schrift-Namen, Spacing-Regel — ausgedruckt am Arbeitsplatz
• Eine Code-Datei (CSS-Variablen oder Tailwind-Konfiguration) mit allen Token
• Eine Komponenten-Bibliothek im verwendeten Frontend-Framework (Astro, React oder reine HTML-Komponenten)
• Optional: eine „Pattern-Seite“ auf der Site, die alle Komponenten in Aktion zeigt — als interne Referenz

Das ist überschaubar. Es kostet ein bis zwei Arbeitstage einmalig — und spart jede Woche Diskussions-Zeit, weil neue Inhalte sich am System bedienen.

Wo Konzern-Manuals scheitern

Konzern-Brand-Manuals haben 200 Seiten, weil sie für 50+ Teams in 30+ Ländern Konsistenz erzwingen müssen. Im KMU mit zwei oder drei Schreibenden ist dieser Aufwand nicht nur überdimensioniert — er verhindert Pflege.

Ein 200-Seiten-Manual wird in der ersten Woche bewundert und nie wieder geöffnet. Eine A4-Seite mit Farb-Codes und Spacing-Regeln wird wirklich genutzt. Was nicht genutzt wird, hilft nicht.

Aktualisierung: einmal pro Jahr reicht

Ein KMU-Design-System ist kein Wartungs-Projekt. Einmal pro Jahr ehrlich anschauen, welche Komponenten in der Praxis ergänzt wurden, welche unbenutzt blieben, welche Farben sich verschoben haben — und das System nachpflegen. Das ist genug. Wer alle zwei Wochen am Brand-Manual schraubt, hat seine Arbeitszeit falsch verteilt.

Was Hannes daraus macht

Unser eigenes Design-System lebt in einer einzigen Datei mit Farb-Token, Schrift-Definitionen und Spacing-Regeln. Komponenten sind als kleine wiederverwendbare Blöcke im Framework hinterlegt. Wenn wir eine neue Seite bauen, kombinieren wir vorhandene Komponenten — wir erfinden selten Neues. Das wirkt im Werkstatt-Alltag fast langweilig, aber das Ergebnis ist eine Site, die in zwei Jahren noch konsistent aussieht. Und genau das ist Premium-Wirkung.

Wenn du an einem eigenen Design-System sitzt und unsicher bist, ob es schon trägt oder noch wuchert, ist der einfachste Test: Such auf deiner Site zehn Buttons. Wenn alle zehn identisch aussehen — sitzt das System. Wenn fünf Varianten dabei sind — fängt das System gerade erst an.