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

---

# Luxe Lookbook Design System

> 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.

## Design 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

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border
Color: border-[#141210]/20
Radius: rounded-none
```

### Shadow
```
sm: shadow-none
md: shadow-none
lg: shadow-[0_30px_80px_-40px_rgba(20,18,16,0.35)]
hover: hover:shadow-none
focus: focus-visible:ring-1 focus-visible:ring-[#9A7B4F]/60
```

### Interaction
```
Hover translate: (none)
Hover scale: (none)
Hover opacity: hover:opacity-70
Transition: transition-all duration-500 ease-out
Active: active:opacity-80
```

### Typefaces
```
Heading: font-serif text-[#141210] tracking-tight
Body: text-[#6B6259] leading-relaxed
Mono: uppercase tracking-[0.3em] text-[#9A7B4F] text-xs
```

### Type scale
```
Hero: text-6xl md:text-8xl
H1: text-5xl md:text-7xl
H2: text-3xl md:text-5xl
H3: text-xl md:text-2xl
Body: text-base md:text-lg
Small: text-sm
```

### Spacing
```
Section: py-24 md:py-40
Container: px-6 md:px-10
Card: p-8
Gap sm: gap-6
Gap md: gap-10
Gap lg: gap-16
```

### Color roles
```
Background primary: bg-[#F7F5F1]
Background secondary: bg-[#E8E3DB]
Background accent: bg-[#9A7B4F]
Text primary: text-[#141210]
Text secondary: text-[#6B6259]
Text muted: text-[#141210]/50
Button primary: bg-[#141210] text-[#F7F5F1]
Button secondary: bg-transparent text-[#141210] border border-[#141210]
```

---

## [FORBIDDEN]

These classes are banned in this style. Check for them before returning code:

### Banned classes
- `bg-gradient-to-r`
- `from-indigo-600`
- `via-purple-600`
- `to-pink-500`
- `rounded-full`
- `rounded-lg`
- `rounded-xl`
- `shadow-lg`
- `shadow-xl`
- `font-bold`

### Banned patterns
- matches `^rounded-(lg|xl|2xl|full)$`
- matches `^from-(indigo|purple|pink|fuchsia)-`
- matches `^shadow-(md|lg|xl|2xl)$`
- matches `^drop-shadow-`

### Why they are banned
- `bg-gradient-to-r`: The maison never decorates with gradients; restraint and negative space carry the luxury
- `rounded-full`: Couture reads in crisp square corners and hairline rules, not pill shapes
- `rounded-lg`: Any corner radius softens the editorial precision; keep edges square
- `shadow-lg`: Heavy shadows feel commercial; luxury sits flat on the porcelain ground
- `font-bold`: Weight comes from the high-contrast Didone serif, not from bold utility classes

> WARNING: if your code contains any of the above, replace it before shipping.

---

## [REQUIRED]

### Every button must include
```
rounded-none
uppercase tracking-[0.2em]
transition-all duration-500
```

### Every card must include
```
rounded-none
bg-[#F7F5F1]
```

### Every input must include
```
rounded-none
bg-transparent
border-b border-[#141210]/25
text-[#141210] placeholder-[#141210]/40
focus:outline-none focus:border-[#9A7B4F]
transition-all duration-500
```

---

## [COMPARE] Luxe Lookbook wrong vs right

The wrong examples below stand for generic library defaults that were never adapted to this style. Do not read them as visual suggestions.

### Button

[WRONG] **Wrong** (generic component library default, do not copy):
```html
<button class="{GENERIC_LIBRARY_BUTTON_DEFAULT}">
 Click me
</button>
```

[CORRECT] **Right** (uses this style's tokens):
```html
<button class="rounded-none uppercase tracking-[0.2em] transition-all duration-500 bg-[#141210] text-[#F7F5F1]">
 Click me
</button>
```

### Card

[WRONG] **Wrong** (generic card, not adapted to this style):
```html
<div class="{GENERIC_LIBRARY_CARD_DEFAULT}">
 <h3>{TITLE}</h3>
</div>
```

[CORRECT] **Right** (uses this style's card tokens):
```html
<div class="rounded-none bg-[#F7F5F1] p-8">
 <h3 class="font-serif text-[#141210] tracking-tight text-xl md:text-2xl">{TITLE}</h3>
</div>
```

### Input

[WRONG] **Wrong** (generic input, not adapted to this style):
```html
<input class="{GENERIC_LIBRARY_INPUT_DEFAULT}" />
```

[CORRECT] **Right** (uses this style's input tokens):
```html
<input class="rounded-none bg-transparent border-b border-[#141210]/25 text-[#141210] placeholder-[#141210]/40 focus:outline-none focus:border-[#9A7B4F] transition-all duration-500" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Luxe Lookbook page skeletons

These skeletons use this style's tokens only. Replace `{PLACEHOLDER}` values, but keep every token in place:

### Navigation
```html
<nav class="bg-[#F7F5F1] text-[#141210] border border-[#141210]/20 px-6 md:px-10">
 <div class="flex items-center justify-between max-w-6xl mx-auto gap-10">
 <a href="/" class="font-serif text-[#141210] tracking-tight text-xl md:text-2xl">
 {LOGO_TEXT}
 </a>
 <div class="flex gap-10 text-[#6B6259] leading-relaxed text-sm">
 {NAV_LINKS}
 </div>
 </div>
</nav>
```

### Hero section
```html
<section class="bg-[#9A7B4F] text-[#141210] py-24 md:py-40 px-6 md:px-10">
 <div class="max-w-4xl mx-auto">
 <h1 class="font-serif text-[#141210] tracking-tight text-6xl md:text-8xl">
 {HEADLINE}
 </h1>
 <p class="text-[#6B6259] leading-relaxed text-base md:text-lg max-w-xl">
 {SUBHEADLINE}
 </p>
 <button class="rounded-none uppercase tracking-[0.2em] transition-all duration-500 bg-[#141210] text-[#F7F5F1]">
 {CTA_TEXT}
 </button>
 </div>
</section>
```

### Card grid
```html
<section class="bg-[#F7F5F1] text-[#141210] py-24 md:py-40 px-6 md:px-10">
 <div class="max-w-6xl mx-auto">
 <h2 class="font-serif text-[#141210] tracking-tight text-3xl md:text-5xl">{SECTION_TITLE}</h2>
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
 <!-- Card template - repeat for each card -->
 <div class="rounded-none bg-[#F7F5F1] p-8">
 <h3 class="font-serif text-[#141210] tracking-tight text-xl md:text-2xl">{CARD_TITLE}</h3>
 <p class="text-[#6B6259] leading-relaxed text-base md:text-lg text-[#141210]/50">{CARD_DESCRIPTION}</p>
 </div>
 </div>
 </div>
</section>
```

### Form input
```html
<input class="rounded-none bg-transparent border-b border-[#141210]/25 text-[#141210] placeholder-[#141210]/40 focus:outline-none focus:border-[#9A7B4F] transition-all duration-500" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-[#E8E3DB] text-[#6B6259] py-24 md:py-40 px-6 md:px-10">
 <div class="max-w-6xl mx-auto">
 <div class="grid grid-cols-1 md:grid-cols-3 gap-16">
 <div>
 <span class="font-serif text-[#141210] tracking-tight text-xl md:text-2xl">{LOGO_TEXT}</span>
 <p class="text-[#6B6259] leading-relaxed text-sm">{TAGLINE}</p>
 </div>
 <div>
 <h4 class="font-serif text-[#141210] tracking-tight text-xl md:text-2xl">{COLUMN_TITLE}</h4>
 <ul class="text-[#6B6259] leading-relaxed text-sm">
 {FOOTER_LINKS}
 </ul>
 </div>
 </div>
 </div>
</footer>
```

---

## [CHECKLIST] Luxe Lookbook post-generation self check

**Before returning code, verify every token and rule below. Fix any violation before delivering:**

### Token check
- [ ] Button includes: `rounded-none uppercase tracking-[0.2em] transition-all duration-500`
- [ ] Card includes: `rounded-none bg-[#F7F5F1]`
- [ ] Input includes: `rounded-none bg-transparent border-b border-[#141210]/25 text-[#141210] placeholder-[#141210]/40 focus:outline-none focus:border-[#9A7B4F] transition-all duration-500`

### Forbidden check
- [ ] Not using `bg-gradient-to-r`
- [ ] Not using `from-indigo-600`
- [ ] Not using `via-purple-600`
- [ ] Not using `to-pink-500`
- [ ] Not using `rounded-full`
- [ ] Not using `rounded-lg`
- [ ] Not using `rounded-xl`
- [ ] Not using `shadow-lg`

### Style rule check
- [ ] 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

### Style drift check
- [ ] Does not violate: Never use radius, shadow, or gradient (each one cheapens it -- use square corners and hairlines)
- [ ] Does not violate: Never spread the gold around (the single accent lands only on kicker / focus / one CTA)
- [ ] Does not violate: Never fake weight with font-bold (thickness comes from the Didone serif's own contrast)
- [ ] Does not violate: Never crowd the layout (whitespace is luxury, density is cheap)
- [ ] Does not violate: Never make the video the LCP dependency or omit the poster (blank first paint, LCP blowup)

### Delivery check
- [ ] Responsive layout holds on phone, tablet and desktop with no horizontal overflow
- [ ] Every interactive element has a visible focus state, an accessible name and a reduced-motion path
- [ ] Text contrast meets WCAG AA and colour alone never carries state
- [ ] The result is still recognizable at a glance as Luxe Lookbook

---

## [EXAMPLES] Example prompts

### 1. 

```
Create a fashion-maison lookbook landing page with:
1. A full-bleed silk-motion film hero: a <video muted loop playsInline preload="none"> with a poster AVIF as the LCP; load()/play() only in view via IntersectionObserver, pause offscreen; a gradient scrim so the serif headline stays legible
2. Porcelain #F7F5F1 ground, ink #141210 type, one muted gold #9A7B4F accent only on the kicker and a single CTA
3. Oversized high-contrast Didone serif (Playfair Display) title using clamp() up to ~8rem, line-height ~0.92; uppercase tracking-[0.3em] labels
4. A lookbook grid of four 4:5 portrait plates via <picture> AVIF+WebP, lazy-loaded with explicit aspect-ratio; hover reveals with group-hover:scale-[1.04] and a caption rise (transform/opacity only), keyboard-focusable
5. Square corners everywhere (rounded-none), hairline rules (1px #141210/20), vast whitespace; no radius, shadow, or gradient decoration
6. prefers-reduced-motion / Save-Data: no autoplay, show the poster still with a play button
```

### 2. 

```
Create a couture ready-to-wear product page with:
1. A 4:5 portrait plate of the garment via <picture> AVIF+WebP occupying most of the screen, vast whitespace around it, explicit aspect-ratio and lazy loading below the fold
2. Porcelain #F7F5F1 ground, ink #141210 Didone serif garment name (Playfair Display), taupe #6B6259 body copy, one muted gold #9A7B4F line on the "Book an appointment" CTA
3. Uppercase tracking-[0.3em] labels for price and materials, separated by hairline rules (1px #141210/20)
4. Square-cornered underline inputs for the appointment form; no radius, shadow, or gradient
5. A small hover-reveal lookbook strip of related looks at the foot, transform/opacity only
```

## 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)