Button
Vier Gewichtungen, fünf Zustände, zwei Größen, keine Farbe außer Weiß, Grau und Schwarz. Buttons leben auf Schwarz. Die Hauptaktion einer Ansicht ist die einzige runde Form im System; alles andere ist eckig. Rot gibt es nur als Fokus-Ring.
Vier Gewichtungen
Die Variante sagt, wie wichtig eine Aktion ist, nicht was sie tut. Die Hierarchie entsteht durch Form und Helligkeit: rund vor eckig, Weiß vor Grau vor Text. Rund sind nur die Aktionen, die auf einem Screen wirklich zählen.
Die Hauptaktionen einer Ansicht: weiß, rund, schwarzer Text. Die einzigen Buttons mit radius/emphasis — die Form ist das Signal, nicht die Farbe. Meist einer, höchstens zwei gleich wichtige, rechts.
Weiß, eckig. Für Aktionen, die wichtig sind, aber nicht die eine Hauptaktion: Speichern, Weiter, Anlegen. Mehrere pro Ansicht möglich.
Grau 400, eckig, schwarzer Text. Nachgeordnete Alternative oder Rückweg neben einem Secondary.
Nur Text, weiß. Tertiäre Aktionen, Inline-Links mit Button-Verhalten, Aktionen in Tabellenzeilen.
Fünf Zustände, zwei Größen
Hover und Pressed verschieben die Fläche auf der Grauskala, deutlich genug, dass man es auf Schwarz sieht: Weiß wird Grau 200, dann Grau 400; Grau 400 wird heller; Ghost bekommt Grau 900, dann Grau 700. Disabled ist immer Grau 700 mit Grau 400. Fokus ist ein 2-px-Ring in Rot außen — und bleibt der einzige Zustand mit Rot, damit Pressed und Fokus nie verwechselt werden.
| Variante | Default | Hover | Pressed | Disabled | Focus |
|---|---|---|---|---|---|
| Primary | |||||
| Secondary | |||||
| Tertiary | |||||
| Ghost |
Rot gibt es nur als Ring
Kein Button hat eine rote Fläche. Rot erscheint bei Buttons an genau einer Stelle: als 2-px-Fokusring außen, wenn ein Button per Tastatur erreicht wird. Der Ring liegt außerhalb der Form, damit der Button selbst unverändert bleibt und der Fokus als Zusatz lesbar ist — bei allen vier Gewichtungen gleich.
WCAG 2.4.7 verlangt einen sichtbaren Fokusindikator. Shop-Betreiber:innen und Admin arbeiten am Desktop viel per Tab durch Formulare und Tabellen.
Fokus ist der Moment, in dem das System selbst auf etwas zeigt. Das ist die Rolle des Akzents — und die einzige Stelle, an der Rot einen Button berührt.
Der Ring verändert weder Fläche noch Größe des Buttons. Innen würde er Padding fressen, als Fläche wäre er ein Farbwechsel.
Drei Regeln für Buttons
Primary ist rund, alles andere eckig. Meist gibt es eine Hauptaktion; sind zwei gleich wichtig wie In den Warenkorb und Zur Kasse, sind beide rund. Drei runde Buttons auf einem Screen gibt es nicht. Primaries stehen rechts.
Ein Label sagt, was passiert: Speichern, Zur Kasse, Produkt anlegen. Kein „OK“, kein „Absenden“, kein Satz. Satzanfang groß, Rest klein, kein Punkt.
Rot ist Marke und Akzent, nie Buttonfarbe. Auch die wichtigste Aktion bleibt weiß — sie hebt sich durch die Form ab, nicht durch Farbe. Rot berührt Buttons nur als Fokusring.