Design system setup ch7

Modulares Design, konsistente Tokens und wiederverwendbare Komponenten für skalierbare Produkte. Dieses Setup richtet sich an Schweizer Produktteams, die UI/UX-Prozesse professionalisieren wollen.

Projekt anfragen

Grundlagen & Design Tokens

Farben, Typografie, Abstände und Elevation — als Tokens definiert und exportierbar für Figma, CSS-Variablen und Tokens-JSON.

Token	Wert	Verwendung
--brand-500	#00FFD5	Primary Aktionen
--bg-800	#0d0f1a	Seitenhintergrund
--space-4	16px	Grid & Spacing

Token-Export

Automatische Exporte in CSS, SCSS und JSON erleichtern die Integration in CI/CD und Frontend-Repos.

Token JSON Figma Library

Komponentenbibliothek

Atoms, Molecules, Organisms — dokumentiert, inklusive Variants und Accessibility-Warnungen.

Varianten: Primary / Secondary / Ghost. Fokus- und Disabled-States dokumentiert. Code-Snippet, Token-Mapping und ARIA-Richtlinien liegen bei.

Eingabefelder, Selects, Toggles und Inline-Fehlermeldungen mit Fokus auf Tastaturzugänglichkeit und screenreader-freundlichen Labels.

Responsive Navbar, Sidebars und Breadcrumbs mit guidelines für mobile-first Verhalten und progressive enhancement.

Workflow & Tooling

Versioniertes Design in Figma, Token-Pipeline (Style Dictionary), Storybook für React/Vue und automatisierte Releases via GitHub Actions.

Design Tokens → Style Dictionary
Komponenten → Storybook + Chromatic
Integration → npm Packages / Mono-Repo

CI/CD Beispiele Tooling-Checklist

Barrierefreiheit & QA

Accessibility-Audit, Kontrast-Checks und Keyboard-Flows sind integraler Bestandteil des Setups. Wir liefern Test-Cases und Automatisierungsempfehlungen für Lighthouse & axe.

Accessibility-Checkliste Audit anfragen

Maxim Zockt

Head of Design Systems

Implementierungsplan & Roadmap

Phase 1

Discovery, Token-Definition, Design Audit — 2–3 Wochen.

Phase 2

Komponenten entwickeln, Storybook, Tests — 4–6 Wochen.

Phase 3

Integration, Schulung, Deployment — 2–4 Wochen.

Kostenloses Erstgespräch

Häufig gestellte Fragen

Wie lange dauert der Aufbau?

Typisches Setup für MVP-Komponenten: 8–12 Wochen je nach Scope und Teamkapazität.

Welche Technologien werden unterstützt?

React, Vue, Lit, Web Components; UI-Bibliotheken lassen sich mit Tokens verbinden.