Design System

Section Blocks

Alle Bausteine, aus denen Landing Pages komponiert werden.

Header

Einstieg & Above-the-fold
Hero5 Varianten
Above-the-fold Einstieg mit Headline, Subline und CTAs.
Statement3 Varianten
Übergroße Display-Aussage mit optionalem Wasserzeichen, geschichteten Zeilen und Wort-Markierung.
Wordmark3 Varianten
Markenname in Billboard-Größe — als Hero-Akzent oder abschließende Footer-Signatur.

Content

Inhalt, Features & Story
Feature Grid4 Varianten
Raster aus Feature-Karten mit Icon, Titel und Beschreibung.
Content Split4 Varianten
Zweispaltige Sektion: Text neben Medium, optional gespiegelt.
Bento Grid1 Variante
Asymmetrisches Raster mit gewichteten Kacheln und Kennzahlen.
Process2 Varianten
Nummerierte Schritt-für-Schritt-Timeline mit Verbindungslinie.
Showcase2 Varianten
Produkt-Screenshot in einem schwebenden Rahmen mit Akzent-Glow und schwebenden Annotations-Chips.
Work Gallery2 Varianten
Editoriales Projekt-Raster mit Cover, Kategorie und Jahres-Caption — ideal für Cases & Portfolio.
Link Index3 Varianten
Editoriale Großlink-Liste mit Ghost-Typo, Hover-Pfeil und optionalem Avatar-Cluster.
Media Cards3 Varianten
Bildgeführtes Karten-Raster mit Mockup, Icon, Titel und Beschreibung — das visuelle Pendant zum Feature Grid.

Social Proof

Vertrauen & Belege
Stats5 Varianten
Kennzahlen-Band mit großen Werten und Labels.
Testimonials4 Varianten
Kundenstimmen als scrollbares Band mit Avatar.
Logo Cloud2 Varianten
Vertrauens-Band aus Kunden-Wordmarks, statisch oder als Marquee.
Marquee3 Varianten
Unendlich laufendes Wort-/Tag-Band — als ruhiger Streifen oder diagonales Akzent-Ribbon.
Audience3 Varianten
Kompaktes „Für wen“-Band aus Persona-Chips mit Akzent-Glyphe.

Conversion

Preise & Handlungsaufruf
Pricing3 Varianten
Preistabelle mit hervorgehobenem Tier.
FAQ3 Varianten
Häufige Fragen als Accordion.
Call To Action5 Varianten
Abschließender Handlungsaufruf, meist auf Markenfarbe.
Comparison1 Variante
Feature-Matrix mit hervorgehobener Empfehlungs-Spalte.
Newsletter3 Varianten
Inline-E-Mail-Erfassung mit Eyebrow, Note und CTA.