05 · Abstände & Radien

Raster, Ecken, Tiefe

Ein 4-px-Raster für alle Abstände, knappe Ecken wie bei Kinokarten, Tiefe über Flächenfarben statt Schatten – und ruhige Bewegung wie ein Vorhang.

Abstände

Das Raster entspricht Tailwinds Standardskala: p-1 = 4 px, p-1.5 = 6 px, p-6 = 24 px.

space.14px
space.28px
space.312px
space.416pxSeitenrand mobil
space.520px
space.624pxInnenabstand Karten
space.832pxSeitenrand Screens
space.1040px
space.1456pxAbstand zwischen Abschnitten
space.1.56px
space.2.510px
space.3.514px

Seitenrand

16 px mobil, 32 px Desktop.

Inhaltsbreite

Höchstens 1360 px (App), 1200 px (Website). Mobil ab 390 px ohne waagerechtes Scrollen.

Abschnitte

56 px Abstand in der App, 96 px auf der Website; Karten 24–28 px innen.

Radien

In Tailwind mit Präfix: rounded-mf-md, rounded-mf-xl, rounded-mf-pill.

xs3px
sm4px
md6px
lg8px
xl10px
bubble14px
pill999px

Buttons und Felder 6 px · Listen-Karten 8 px · Karten und Panels 10 px · Chips und Avatare rund · Sprechblasen 14 px mit einer spitzen Ecke (4 px) zum Absender.

Größen

Größen
Token	Wert	Tailwind	Verwendung
`size.control-sm`	36px	`h-/w-/p-mf-control-sm`	Kleiner Button/Chip
`size.control`	40px	`h-/w-/p-mf-control`	Standard-Button/Chip-Höhe
`size.touch`	44px	`h-/w-/p-mf-touch`	Mindest-Klickfläche, Avatar
`size.control-lg`	48px	`h-/w-/p-mf-control-lg`	Großer Button, Eingabefeld
`size.button-web`	50px	`h-/w-/p-mf-button-web`	Website-CTA
`size.focus-ring`	2px	`h-/w-/p-mf-focus-ring`	Breite des Fokusrings (Kinogold)
`size.focus-offset`	2px	`h-/w-/p-mf-focus-offset`	Abstand des Fokusrings (Website: 3 px)
`size.content-max`	1360px	`h-/w-/p-mf-content-max`	Max. Inhaltsbreite App
`size.content-max-web`	1200px	`h-/w-/p-mf-content-max-web`	Max. Inhaltsbreite Website
`size.screen-width`	1440px	`h-/w-/p-mf-screen-width`	Entwurfsbreite Desktop
`size.screen-width-mobile`	390px	`h-/w-/p-mf-screen-width-mobile`	Kleinste unterstützte Breite

Schatten

Sparsam: Tiefe entsteht über surface → surface-2 und 1-px-Rahmen. Schatten nur für schwebende Elemente.

shadow.liftSchwebendes Element – Drehbuch als Buch (A5), Dialoge

shadow.gold-glowLeuchtpunkt im Lauflicht (Website)

Bewegung

Ruhig, wie ein Vorhang. Bei „Bewegung reduzieren“ (prefers-reduced-motion) stehen alle Animationen still.

Bewegung
Token	Wert	Verwendung
`motion.duration.fast`	`120ms`	Hover, Fokus, Farbwechsel
`motion.duration.base`	`200ms`	Aufklappen, Ein-/Ausblenden
`motion.duration.slow`	`400ms`	Seitenwechsel, große Flächen, Vorhang
`motion.duration.marquee`	`38s`	Ein Durchlauf des Lauflichts (Website)
`motion.easing.standard`	`cubic-bezier(0.2, 0, 0, 1)`	Standard für fast alles
`motion.easing.enter`	`cubic-bezier(0, 0, 0.2, 1)`	Elemente erscheinen
`motion.easing.exit`	`cubic-bezier(0.4, 0, 1, 1)`	Elemente verschwinden
`motion.easing.linear`	`cubic-bezier(0, 0, 1, 1)`	Lauflicht, Fortschritt