Primär
Werkstatt-Gold, tiefschwarzer Ink-Text in Gewicht 800–900, konkretes Verb, Ziel rechts. Weiß auf Signal ist ausnahmslos verboten.
03AKTION & EINGABE
Klickbar fühlt sichklickbar an.
Interaktion beginnt vor dem Klick: Form, Kontrast und Position kündigen Handlung an. Hover verspricht, Press bestätigt, Release löst aus und Feedback schließt den mentalen Kreis.
03.1CTA-PHYSIK
Eine Hauptaktion.
Fünf klare Zustände.
Ein Button ist keine gefärbte Box, sondern ein kurzer Vertrag: Er sagt, was passiert, reagiert auf Berührung und bestätigt das Ergebnis.
160–850 MSJEDE AKTION ERKLÄRT SICH
- 1Ruhe
- 2Hover
- 3Press
- 4Busy
- 5Erfolg
Sekundär
Oberflächenfarbe plus Kontur. Gleiche Höhe, weniger visuelles Gewicht, niemals wie deaktiviert.
Destruktiv
Rot erst im Bestätigungsmoment. In Listen startet Löschen als ruhige Text- oder Iconaktion.
„Reifen reservieren“
„Preis speichern“
„Zur Zahlung“
„Weiter“ ohne Ziel
„OK“ ohne Bedeutung
„Absenden“ ohne Ergebnis
03.2FORMULARE & AUSWAHL
Label. Wert. Hilfe.
Immer in dieser Reihenfolge.
Technische Eingabe wird nicht durch kleine Controls kompakt, sondern durch stabile Gruppen, Einheit am Wert und progressive Offenlegung.
MIN. 48 PX205 / 55 R16 · 91V
Dimensionen werden als eine technische Einheit gelesen.
DOT-Foto noch prüfenFehler steht dort, wo er behoben wird.
Label bleibt sichtbar
Placeholder ist Beispiel, niemals Ersatz für Feldname.
Einheit sitzt am Wert
mm, €, DOT und Zoll bleiben beim Zahlenbild und springen nicht.
Fehler ist reparierbar
Was ist falsch, warum und welche konkrete Handlung löst es?
Auswahl zeigt Zustand
Chevron, Fokus, aktive Zeile und Checkmark machen Dropdowns eindeutig.
Tastatur ist vollständig
Tab, Pfeiltasten, Enter und Escape besitzen vorhersehbare Wege.
Mobil wird nicht enger
Felder stapeln sich; Zielgrößen und Schrift bleiben gleich groß.
03.3FEEDBACK & OVERLAYS
Die Oberfläche antwortet.
Ohne zu unterbrechen.
Inline zuerst, Toast danach, Dialog nur wenn eine Entscheidung ohne Kontextverlust nicht sicher möglich ist.
INLINE → TOAST → DIALOG03.4KOMPONENTENVERTRAG
Varianten bleiben endlich.
Kontext bleibt offen.
KOMPONENTEVARIANTENPFLICHTZUSTÄNDENICHT ERLAUBT
Buttonprimary · secondary · quiet · dangerhover · press · focus · busy · disabled · successFarbvarianten pro Modul
Inputtext · number · search · moneyempty · filled · focus · valid · error · readonlyLabel nur als Placeholder
Selectsingle · searchable · multiopen · active · selected · empty · errorunmarkierte Klickfläche
Tabsline · contained · badgeactive · hover · focus · overflowUnter-Navigation über drei Ebenen
Feedbackinline · toast · banner · dialoginfo · success · warning · dangerFarbe ohne Icon/Text