Braucht eine kleine Website ein Designsystem?

Unter fünf Seiten genügen ein paar Konventionen. Ab zehn Seiten spielt das System die Zeit wieder ein, besonders wenn die Website wachsen oder mehrsprachig erscheinen soll.

Worin unterscheidet es sich von einem Markenhandbuch?

Das Handbuch beschreibt, wie es aussehen soll. Das System ist der Code, der es so aussehen lässt. Ein PDF kann keinen Build stoppen, und genau diese Funktion hält das Erscheinungsbild über Jahre zusammen.

Wie wird der dunkle Modus behandelt?

Jeder Token trägt einen Wert für hell und einen für dunkel. Der Kontrast wird für beide berechnet, sodass ein Theme nie schlechter ausfallen kann als das andere.

Wem gehört das Designsystem nach dem Launch?

Ihnen, und es liegt in Ihrem Repository. Es ist so gebaut, dass eine andere Entwicklerin übernehmen kann: Werte an einer Stelle, Komponenten dokumentiert und die Prüfung als Teil des Builds.

Wie oft muss ein Designsystem erneuert werden?

Selten im Ganzen. Tokens wechseln mit der Marke, Komponenten kommen laufend dazu. Ein System, das alle zwei Jahre neu geschrieben werden muss, war für eine einzelne Kampagne gebaut.

Lässt sich ein System auf einer bestehenden Website einführen?

Ja, Seitentyp für Seitentyp. Beginnen Sie mit Tokens und den meistgenutzten Komponenten, schalten Sie die Prüfung für die bereits umgestellten Verzeichnisse ein und erweitern Sie von dort.

Wann ein Designsystem sich rechnet

Torn StudioVeröffentlicht 2026-08-273 Min. Lesezeit

Torn Studio ist eine KI-Agentur, die Websites, digitale Produkte und Inhalte baut. Unkonventionell.

Kurze Antwort

Ein Designsystem besteht aus Tokens für Farbe, Typografie und Abstände, aus Komponenten, die daraus gebaut sind, und aus einer Prüfung im Build, die Code mit losen Werten ablehnt. Nach unserer Erfahrung aus eigenen Projekten rechnet es sich ab der zehnten Seite, oder wenn eine Marke zum zweiten Mal über die ganze Website geändert werden muss.

Ein Designsystem wird meist als Sammlung von Komponenten beschrieben. Der entscheidendere Teil ist die Regel darüber, wo Werte wohnen dürfen, denn sie bestimmt, ob das System in einem halben Jahr noch stimmt.

Woraus das System tatsächlich besteht

Vier Schichten, und die letzte unterscheidet ein System von einem Ordner voller Dateien.

Tokens: jede Farbe, jeder Abstand, jeder Radius und jede Schriftgröße an einer Stelle
Primitive: Schaltflächen, Karten, Überschriften und Felder aus Tokens gebaut
Blöcke: fertige Abschnitte, aus denen Seiten zusammengesetzt werden
Eine Prüfung im Build, die rohe Werte im Seitencode stoppt

Die Prüfung hält das System wahr

Ein System, das nur als Dokument existiert, driftet auseinander, weil ein Farbwert schneller getippt als der passende Token gefunden ist. Diese Website fährt genau diese Prüfung: ein Build-Schritt liest den Code und lässt den Build beim ersten rohen Hex- oder Pixelwert außerhalb des Designsystems fehlschlagen. Danach stellt sich die Frage nicht mehr.

Kontrast wird vor dem Einsatz berechnet

Jedes Farbpaar im System wird gegen WCAG AA geprüft, das mindestens 4,5:1 für Fließtext verlangt. Weil auf Token-Ebene gerechnet wird, kann eine spätere Seite nie unlesbar werden — die Kombination, die das verursachen würde, existiert gar nicht.

Die Größe, ab der es sich lohnt

Unter fünf Seiten kostet ein System mehr, als es einbringt. Bei zehn Seiten steht es etwa ausgeglichen. Bei 30 Seiten und neun Sprachen ist es der Unterschied zwischen einem Tag Arbeit und einer Woche, wenn sich etwas überall ändern soll — die Rechnung, die wir für diese Website selbst aufgemacht haben.

Kleine Bildschirme gehören zum System

Jede Komponente wird zuerst für 320 Pixel entworfen und wächst nach oben. Die Tests fahren jeden Seitentyp in neun Breiten ab 320 Pixeln, und eine Seite, die waagerecht scrollt, lässt den Build fehlschlagen. Das ist günstiger, als ein kaputtes Mobil-Layout nach dem Launch zu reparieren.

Belege

Worauf dieser Artikel beruht — eine Messung von uns, eine datierte Quelle oder eine Entscheidung und ihr Preis.

Entscheidung2026-08-26
Kontrast ist ein Build-Gate: Ein Test berechnet bei jeder Änderung jedes erlaubte Paar aus Text und Fläche aus der Token-Datei neu und lässt den Build unter WCAG AA 4,5:1 scheitern.
Was sie gekostet hat: Eine Farbe, die besser aussieht, aber schlechter misst, kann nicht ausgeliefert werden; ein Teil der Palette ist damit rechnerisch ausgeschlossen, und jede Änderung an der Skala kostet einen neuen Lauf und oft eine Nachjustierung der umliegenden Tokens.

Häufige Fragen

Braucht eine kleine Website ein Designsystem?: Unter fünf Seiten genügen ein paar Konventionen. Ab zehn Seiten spielt das System die Zeit wieder ein, besonders wenn die Website wachsen oder mehrsprachig erscheinen soll.
Worin unterscheidet es sich von einem Markenhandbuch?: Das Handbuch beschreibt, wie es aussehen soll. Das System ist der Code, der es so aussehen lässt. Ein PDF kann keinen Build stoppen, und genau diese Funktion hält das Erscheinungsbild über Jahre zusammen.
Wie wird der dunkle Modus behandelt?: Jeder Token trägt einen Wert für hell und einen für dunkel. Der Kontrast wird für beide berechnet, sodass ein Theme nie schlechter ausfallen kann als das andere.
Wem gehört das Designsystem nach dem Launch?: Ihnen, und es liegt in Ihrem Repository. Es ist so gebaut, dass eine andere Entwicklerin übernehmen kann: Werte an einer Stelle, Komponenten dokumentiert und die Prüfung als Teil des Builds.
Wie oft muss ein Designsystem erneuert werden?: Selten im Ganzen. Tokens wechseln mit der Marke, Komponenten kommen laufend dazu. Ein System, das alle zwei Jahre neu geschrieben werden muss, war für eine einzelne Kampagne gebaut.
Lässt sich ein System auf einer bestehenden Website einführen?: Ja, Seitentyp für Seitentyp. Beginnen Sie mit Tokens und den meistgenutzten Komponenten, schalten Sie die Prüfung für die bereits umgestellten Verzeichnisse ein und erweitern Sie von dort.

Nächste Schritte

Tiefer einsteigen

Zusammenarbeiten