{ "$schema": "../../schema.json", "schema": "fundus/1", "id": "button-system-uebersicht", "name": "Button-System und Übersicht", "name_en": "Button system overview (hierarchy, tokens, states, pattern gallery, recipe matrix)", "kurz": "Button-System eines Marburger Interface-Büros: fünf Typen, sieben Zustände, Tokens mit live gerechnetem Kontrast, eine Galerie aller 24 Button-Muster des Fundus zum Anfassen und die Zuordnung der 21 Rezepte.", "kategorie": "Buttons", "kategorie_slug": "buttons", "kategorie_nr": 18, "bau_chat": "B", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "website_belege": 2, "stimmung": [ "ruhig", "präzise" ], "stimmung_roh": [ "präzise", "ruhig", "funktional" ], "technik": [ "css", "vanilla-js", "@property", "forced-colors", "svg" ], "technik_gruppen": [ "css", "js", "canvas" ], "leistungskosten": "niedrig", "steckbrief": { "beschreibung": "Eine Design-System-Seite für Buttons. Sie legt die Hierarchie fest (primär, sekundär, tertiär als Text, Icon-Button, Gefahr), nennt die Tokens für Höhe, Radius, Innenabstand, Abstand sowie Kurve und Dauer je Zustand und zeigt alle Zustände an echten Knöpfen: Ruhe, Hover, Fokus, Druck, deaktiviert, Laden, Erfolg. Dazu die Regeln für Trefferfläche (44 px) und Kontrast, eine Galerie aller Button-Muster des Fundus als Live-Beispiele und eine Tabelle, welcher Button-Typ zu welchem Rezept passt.", "warum_es_wirkt": "Buttons sind das häufigste Bedienelement einer Seite. Als System aus wenigen Tokens sprechen sie überall dieselbe Sprache: Die Hauptaktion ist sofort erkennbar, Zustände sind vorhersehbar, und neue Seiten erben das Verhalten. Große Design-Systeme und Studios behandeln Buttons deshalb als Satz aus Typen, Tokens und Zuständen, nicht als Einzeleffekte.", "wann_einsetzen": "Vor jedem Website-Bau als Werkzeug: Tokens aus dem Rezept setzen, dann ein Button-Muster als Haupttyp und höchstens eines als Zweittyp aus der Rezept-Tabelle wählen. Als Vorlage für eine eigene Komponentenseite, wenn mehrere Leute an einer Kundenseite bauen.", "wann_nicht": "Nicht als sichtbare Galerie auf einer Kundenseite: Die Übersicht ist Werkzeug, keine Sektion. Nicht mehrere Button-Muster auf einer Seite mischen. Nie mehr als eine primäre Handlung je Ansicht. Keine Muster, die das Rezept unter „nicht verwenden“ führt.", "varianten": [ "hell: neutrale Systemseite auf hellem Grund, Signalton Ultramarin", "dunkel: dieselben Tokens für dunkle Oberflächen, helle Primärfläche mit dunklem Text, eigene Gefahr- und Erfolgsfarbe", "rezepte: dieselben fünf Typen in den Tokens von Studio-Bühne, Manufaktur-Stille und Fahrschule; der Umschalter setzt die Welt für die ganze Seite, Token-Tabellen und Kontraste rechnen mit" ], "umsetzung": "Alle Buttons lesen dieselben Custom Properties: --b-h-s/m/l, --b-px-s/m/l, --b-radius, --b-kante, --b-schrift, Farben je Typ (--p-*, --s-*, --t-*, --i-*, --g-*, deaktiviert --d-*, Erfolg --ok-*) und Bewegung je Zustand (--dauer-*, --kurve-*). Jeder Typ mappt seine Farben auf --bg, --fg, --kante und deren -h- und -d-Stufen; die Zustandsregeln sind für alle Typen gleich. Hover nur in @media (hover: hover), Fokus über :focus-visible mit outline, Druck über :active und scale. Deaktiviert über aria-disabled=\"true\", damit der Knopf fokussierbar bleibt und per aria-describedby sagt, warum. Laden mit aria-busy und role=status; Ruhe-, Lade- und Erfolgslabel liegen in einer Grid-Zelle, damit die Breite nie springt. Kleine Knöpfe bekommen über ::after mit negativem inset 44 px Trefferfläche.