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
Token-getrieben über --gradient-surface-from/-to – beide Endpunkte sind geprüfte Flächen, Marken bringen ihre eigene Wäsche.
Rhythmus: size="sm|md|lg|xl" multipliziert--section-space; gleiche Flächen kollabieren ihre Naht (--seam-factor) – zwei getönte Nachbarn lesen sich als ein Band
size="sm" – kompaktes Band
Direkt anschließende getönte Section – die Naht ist kollabiert, kein doppeltes Padding mehr.
size="lg" – großzügiger Auftritt
SectionDivider: shape="wave|curve|slant|arc",tone = Fläche der Section, zu der die Form gehört,flip spiegelt – Kompositions-Werkzeug zwischen Sections
Getönte Fläche …
… läuft als Welle aus.
Geflippte Kurve leitet zurück in die Tönung.
Schräge für technische Marken.
Bogen – die ruhigste Form.
tone="primary" – die Form trägt eine Vollton-Fläche in die nächste Section.
Primary-Flächen-Verlauf: .of-surface-primary – jede Vollton-Primary-Fläche (Default-Button, Bänder) läuft über--gradient-primary-from/-to; Default solid, die Marke spreizt mit zwei Literalen (Marken-Schalter umlegen!)
Ein Band, das nicht mehr flach ist
Sekundär-CTA.of-glow-1/-2 (Marken-Alpha, komposit-gegated) und.of-border-gradient (Gradient-Hairline aus den Text-Gradient-Stops)
Bühne mit Glow
Featured-Karte
Die Hairline läuft durch den Marken-Gradienten, innen bleibt die Karte auf --card.
Elevation: shadow-sm … shadow-2xl laufen über--shadow-color/-strength – Marken tönen und skalieren das ganze System
shadow-smshadow-mdshadow-lgshadow-xlReveal-Varianten (scrollen zum Auslösen): fade-up /fade-down / fade-left / fade-right /scale / zoom / tilt – Amplitude und Stagger steuern die Marken-Tokens; ohne JS und bei reduzierter Bewegung bleibt alles sichtbar
fade-upfade-downfade-leftfade-rightscalezoomtiltChoreografie-Presets: data-reveal-group="tight" (40 ms Schritt, dichte Grids) vs. "loose" (120 ms, inszenierte Momente) – das nackte Attribut behält den Token-Default (80 ms,--reveal-stagger)
.of-kicker – das Eyebrow-mit-Balken-Pattern als eine Klasse; der Balken reitet currentColor, eine Farbe steuert beides – --kicker-bar löst die Balkenfarbe bei Bedarf vom Label
Aus der Werkstatt
Gedimmt via Textfarbe
Bild-Layer: .of-duotone (Marken-Duotone,--duotone-strength) + .of-overlay(Lesbarkeits-Plateau, gegen Worst-Case-Weiß gegated: volle Stärke bis--overlay-plateau, klar ab --overlay-extent – die Textzone liegt auf dem Plateau) – kombinierbar, Text unten trägt--overlay-foreground
Count-up-Primitive (@on-fleek-gmbh/theme/countup):data-countup + data-value, zählt einmal beim ersten Sichtkontakt; ohne JS oder bei reduzierter Bewegung steht der Endwert – Tempo via --duration-count
1.480Projekte
98% Weiterempfehlung
Fluide Oberskala text-6xl/7xl/8xl +text-display-lg; neue Rollen accent-2 undinfo
1.480 Projekte
Statement in display-lg
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.