Design System Starter-Kit

Welche Worte und Sätze kommen Euch in den Sinn, wenn ihr an Eure Seite denkt?

Wild? Nicht barrierefrei? Teuer in der Pflege? Falls ja, bist Du damit nicht allein. Ich sehe es immer wieder: Viele digitale Auftritte wachsen organisch. Eine Seite hier, ein Formular dort – jedes Mal aufs Neue und gegebenenfalls aus Bestandskomponenten, mit vielen Kompromissen, zusammengewürfelt. Die Inhalte sind zwar live, aber nicht so, wie Du es Dir vorgestellt hast. Im Arbeitsalltag bleibt jedoch kaum Zeit, Seitenaufbauten zu hinterfragen, und schon gar nicht, neue Anforderungen umzusetzen. Irgendwann steht dann zusätzlich die Frage im Raum, wie das Ganze eigentlich barrierefrei werden soll – und plötzlich merkst Du, dass jede Farbe, jede Schriftgröße, jeder Button dieses Wildwuchses einzeln geprüft und nachgebessert werden müsste. Barrierefreiheit als nachträglicher Kraftakt bremst Teams aus und frisst Budgets auf, insbesondere bei organisch gewachsenen Seiten.

Genau da setzt das barrierefreie Design System Starter-Kit an. Statt Dein Design im Nachhinein Seite für Seite zu reparieren, setzen wir ein zentrales, barrierefreies Fundament auf, aus dem sich künftig jede Seite und jede Komponente ableiten lässt – konsistent, dokumentiert und von Anfang an zugänglich.

Was ist ein barrierefreies Design System?

Ein barrierefreies Design System ist eine zentrale, dokumentierte Sammlung aller Gestaltungsbausteine Deiner digitalen Produkte und letztlich auch Deiner Marke – Farben, Typografie, Abstände, Komponenten –, festgehalten als wiederverwendbare Design Tokens in Figma. „Barrierefrei" heißt dabei: Kriterien wie ausreichende Kontraste, lesbare Schriftgrößen und gut bedienbare Flächen sind direkt in diese Bausteine eingebaut, nach WCAG 2.1 AA und im Einklang mit EAA und BFSG.

Was einmal richtig entschieden ist, greift automatisch auf allen Seiten.

Das Starter-Kit ist der übersichtliche Einstieg in genau dieses Fundament: In wenigen Tagen entsteht ein einsatzfähiges Grundgerüst Deines barrierefreien Design Systems – inklusive Schulung, mit der z. B. auch interne Teams direkt selbst weiterarbeiten können.

Begriffe kurz erklärt:

• WCAG 2.1 AA – die Web Content Accessibility Guidelines, der internationale Standard für barrierefreie digitale Inhalte. „AA" ist die Konformitätsstufe, die für Unternehmen und öffentliche Stellen üblicherweise und aktuell gefordert wird.
• EAA – der European Accessibility Act, eine EU-Richtlinie, die einheitliche Barrierefreiheitsanforderungen für viele digitale Produkte und Dienstleistungen festlegt.
• BFSG – das Barrierefreiheitsstärkungsgesetz, die deutsche Umsetzung des EAA. Es verpflichtet seit dem 28. Juni 2025 viele Unternehmen dazu, digitale Produkte und Dienstleistungen barrierefrei anzubieten.

Für wen ist das Design System Starter-Kit geeignet?

Das barrierefreie Design System Starter-Kit richtet sich an alle Unternehmen und Einrichtungen, die ihr Corporate Design in eine digitale, skalierbare, barrierefreie Form bringen möchten: egal, ob es organisch gewachsen ist oder gerade neu entsteht. Wir übergeben ein System, das Euer Team versteht und sogar eigenständig weiterführen kann.

Was Du bekommst: barrierefreie Tokens und Basis-Komponenten, mit denen Euer Design wachsen kann

Dein Team erhält ein in Figma erstelltes, 3-stufiges Design System, das alle Basics abdeckt, die ein Design-Baukasten braucht, mit genau der richtigen Auswahl und Anzahl an Komponenten, um effektiv ein individuelles Design entstehen zu lassen. In einem Anwendungsworkshop lernt Dein Team, wie aus einzelnen Designelementen neue Komponenten entstehen können: schlank, schnell und barrierefrei. Die 3 Stufen des Design Systems ermöglichen ein agiles und nachhaltiges Wachstum Deines Designs, z. B. mit neuen Anforderungen seitens Nutzer:innen oder Stakeholder:innen:

• Stufe 1: Globale Tokens bilden die Grundlage des gesamten Design Systems und definieren rohe Basiswerte kontext- und komponentenneutral, z. B. ein bestimmter Blauton, der im Design System verwendet wird.
• Stufe 2: Semantische Tokens definieren eine Bedeutung oder Rolle innerhalb eines Themes (z. B. light oder dark), unabhängig von einer einzelnen Komponente, z. B. dass besagter Blauton die primäre Brandfarbe ist.
• Stufe 3: Komponenten-Tokens definieren das Design einer Komponente oder eines Komponententyps, z. B. dass Buttons in der primären Brandfarbe sind.

Dieser Aufbau ermöglicht u.a., dass Designänderungen zentral, also an einer Stelle, erfolgen und global, also im gesamten Design, wirken können. Vorteile: Im Gestaltungsprozess werden Abhängigkeiten sofort sichtbar und nachvollziehbar, bevor auch nur eine Zeile Code geschrieben wurde. Im Entwicklungsprozess können Änderungen schneller und zuverlässiger umgesetzt werden. Aber ein Design System hat noch viele weitere Vorteile. Du willst mehr über diese Vorteile erfahren? Schau mal in diesen Artikel rein: Brauche ich ein Design System? 7 Vorteile für Dein Team

Varianten und Investition

Beide Varianten des Design System Starter-Kits beinhalten die gleichen Design- und Schulungsleistungen. Wir unterscheiden lediglich, ob wir mit einem bestehenden, also einem Legacy-Design, arbeiten oder ob wir ein komplett neues Design umsetzen.

Design System Starter-Kit · Legacy-Designs (barrierefrei)

Projektlaufzeit: 5 Arbeitstage vom Kick-off bis zur Übergabe

Investition: 4.800 € zzgl. USt.

Für Organisationen mit einem organisch gewachsenen Design, das aktualisiert, barrierefrei und/oder skalierbar werden soll. Wir sichten Dein Bestandssystem, übersetzen die vorhandenen Designelemente in globale und semantische Tokens und passen sie barrierefrei an.

Design System Starter-Kit · neue Designs (barrierefrei)

Projektlaufzeit: mindestens 7 Arbeitstage vom Kick-off bis zur Übergabe

Investition: ca. 8.300 € zzgl. USt.

Für Organisationen mit einem neuen Design, das in die digitale Welt übersetzt oder mit einem Design System skaliert werden soll. Wir bringen Dein frisches Design von Anfang an barrierefrei in ein digitales, skalierbares System. Wie hoch die Investition ausfällt, hängt von vielen Faktoren ab, zum Beispiel davon, was bereits vorliegt: nur ein Logo oder schon Logo, Farben, Schriften und Printlayouts. Die Investition ist deshalb ein Richtwert, den wir gemeinsam im Gespräch konkretisieren.

Leistungsumfang bei beiden Varianten

• Deine Brand-Design-Elemente (Farben, Typografie, Abstände u. a.) übersetzt in globale und semantische Design Tokens, das Fundament Deines Systems
• Bis zu 40 exemplarische Komponenten-Tokens, z. B. Buttons, Teaser oder Formularelemente, die als konkreter Startpunkt fungieren
• Die barrierefreie Prüfung der Tokens und Komponenten nach WCAG 2.1 AA
• Eine Layout-Preview über drei zentrale Seitentypen als Vorlage für Deine weitere Arbeit oder unsere gemeinsame Zusammenarbeit
• Eine Präsentation des neuen barrierefreien Designs und eine gemeinsame Anpassungsrunde
• Eine Anwendungsschulung, nach der interne Teams den Aufbau verstehen und erste eigene Anpassungen selbst vornehmen können
• Am Ende hast Du ein softwareunabhängiges Design System, das in Figma erstellt, aber auch als JSON-Datei exportiert wird und daher nicht zwingend in Figma weitergeführt werden muss.

Was die Varianten unterscheidet

• Legacy-Designs können schneller umgesetzt werden, da wir auf Bestehendem aufbauen. Aus dem gleichen Grund entsteht dabei ggf. eine individuellere Komponentenliste.
• Neue Designs entstehen komplett von Grund auf: Da, wo es vorher kein vollständiges Design gab, dauert dieser Prozess länger; als Ergebnis entsteht ein Basisdesign mit Komponenten, die in der Regel in allen Design Systemen vorkommen – eine Basis, auf der weiter aufgebaut und skaliert werden kann.

Das Starter-Kit ist bewusst als klar umrissener Einstieg gedacht: ein definierter Startpunkt mit übersichtlichem Leistungsumfang, der Dir und Deinem Team ein tragfähiges Fundament gibt. Es ist die ideale Basis für die nächsten Schritte, von der Erweiterung des Design Systems bis zur begleitenden Zusammenarbeit, z. B. in Form eines Maturity Retainers.

Warum das Starter-Kit von Truly XD?

Truly XD ist ein Maturity-Minded Experience-Design-Studio für wertegetriebene Organisationen. Barrierefreie Design Systeme gehören zu unserem Kern, als Gestaltungsprinzip von Anfang an. Aus Deinem Design entsteht ein skalierbares und damit nachhaltiges System, in dem Barrierefreiheit von Grund auf eingebaut ist. Ideal, um mit jeder neuen Anforderung automatisch mitzuwachsen. Entscheidend ist dabei, was nach der Übergabe passiert: Du erhältst kein System, das nur wir bedienen können, sondern ein dokumentiertes Fundament und die Schulung, um selbst damit zu arbeiten.

Das Design System Starter-Kit ist ein Angebot aus der UX-Kompetenzaufbau-Reihe von Truly XD. Alle Angebote dieser Reihe zielen darauf ab, nutzer:innenzentrierte Designprozesse in Unternehmen bzw. Teams – ggf. erstmalig – vorzustellen und nachhaltig zu etablieren. Sie sind bewusst kompakt gehalten, einfach zugänglich und bestens aufeinander abgestimmt, um UX-Kompetenz aufzubauen. Alle weiteren Angebote dieser Reihe findest Du hier.