# Typography System

## Display Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Editorial serif — refined, high-contrast, slightly narrow |
| **Examples** | Canela, Domaine Display, Tiempos Headline, Cormorant Garamond (free), Marcellus (free), Freight Display |
| **Weight** | 300-500 (light to medium — never black; luxury whispers) |
| **Tracking** | 0 to -0.01em (natural; never tight, never loose on headlines) |
| **Size** | `clamp(2.5rem, 6vw, 5.5rem)` — large but never viewport-dominating |
| **Case** | Sentence case or title case. NEVER all-caps display (all-caps is retail, not luxury) |
| **Italic** | Available and encouraged for a single emphasized word |

**Why a serif:** Serifs carry history — 500 years of print authority. A high-contrast editorial serif (thin hairlines, generous bowls) signals craft the way a hand-stitched seam does. The letterforms are the brand's monogram.

---

## Body Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Same serif family or a refined humanist sans |
| **Examples** | EB Garamond (free), Freight Text, Tiempos Text; or Söhne, Neue Haas Grotesk, Avenir Next |
| **Weight** | 400 (regular only — no bold body text) |
| **Tracking** | 0.01-0.02em (slightly open — luxury typography breathes) |
| **Size** | Small — `clamp(0.9rem, 1.2vw, 1.05rem)` (14-16px) |
| **Line Height** | 1.7-1.9 (extreme leading — one of the style's signatures) |
| **Measure** | 55-65 characters per line, max-width 62ch |

**Why small body + huge leading:** The ratio of text to whitespace IS the luxury signal. Small text with generous line-height creates air between every line — the page feels hand-set, not machine-rendered. It slows the reader down, which is the point: luxury asks for your time.

---

## Micro / Label Type

| Property | Specification |
|----------|--------------|
| **Register** | Sans-serif small caps or uppercase, letter-spaced |
| **Examples** | Karla (500), Jost (400), Montserrat Light (avoid — overused); premium: Söhne Mono or Neue Haas Grotesk |
| **Weight** | 400-500 |
| **Tracking** | 0.2em-0.35em (very wide — the wide tracking is the luxury tell) |
| **Size** | 10-11px |
| **Case** | UPPERCASE or true small caps |

**Usage:** Section labels ("THE ATELIER"), dates ("EST. 1987"), coordinates, materials, garment details. These micro labels do the "product specification" work that makes a fashion house feel technical and precise.

---

## Type Scale

**Ratio:** 1.25x (minor third) — deliberately conservative. Luxury doesn't shout with size.

```
Display:   clamp(2.5rem, 6vw, 5.5rem)   — 1.25^4
Headline:  clamp(1.8rem, 3vw, 2.75rem)  — 1.25^3
Subhead:   clamp(1.25rem, 2vw, 1.5rem)  — 1.25^2
Body:      clamp(0.9rem, 1.2vw, 1.05rem) — baseline
Micro:     10-11px                        — 0.68x
```

Contrast comes from spacing and weight, not from a dramatic ratio. A 4.4x jump would be theatrical; this style is architectural.

---

## Font Pairing Logic

**Serif display + serif body:** The most restrained pairing — one family, two roles. Canela display + Freight Text body is the classic combination. Maximum coherence, minimal noise.

**Serif display + humanist sans body:** The modern luxury pairing — Söhne body under Domaine headlines. The sans adds contemporary precision; the serif adds heritage. Used by Bottega Veneta and Aesop.

**The label voice:** Micro labels should come from the SANS family in the pairing (wide-tracked uppercase), never a second serif and never monospace. Monospace breaks the material, handcrafted illusion.

**Never mix:** More than 2 families. No geometric sans (Futura, Montserrat) with serif — too 2015-startup. No slab serifs. No display sans with display serif together.

---

## Micro-Typography Rules

- Use true ligatures (`fi`, `fl`) — set `font-feature-settings: "liga", "dlig"` where available
- Use old-style or lining figures consistently; tabular for prices and dates
- Hanging punctuation on quotes in body text
- Hyphens: use `‐`/soft hyphens with `hyphens: auto` in justified text; em-dashes with thin spaces in editorial copy
- Small caps via the font's `smcp` feature, not `text-transform: uppercase` (true small caps preserve optical sizing)

---

## Typography Don'ts

| ❌ Don't | ✅ Do Instead |
|----------|--------------|
| All-caps display headlines | Sentence case serif |
| Bold/black weights | Light to medium (300-500) |
| Inter, Roboto, Arial | Editorial serif + refined sans |
| Monospace labels | Wide-tracked uppercase sans |
| Tight leading (1.2) | Extreme leading (1.7-1.9) |
| Huge display type (10vw+) | Restrained `clamp(2.5rem, 6vw, 5.5rem)` |
| More than 2 families | One serif family + one sans |

# Color Architecture

## The Palette Philosophy

Luxury Refined Restraint uses color the way a gallery uses lighting: the fewer sources, the more precious each one is. The palette is almost entirely neutrals — the "color" in the style comes from material tones (ivory, stone, charcoal, champagne) rather than hue. When a saturated color appears, it is a single, deliberate event, never a system.

---

## Ground — Ivory Mode (primary)

```css
--color-ground: #FAF7F2;           /* Warm ivory — never pure white */
--color-ground-elevated: #F3EEE6;  /* Slightly deeper for panels */
--color-ground-deep: #EDE6DA;      /* Footer and contrast sections */
```

**Why ivory, not white:** Pure `#FFFFFF` reads as "screen," not "material." Warm ivory (#FAF7F2) suggests plaster, paper, or limestone — physical luxury surfaces. It also makes skin tones in photography look richer, which matters for fashion and beauty brands.

---

## Ground — Noir Mode (dark variant)

```css
--color-ground-dark: #141210;          /* Espresso-black, never #000 */
--color-ground-dark-elevated: #1D1A17; /* Raised surfaces in dark mode */
--color-text-on-dark: #EDE6DA;         /* Warm ivory text */
```

**When to use noir:** Editorial "expensive darkness" for fragrance, film, and evening-wear launches. The near-black carries warm undertones (espresso, not blue-black) to keep the mood intimate rather than cold. Never use pure `#000` — the depth of the room would disappear.

---

## Text

```css
--color-text-primary: #262220;   /* Soft black — ink, not pure black */
--color-text-secondary: #6E675E; /* Warm gray for supporting copy */
--color-text-muted: #9A9185;     /* Metadata, captions, dates */
--color-text-on-image: #F5F1EA;  /* Ivory for text over photography */
```

**Why soft black:** `#000000` text on ivory is harsh — it pulls the eye to every letter. `#262220` sits quieter on the page and photographs better, which matters for luxury brands that live on Instagram and in lookbooks.

---

## Accent

```css
--color-accent-champagne: #B9975B;  /* Signature champagne gold */
--color-accent-oxblood: #6B2323;    /* Editorial option — oxblood */
--color-accent-emerald: #23402F;    /* Heritage option — deep emerald */
```

**Rule:** ONE accent, ONE moment per page. The accent may appear on:
- The single primary CTA — or none at all (many luxury pages have zero CTAs)
- One editorial detail (an italic serif word, a hairline underline)
- Hover states (link underline, image frame)

**Why champagne:** Gold at 60-70% saturation on ivory reads as jewelry, not Vegas. It catches light the way the metal does — subtle, reflective, expensive. Never use metallic gradients; use flat champagne and let the surrounding texture imply the sheen.

---

## Semantic Colors

```css
--color-success: #3E5C4A;  /* Muted moss */
--color-error: #7A3B32;    /* Faded rust */
--color-warning: #8A6D3B;  /* Muted brass */
```

All semantic colors are desaturated to the same register as the neutrals — a status message must never shout louder than the product photography.

---

## Hairline & Divider

```css
--color-hairline: #E0D9CC;      /* On ivory */
--color-hairline-dark: #2E2A26; /* On noir */
```

The hairline is a design element, not a utility. 1px lines in this warm neutral separate content the way museum vitrines separate objects — visible but quiet.

---

## The Color Rule

> **If a hue appears, it must be the only hue on the page.** Neutrals carry 95% of the surface area. The single accent is a jewel — scarcity is what makes it valuable.

---

## Gradient Policy

**No gradients — ever.** Luxury restraint has no room for color transitions. Depth comes from:
- Layered neutrals (ground → elevated → deep)
- Photography with natural light falloff
- Fine grain that unifies tones

The only exception: an extremely subtle vignette on noir-mode photography (radial darkening at edges, 4-6% opacity).

---

## Color Don'ts

| ❌ Don't | ✅ Do Instead |
|----------|--------------|
| Pure `#FFFFFF` background | Warm ivory `#FAF7F2` |
| Pure `#000000` background | Espresso noir `#141210` |
| Metallic gradient text | Flat champagne `#B9975B` |
| Multiple accents (gold + blue + red) | ONE accent per page |
| Neon or saturated hues | Desaturated material tones |
| Blue/purple "tech" palette | Warm stone, ivory, charcoal |
| Bright red CTA buttons | Champagne outline or text-link CTA |
| Color everywhere "for life" | Color as a rare event |

# Motion Principles

## Philosophy

Motion in Luxury Refined Restraint is **the pace of a gallery visitor**, not a website visitor. Nothing rushes. Nothing bounces. Every transition is a slow, deliberate crossfade — the digital equivalent of a docent turning toward the next painting. If a user can notice the animation as "animation," it is too fast.

---

## Entrance Animations

| Element | Animation | Duration | Easing | Delay |
|---------|-----------|----------|--------|-------|
| Page background | Opacity crossfade | 1200ms | `ease-out` | 0ms |
| Display headline | Opacity + translateY(24px) → 0 | 1400ms | `cubic-bezier(0.22, 1, 0.36, 1)` | 200ms |
| Body text block | Opacity fade-in | 1000ms | `ease-out` | 500ms |
| Photography | Opacity + scale(1.03) → 1 | 1800ms | `ease-out` | 300ms |
| Micro labels | Opacity fade-in | 800ms | `ease-out` | 800ms |
| Hairline rules | ScaleX(0) → 1 (draw-in) | 1200ms | `cubic-bezier(0.4, 0, 0.2, 1)` | 600ms |

**Key easing:** `cubic-bezier(0.22, 1, 0.36, 1)` — smooth deceleration, zero bounce. Long durations (1000ms+) are the signature; short snappy animations feel cheap.

**Stagger pattern:** 200-300ms between elements, in reading order. Never a simultaneous burst — each element takes its turn like guests entering a room.

---

## Scroll Behavior

| Effect | Specification |
|--------|--------------|
| Image reveals | Opacity + subtle scale (1.03 → 1), triggered at 20% viewport visibility |
| Parallax on photography | 5-10% of scroll distance — barely perceptible |
| Section transitions | Crossfade with 300ms overlap, no slide |
| Sticky elements | None. Nothing pins. The page flows like a gallery wall |
| Scroll progress | No progress bars, no scroll-linked effects |

**Scroll-linked motion is nearly absent.** The style's drama comes from stillness and composition. If photography is strong, the best scroll effect is none.

---

## Interaction States

| Element | Hover State | Transition |
|---------|------------|-----------|
| Navigation links | Underline draws from left (scaleX 0→1) | 500ms `ease-out` |
| CTA button | Background fills champagne, text shifts to ivory | 600ms `ease-out` |
| Image cards | Scale 1.0 → 1.02, subtle | 1200ms `cubic-bezier(0.22, 1, 0.36, 1)` |
| Micro labels | Color shift to accent (opacity + color) | 400ms `ease-out` |
| Product thumbnails | Image crossfades to alternate shot | 800ms `ease-in-out` |

**No bounce, no lift, no glow, no magnetic cursors.** The hover state is a whisper: a line appears, an image leans slightly. Physical motion on luxury sites reads as nervous energy.

---

## Reduced Motion

When `prefers-reduced-motion: reduce`:
- All entrances collapse to instant opacity changes
- No parallax, no image scale
- Hairlines appear immediately
- Crossfades become 0.01ms

```css
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
```

---

## What NOT to Animate

| ❌ Never animate | Why |
|-----------------|-----|
| Bounce, spring, or elastic easing | Cheap, playful — the opposite of restraint |
| Marquee text strips | Retail energy; luxury never scrolls its own name |
| Rotating 3D elements | Gimmickry |
| Glow or neon pulses | Nightclub, not atelier |
| Every element on scroll | Motion must be an event, not ambient noise |
| Parallax beyond 10% | Motion sickness + gimmick |
| Typing effects | Terminal aesthetic, wrong register entirely |
| Color transitions on text | Only opacity and position — color changes feel digital |

# Layout Grammar

## Philosophy

Layout in Luxury Refined Restraint is **curation**. The page is a gallery wall: each section is one artwork, given a room of its own. The whitespace between sections is not leftover space — it is the most expensive material on the page. Budget it like marble.

---

## Grid System

**12-column grid, used at 20% capacity.**

Content typically lives in a narrow band: columns 2-7 on desktop (50-58% width), leaving 40%+ of the viewport as quiet margin. Asymmetry is allowed but must be *calm* asymmetry — a 55/45 split, never a 70/30 drama.

```
[1][2][3][4][5][6][7][8][9][10][11][12]
    ████████████████
         Content (columns 2-7)
    ← 6 columns of margin →
```

**Why so narrow:** The extreme margins are the style's loudest signal. A narrow measure makes the content feel like a rare object displayed on a vast table. It also guarantees the 55-65ch measure that makes body text luxurious.

---

## Hero Section

| Property | Specification |
|----------|--------------|
| Height | 100dvh or slightly less (85-100dvh) — a full "room" |
| Content position | Centered horizontally OR offset-left, never a split-screen |
| Headline | Display serif, sentence case, max 8 words |
| Supporting text | 1-2 lines, small, generous leading, max-width 42ch |
| Photography | Full-bleed background OR a single framed image right-of-center |
| CTA | Text link with hairline underline — or none |
| Micro label | Above headline, wide-tracked uppercase ("MAISON FONDÉE EN 1987") |

**Hero variants:**
1. **Quiet centered:** micro label, serif headline, one line of copy, hairline rule. No image. Pure typographic confidence.
2. **Single image:** one full-bleed photograph with text in the lower-left quadrant, 120px+ from the edge.
3. **Framed image:** headline left, image right in a 4:5 frame with 1px hairline border and 80px+ gap between them.

---

## Section Spacing

```css
--section-padding-y: clamp(6rem, 14vh, 12rem);  /* GALLERY SPACING — do not compress */
--component-gap: clamp(3rem, 6vw, 6rem);
--content-max-width: min(720px, calc(100vw - clamp(3rem, 10vw, 8rem)));
--pad-x: clamp(2rem, 6vw, 6rem);
```

**Rule of thumb:** if two sections feel "close," double the gap. The vertical rhythm is the style's heartbeat — sections separated by less than 6rem start to read as a dashboard.

---

## Layout Patterns

### Pattern 1: The Gallery Wall (editorial sections)
```
┌────────────────────────────────────────────┐
│  THE ATELIER                    (micro)    │
│                                             │
│  Where craft survives           (serif h2)  │
│                                             │
│  Two paragraphs, 62ch,          (body)      │
│  generous leading...                        │
│                                             │
│  ──────────────────────────────  (hairline) │
│  EST. 1987 · MILANO            (micro)      │
└────────────────────────────────────────────┘
```

### Pattern 2: Single Artwork (image-led)
```
┌────────────────────────────────────────────┐
│                                             │
│                                             │
│            ┌─────────────┐                  │
│            │  4:5 image  │   Headline       │
│            │  (framed)   │   (right of      │
│            │             │    image,        │
│            └─────────────┘    vertically    │
│                                centered)    │
└────────────────────────────────────────────┘
```

### Pattern 3: The Collection (product/gallery grid)
```
┌────────────────────────────────────────────┐
│  [image]     [image]     [image]           │
│  Calfskin    Cashmere    Silk              │
│  ¥48,000     ¥32,500     ¥21,000           │
│                                             │
│  3 columns, 48px gap, no borders,          │
│  images 3:4, captions in micro type        │
└────────────────────────────────────────────┘
```

---

## Hierarchy

| Level | Element | Treatment |
|-------|---------|-----------|
| Primary | Headline | Serif display, `clamp(1.8rem, 3vw, 2.75rem)` |
| Secondary | Image or body | Full presence, never competing with headline |
| Tertiary | Micro labels | 10px, wide tracking, muted #9A9185 |
| Negative | Whitespace | The true primary element — reserve 60%+ per viewport |

Only ONE primary focal point per viewport. If two elements demand attention, one of them is wrong.

---

## Responsive Behavior

| Breakpoint | Layout Change |
|------------|--------------|
| **Desktop (1200px+)** | 12-col grid, content columns 2-7, full gallery spacing |
| **Tablet (768px)** | Content columns 1-10, gaps compress by 20% |
| **Mobile (375px)** | Single column, pad-x 1.5rem, section padding reduced 30%, images stay 3:4 but full-width |

**Fluid via `clamp()`** everywhere — type, padding, gaps. The style must never feel "small" on mobile, just more intimate.

---

## Layout Don'ts

| ❌ Don't | ✅ Do Instead |
|----------|--------------|
| Full-width content blocks | Narrow measure (columns 2-7) |
| Dense multi-column layouts | One object per viewport |
| Cards with borders/shadows | Bare content + hairlines |
| Zigzag alternating sections | Calm stacked or paired rhythm |
| Overlapping text on text | Generous separation |
| Grids at 100% capacity | 20% occupancy — space is the design |
| Floating CTAs/badges over images | CTAs inline with text or none |
| Equal 3-column feature grids | Sequential editorial sections |

# Texture & Surface

## Philosophy

Surfaces in Luxury Refined Restraint feel like **physical materials viewed in museum light**: uncoated paper, honed stone, raw silk, brushed brass. The screen disappears and the material remains. Texture is present but must never announce itself — if a user notices the grain, it is too heavy.

---

## Primary Texture: Fine Paper / Material Grain

A barely-there noise overlay unifies all surfaces and gives photography a physical ground.

```css
.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.025; /* 0.02-0.035 — felt, never seen */
  background-image: url("data:image/svg+xml,..."); /* feTurbulence, baseFrequency 0.9 */
  mix-blend-mode: multiply; /* On ivory. Use overlay for noir mode */
}
```

**Parameters:**
- Opacity: 0.02-0.035 (half of what most designers use)
- Blend: `multiply` on ivory ground, `overlay` on noir
- Frequency: fine (baseFrequency 0.8-1.0) — coarse grain reads as "vintage filter," not material
- Animation: static. NEVER animate the grain (24fps jitter belongs to film styles, not galleries)

---

## Secondary Texture: Hairline Rules

```css
.hairline {
  height: 1px;
  background: #E0D9CC; /* --color-hairline */
  transform-origin: left;
}
```

**Purpose:** Hairlines divide sections the way museum labels divide works — a physical line that says "here ends one object, here begins another." Use them:
- Between nav and content
- Between footer columns
- As underline on hover
- As the only "card border" (never full boxes)

---

## Tertiary Texture: Natural Light

The most important "texture" is light itself, delivered through photography:
- **Soft window light** with visible falloff (shadow direction consistent)
- **Dappled texture** on stone, linen, marble, plaster
- **Highlights on metal** (brass, gold, silver) catching the same light source

Every image should look like it was shot in the same room at the same hour. Inconsistent lighting breaks the material illusion instantly.

---

## Image Processing Rules

| Treatment | Allowed? | Notes |
|-----------|----------|-------|
| Natural photography, soft light | ✅ Yes | THE standard — no filters |
| Desaturation to 85-95% | ✅ Yes | For cohesion across a set |
| Slight contrast lift | ✅ Yes | Preserve shadow detail |
| Warm color grade (+5-10% warmth) | ✅ Yes | Unifies with ivory ground |
| Film grain overlay on photos | ⚠️ Max 0.02 | Subtle only |
| Heavy filters / presets | ❌ No | Looks like Instagram, not luxury |
| HDR / oversaturated | ❌ No | Blows out the quiet register |
| Black & white | ✅ Yes | Classic for fashion/atelier sets |
| Vintage sepia / instagram vintage | ❌ No | Costume, not heritage |

**The one processing rule that matters:** every photograph must look **printed in the same book**. Crop consistently (3:4 or 4:5), grade consistently, light consistently.

---

## Surface Rules

| Surface | Treatment |
|---------|-----------|
| Background | Ivory #FAF7F2 (or espresso noir #141210) + grain at 0.025 |
| Panels/Asides | Slightly deeper neutral (#F3EEE6), NO border, NO shadow, NO radius beyond 2px |
| Buttons | Hairline border (1px #262220), transparent fill; hover fills champagne |
| Images | Sharp 0-2px radius; 1px hairline frame in gallery contexts only |
| Dividers | 1px hairline #E0D9CC |
| Cards | None. This style doesn't do cards — content sits directly on the ground |

**No glassmorphism, no gradients, no drop shadows, no 3D.** A shadow on a luxury site is a lie about the physics of the room — nothing floats in a gallery.

---

## Texture Don'ts

| ❌ Don't | ✅ Do Instead |
|----------|--------------|
| Heavy noise (opacity 0.1+) | 0.02-0.035, felt not seen |
| Animated grain | Static grain |
| Glassmorphism / backdrop-blur | Flat material surfaces |
| Drop shadows | Hairlines + natural light in photography |
| Metallic CSS gradients | Flat champagne accent |
| Rounded 12px+ corners | 0-2px radius |
| Card grids with borders | Bare content on the ground plane |
| 3D renders | Real photography of real materials |

# Vocabulary Bank

## Primary Terms (must appear in prompt to unlock the style)

| Term | Why It Matters |
|------|---------------|
| `museum whitespace` | The defining signal — vast, curated emptiness |
| `gallery spacing` | Section gaps of 6rem+ — space as the luxury material |
| `refined restraint` | The governing philosophy — nothing excessive |
| `luxury serif` | Editorial serif display (Canela, Domaine, Cormorant) |
| `whispered confidence` | The emotional register — quiet authority |
| `considered placement` | Every element deliberately positioned |
| `desaturated palette` | Ivory/stone/charcoal neutrals, one accent max |
| `extreme leading` | Body line-height 1.7-1.9 — the typographic signature |

---

## Secondary Terms (refine and tune the output)

| Term | Effect |
|------|--------|
| `ivory ground` | Warm off-white #FAF7F2 background |
| `champagne accent` | Flat gold #B9975B used once per page |
| `hairline rule` | 1px warm-neutral divider lines |
| `wide-tracked labels` | 10px uppercase, tracking 0.25em+ |
| `sentence case serif` | Headlines in sentence case, never all-caps |
| `small body text` | 14-16px body with 1.8 line-height |
| `single focal point` | One primary element per viewport |
| `natural light photography` | Soft window light, consistent direction |
| `material surfaces` | Stone, linen, paper — never glass |
| `noir mode` | Espresso-black variant #141210 |
| `oxblood accent` | Deep red #6B2323 editorial option |
| `emerald accent` | Deep green #23402F heritage option |
| `micro label` | 10px uppercase metadata ("EST. 1987") |
| `quiet asymmetry` | Calm 55/45 splits, never dramatic imbalance |
| `artisanal photography` | Real materials, real craft, no stock energy |

---

## Context Terms (set the mood and emotional register)

| Term | Mood |
|------|------|
| `quiet luxury` | The 2020s term for understated wealth |
| `museum-quality` | Curated, lit, preserved |
| `timeless` | Outside any design trend cycle |
| `expensive darkness` | The noir variant's intimate register |
| `heritage` | History, craft, permanence |
| `atelier` | The workshop where craft happens |

---

## Banned Terms (if these appear, the style has broken)

| Term | Why It Breaks the Style |
|------|------------------------|
| `gradient` | Color transitions are retail energy |
| `glassmorphism` | Digital glass vs. physical material |
| `neon` / `glow` | Nightclub, not atelier |
| `playful` / `fun` | Luxury is serious |
| `bold` / `black` (weights) | The style whispers |
| `Inter` / `Roboto` / `Arial` | Default fonts = default taste |
| `card` / `dashboard` | Cards are SaaS furniture |
| `bounce` / `spring` | Motion is a slow crossfade |
| `marquee` | Scrolling text is retail |
| `3D` / `render` | Real materials only |
| `vibrant` / `colorful` | One accent maximum |
| `modern` (as a style word) | Dated the moment it's said |

---

## Prompt-Ready Phrases

Copy-paste these directly into prompts:

```
"museum whitespace with gallery spacing between sections"
"refined editorial serif display in sentence case"
"ivory ground (#FAF7F2), soft black text (#262220)"
"one champagne accent (#B9975B) used once per page"
"body text at 15px with 1.8 line-height, 62ch measure"
"wide-tracked uppercase micro labels at 10px, tracking 0.3em"
"natural light photography, consistent soft window light"
"hairline dividers instead of cards or borders"
"slow crossfade entrances, 1200ms+, no bounce"
"no gradients, no glassmorphism, no neon, no cards"
```

# When to Use

## Perfect For

| Context | Why This Style Works |
|---------|---------------------|
| **Luxury fashion houses** | The restraint signals price before the price is seen — whispered confidence |
| **High-end real estate** | Vast whitespace and gallery spacing make properties feel museum-worthy |
| **Fine jewelry & watches** | Single-subject photography and slow reveals frame precious objects |
| **Premium artisan brands** | Considered placement echoes craft and hand-made care |
| **Haute couture & ateliers** | The refined serif and muted palette match tailoring and heritage |
| **Luxury hotels & hospitality** | The calm, spacious feel translates directly to the guest experience |
| **Private banking / wealth advisory** | Quiet, timeless confidence beats any claim of sophistication |

## Brand Personality Match

This style reinforces brands that are:
- **Restrained** — confident enough not to shout
- **Timeless** — durable, not trend-chasing
- **Considered** — every detail deliberate, nothing accidental
- **Exclusive** — scarcity and space signal rarity
- **Whispered** — understatement as a luxury signal

## Avoid When

| Context | Why It Fails |
|---------|-------------|
| **Startups needing fast comprehension** | Restraint reads as empty when there is no brand gravity behind it |
| **SaaS / developer tools** | Dense functionality fights the whitespace; users lose affordances |
| **E-commerce (high-volume)** | Gallery spacing cannot support dense product grids |
| **News / daily content** | Slow reveals and vast whitespace frustrate high-frequency readers |
| **Playful or youth brands** | The formality feels cold, distant, and unapproachable |
| **Performance marketing pages** | The calm aesthetic lacks the urgency conversion requires |
| **Content-heavy documentation** | Single-column gallery pacing cannot house long-form information |

## How to Decide

Ask: **"Does my brand need to feel expensive — calm, considered, and confident enough to whisper?"**

If yes → Luxury Refined Restraint.
If no → Consider Quiet Editorial (if you want the calm without the price-signal formality), Editorial Serif Narrative (if you want refined type with more text and story), or Monochrome Single Accent (if you want minimal but with stronger graphic presence).

# Reference Gallery

## Live Sites

### Celine (celine.com)
- **What works:** Refined restraint in fashion e-commerce, minimal typography, muted palette, product photography presented with extreme negative space
- **URL:** celine.com

### Aesop (aesop.com)
- **What works:** Warm neutral palette (ivory, stone, sand), generous whitespace, editorial product photography, quiet typography, unhurried layout
- **URL:** aesop.com

### Rimowa (rimowa.com)
- **What works:** Gallery-like product presentation, single-column focus, considered spacing, muted metallic tones, premium photography
- **URL:** rimowa.com

### Bang & Olufsen (bang-olufsen.com)
- **What works:** Deep charcoal palette with single restrained accents, slow image reveals, museum-style product photography, minimal motion
- **URL:** bang-olufsen.com

### Aman Resorts (aman.com)
- **What works:** Museum whitespace at scale, muted desaturated palette (sand, stone, water), refined serif headlines, slow elegant transitions, whispered confidence
- **URL:** aman.com

## Key Visual References

### Photography Style
- **Museum-quality composition** — single subjects, soft natural light, deliberate negative space
- **Muted desaturated tones** — no saturated skies, no flashy backgrounds
- **Warm neutrals** — ivory, champagne, warm stone, cool silver, espresso
- **One rich accent** — oxblood #6E2530, emerald #1E4D3B, or deep gold #A8874E, used in details only

### Typography References
- **Cormorant Garamond 300/400** — high-contrast luxury serif, available on Google Fonts
- **Canela / Domaine** — premium licensed serifs, warm and editorial
- **Söhne** — premium neutral sans for body text
- **Small body text** — 12-14px, line-height 1.9, generous leading
- **Micro-labels** — 11-12px uppercase, tracking 0.25em
- **Display scale** — max 4rem, sentence case, never all-caps

### Color References
- **Warm ivory ground** — #F7F3EC
- **Champagne beige** — #EDE4D3
- **Warm stone** — #C9BFB0, **cool silver** — #A9AEAD
- **Espresso** — #2E2622, **deep charcoal** — #1E1B19
- **Muted text** — 55% opacity espresso on ivory

### Motion References
- **Crossfades** — 600-1000ms on scroll into view (slow, once)
- **Image reveals** — 1000ms, translateY(24px)→0, ease-out
- **Entrance** — 1200ms for imagery, 900ms for text (deliberate, unhurried)
- **No loops** — nothing animates infinitely; motion is a rare whisper

## Screenshot Notes

> When capturing references for this style, look for:
> - The whitespace (must be extreme — elements separated like museum artworks)
> - The photography (must be museum-quality, muted — never stock)
> - The palette (must be desaturated warm neutrals with at most one rich accent)
> - The typography (must be refined serif or elegant sans, small body, generous leading)
> - The motion (must be slow crossfades and gentle reveals — not snappy, no loops)
> - The layout (must be single-column, centered or edge-aligned, gallery spacing)
> - The overall mood (must feel expensive, considered, whispered — nothing accidental)