Bausteine mit Varianten und Zuständen
Jede Komponente ist an Tokens gebunden. Hier die Basis: Button, Input, Badge, Toggle.
Button
Button auf schwarzer Ausgangsfläche. Primary: weiß, Pill — die Hauptaktion einer Ansicht, der einzige runde Button im System; meist eine, höchstens zwei gleich wichtige. Secondary: weiß, eckig. Tertiary: Grau 400, eckig — nachgeordnete Aktion, Rückweg. Ghost: nur Text. Rot kommt ausschließlich als Fokus-Ring vor, nie als Fläche.
| Variante | Fläche | Radius | Einsatz |
|---|---|---|---|
| primary | Weiß | 999 | Hauptaktion (In den Warenkorb, Zur Kasse) |
| secondary | Weiß | 0 | Wichtige, nicht zentrale Aktion |
| tertiary | Grau 400 | 0 | Nachgeordnete Aktion, Rückweg |
| ghost | — | 0 | Textlink-Charakter innerhalb von Flächen |
Input
Eckig, 48px hoch, 1px schwarze Linie. Fokus über den roten Ring, Fehler über Text unter dem Feld — nicht über rote Rahmen.
Badge
Mono/Tag in einem 1px-Rahmen. Kennzeichnet Rollen, Status und Kategorien. Keine gefüllten Badges.
Toggle
Zweizuständiger Schalter, 44×24. An: Schwarz, Aus: Grau 400. Der Knopf ist immer weiß und eckig.
Nav
Seitennavigation der Zeit-Website, 72px hoch. Der aktive Bereich ist rot markiert. Auf schmalen Viewports klappt die Navigation unter der Leiste aus.