Luxus und Manufaktur: Stille

Uhren, Schmuck, Juwelier, Luxus-Manufaktur

Viel Weißraum, Anthrazit und Weiß im Wechsel, eine feine Kontrast-Serif für Titel und gesperrte Versalien für Labels. Überraschend ist die Messung: A. Lange & Söhne und NOMOS animieren nicht langsam und schwebend, sondern kurz (0,15–0,5 s) und asymmetrisch. Menüs öffnen langsamer, als sie schließen. Ruhe entsteht durch Raum und Bildqualität, nicht durch Zeitlupe.

Bauplan tokens.css Alle Techniken

Schrift

Stille

Viel Weißraum, Anthrazit und Weiß im Wechsel, eine feine Kontrast-Serif für Titel und gesperrte Versalien für Labels.

Headline: Bodoni Moda
Text: Instrument Sans

Farbe

#23282f
#ffffff
#f4f4f2
#8b9097
#d9dadb
#a88a5a
#71757B

Bewegung

cubic-bezier(0.16, 1, 0.3, 1)

Stil: Animationsstil „Asymmetrisch auf/zu“ (schnell zu, langsam auf)
Dauer: UI 125–250, Menü auf 300 / zu 200, Bildwechsel 400–500, Abdunklung auf 800 / zu 600

Aufbau der Seite

SignaturGebrochenes / asymmetrisches Raster

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

Neuheit / KampagneSplit-Screen mit Sticky-Seite (eine Seite steht, andere scrollt) · Sticky-Medium
Kollektionen (Kaufbox nur mit Online-Shop, sonst Anfrage oder Termin)Gebrochenes / asymmetrisches Raster Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker) · Vollbild-Bühne Kaufbox mit Farb- und Größenwahl · Schnellkauf Finanzierung mit Pflichtangaben und Warnhinweis · Ratenzeile in der Kaufbox EU-Hinweis zur Gewährleistung und Garantie-Label · Label-Leiste in
Manufaktur / HandwerkSubtiler mehrschichtiger Parallax Editorial-/Magazin-Layout · Kunstbuch
Technik / KaliberZahlen-/Fakten-Sektion als Typo-Ereignis · Ruhige Tabelle
Service, Pflege, GarantieAkkordeon mit Höhenanimation auf auto · FAQ Fahrschule
Boutiquen / Termin (Standortliste nur ab zwei Boutiquen, sonst Anfahrt mit Adresse als Text und Karte per 2-Klick; Termin-Tool per 2-Klick, Telefon als Alternative)Öffnungszeiten mit Live-Status · Kopfzeile Standortfinder als Liste · Nur Liste Karte per 2-Klick (Anfahrt ohne vorab geladene Karte) · Kartenbild Termin-Buchung per 2-Klick-Einbettung · Platzhalter
Vertrag widerrufen & Erklärung zur Barrierefreiheit (Footer, ohne Login; nur mit Online-Shop oder Online-Termin)Widerrufs- und Kündigungs-Button · Richtig Seite „Barrierefreiheit“ als Vorlage · Informationen nach BFSG

Navigation: Mega-Menü mit morphendem gemeinsamem Viewport Native Dropdowns mit Popover-API, Anchor Positioning und Invokern Header verschwindet beim Runterscrollen, kehrt beim Hochscrollen zurück
Scroll: Subtiler mehrschichtiger Parallax
Hover: Bild-Zoom in der Maske · Basis
Mikroanimation: Ein-/Ausblenden mit @starting-style Animiertes Auswahlmenü (anpassbares select)
Galerie: Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker) · Vollbild-Bühne Raster-zu-Vollbild mit geteiltem Element (Lightbox 2026) · Produktgalerie
Footer: Mega-Footer mit Sitemap und Utility-Leiste Studio-Visitenkarte im Footer (Standorte, Kontakt-Tabs, Ortszeit) · Praxis
Buttons: Kontur-Button, der sich zeichnet · Doppelkontur rückt auf Pfeil-Icon-Button · Pfeil-Tausch

Nicht verwenden

Schimmer-/Verlaufs-Text und fluessigmetall-chrom – Gold-Schimmer ist das Klischee schlechthin; keine der Referenzen nutzt ihn
Interaktives 3D-Objekt im Hero und glas-transmission-3d für Uhren oder Steine – kostet LCP, wirkt schnell wie ein Spielzeug gegenüber echter Fotografie
Animationsstil „Luxus weich“ als Gesamtsprache (1,2–2,4 s) – die gemessenen Manufaktur-Seiten bleiben bei 0,15–0,5 s
Nachzieh-Cursor (Lerp-Follower) , magnetische-elemente – verspielt
Playfair Display und Cinzel – Verbotsliste, Claude-Reflex für „Luxus“
Script-Schrift für Überschriften – Messika nutzt die Script nur als Akzent

Regeln

Sektionen wechseln zwischen Anthrazit und Weiß (Lange: phxsg-theme-black/-white), nie mehr als zwei Flächenfarben.
Labels, Navigation und Referenznummern in gesperrten Versalien (+0.08em), Titel in Serif gemischt.
Produktbild ist Hauptdarsteller: Freisteller auf Hellgrau, alle Ansichten im gleichen Licht und Maßstab.
Öffnen langsamer als Schließen (300/200 ms), Abdunklung ruhig (800/600 ms).
Parallaxe nur nativ (animation-timeline: view()) mit max. 4vh Weg, hinter @supports, entfällt bei reduzierter Bewegung.
Technische Angaben (Kaliber, Gangreserve, Durchmesser) als Zahlen-Sektion mit Tabellenziffern.
Kein Preis-Countdown, keine Rabatt-Badges; Termin in der Boutique als primärer CTA.
bild-zoom-in-maske nie auf Bildern mit mehrschicht-parallax (wann_nicht: die Transforms kollidieren).
Pflichtangaben und Recht (Leitfaden 8a): mit Shop: Gesamtpreis inkl. MwSt., Versand, Widerrufsbelehrung und Widerrufs-Button (§ 356a BGB, seit 19.06.2026), Produktsicherheit (GPSR); Angaben zu Feingehalt, Steinen und Echtheit nur belegt; Erklärung zur Barrierefreiheit (bfsg) bei Online-Kauf oder -Termin; Termin-Tool erst nach Klick – vom Kunden prüfen lassen.

Bild und Ton

Licht: Ruhiges, gerichtetes Studiolicht, für alle Ansichten derselbe Lichtwinkel und Maßstab.
Ausschnitt: Freisteller auf #f4f4f2, Makro auf Zifferblatt, Fassung oder Gravur, Uhr am Handgelenk.
Personen: Selten: Uhrmacher:in am Werktisch oder ein Handgelenk; keine Gesichter in Kampagnenpose.
Formate: 4:5, 1:1, 3:2
Nicht: Keine Glitzer-Spiegelungen, keine Gold-Verläufe, keine Rabatt-Badges, keine Stock-Paare, keine Parallaxe über 4vh.
Anrede: Sie
Sätze: Kurz, mit Pausen; Zahlen technisch exakt (Kaliber, Gangreserve, Durchmesser).
Haltung: Leise und präzise. Qualität wird gezeigt, nicht behauptet.
Tonproben: Handaufzug, 72 Stunden Gangreserve., Wir zeigen Ihnen die Uhr gern in der Boutique.
Nicht schreiben: „Luxus pur“, „zeitlose Eleganz“ als Floskel, „exklusiv für Sie“, Countdowns, Ausrufezeichen.

Hero, Raum und Form

Hero-Raster: 12 Spalten asymmetrisch: Bild über Spalte 6 bis 12, Text über 1 bis 4 unten, 1 Spalte Luft dazwischen.
Hero-Bild: Freisteller oder Kampagnenfoto der Neuheit, 4:5; Film nur als hero_variante mit eigenem Material, mobil Standbild.
Überschrift: clamp(2.5rem, 5.5vw, 5.5rem), Bodoni Moda 400, links unten.
Handlung: „Termin in der Boutique“ (dunkle Pille) und „Kollektion“ (Messing-Doppelkontur) untereinander.
Zusatz: Referenznummer und Kaliber in Instrument Sans 0.75rem Versal +0.08em über der H1.
Sektionsabstand: clamp(112px, 14vw, 240px)
Dichte: luftig
Raum: Ruhe durch Raum (kurz): die größten Sektionsabstände aller Rezepte. Technische Daten dagegen eng in Tabellenziffern.
Spalten: 12
Maximale Breite: 1440px
Raster: Asymmetrisch (broken-grid-asymmetrisch): Bild 7 Spalten, Text 4 Spalten versetzt. Freisteller zentriert mit viel Rand. Sektionen wechseln Anthrazit und Weiß.
Radius klein: 0
Radius groß: 0
Schatten: keiner
Form: Bilder und Flächen eckig. Einzige runde Form ist die dunkle Pille der Haupthandlung (pfeil-icon-button, Variante tausch); Nebenweg mit versetzter Messing-Kontur (kontur-button-zeichnen, Variante doppel).

Vorbilder