Design System — Frankfurt R3

Ein skalierbares, barrierearmes UI-System für deutsche Produkte: Tokens, Komponenten, Guidelines und Governance von UBGestalt.

Was ist R3?

R3 ist die dritte Iteration unseres standardisierten Design Systems, entwickelt für mittlere und große Produkte in Deutschland. Fokus: Konsistenz, Performance und Zugänglichkeit (WCAG 2.1).

Design Tokens (Farben, Abstände, Typografie)
Modulare Komponentenbibliothek
Docs & Integrations-Guide (Figma, Storybook)

Anfrage zu R3

Design-Prinzipien

Konsistenz

Wiederverwendbare Bausteine reduzieren Entwicklungskosten und erhöhen Usability.

Zugänglichkeit

Farbkontraste, Tastaturbedienung und semantische Strukturen sind Standard.

Skalierbarkeit

Tokens und Systemarchitektur erlauben einfache Anpassung an neue Produkte.

Design Tokens (Auszug)

Token	Wert	Verwendung
--color-primary	#00EAFF	Primäre Aktionen, Links
--space-4	16px	Standardabstände
--font-base	Inter, 16px	Basis-Typografie

Tokens werden als CSS-Variablen, JSON und SCSS bereitgestellt.

Kernkomponenten

Standardisierte Header-Varianten, responsive Menüs und Breadcrumbs. Integration mit Identity-System.

Integration anfragen

Eingabe-Komponenten mit ARIA-Attributen, Inline-Validierung und adaptivem Layout für Mobilgeräte.

Karten, Diagramme und Tabellen mit Fokus auf Performance und semantische Lesbarkeit.

Showcase

Beispiele aus Finanz, Health und E‑Commerce mit messbaren Verbesserungen in Usability Tests.

Lead: Dr. Anna Berg

Head of Design Systems — Expertise in Design Tokens, Accessibility & Governance. Koordination mit Frontend-Teams in Frankfurt.

Team & Rollen

Governance & Integrationen

Release-Zyklen, Contribution-Guide und Integrationen (Storybook, Figma‑Library, CI/CD Hooks).

Versionierung & Changelog
Onboarding für Entwickler & Designer
Automatisierte Accessibility-Checks

Governance Workshop buchen

Ressourcen