Design-Foundation
Hintergrund-System und Dekor-Layer der Section-Primitive, Display-Skala, Eyebrow und Layout-Utilities. Dekor ist brand-gesteuert — Marken-Schalter oben rechts umlegen: Bold bringt Noise, Tech bringt Grid-Linien, Schreinerei schaltet alles stumm.
background="plain" · decor — Shapes immer (Intensität steuert die Marke), Noise/Grid je nach Brand
Dekor-Ebene
Flüstern, nicht schreien
Noise, feine Grid-Linien und zwei Akzent-Shapes liegen hinter dem Inhalt — rein CSS/SVG, rechnerisch kontrastgeprüft, per Marke aufgedreht oder stummgeschaltet.
background="tinted" und "gradient"
Getönte Fläche
Ruhiger Rhythmuswechsel zwischen Sections — die muted-Fläche bleibt für allen Text kontrastsicher.
Verlauf
Von background nach muted — beide Endpunkte sind geprüfte Flächen.
background="image" — Bild über den background-Slot, Scrim garantiert Kontrast (nur foreground-Text erlaubt)
Text über Bild
Der 60-%-Scrim ist gegen den Worst Case gerechnet: selbst ein rein schwarzes oder weißes Bild hält jede Marke über 4.5:1.
Display-Skala: text-display-xl / text-display-2xl(clamp bis 8 / 12 rem, trägt den Brand-Font)
Display XL
2XL
Layout-Utilities: bleed (bricht aus dem Container),-mt-overlap (Überlappung), Sticky via sticky top-*
Diese Fläche blutet bis an die Viewport-Kanten
Überlappende Karte
-mt-overlap zieht Nachbarelemente bewusst übereinander — der Kern des hero-editorial-Layouts.