Tool-Karte
FĂŒr KatalogeintrĂ€ge, Kennzahlen, FunktionsĂŒbersichten und leichtgewichtige Vorschauen verwenden.
Tokens
Farbe, Abstand, Radius und Bewegung
Tokens sind die einzige zulĂ€ssige Quelle der Wahrheit fĂŒr visuelle Grundbausteine. Neue Seiten sollten sie verwenden, nicht neu definieren.
Hintergrund
OberflÀche
Akzent
Radius
6 / 10 / 16
Nur `sm`, `md`, `lg` verwenden.
Abstand
8-32
Die meisten UI-Elemente passen in den Kern-Abstandsbereich.
Bewegung
150-220ms
ĂbergĂ€nge sollten dezent und schnell bleiben.
Typografie
Lesbare Hierarchie mit kompakter Dichte
Seiten-H1: primÀre SeitenidentitÀt
Abschnitt H2: Hauptinhaltsblock
Kartengruppe H3: sekundÀre Gruppierung
Karte H4: Standard-Kartentitel
Einleitungstext ist fĂŒr kurze Seiteneinleitungen und erklĂ€rende Kurztexte reserviert.
FlieĂtext ist die Standardebene fĂŒr Hilfetexte, Toolbeschreibungen und ErgebniserlĂ€uterungen.
Beschriftung wird fĂŒr Metadaten, ZĂ€hler, Feldnotizen und sekundĂ€re Hilfetexte verwendet.
Karten
Standardisierte Inhaltscontainer
Listenkarte
FĂŒr Ergebniszeilen, verwandte Tools, Sprunglisten oder Verlaufsblöcke verwenden.
Steuerelemente
Buttons, Felder, Pills und Statussprache
Muster
Wiederverwendbare Seitenkomposition
!
PrimÀrer Hinweis
Hinweisblöcke fĂŒr Hilfetext, Datenschutzhinweise oder Tool-EinschrĂ€nkungen verwenden.
| Ebene | Anwendungsfall |
|---|---|
| Token | Farbe, Typografie, Abstand, Bewegung |
| Basis | Typografie- und Layout-Grundbausteine |
| Komponente | SchaltflÀchen, Karten, Formularelemente |