# Design-System

> Ein Design-System ist eine zentrale Sammlung wiederverwendbarer UI-Komponenten, Tokens und Regeln, die jede Seite einheitlich und schneller umsetzbar macht.

**Quelle:** https://www.webtree.ch/lexikon/design-system

---

Ein **Design-System** ist die zentrale, dokumentierte Grundlage, aus der eine Website oder App gebaut wird. Es buendelt **wiederverwendbare Komponenten** (Buttons, Karten, Formulare, Navigation), **Design-Tokens** (Farben, Schriftgroessen, Abstaende, Radien als benannte Werte) und klare **Regeln**, wie diese Bausteine kombiniert werden. Anders als ein einmaliger Screen-Entwurf ist ein Design-System ein lebendes Regelwerk: eine einzige Quelle der Wahrheit, an der sich Design und Entwicklung gemeinsam orientieren.

Wichtig ist die Abgrenzung: Ein **Styleguide** beschreibt nur das Aussehen (Farben, Logo, Typografie). Eine **Pattern-Library** sammelt fertige Komponenten. Ein Design-System verbindet beides mit Prinzipien und Code, sodass Gestaltung und Umsetzung untrennbar zusammenhaengen.

## Warum es wichtig ist

Ohne System wird jede neue Seite neu erfunden: Buttons sehen leicht unterschiedlich aus, Abstaende variieren, die Marke wirkt zusammengewuerfelt. Ein Design-System sorgt fuer **visuelle Konsistenz** ueber alle Seiten hinweg und staerkt so das Vertrauen in deine Marke. Gleichzeitig wird die Umsetzung **schneller**, weil bestehende Komponenten wiederverwendet statt neu gebaut werden. Aenderst du einen Token zentral, etwa die Akzentfarbe, schlaegt das automatisch ueberall durch. Das senkt Fehlerquote und Wartungsaufwand spuerbar.

## Wie es in der Praxis funktioniert

Ein durchdachtes Design-System besteht typischerweise aus mehreren Ebenen:

- **Design-Tokens:** benannte Basiswerte wie `--color-accent` oder eine feste Abstands-Skala, die Design und Code teilen.
- **Komponenten:** in sich abgeschlossene, wiederverwendbare Bausteine (z. B. ein Button mit allen Zustaenden: normal, hover, deaktiviert).
- **Muster (Patterns):** wie Komponenten zu groesseren Einheiten kombiniert werden, etwa ein Formular-Layout.
- **Richtlinien:** wann welches Element genutzt wird, dazu Vorgaben fuer **Barrierefreiheit** wie Kontraste und Fokus-Zustaende.
- **Dokumentation:** eine zentrale Referenz, oft mit Tools wie Figma fuer Design und Storybook fuer Code.

In modernen Frontends bilden CSS-Variablen, Utility-Frameworks und Komponenten-Bibliotheken ein Design-System direkt im Code ab, sodass Entwurf und Umsetzung dieselbe Logik teilen.

## Praxis-Bezug fuer Schweizer KMU

Auch fuer ein KMU lohnt sich ein schlankes Design-System, selbst wenn die Website klein startet. Es zahlt sich aus, sobald neue Seiten, Landingpages oder ein Blog dazukommen: Alles bleibt einheitlich, schnell erweiterbar und guenstiger in der Pflege. Bei Webtree arbeiten wir grundsaetzlich mit einem eigenen Design-System aus Tokens und Komponenten. So bleibt deine Marke ueber jede Unterseite hinweg konsistent, und neue Inhalte sind in Tagen statt Wochen online.

---

## Haeufige Fragen

**Was ist der Unterschied zwischen einem Design-System und einem Styleguide?**

Ein Styleguide beschreibt vor allem das Aussehen: Farben, Logo, Typografie und Bildsprache. Ein Design-System geht weiter und umfasst zusaetzlich wiederverwendbare Komponenten, Design-Tokens, Nutzungsregeln und oft den dazugehoerigen Code. Es ist die uebergeordnete, lebende Grundlage, in der ein Styleguide nur ein Teil ist.

**Braucht eine kleine KMU-Website ueberhaupt ein Design-System?**

Ja, in schlanker Form. Schon eine kleine Sammlung aus Farb- und Abstands-Tokens sowie einheitlichen Buttons und Karten sorgt fuer ein professionelles, konsistentes Auftreten. Der Nutzen waechst, sobald neue Seiten, Landingpages oder ein Blog dazukommen, weil alles schneller und guenstiger erweiterbar bleibt.

**Was sind Design-Tokens in einem Design-System?**

Design-Tokens sind benannte Basiswerte fuer Gestaltungsentscheide, etwa eine Akzentfarbe, eine Schriftgroesse oder ein Abstand. Statt feste Werte ueberall einzeln einzutragen, verweist man auf den Token. Aenderst du ihn zentral, wirkt sich das automatisch auf die ganze Website aus, was Pflege und Konsistenz deutlich vereinfacht.