Design System Graz — R1
Eine modulare UI-Bibliothek für Angebotsfunken: Tokens, Komponenten und Richtlinien für konsistente Interfaces in Österreich.
Leitprinzipien
Klarheit, Zugänglichkeit, Effizienz. Jede Komponente ist für Screen-Reader optimiert und für Produktionsumgebungen skaliert.
- Atomic Design: Tokens → Komponenten → Templates
- Kontrast & WCAG 2.1 AA
- Responsive Verhalten & mobile-first
Farben & Design-Tokens
--primary
#1a0044
--accent
#ff00ff
--accent-2
#00ffff
--bg
#0a0f1f
Typographie
Basis: Inter / System-Fonts. Skalen: 14, 16, 18, 24, 36. Gewicht: 400, 600, 700.
Komponenten-Bibliothek
Preview
Spacing, hit area, focus states. Primary: filled; Secondary: outline; Disabled: 40% opacity and aria-disabled.
Top-bar, responsive collapse, language switcher placement. Use aria-current for active links.
Labels above fields, clear error messaging, required indicator and description text. Focus ring: 3px outline in --accent.
Gallery
Accessibility & Testing
Jede Release-Version durchläuft automatisierte Zugänglichkeitstests (axe-core) und manuelle Prüfungen auf Screen-Readern und Tastaturnavigation. Prüf-Checkliste ist Teil des Releases.
- Kontrast ≥ 4.5 für Texte
- Keyboard-Fokus sichtbar und logisch
- ARIA-Attribute dokumentiert
Mag. Lena Huber
Design Lead, Graz
Design Lead, Graz
Versionen & Ressourcen
| Version | Datum | Änderungen | Artifacts |
|---|---|---|---|
| R1 | 2026-09-10 | Initiale Tokens & Komponenten | Download ZIP |
| R1.1 | 2026-10-01 | Accessibility-Fixes, neue Buttons | Changelog |
FAQ & Best Practices
Wann sollte ich eine neue Komponente einreichen?
Wenn wiederkehrende Patterns in zwei oder mehr Projekten auftauchen — bitte RFC via Kontaktformular anfordern.