Jede Komponente bringt ihre Zustände mit: Hover, Klick und Tastatur-Fokus. Du stellst nichts ein — aber du musst wissen, dass es vier Zustände sind, nicht zwei.
Die vier Zustände
| Zustand | Wann | Warum nötig |
|---|---|---|
| ruhend | Standard | — |
| hover | Maus darüber | zeigt: hier kann man klicken |
| aktiv | Maustaste gedrückt | bestätigt den Klick vor dem Seitenwechsel |
| fokussiert | per Tabulatortaste erreicht | Pflicht für Tastaturnutzung |
Der oft vergessene: aktiv
Ohne den gedrückten Zustand fühlt sich eine langsame Verbindung an, als hätte der Klick nicht funktioniert — die Seite reagiert nicht, also klickt man noch einmal. Der kurze Farbwechsel beim Drücken beantwortet das sofort.
Fokus ist keine Option
Wer eine Maus nicht benutzen kann, navigiert mit der Tabulatortaste. Ohne sichtbaren Fokus ist die Website dann unbenutzbar — man sieht nicht, wo man ist.
Das System setzt dafür einen Ring um das Element. Er erscheint nur bei Tastaturnutzung, nicht beim Mausklick — deshalb sieht man ihn im Alltag selten.
Wie die Hover-Farben berechnet werden
Sie sind nicht einzeln festgelegt, sondern werden aus der Grundfarbe abgeleitet — meist eine Stufe dunkler oder eine zarte Fläche darüber. Ändert sich die Markenfarbe, ziehen alle Hover-Zustände mit.
Beispiel aus dem System: --bg-accent ist die Akzentfläche, --bg-accent-hover eine Stufe heller. Zwei Variablen, ein Zusammenhang.
Bewegung sparsam
Zustandsänderungen dauern im System etwa 120–200 Millisekunden. Kurz genug, um unmittelbar zu wirken, lang genug, um nicht zu flackern.
Wer in seinem Betriebssystem „Bewegung reduzieren“ eingestellt hat, bekommt die Farbwechsel weiterhin — nur keine Verschiebungen. Auch das ist im System hinterlegt.