Kartentitel
Beschreibungstext mit weiterführenden Informationen.
Kreative Leitidee: „The Guided Path"
Wir lehnen die Vorstellung ab, dass Barrierefreiheit langweilig sein muss. „The Guided Path" behandelt die Benutzeroberfläche als ein redaktionelles Premium-Erlebnis, bei dem gezielte Asymmetrie, übergroße Typografie und tiefe Farbebenen ruhige Autorität erzeugen. Durch das Aufbrechen starrer Raster und den Einsatz sich überlappender Flächen führen wir den Blick des Nutzers natürlich durch den Übersetzungsprozess – so fühlt sich die Oberfläche wie ein unterstützender Begleiter an.
Designprinzipien
-
Barrierefreiheit ist das Feature
Dieses Design System wurde entwickelt, um eine spezifische kognitive Herausforderung zu lösen: komplexe Informationen in Leichte Sprache zu übersetzen. Jede Entscheidung dient der Zugänglichkeit.
-
Redaktionelle Klarheit
Gezielte Asymmetrie, übergroße Typografie und tiefe Farbebenen erzeugen ruhige Autorität – hochwertiges Design, keine klinische Sachlichkeit.
-
Unterstützender Begleiter
Die Oberfläche führt den Blick des Nutzers natürlich durch den Übersetzungsprozess und fühlt sich wie ein Begleiter an, nicht wie ein komplexes Werkzeug.
Farben
Basiert auf Material Design 3-Token. Alle Paare sind auf WCAG 2.1 AA geprüft. Nur Token verwenden – keine festen Hex-Werte im Code.
Primäre Farben
-
Primary--primary#001c89
-
Primary Container--primary-container#2337a0
-
Secondary Container--secondary-container#fcd400
-
On Primary--on-primary#ffffff
Oberflächen & Hintergründe
-
Background--background#f4faff
-
Surface Low--surface-container-low#e7f6ff
-
Surface--surface-container#dcf1fd
-
Surface Lowest--surface-container-lowest#ffffff
Text-Farben
-
On Surface--on-surface#091e27
-
On Surface Variant--on-surface-variant#454653
-
Error--error#ba1a1a
Typografie
Ausschließlich Atkinson Hyperlegible – entwickelt für Menschen mit Sehschwäche, optimiert für klare Buchstabenformen.
Keine anderen Schriftarten verwenden. Atkinson Hyperlegible ist eine bewusste Entscheidung für Barrierefreiheit – nicht nur Ästhetik.
| Token | Größe / Gewicht | Vorschau |
|---|---|---|
| Heading 1 | 48px / Bold | Leichte Sprache |
| Heading 2 | 32px / Bold | The Guided Path |
| Heading 3 | 28px / Bold | Designprinzipien |
| Body Large | 16px / Regular | Barrierefreie Textkommunikation für alle Menschen. |
| Body Medium | 15px / Regular | Barrierefreie Textkommunikation für alle Menschen. |
| Body Small | 13px / Regular | Sekundäre Beschreibungstexte und Metainformationen. |
| Label | 12px / Bold | Kategorie · Status |
Elevation
5 Oberflächenebenen – ausschließlich durch Hintergrundfarbe, keine Trennlinien (No-Line Rule).
- Level 0 – Background#f4faff · Seitengrundlage
- Level 1 – Surface Low#e7f6ff · Abschnitte
- Level 2 – Surface#dcf1fd · Karten, Zitate
- Level 3 – White Card#ffffff · Aktive Karten
- Level 4 – Primary#2337a0 · Header, Hero
No-Line Rule: Niemals sichtbare Ränder oder Trennlinien zwischen Flächen. Die Hintergrundfarbe allein definiert die Hierarchie.
Abstände
8px-Raster – alle Abstände sind Vielfache von 8px.
- spacing-18px
- spacing-216px
- spacing-324px
- spacing-432px
- spacing-648px
- spacing-864px
- spacing-1080px
Komponenten
Buttons
Buttons · border-radius: pill (99px) · font-weight: 700
Buttons auf Primary Container · btn-primary + btn-outline
Eingabefelder
Hinweistext für das Feld
Input · border: 1.5px solid --on-surface-variant · border-radius: 8px
Karten
Link-Karte
Navigations-Kachel mit hover-Effekt.
Zitat-Block mit gelbem Akzentbalken links.
Card · Link Card · Quote Block
Meaning Bridge
Original
Die Inanspruchnahme staatlicher Transferleistungen setzt eine vorherige Antragstellung voraus.
Leichte Sprache
Sie müssen einen Antrag stellen.
Dann können Sie Hilfe vom Staat bekommen.
Meaning Bridge · Kernkomponente des Übersetzungs-Flows
Akzent-Elemente
Hero-Akzent · 180×6px · border-radius: pill
Karten-Akzent · 100% × 4px (oben)
Zitat-Akzent · 6px × 100% (links)
Gelber Akzentbalken (#fcd400) als visuelles Leitelement