Raster & LayoutGrids & Layout
Ein striktes 4-px-Fundament, konsistente Radien und großzügiger Weißraum. Hairline-Linien tragen die Struktur — flach, ruhig, verlässlich.A strict 4px foundation, consistent radii and generous whitespace. Hairline borders carry the structure — flat, calm, dependable.
Alle Abstände sind Vielfache von 4. Komponiere Layouts aus diesen Schritten — keine willkürlichen Pixelwerte.All spacing is a multiple of 4. Compose layouts from these steps — no arbitrary pixel values.
Knapp gerundet — verlässlich und institutionell.Tightly rounded — dependable and institutional.
12 Spalten, max. 1240 px, großzügige Ränder.12 columns, max 1240px, generous margins.
Mobile-first, fließend skaliert.Mobile-first, fluidly scaled.
Typografie und Abstände skalieren mit clamp(). Mehrspaltige Raster brechen unter 880 px auf eine Spalte.Type and spacing scale with clamp(). Multi-column grids collapse to one column below 880px.
Linien tragen die Struktur. Schatten sparsam und weich.Borders carry structure. Shadows soft and sparing.
Flach · nur HairlineFlat · hairline only
Subtil angehobenSubtly raised
Karten in RuheCards at rest
Hover, Popover, MenüHover, popover, menu
Eine Seite, ein Rhythmus. Dekoration verdient ihren Platz.One page, one rhythm. Decoration earns its place.
- Abschnitts-Rhythmus: jeder Abschnitt trägt denselben vertikalen Abstand (--section-y), getrennt durch eine Haarlinie.Section rhythm: every section carries the same vertical space (--section-y), parted by a hairline.
- Innen-Abstände kommen aus der 4-px-Skala (--space-1…9) — nie willkürliche Pixel.Inner spacing comes from the 4px scale (--space-1…9) — never arbitrary pixels.
- Eyebrow → Inhalt: ein konstanter Abstand (--lede-gap) zwischen Label und Block.Eyebrow → content: a constant gap (--lede-gap) between label and block.
- Formen sparsam: als Akzent, meist nur im Hero — eine Geste, nicht ein Muster.Shapes sparingly: as accent, usually in the hero only — a gesture, not a pattern.
- Keine wechselnden Abschnittsabstände auf derselben Seite.No section spacing that changes from block to block.
- Keine Formen über Gesichtern oder Text.No shapes over faces or text.
- Keine riesige Hintergrund-Zahl hinter jeder Überschrift.No giant ghost numeral behind every heading.
- Limette nie als Fläche unter Text.Lime never as a surface under text.
Diese Regeln in einer echten Anwendung: These rules applied to a real touchpoint: Beispiel-Landingpage →example landing page →