Designsysteme für kleine Teams: Mit Tokens anfangen

„Designsystem“ klingt nach etwas für Unternehmen mit eigenem Team und Dokumentations-Website. Dabei braucht ein kleines Team eines eher mehr als weniger: Mit zwei Designern und drei Entwicklern wird jede Inkonsistenz von Hand behoben, immer wieder. Der Trick ist, ein kleines zu bauen – in der richtigen Reihenfolge.

Was ein kleines Designsystem eigentlich ist

Drei Ebenen, und für den Start brauchen Sie nur die ersten beiden:

Tokens – benannte Entscheidungen: Farben, Schriftgrößen, Abstände, Radien, Schatten, Bewegung.
Komponenten – die wiederverwendbaren Bausteine aus diesen Tokens: Buttons, Eingabefelder, Karten.
Muster und Richtlinien – wie Komponenten zusammenspielen: Formulare, leere Zustände, Seitenlayouts. Werden später aufgeschrieben, wenn Sie merken, dass Sie dieselben Erklärungen wiederholen.

Die meisten Teams starten auf Ebene zwei und bauen eine wunderschöne Button-Bibliothek auf 37 leicht unterschiedlichen Grautönen. Fangen Sie mit den Tokens an.

Schritt 1: Tokens

Farbe

Legen Sie zwei Stufen fest. Primitive Tokens sind die Palette; semantische Tokens sagen, wofür eine Farbe da ist:

tokens.css

:root {
  /* Primitives */
  --blue-500: #0777d2;
  --blue-600: #0563b0;
  --gray-50: #f8f9fa;
  --gray-900: #111418;
  --red-600: #d92d20;

  /* Semantic — components only use these */
  --color-bg: #ffffff;
  --color-surface: var(--gray-50);
  --color-text: var(--gray-900);
  --color-text-muted: #5b6370;
  --color-primary: var(--blue-500);
  --color-primary-hover: var(--blue-600);
  --color-danger: var(--red-600);
  --color-border: #e3e6ea;
}

[data-theme='dark'] {
  --color-bg: #0d1117;
  --color-surface: #161b22;
  --color-text: #e6edf3;
  --color-border: #30363d;
}

Komponenten verweisen nur auf semantische Tokens. Genau das macht Dark Mode, ein Rebranding oder einen White-Label-Kunden zu einer Änderung in einer einzigen Datei.

Prüfen Sie bei der Gelegenheit den Kontrast: Fließtext braucht mindestens 4,5:1 gegenüber seinem Hintergrund (WCAG AA), großer Text 3:1.

Typografie

Wählen Sie eine oder zwei Schriftfamilien und eine Skala mit sechs bis acht Größen. Eine modulare Skala (jede Stufe etwa 1,2- bis 1,25-mal die vorige) hält den Rhythmus stimmig:

css

:root {
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.75rem;
  --leading-tight: 1.15;
  --leading-normal: 1.6;
}

Abstände, Radien, Schatten, Bewegung

Eine Abstandsskala in 4- oder 8-Pixel-Schritten (4, 8, 12, 16, 24, 32, 48, 64), zwei oder drei Radien, zwei oder drei Schatten und zwei oder drei Dauern mit einer Easing-Kurve. Jeder Wert, der auf keiner Skala liegt, ist eine Entscheidung, die jemand erneut treffen muss.

In Tailwind CSS

Wenn Sie Tailwind nutzen, ist das Theme Ihre Token-Datei. Verweisen Sie es auf die CSS-Variablen, damit dieselben Tokens beides steuern:

tailwind.config.ts

export default {
  theme: {
    extend: {
      colors: {
        bg: 'var(--color-bg)',
        surface: 'var(--color-surface)',
        text: 'var(--color-text)',
        muted: 'var(--color-text-muted)',
        primary: { DEFAULT: 'var(--color-primary)', hover: 'var(--color-primary-hover)' },
        danger: 'var(--color-danger)',
        border: 'var(--color-border)',
      },
    },
  },
}

Schritt 2: Die ersten zehn Komponenten

Diese decken die meisten Produkt-Screens ab:

Button – primär, sekundär, Ghost, destruktiv; Größen; Lade- und deaktivierter Zustand
Texteingabe – mit Label, Hinweis und Fehlermeldung
Select / Combobox
Checkbox, Radio-Button und Schalter
Karte – der Container für fast alles
Modal / Dialog – mit Fokus-Falle und Schließen per Escape
Toast – für Bestätigungen und Fehler
Tabs
Badge / Tag
Leerer Zustand – Icon, eine Zeile Text, eine Aktion

Bauen Sie Barrierefreiheit nicht selbst von Grund auf: Headless-Bibliotheken wie Radix UI, React Aria oder Headless UI kümmern sich um Fokus, Tastaturnavigation und ARIA, und Sie gestalten sie mit Ihren Tokens. shadcn/ui ist ein beliebter Ausgangspunkt, der Radix-basierte Komponenten in Ihre eigene Codebasis kopiert, wo sie Ihnen gehören.

Jede Komponente braucht ihre Zustände

Der Unterschied zwischen einer Demo und einem Produkt sind die Zustände. Gestalten und bauen Sie für jede Komponente: Standard, Hover, Fokus (sichtbar!), aktiv, deaktiviert, lädt, Fehler und leer. Fokuszustände werden am häufigsten vergessen – und genau auf sie sind Menschen angewiesen, die mit der Tastatur navigieren.

Schritt 3: Figma und Code synchron halten

Dieselben Namen auf beiden Seiten. Heißt es in Figma color/text/muted und im Code --gray-500, laufen beide auseinander. Nutzen Sie Figma Variables mit den semantischen Namen aus Ihrer Token-Datei.
Eine einzige Quelle für Werte. Kleine Teams können einfach vereinbaren, dass der Code die Quelle ist, und die Figma-Variablen anpassen, wenn sich Tokens ändern. Größere Teams exportieren Variablen als JSON und erzeugen daraus CSS (Style Dictionary oder Tokens Studio).
Komponenten in Figma spiegeln die Props im Code. Eine Figma-Variante size=sm, variant=secondary sollte <Button size="sm" variant="secondary"> entsprechen.

Schritt 4: Nur aufschreiben, was sich wiederholt

Dokumentation muss keine Website sein. Eine einzige Seite in Ihrem Repository mit der Token-Liste, einem Screenshot jeder Komponente und ein paar Regeln („ein primärer Button pro Screen“, „destruktive Aktionen fragen nach Bestätigung“) genügt. Ergänzen Sie eine Regel, sobald Sie im Review zweimal dasselbe erklären.

Die häufigsten Fehler

Zu viele Varianten. Fünf Button-Stile, die niemand auseinanderhalten kann. Fangen Sie mit drei an.
Fest eingetragene Werte schleichen sich wieder ein. Eine Lint-Regel oder ein Punkt auf der Code-Review-Checkliste („keine Hex-Werte außerhalb von tokens.css“) hält das System ehrlich.
Komponenten gestalten, die noch kein Screen braucht. Bauen Sie Komponenten, wenn der zweite Screen sie braucht, nicht vorher.
Das System als fertig betrachten. Es ist ein Produkt, dessen Nutzer Ihr eigenes Team ist. Nehmen Sie es sich alle paar Monate wieder vor.

Wie lange dauert das?

Für ein kleines Produkt braucht eine erste Version – Tokens, zehn Komponenten mit Zuständen, Figma-Variablen und eine einseitige Anleitung – grob ein bis drei Wochen Design- und Entwicklungszeit zusammengenommen. Sie zahlt sich aus, sobald Sie einen neuen Screen an einem Nachmittag bauen oder Dark Mode an einem Tag einschalten.

Sie fangen bei null an, noch ohne Logo und Marke? Dann erledigen Sie das zuerst – siehe die Markenidentität, die ein Startup zum Launch braucht.