Foundation
Eine Stärke, zwei Farben, ein Ring.
src/styles/global.css
Haarlinie 1px trägt Raster und Zeilen. Kante 1px in Vordergrundfarbe markiert Aktion. Fokus ist 2px Oliv mit 2px Offset. Keine Linie dicker als 2px, kein Doppelrahmen.
| Rolle | Stärke | Farbe | Wo |
|---|---|---|---|
| Haarlinie | 1px | granit-200 auf Paper · granit-800 auf Nacht | Raster, Zellen, Zeilen, Tabellen |
| Kante | 1px | granit-950 auf Paper · paper auf Nacht | Secondary-Button, Hover auf Karten |
| Fokus-Ring | 2px, Offset 2px | oliv-500 | :focus-visible, global |
| Fond statt Linie | 0 | granit-100 auf Paper · granit-900 auf Nacht | Karten ohne Rahmen |
| Gestrichelt | 1px dashed | wie Haarlinie · oliv-500 als Maß | Nur Zielzone (Upload, Leerzustand) und Maßmarkierung |
Nacht
Haarlinie
Haarlinie
Haarlinie
Kante Fokus Fond
Paper
Haarlinie
Haarlinie
Haarlinie
Kante Fokus Fond
Cursor bleibt System. Fokus-Verhalten und Reduced Motion stehen unter Bewegung.