# Luxury / fashion serif

Also called: luxury web design, fashion editorial, high-end brand site, couture web, quiet luxury  
Era: print fashion heritage; web 2012 onward (Net-a-Porter, Celine, Aesop, The Row)  
Page: https://designforai.dev/style/luxury-fashion-serif

## Traits

- high-contrast or light serif at large sizes with wide letter-spacing in caps
- enormous whitespace, tiny body text, very few words per screen
- full-bleed photography and video, often muted or black and white
- almost no UI: hairline rules, text links, no buttons that look like buttons
- palette of black, ivory and one muted tone (camel, oxblood, sage)
- centred compositions for campaigns, strict grids for product listings
- slow, restrained motion: 1s fades, subtle parallax, hover reveals a second image

Palette: #f6f4f0 ivory, #0c0c0c black, #8b7355 camel, #5a1f22 oxblood, #9a9a9a muted, #e2dfd9 rule

Type: Cormorant Garamond, Playfair Display, Bodoni Moda or Italiana for display (300-400 at 48-120px, 0.1-0.25em tracking in caps); Jost, Karla or Helvetica-like at 12-14px for everything else

## Do

- set display type light (300-400) and huge; weight comes from size, not boldness
- keep body and UI text at 12-14px with 0.05-0.1em tracking in caps; it reads as restraint
- give photography the whole viewport; text sits in a corner or dead centre

## Don't

- do not use coloured buttons; links are underlined text or outlined hairline boxes
- do not add shadows, radius or icons beyond a plus, minus and arrow
- do not crowd; one message per screen

Known for it: Celine, The Row, Aesop, Bottega Veneta, Net-a-Porter editorial

## CSS seed

```css
:root{--bg:#f6f4f0; --fg:#0c0c0c; --muted:#9a9a9a; --accent:#8b7355; --line:#e2dfd9; --radius:0; --tracking:0.18em; --font:'Karla',sans-serif; --font-display:'Cormorant Garamond',serif}
```

## Prompt

Build the site in luxury fashion style. Background #f6f4f0, text #0c0c0c, muted #9a9a9a, hairlines #e2dfd9, one accent #8b7355 used only for a sale label. Fonts: Cormorant Garamond 300 for display at 104px desktop / 52px mobile in uppercase with 0.18em letter-spacing and line-height 1.0; Karla 400 at 13px with 0.08em tracking in uppercase for nav, labels, buttons and captions; body 14px Karla, line-height 1.7, max-width 480px. Hero: full-viewport photograph or muted video with the title centred and a single underlined text link beneath. Product grid: 3 columns on desktop with 40px gutters, 4:5 images, no radius, no border; hover crossfades to a second image over 700ms. Buttons: hairline 1px #0c0c0c box, transparent, uppercase 12px, 48px tall, hover fills black with ivory text over 400ms. Sections separated by hairlines and 160px of space. Motion: 1s fades on scroll, 5% parallax on the hero, nothing else.