Brand Reference
Monokel Style Canon
Zehn Regeln für die Editorial-Quiet-Luxury-Ästhetik der Monokel-Website. Vorbild: Saman Amel, A Kind of Guise, Aesop, Brunello Cucinelli. Diese Seite ist interne Referenz für zukünftige Section-Refactors.
Container 1100px
Standard-Container ist max-width: 1100px. Ausnahme: bewusste Breitbild-Spreads (Hero-Bild, Made-in-Italy als full-bleed). Negative Space links und rechts ist Pflicht — kein full-width-Layout für Detail-Inhalt.
Sand-Abstufungen
Body-Background ist --color-beige (#f6f1ea). Drei subtile Abstufungen: soft (heller), beige (primary), deep (dunkler). Kein harter Wechsel zu Weiß. Aesop-Logik: Premium-Brands bleiben in der Sand-Familie.
2-Tile-Pairs
Visuelles Grundvokabular: zwei gleichgroße Tiles nebeneinander, aspect-ratio 683/1024, Gap 4px, max-width 1100px. Typischer Einsatz: Bild + Editorial-Text. Reverse-Variante alterniert Bild links/rechts.
Aspect-Varianten je nach Bildformat: editorial-pair--landscape (aspect 1024/683) für Querformat-Bilder, editorial-pair--square (aspect 1/1) für Square-Bilder. Bei beiden Varianten bekommt das Text-Tile aspect-ratio: auto; overflow: visible; damit längerer Content (Quote + Link) nicht geclippt wird.
Editorial-Headline
Zwei Absätze prägnanter Text. Cormorant-Serif für Headlines, Sans für Body. Alles in einem Tile mit beige Background.
Editorial-Speisekarte für Listen
Listen (Process, Pricing, FAQ) als <dl> mit Border-Bottom zwischen Rows. Max-width 720–820px zentriert, kein Card-Background. Ersatz für Bullet-Listen oder Card-Grids.
- 01 Erste Stufe
- Kurze Beschreibung in einem Satz, höchstens zwei.
- 02 Zweite Stufe
- Direkter, ohne Floskeln. Sans-Serif Body-Text.
- 03 Dritte Stufe
- Border-Bottom in
--color-sand, kein Background.
Schriften
Cormorant Garamond (Serif) für alle Headlines (24–28px, weight 500) und CTA-Statements (gleicher Stil — keine Variation, kein italic). Futura / System-Sans für Eyebrows (11px, ls 4px) und Body. Klare zwei-Schrift-Logik, keine dritte Familie.
Eyebrow-Labels über Sektionen
Klein, sand-farbig, all-caps, ls 4px. Statt großer H2-Headlines als Section-Identifikation. Stille Orientierung ohne plakativ zu sein.
Sortiment
Ablauf
Preise
Lookbooks
Text-Links statt CTA-Buttons
Alle Links als border-bottom: 1px solid var(--color-sand) mit Hover zu Heading-Color. Sans-Serif, 14px, weight 500. Auch Final-CTA am Seitenende — kein gefüllter Button. Conversion-Anker bleibt im Header ("Termin vereinbaren"). SS26-Pattern.
Inline-Text mit Text-Link in border-bottom-Stil.
Tile-Overlay-Schrift auf Bild
Schriften AUF Bildern (nicht darunter). Color #3d4043 auf subtle Gradient (transparent → rgba(0,0,0,0.15)). Sans 11px, weight 500, ls 3px. Nie weiß auf hartem dunklem Gradient.
Hero — Lookbook-Header + Editorial-Intro
Kein 2-Col-Hero-Split. Stattdessen: Eyebrow + große H1 (36px serif, weight 600), zentriert. Darunter Editorial-Intro (max 720px, 2 Absätze prägnant). Kein Hero-Bild — die Galerie übernimmt den visuellen Anker.
Maßanzug
Maßanzüge für Herren
Vom klassischen Geschäftsanzug über Smart Casual bis zum Smoking. Jeder Anzug entsteht individuell für dich — Tuche aus den ältesten Webereien Italiens und Englands, persönliche Beratung in Berlin oder München.
Für deinen Maßanzug nehmen wir uns die Zeit, die es braucht — damit Passform, Stoff und Design wirklich zu dir passen.
4px-Gap-System zwischen Sektionen
Dünne weiße Trennstriche zwischen allen Hauptsektionen (main > section + section { margin-top: 4px }). Gleicher 4px-Gap auch zwischen Tiles im Pair und Editorial-Splits. Visueller Rhythmus durch die ganze Seite.
