Luxury / Fashion Editorial

---
name: luxury-fashion-editorial
description: Apply the Luxury / Fashion Editorial visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Luxury / Fashion Editorial, mentions high fashion minimal, luxury brand site, vogue style, or describes strict black and white, uppercase didone display, wide-tracked small caps labels — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Luxury / Fashion Editorial Design System

Vogue-grade restraint: pure black on pure white, huge high-contrast didone headlines in uppercase with wide tracking, a single muted bronze accent, vast margins, full-bleed fashion photography, and almost no words. Extreme scale contrast and extreme discipline.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Luxury / Fashion Editorial.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (high fashion minimal, luxury brand site, vogue style, maison aesthetic, couture minimalism), or describes its traits: strict black and white; uppercase didone display; wide-tracked small caps labels; vast margins; full-bleed fashion photography; extreme restraint.

## Design tokens

### Color palette

- Pure white — the gallery wall: `#ffffff` (--color-bg)
- Pure black display and body: `#000000` (--color-text)
- Captions, legal, secondary labels: `#6e6e6e` (--color-text-muted)
- Muted bronze metallic — hairline details, small caps labels, hover states: `#7a6a4f` (--color-accent)
- 1px hairline rules, used perhaps twice per page: `#000000` (--color-border)

### Typography

- Display / headings: Playfair Display (fallback: Didot, Bodoni MT, Georgia, serif) (ideal: Didot, premium — use Playfair Display as the free substitute)
- Body: Inter (fallback: Helvetica Neue, Arial, sans-serif) (ideal: Neue Haas Unica, premium — use Inter as the free substitute)
- Type scale: 1.5 ratio, base 15px — computed steps: 15px / 23px / 34px / 51px / 76px / 114px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 400, line-height 1.05, letter-spacing 0.04em, uppercase
- Body: line-height 1.6, letter-spacing 0.02em

### Spacing, radius, border

- Spacing scale (px): 8, 16, 32, 56, 88, 136, 200 — Vast: margins and section gaps larger than any content block; a single image or headline may own an entire viewport with 200px of air around it.
- Border radius: none 0px — Absolutely square — couture geometry.
- Border treatment: 1px solid #000000 — Hairlines only, rationed to a couple per page: under the nav, above the footer. The bronze accent may tint a decorative rule.

### Shadows

- none: `none` — Perfectly flat; the photography supplies all depth, and the type floats on the white like ink on a lookbook page

### Layout

- Max content width: 1680px
- Full-bleed photography alternating with near-empty white viewports
- Centered composition is permitted and characteristic — lockups, headlines, and captions align to the vertical axis
- Very few words per viewport: a headline, a five-word caption, a small CTA
- Product/collection grids at exactly two or three columns with enormous gutters

### Effects

- Wide-tracked uppercase labels (0.2em) at 11–12px for nav and categories
- Slow hover zoom on imagery (scale 1.03 over 800ms)
- Bronze-tinted hairline dividers as the only decorative flourish
- Image-led page transitions: a full-bleed crossfade between routes

### Motion

- Easing: cubic-bezier(0.25, 0.1, 0, 1); durations 300ms / 600ms / 1200ms
- Everything is slow and weighted — fades and 1.03 scale zooms over 600–1200ms
- Headlines fade up once with slight letter-spacing expansion
- No bounce, spring, or stagger; motion should feel like a camera move, not an interface

## CSS variables (drop-in)

```css
:root {
  --color-bg: #ffffff;
  --color-text: #000000;
  --color-text-muted: #6e6e6e;
  --color-accent: #7a6a4f;
  --color-border: #000000;
  --radius-none: 0px;
  --border-default: 1px solid #000000;
  --font-display: "Playfair Display", Didot, "Bodoni MT", Georgia, serif;
  --font-body: Inter, "Helvetica Neue", Arial, sans-serif;
  --text-base: 15px;
  --leading-heading: 1.05;
  --leading-body: 1.6;
  --tracking-heading: 0.04em;
  --tracking-body: 0.02em;
  --ease: cubic-bezier(0.25, 0.1, 0, 1);
  --duration-fast: 300ms;
  --duration-base: 600ms;
  --duration-slow: 1200ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500&family=Inter:wght@300;400&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Sparse bar: maison wordmark centered in the didone at 20px uppercase, categories in 11px wide-tracked caps flanking or below, 1px rule underneath; collapses to wordmark + menu word, never a hamburger icon alone
- **Hero:** A full-bleed campaign photograph, then an uppercase didone headline at 72–140px letterspaced across white; one five-word line in 12px caps beneath
- **Card:** Product/story tile: image on white with no border, 12px wide-tracked caps title centered below, price or date in muted 12px; hover runs the slow zoom
- **Button (primary):** 1px black border, transparent fill, 12px uppercase wide-tracked black label, generous padding; fills to black with white label over 600ms
- **Button (secondary):** Bare 11px uppercase wide-tracked text with a 1px underline offset 6px; bronze on hover
- **Form fields:** Bottom-hairline input with 11px caps floating label; focus shifts the hairline from #000 to bronze

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

An uppercase didone headline — huge, thin-stroked, wide-tracked — floating in vast white space above a single full-bleed fashion photograph, with nothing else competing for the frame. Spend boldness here; keep everything else quiet.

## Do

- Ration words brutally — every viewport should read like a lookbook page, not a webpage
- Track uppercase generously (0.04em display, up to 0.2em at label sizes) — airy tracking is the luxury signal
- Let photography go full-bleed and alone; white viewports between images are part of the rhythm
- Keep the bronze accent nearly subliminal: hairlines, hover states, one label

## Don't

- No accent-colored fills, badges, sale-red, or promotional UI — discount aesthetics destroy the register
- Don't use bold weights; the didone's thin strokes and 300–400 sans are the voice
- No dense grids, carousels with arrows everywhere, or visible utility chrome
- Never mix a second display face or add rounded corners

## Accessibility notes

- Black on white is maximal contrast; bronze #7a6a4f on white passes AA (~5.3:1) but keep it to labels and rules, not paragraphs
- 300-weight body at 15px is at the fragile edge — never go lighter or smaller, and bump to 400 below 14px
- Wide-tracked all-caps text is harder to read; restrict it to short labels and provide sentence-case alternatives for long content
- Slow cinematic transitions must respect prefers-reduced-motion and never gate content behind them

## Reference sites

- Chanel: https://www.chanel.com
- Saint Laurent: https://www.ysl.com
- Celine: https://www.celine.com

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip luxury-fashion-editorial.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/luxury-fashion-editorial.json

Settings → Capabilities → Skills → Upload skill → luxury-fashion-editorial.zip