Die System-Ansicht

Die vierte Ansicht leitet das „alles Übrige” eines Designsystems — Eckenradius, Rahmenbreiten, Elevation und Motion — aus derselben Basis und demselben Verhältnis ab wie deine Typografie und Farbe.

Wie sich die Effekte ableiten

• Radius — die Schritte folgen Basis × Verhältnis^(k/Noten), gerundet auf saubere Pixelwerte, von xs bis 4xl plus full. Verschachtelte Flächen folgen der konzentrischen Regel: innerer Radius = äußerer Radius − Innenabstand, nie gleich.
• Rahmen — hauchdünn, Standard, kräftig, schwer: vier Stärken, die der Skala folgen, plus Breite und Versatz des Fokusrings.
• Elevation — eine Schattenleiter (2xs–2xl), deren Farbe sich aus dem dunkelsten Neutralton ableitet, sodass Schatten zur Palette gehören, statt generisches Schwarz zu sein.
• Motion — Dauern sind Skalenwerte in Millisekunden (Basis × Verhältnis^n: 150 · 200 · 267 · 355 …) und vier Easing-Kurven pro Profil, darunter eine betonte Kurve für Hero-Momente. Die Demos auf dem Canvas sind live — drück auf Play und vergleiche.

Bearbeiten

Jeder Abschnitt hat seine Ausgangs-Regler in einer eigenen Karte — die Radius-Basis, das Elevation-Profil, die Rahmenbreite, das Motion-Profil — direkt neben dem, was sie beeinflussen. Auswahl und Pfeil-Stepping funktionieren genau wie in den anderen Ansichten: Die Werte wandern die Skala entlang.

Warum auch Effekte auf der Skala liegen

Radien und Dauern sind meist die ersten Tokens, die verrotten: Jemand tippt border-radius: 7px oder transition: 180ms und nichts schlägt Alarm. Wenn die erlaubten Werte Skalenschritte sind, fällt der Ausreißer auf — und die Exporte decken den gesamten Namensraum des Ziels ab (jeden Tailwind-Radius- und -Schattennamen, jedes Easing), sodass kein Utility still auf einen markenfremden Standard zurückfällt. Dieses Prinzip der Vollständigkeit gilt für jedes Exportformat, das das Werkzeug ausliefert.