Design System aufbauen -- Konsistenz und Skalierbarkeit für dein Startup

Dein Startup wächst. Neue Features, neue Screens, vielleicht neue Designer oder Entwickler im Team. Und plötzlich sieht jeder Screen ein bisschen anders aus -- unterschiedliche Blauteone, verschiedene Button-Grössen, inkonsistente Abstände. Kommt dir bekannt vor?

Die Lösung heisst: Design System. Und nein, du brauchst dafür kein 20-köpfiges Design-Team wie Google oder Airbnb. In diesem Beitrag zeige ich dir, wie du als Startup mit minimalem Aufwand ein Design System aufbaust, das sofort Wirkung zeigt.

In den vorigen Beiträgen haben wir UX-Grundlagen (Post 276), User Research (Post 277) und UI-Design-Prinzipien (Post 279) besprochen. Das Design System bringt alles zusammen.

Was ist ein Design System?

Ein Design System ist mehr als eine Sammlung von UI-Komponenten. Es ist ein lebendiges Regelwerk, das definiert, wie dein Produkt aussieht, sich anfühlt und funktioniert.

Die drei Schichten eines Design Systems:

1. Design Tokens: Die kleinsten Einheiten -- Farben, Typografie, Abstände, Schatten
2. Komponenten: Wiederverwendbare UI-Bausteine -- Buttons, Cards, Formulare, Navigation
3. Patterns: Komplexere Muster -- Onboarding-Flows, Dashboard-Layouts, Fehlermeldungen

Warum Startups ein Design System brauchen

"Wir sind zu klein für ein Design System" -- höre ich oft. Das Gegenteil ist wahr.

Die Vorteile auf einen Blick:

• Geschwindigkeit: Neue Screens in Stunden statt Tagen entwerfen
• Konsistenz: Überall das gleiche Look-and-Feel
• Qualität: Weniger Fehler, bessere Accessibility
• Skalierbarkeit: Neue Teammitglieder sind sofort produktiv
• Zusammenarbeit: Designer und Entwickler sprechen die gleiche Sprache (siehe auch Post 285)

Der Startup-Ansatz: Design System Light

Du musst nicht mit einem kompletten System wie Material Design starten. Fang klein an und wachse organisch.

Level 1: Design Tokens (Tag 1)

Design Tokens sind die Grundbausteine deines Systems. Definiere sie zuerst:

Farbpalette

Primaerfarbe:
  - Primary-50:  #E8F0FE (Hintergrund)
  - Primary-100: #C5DCF9
  - Primary-200: #9EC3F4
  - Primary-500: #2563EB (Hauptfarbe)
  - Primary-700: #1D4ED8 (Hover)
  - Primary-900: #1E3A8A (Pressed)

Neutraltoene:
  - Gray-50:  #F9FAFB (Hintergrund)
  - Gray-100: #F3F4F6
  - Gray-300: #D1D5DB (Borders)
  - Gray-500: #6B7280 (Sekundaertext)
  - Gray-700: #374151 (Primaertext)
  - Gray-900: #111827 (Ueberschriften)

Semantische Farben:
  - Success: #059669
  - Warning: #D97706
  - Error:   #DC2626
  - Info:    #2563EB

Tipp: Erstelle für jede Farbe 6-10 Abstufungen. Das gibt dir genug Flexibilität für Hover-States, Hintergründe und Borders.

Typografie-Skala

Schriftfamilie: Inter (Google Fonts, kostenlos)

Groessen:
  - xs:   12px / 16px (Line Height)
  - sm:   14px / 20px
  - base: 16px / 24px
  - lg:   18px / 28px
  - xl:   20px / 28px
  - 2xl:  24px / 32px
  - 3xl:  30px / 36px
  - 4xl:  36px / 40px

Gewichte:
  - Regular:  400
  - Medium:   500
  - Semibold: 600
  - Bold:     700

Spacing-System

Nutze ein konsistentes 4px-Raster:

space-1:  4px
space-2:  8px
space-3:  12px
space-4:  16px
space-5:  20px
space-6:  24px
space-8:  32px
space-10: 40px
space-12: 48px
space-16: 64px
space-20: 80px

Warum 4px? Es teilt sich sauber durch 2, ist gross genug für Feinabstimmung und klein genug für Präzision. Die meisten erfolgreichen Design Systeme (Material Design, Carbon) nutzen ein 4px- oder 8px-Grid.

Border Radius

radius-sm:   4px  (Buttons, Inputs)
radius-md:   8px  (Cards, Dropdowns)
radius-lg:   12px (Modals, groessere Cards)
radius-xl:   16px (Hervorgehobene Elemente)
radius-full: 9999px (Avatare, Badges)

Shadows

shadow-sm:  0 1px 2px rgba(0,0,0,0.05)
shadow-md:  0 4px 6px rgba(0,0,0,0.07)
shadow-lg:  0 10px 15px rgba(0,0,0,0.1)
shadow-xl:  0 20px 25px rgba(0,0,0,0.1)

Level 2: Kernkomponenten (Woche 1-2)

Nachdem deine Tokens definiert sind, erstelle die wichtigsten Komponenten:

Die 10 Komponenten, die jedes Startup braucht

Anatomie einer Komponente am Beispiel Button

Jede Komponente sollte folgendes dokumentieren:

Zustände:

• Default
• Hover
• Active/Pressed
• Focus (Keyboard-Navigation -- wichtig für Accessibility!)
• Disabled
• Loading

Grössen:

• Small: 32px Höhe, 12px Font
• Medium: 40px Höhe, 14px Font
• Large: 48px Höhe, 16px Font

Varianten:

• Primary (gefüllt)
• Secondary (Outline)
• Ghost (nur Text)
• Danger (für destruktive Aktionen)

Regeln:

• Minimum-Breite: 80px
• Padding: 12px horizontal (Small), 16px (Medium), 20px (Large)
• Icon + Text: 8px Abstand zwischen Icon und Text
• Nur Icons: Quadratische Buttons mit Tooltip

Level 3: Patterns und Templates (Woche 3-4)

Patterns sind komplexere, wiederverwendbare Design-Lösungen:

Wichtige Patterns für Startups:

• Registrierungsformular: Einheitlicher Aufbau für alle Sign-up-Flows
• Empty State: Was zeigen wir, wenn noch keine Daten vorhanden sind?
• Error Page: 404, 500 und andere Fehlerseiten
• Settings Page: Konsistenter Aufbau für alle Einstellungen
• List View vs. Grid View: Wann welche Darstellung?
• Search: Suchfeld, Ergebnisse, Filter
• Pagination: Seitennavigation für Listen

Design System in Figma aufbauen

Figma ist das Tool der Wahl für die meisten Startups -- kostenlos und kollaborativ. Einen Vergleich aller Tools findest du in Post 284.

Figma-Struktur für dein Design System

Design System (Figma-Datei)
|
|-- Cover Page (Uebersicht und Inhaltsverzeichnis)
|
|-- Foundations
|   |-- Colors
|   |-- Typography
|   |-- Spacing & Grid
|   |-- Shadows & Elevation
|   |-- Icons
|
|-- Components
|   |-- Buttons
|   |-- Inputs
|   |-- Cards
|   |-- Navigation
|   |-- Modals
|   |-- Tables
|   |-- Alerts
|   |-- ...
|
|-- Patterns
|   |-- Forms
|   |-- Empty States
|   |-- Error Pages
|   |-- Settings
|   |-- ...
|
|-- Templates
|   |-- Landing Page
|   |-- Dashboard
|   |-- Onboarding
|   |-- ...

Figma-Features, die du nutzen solltest

• Variables: Speichere Design Tokens als Variablen (Farben, Spacing)
• Auto Layout: Komponenten passen sich automatisch an Inhalte an
• Component Properties: Varianten einer Komponente in einem Element
• Styles: Wiederverwendbare Text- und Farbstile
• Component Sets: Gruppiere alle Varianten einer Komponente

Vom Design System zum Code

Ein Design System in Figma ist nur die Hälfte. Es muss auch im Code existieren.

CSS Custom Properties (CSS Variables)

:root {
  /* Colors */
  --color-primary-500: #2563EB;
  --color-primary-700: #1D4ED8;
  --color-gray-50: #F9FAFB;
  --color-gray-700: #374151;
  --color-success: #059669;
  --color-error: #DC2626;

  /* Typography */
  --font-family: 'Inter', sans-serif;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --line-height-base: 1.5;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-8: 32px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
}

Komponentenbibliotheken für Startups

Statt alles selbst zu bauen, nutze bestehende Bibliotheken als Basis:

Meine Empfehlung für österreichische Startups: Tailwind CSS + shadcn/ui. Beide sind extrem anpassbar, gut dokumentiert und haben eine grosse Community. Du startest mit bewählten Komponenten und passt sie an dein Branding an -- statt alles von Null zu bauen.

Design System Governance: Wer pflegt das System?

Ein Design System ist nur so gut wie seine Pflege. Auch in kleinen Teams braucht es klare Verantwortlichkeiten:

Im 2-3-Personen-Team

• Eine Person ist "Design System Owner" (20% ihrer Zeit)
• Neue Komponenten werden im Team besprochen
• Wöchentliches 15-Minuten-Check-in: Was fehlt? Was ist inkonsistent?

Im 5-10-Personen-Team

• Design System Owner (30-50% der Zeit)
• Contribution-Guidelines: Wie fügt man neue Komponenten hinzu?
• Monatliches Audit: Werden die Komponenten korrekt verwendet?
• Changelog: Was hat sich geändert?

Wichtige Prinzipien

1. Start small, grow organically: Erstelle Komponenten erst, wenn du sie brauchst -- nicht auf Vorrat
2. Document decisions: Warum sieht der Button so aus? Schreib es auf
3. Single source of truth: Eine Figma-Datei, ein Code-Repository
4. Accessible by default: Jede Komponente muss barrierefrei sein (Post 282)
5. Test with real content: Keine Lorem-ipsum-Designs

Bekannte Design Systeme als Inspiration

Du musst das Rad nicht neu erfinden. Diese Open-Source-Design-Systeme sind hervorragende Referenzen:

• Material Design 3 (Google): Umfassend, gut dokumentiert
• Carbon (IBM): Enterprise-fokussiert, exzellente Accessibility
• Polaris (Shopify): E-Commerce-optimiert
• Atlassian Design System: Produktivitäts-Tools
• Primer (GitHub): Developer-fokussiert

Tipp: Schau dir die Dokumentation dieser Systeme an -- nicht um sie zu kopieren, sondern um zu verstehen, wie professionelle Teams Design-Entscheidungen dokumentieren und kommunizieren.

Design System Checkliste für Startups

Woche 1: Foundations

• Farbpalette definieren (Primär, Sekundär, Neutral, Semantisch)
• Typografie-Skala festlegen
• Spacing-System wählen (4px oder 8px Grid)
• Border Radius definieren
• Shadow-Stufen festlegen
• Icon-Set wählen (z.B. Lucide, Phosphor)

Woche 2: Kernkomponenten

• Buttons (alle Varianten und Zustände)
• Input Fields (alle Zustände)
• Cards (mit/ohne Bild)
• Navigation (Desktop + Mobile)
• Typography-Komponenten

Woche 3: Erweiterte Komponenten

• Modals/Dialoge
• Alerts und Toasts
• Tables
• Dropdowns
• Badges und Tags

Woche 4: Patterns und Dokumentation

• Formular-Pattern
• Empty States
• Error Pages
• Dokumentation der wichtigsten Entscheidungen
• Onboarding-Dokument für neue Teammitglieder

Geschätzter Aufwand: 40-60 Stunden über 4 Wochen (bei einer Person).

Häufige Fehler beim Aufbau eines Design Systems

1. Zu gross starten: Du brauchst kein System mit 200 Komponenten. 10-15 reichen für den Anfang.
2. Keine Governance: Wenn niemand verantwortlich ist, veraltet das System schnell.
3. Design ohne Code: Ein Design System muss in beiden Welten existieren -- Figma UND Code.
4. Perfektionismus: Version 1 darf (und wird) nicht perfekt sein. Iteriere.
5. Kein Buy-in vom Team: Wenn die Entwickler das System nicht nutzen, ist es wertlos. Beziehe sie früh ein.

Dein nächster Schritt

Bei Startup Burgenland unterstützen wir dich beim Aufbau eines schlanken Design Systems, das mit deinem Startup wächst. Hol dir jetzt den Gründungszuschuss und mach dein Design System zur Grundlage für ein konsistentes, skalierbares Produkt.

Dieser Beitrag ist Teil der Serie "UX, UI und Design" auf Startup Burgenland. Alle Beiträge findest du in unserem Blog.

Über den Autor: Felix Lenhard ist Program Director und Startup Coach bei Startup Burgenland. Zuvor Managing Director beim 360 Innovation Lab, Innovation Manager bei RHI Magnesita und Serial Entrepreneur mit internationalen Exits. Über 15 Jahre Erfahrung in Innovation und Unternehmensaufbau.