Mode und Beauty: Kollektion und Ritual

Mode-Label, Concept Store, Kosmetik und Hautpflege

Kampagnenbild in voller Breite, warmes Off-White, eine Grotesk für fast alles und Bewegung nur als weiche Bildüberblendung. Toteme und Lemaire verkaufen mit Weißraum und Fotografie. Typology zeigt bei Beauty die Formel direkt in der Überschrift (Wirkstoff + Prozent + Preis) und setzt dafür eine Mono-Schrift. Der Shop muss schnell bedienbar bleiben, deshalb wird die UI knapp animiert.

Bauplan tokens.css Alle Techniken

Schrift

Kollektion und Ritual

Kampagnenbild in voller Breite, warmes Off-White, eine Grotesk für fast alles und Bewegung nur als weiche Bildüberblendung.

Mode-Label, Concept Store, Kosmetik und Hautpflege

Headline: Zalando Sans
Text: Zalando Sans
Akzent: Fragment Mono

Farbe

#f6f3ee
#121010
#ebe7e0
#cecdc6
#8c857b
#a3402a
#726D63

Bewegung

cubic-bezier(0.37, 0, 0.63, 1)

Stil: Animationsstil „Luxus weich“
Stil für UI: Animationsstil „Asymmetrisch auf/zu“ (schnell zu, langsam auf)
Dauer: Kampagnen-Bildwechsel 1000, UI (Menü, Akkordeon, Hover) 200–300, Unterstreichung 100

Aufbau der Seite

SignaturScroll zum nächsten Projekt (scroll-gesteuerter Seitenwechsel)

HeroFoto-Hero: echtes Foto, ein Satz, ein Weg · VollbildoderKinoreifer Vollbild-Video-Hero

Kampagne / EditorialEditorial-/Magazin-Layout · Kunstbuch
Lookbook (Kapitel scrollen ins nächste)Scroll zum nächsten Projekt (scroll-gesteuerter Seitenwechsel)Bild mit Markierungspunkten · Shop the Look
Produktreihe / NeuheitenNatives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker) · Produktreihe
Kategorie mit FilterFacettenfilter mit Ergebnisliste · Schublade
Produktdetail (Bilder links, Kaufbox rechts sticky)Kaufbox mit Farb- und Größenwahl · Produktseite Raster-zu-Vollbild mit geteiltem Element (Lightbox 2026) · Zoom Akkordeon mit Höhenanimation auf auto · FAQ Fahrschule Warenkorb als Seitenpanel · Hinweis am Symbol EU-Hinweis zur Gewährleistung und Garantie-Label · Label-Leiste in
Anwendung / Ritual (Beauty)Split-Screen mit Sticky-Seite (eine Seite steht, andere scrollt) · Sticky-Medium
Welche Pflege passt? (Finder in wenigen Fragen)Produktfinder in wenigen Fragen · Schritt für Schritt
Wirkstoffe, Pflege, ServiceAkkordeon mit Höhenanimation auf auto · FAQ
BewertungenBewertungen mit Sternverteilung · Verteilung als Band
Kontakt / Laden (Service-Anfrage; Adresse, Öffnungszeiten und Karte per 2-Klick nur mit Ladengeschäft)Kontakt- und Anfrageformular als eigene Sektion Öffnungszeiten mit Live-Status · Kopfzeile Karte per 2-Klick (Anfahrt ohne vorab geladene Karte) · Kartenbild
Vertrag widerrufen / kündigen & Erklärung zur Barrierefreiheit (Footer, ohne Login; bei Online-Verträgen mit Verbrauchern)Widerrufs- und Kündigungs-Button · Richtig Seite „Barrierefreiheit“ als Vorlage · Informationen nach BFSG

Navigation: Mega-Menü mit morphendem gemeinsamem Viewport Gestapelte bzw. mehrstufige Drawer-Navigation Header verschwindet beim Runterscrollen, kehrt beim Hochscrollen zurück
Hover: Bild-Zoom in der Maske · Rahmen schrumpft
Mikroanimation: Animiertes Auswahlmenü (anpassbares select)Toast-Benachrichtigungen im Stapel
Galerie: Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker) · Produktreihe Raster-zu-Vollbild mit geteiltem Element (Lightbox 2026) · Produktgalerie
Footer: Mega-Footer mit Sitemap und Utility-Leiste Newsletter-Modul mit Persönlichkeit · Shop
Buttons: Glas-Button · Getönt Text-Roll beim Hover (doppelte Zeile rollt durch)

OptionalKartenfächer nach Containerbreite

Nicht verwenden

In-den-Warenkorb-Flug und konfetti-erfolg – verspielt, wirkt im Premium-Mode-Umfeld billig
3D-Kippen von Karten (Tilt) und karten-spotlight-glow auf Produktkarten – Gadget-Look statt Ware
Smooth Scroll mit Lenis Shop mit Filtern, Drawer und verschachtelten Scrollbereichen
Graustufen zu Farbe / Duoton-Bildbehandlung die Farbe des Produkts ist die Kaufinformation
Fette Display-Headlines und Laufweite unter -0.03em – Mode-Referenzen setzen Headlines in Light/Regular
Playfair Display als „Eleganz“-Reflex – Verbotsliste

Regeln

Erster Bildschirm: ein Kampagnenbild in voller Breite, Text klein in einer Ecke; Video nur mit eigenem Kampagnenmaterial.
Eine Grotesk für Headline und Text (Toteme: nur Toteme Sans); Mono nur für Rubriken, Größen und Wirkstoffe.
Beauty: Formel in die Produktzeile (Wirkstoff + Konzentration + Preis), wie bei Typology.
Produktbilder auf einheitlicher Off-White-Fläche, alle im selben Seitenverhältnis (3:4 oder 4:5).
Bilder überblenden langsam (1 s), UI reagiert schnell (≤ 300 ms).
Größen, Preise und Mengen in Tabellenziffern. Gefilterte Produkte ordnen sich per FLIP in höchstens 250 ms um (nur Position, kein Einblend-Effekt); bei reduced motion springen sie.
Footer großzügig: Service, Newsletter, Sitemap; darf die volle Bildschirmhöhe einnehmen (Lemaire h-screen).
Lookbook-Kapitel gehen per Scroll ins nächste über; am Ende der Lookbook-Seite bleiben Footer, Service und rechtliche Links erreichbar.
hide-on-scroll-header nur auf Kampagne, Lookbook und Kategorie; auf Produktdetail, Warenkorb und Checkout bleibt der Header fest, damit der Warenkorb immer erreichbar ist (wann_nicht des Musters).
Pflichtangaben und Recht (Leitfaden 8a): Gesamtpreis inkl. MwSt., Versandkosten, Lieferzeit, Knopf „zahlungspflichtig bestellen“, Widerrufsbelehrung und Widerrufs-Button (§ 356a BGB, seit 19.06.2026), AGB, Zahlungsarten; Kosmetik mit Grundpreis je 100 ml und Inhaltsstoffen vor dem Kauf; Produktsicherheit (GPSR Art. 19: Hersteller mit Post- und E-Mail-Adresse) als Akkordeon „Hersteller und Sicherheit“; Streichpreise nur mit dem niedrigsten Preis der letzten 30 Tage; Bewertungen mit Hinweis, ob und wie sie geprüft werden (§ 5b UWG); keine pauschalen Umweltaussagen ohne Nachweis; Erklärung zur Barrierefreiheit (bfsg) – vom Kunden prüfen lassen.

Bild und Ton

Licht: Weiches Studio- oder Tageslicht, warme Hauttöne, Produkt in echter Farbe.
Ausschnitt: Kampagne: Ganzkörper oder Anschnitt; Produkt: Freisteller auf #ebe7e0 mit gleichem Rand.
Personen: Ja in der Kampagne (Models mit Rechten); Produktbilder ohne Person.
Formate: 3:4, 4:5, 16:9
Nicht: Keine wechselnden Seitenverhältnisse im Produktraster, keine Stock-Models, kein Rot außer für Sale und Fehler, kein Glanz-Filter auf Haut.
Anrede: du
Sätze: Knapp und sachlich: Material, Schnitt, Wirkstoff mit Prozent, Preis.
Haltung: Kuratiert, ruhig, selbstverständlich. Beauty nennt die Formel statt eines Versprechens.
Tonproben: Mantel aus Wolle, gerader Schnitt. Ab 389 €., Serum mit 15 % Vitamin C. Für jeden Hauttyp.
Nicht schreiben: „Must-have“, „Gönn dir“, „Shop the look!“ ohne Look, Wirkversprechen ohne Beleg, Emojis.

Hero, Raum und Form

Hero-Raster: Kampagnenbild randlos, volle Bildschirmhöhe; Text klein in der unteren linken Ecke über 4 Spalten.
Hero-Bild: Ein Kampagnenbild, 16:9 Desktop, 3:4 oder 4:5 mobil; Video nur als hero_variante mit eigenem Material.
Überschrift: clamp(2rem, 5vw, 4.5rem), Zalando Sans wdth 125, 400–500, unten links.
Handlung: Ein Weg: „Kollektion ansehen“ als Textlink oder getönter Glas-Knopf; kein zweiter CTA im Bild.
Zusatz: Rubrik in Fragment Mono 0.75rem Versal (Saison, „Neu“) über der Headline.
Sektionsabstand: clamp(64px, 8vw, 128px)
Dichte: luftig
Raum: Weißraum um Kampagnenbilder, aber ein enges Produktraster (8 bis 16 px Spalt). Produktname, Preis und Wirkstoff stehen 4 px auseinander.
Spalten: 12
Maximale Breite: none
Raster: Kampagnenbild randlos. Produktraster 4 Spalten Desktop, 2 mobil, alle Bilder im selben Format. Footer darf die volle Bildschirmhöhe nehmen.
Radius klein: 2px
Radius groß: 0
Schatten: keiner
Form: Eckig wie ein Lookbook. Der getönte Glas-Knopf (glas-button, Variante getoent) steht nur über dem Kampagnenbild und bekommt hier 2 px statt der Pille aus der Demo.

Vorbilder