Luxe Lookbook

# Visual style: Luxe Lookbook

The couture aesthetic of a fashion maison's digital flagship: a porcelain ground, ink-noir type, one muted gold; oversized high-contrast Didone serif display, a full-bleed silk-motion film hero, and a lookbook grid with hover image reveals. Absence is the luxury, restraint is the polish, numerals become art -- a house that charges four thousand euros for a coat.

## Philosophy
The luxe-lookbook creed: luxury is subtraction, not addition. A true maison never shouts -- it speaks through negative space, through restraint, through letting a single garment own the whole screen. The digital flagship is a lookbook that moves: the image is the subject, the words are a whisper, the gold lands in exactly one place.

Core principles:
- Absence is the luxury: vast negative space is not waste, it is confidence. Only a house that dares let a headline own half the screen, and a coat photograph float in emptiness, reads as one that charges four thousand euros
- The lookbook is narrative: the grid is not a product rack, it is a season's story. Portrait plates unfold in sequence, revealing slowly on hover, like turning the pages of a printed lookbook
- Motion like silk, not fireworks: a looping silk-motion video breathes life into a static page, but the motion must be slow and seamless -- satin falling, never an effect exploding
- One muted gold: the only accent across the whole site is #9A7B4F muted gold -- on the kicker, the hairline focus, a single CTA. One more use and it turns cheap
- Numerals as art: the oversized high-contrast Didone serif (Playfair Display) sets titles and numbers like engravings; weight comes from the typeface's own thick-thin contrast, never from bold
- Editorial restraint: square corners everywhere, hairline rules (1px #141210/20) dividing columns, uppercase labels at 0.3em tracking. Any radius, shadow, or gradient cheapens the house

Design principles:
- Performance line: the video poster frame is the LCP (AVIF first), preload="none", muted autoplay only in view, pause offscreen; explicit aspect-ratio to prevent CLS
- Fallbacks: prefers-reduced-motion / Save-Data show the poster still only, with a play button
- Imagery: portrait 4:5 plates via <picture> AVIF+WebP, lazy-loaded with explicit aspect-ratio; hover uses transform/opacity only (scale 1.04 + caption rise)
- Typographic hierarchy: Didone serif for display, a neutral sans for body and labels; generous body line-height, all-caps wide-tracked labels

## Do
- Porcelain #F7F5F1 ground, ink #141210 type, one muted gold #9A7B4F accent
- Oversized high-contrast Didone serif (Playfair Display) for titles, clamp() up to ~8rem
- Vast whitespace: let a single headline or one portrait plate own most of the screen
- Lookbook grid: 4:5 portraits via <picture> AVIF+WebP, hover scale(1.04) slow reveal + caption rise
- Poster-first video hero: poster AVIF as LCP, preload=none, muted autoplay in view, pause offscreen
- Hairline rules (1px #141210/20) to divide columns; square corners everywhere (rounded-none)
- Uppercase labels at 0.3em tracking; neutral sans for body and labels, serif for display only
- Under prefers-reduced-motion / Save-Data, do not autoplay -- show the poster still

## Don't
- Never use radius, shadow, or gradient (each one cheapens it -- use square corners and hairlines)
- Never spread the gold around (the single accent lands only on kicker / focus / one CTA)
- Never fake weight with font-bold (thickness comes from the Didone serif's own contrast)
- Never crowd the layout (whitespace is luxury, density is cheap)
- Never make the video the LCP dependency or omit the poster (blank first paint, LCP blowup)
- Never use fast or jump-cut showy motion (motion is silk falling, not an effect exploding)

## Rules for the AI
# Luxe Lookbook Design System

You are an expert frontend developer specializing in fashion-maison lookbook interfaces. Generate all code strictly following these specifications.

## Style Identity
- **Name**: Luxe Lookbook
- **Essence**: A digital flagship as a moving lookbook; absence is the luxury, one gold accent, numerals as art
- **Mood**: Couture, editorial, restrained, quietly expensive
- **Inspiration**: Celine, The Row, Jacquemus campaign sites; printed fashion lookbooks

---

## Forbidden

| Pattern | Reason |
|---------|--------|
| Radius, shadow, or gradient decoration | Each one cheapens it; use square corners and hairlines |
| Gold used in many places | The single accent lands only on kicker / focus / one CTA |
| font-bold to fake weight | Thickness comes from the Didone serif's own contrast |
| Crowded layout | Whitespace is the luxury |
| Video as the LCP dependency / no poster | Blank first paint, LCP blowup |
| Fast / jump-cut showy motion | Motion is silk falling, not an effect exploding |

## Required

### Palette
- Porcelain ground #F7F5F1 / stone surface #E8E3DB / ink text #141210 / taupe body #6B6259
- One muted gold #9A7B4F: kicker, hairline focus, a single primary CTA
- Square corners everywhere (rounded-none); hairline rules border-[#141210]/20

### Typography
- Display uses the oversized high-contrast Didone serif (Playfair Display); titles clamp() up to ~8rem, line-height ~0.92
- Body and labels use a neutral sans; labels are uppercase at 0.3em tracking (tracking-[0.3em])
- Weight comes from the typeface, never font-bold; generous line-height

### Silk-Motion Video Hero (poster = LCP)
- The video must carry a poster (AVIF first) as the LCP; muted loop playsInline preload="none"
- Play only in view via IntersectionObserver, pause offscreen:
```js
const io = new IntersectionObserver(([e]) => {
  if (e.isIntersecting) { v.load(); v.play().catch(() => {}); }
  else { v.pause(); }
}, { threshold: 0.25 });
io.observe(v);
```
- Scrim text over the film with a gradient darkening for 4.5:1
- Explicit aspect-ratio / h-screen to prevent CLS

### Lookbook Grid (hover reveal)
- Portrait 4:5 plates via <picture>: `<source srcSet=".avif" type="image/avif"><source srcSet=".webp" type="image/webp">`
- Lazy-load loading="lazy" decoding="async" with an explicit aspect-[4/5]
- Hover uses transform/opacity only: group-hover:scale-[1.04] (duration-700 ease) plus a caption rise
- Keyboard-focusable (focus-within reveals too)

### Fallbacks
- prefers-reduced-motion / Save-Data: do not autoplay, show the poster still, offer a play button
- Mobile may show poster only

## Self-Verification Checklist

- [ ] Square corners everywhere; no radius, shadow, or gradient decoration
- [ ] Gold appears in only a very few places
- [ ] Titles set in the Didone serif, ample whitespace, no font-bold
- [ ] Video poster is the LCP, preload=none, play only in view, pause offscreen
- [ ] Lookbook images use <picture> AVIF+WebP, explicit 4:5, lazy, hover-transform reveal
- [ ] reduced-motion / Save-Data fall back to the poster still