foundations
Abstand & Layout
Eine Skala, ein Raster, ein Seitenrand. Abstände werden ausschließlich aus der Reihe gewählt, das Layout ist auf 1440px definiert und skaliert nach unten.
01 — Spacing
Elf Schritte
8
12
16
24
28
40
48
56
64
80
96
02 — Layout
Raster und Ränder
Desktop-Raster auf 1440px mit 160px Seitenrand und 1120px Inhaltsbreite. Karten laufen dreispaltig mit 24px Gutter, unter 900px einspaltig.
| Token | Wert | Hinweis |
|---|---|---|
| layout/margin | 160 | Im Web als clamp(16px, 11.1vw, 160px) |
| layout/content | 1120 | Maximale Inhaltsbreite |
| layout/gutter | 24 | Abstand zwischen Karten |
| nav/height | 72 | Sticky, mit 1px Linie unten |
| section/padding | 96 | Vertikal, mobil 64 |
03 — Radius
Null ist der Standard
| Token | Wert | Verwendung |
|---|---|---|
| radius/default | 0 | Alles: Cards, Inputs, Badges, Chips, Secondary/Tertiary Buttons |
| radius/emphasis | 999 | Nur Primary Button. Die Form ist das Signal. |