06 · Komponenten
Grundsätze
Wenige, klare Bausteine. Gold markiert die eine Hauptaktion, Flächen und Rahmen gliedern, jede Bedienung klappt auch mit der Tastatur.
Buttons
Höchstens ein goldener Hauptbutton pro Ansicht. Beschriftung als Verb oder Ergebnis („Look freigeben“, „Lisa erinnern“). Klickfläche mindestens 44 × 44 px.
- Hauptbutton
- Fläche gold, Schrift gold-ink 16 px/700, Höhe 48–50 px, Radius 6 px, Hover gold-button-hover.
- Zweitbutton
- Rahmen 1 px gold, Schrift fg, transparent, Hover surface-2.
- Leise Aktion
- Nur Text fg-2, Hover fg – für Abbrechen und Zurück.
- Deaktiviert
- Rahmen gestrichelt line-disabled, Schrift fg-3, Grund als Hinweis.
Karten und Panels
Fläche surface, Rahmen 1 px line, Radius 10 px, innen 24–28 px. Titel in Big Shoulders 700, 20 px, Versalien.
Standard
Rahmen line
Aktiv
Rahmen 2 px gold – aktuelle Phase
Freigegeben
● Grün · Rahmen 2 px ok
Platzhalter
Gestrichelt line-strong – „Rolle hinzufügen“
Formulare
Jedes Feld hat ein sichtbares Label. Fehler stehen konkret und freundlich unter dem Feld und sind mit aria-describedby verbunden. Schrift 16 px – so zoomt iOS nicht.
Bitte gib eine gültige E-Mail-Adresse ein, zum Beispiel name@beispiel.de.
Fokus
Drück die Tabulatortaste: Jedes bedienbare Element zeigt einen Fokusring
outline: 2px solid #F0B24A; outline-offset: 2px über :focus-visible.- Richtig: Fokus nie entfernen (kein outline: none ohne Ersatz).
- Richtig: Reihenfolge folgt dem Lesefluss; „Zum Inhalt springen“ am Seitenanfang.
- Richtig: Dialoge halten den Fokus und geben ihn beim Schließen zurück.
- Richtig: Alles per Tastatur bedienbar – auch Bewertung und Upload.
Status und Bewertung
Farbe nie allein: Die Ampel trägt immer ein Symbol und Text, Bewertungen zusätzlich die Zahl.
● Grün · Bereit für den Dreh● Gelb · Foto unscharf● Rot · Einwilligung fehlt