Luxe Lookbook

STYLEKIT_STYLE_REFERENCE
style_name: Luxe Lookbook
style_slug: luxe-lookbook
style_source: /styles/luxe-lookbook

# Hard Prompt

## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.

## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.

Strictly follow the style rules below and maintain consistency. No style drift allowed.

## Requirements

- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.

## Style Rules

# 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

## Absolute Bans (Match and Refuse)

If any of the following patterns appear, it is a style violation — rewrite without exception.

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

## Self-Check (Verify Before Shipping)

If any item fails, the style has drifted — fix before shipping.

- [ ] No purple-to-blue gradients
- [ ] No overused fonts (Inter, Roboto, Geist, Fraunces, Plus Jakarta Sans)
- [ ] No nested cards (cards inside cards)
- [ ] No gray text on colored backgrounds
- [ ] Body text contrast meets WCAG AA (>= 4.5:1)
- [ ] No bounce or elastic easing curves
- [ ] Animations have a prefers-reduced-motion fallback
- [ ] Body text line length capped at 65-75 characters
- [ ] No side-stripe accent borders (border-left/right > 1px)
- [ ] No gradient text (background-clip: text)
- [ ] No glassmorphism used as the default surface treatment
- [ ] No tiny uppercase tracked eyebrow labels above every section heading
- [ ] 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)