DESIGN.md — MARLENE Concept Store (Demo)

Taste-Richtung (Layer A): MINIMALISTISCH-EDITORIAL (Notion/Kinfolk-Ruhe), warm statt kühl. Bewusst gegensätzlich zu den anderen Demos: Hotel=Gold-Luxus-dunkel, Bau=Beton-Industrial, VOLTA=Dark-Tech-Cyan. MARLENE = hell, cremig, viel Luft, Serif, ein warmer Erdton. Leitprinzip: SIMPEL. Produktfotografie trägt die Seite, nicht Effekte.

1. Farb-Tokens

• paper #F7F2EA (Basis, warmes Creme)
• paper-2 #EFE7DB (zarte Abhebung, Karten-Hintergrund)
• espresso #221E1A (Primärtext, dunkle Sektionen)
• ink-60 #5A524A (Sekundärtext)
• line rgba(34,30,26,.12)
• clay #C2603F (EINZIGER Akzent: Links, kleine Flächen, Preise-Hover, ein Wort) — sparsam
• clay-700 #A44E31 (Akzent-Hover)
• sage #7C8466 (optionaler 2. Ton für Tags/Kategorien, sehr dezent) Kontrast: espresso auf paper = ~12:1; clay nur für große/Akzent-Elemente, nicht für Fließtext.

2. Typografie

• Display: “Fraunces Variable” (characterful Serif, optical size) — Headlines groß, leicht italic für Akzente, weight 400–500. Gibt sofort „Boutique/redaktionell”.
• Body: “Inter Variable” — ruhig, lesbar, 16–18px, leading-relaxed.
• Label/Eyebrow: Inter, 11–12px, uppercase, tracking 0.18em, ink-60 (KEIN Mono — zu technisch).

3. Layout / Rhythmus

• Viel Weißraum, großzügige Sektionsabstände. Container max ~1180px.
• Große Produktbilder (Portrait 3:4 / 4:5), ruhige asymmetrische Editorial-Grids.
• Sektionswechsel sanft: paper ↔ paper-2 ↔ ein dunkler espresso-Block als Kontrapunkt.
• Eine dünne line als Trenner, kleine Serif-Zahlen/Kategorie-Index dezent.

4. Primitives

• btn-primary: espresso Fläche, paper Text, rounded-full, hover clay.
• btn-ghost: 1px line-Border, hover clay-Border.
• product-card: Bild + Marke (label) + Name (Serif) + Preis. Hover: Bild leicht zoom, „Reservieren”.
• chip/category: paper-2 Pille, ink-60.
• section-label (eyebrow) + Serif-Headline.

5. Motion (dezent! kein Tech-Effekt)

• Sanfte Fade-up-Reveals beim Scroll (y 16, opacity, 0.6s ease-out).
• Bild-Hover: scale 1.03, 0.6s. Keine Glows, keine Partikel, kein Mono-HUD.
• prefers-reduced-motion: alles sofort sichtbar.

6. Accepted Debt

• Echte Produkt-/Ladenfotos als Stock (Unsplash, lokal). Preise/Marken erfunden.