Design for AI

Luxury / fashion serif: UI design prompt

Palette, type rules and a pasteable prompt for luxury / fashion serif. Also called luxury web design, fashion editorial, high-end brand site, couture web, quiet luxury. print fashion heritage; web 2012 onward (Net-a-Porter, Celine, Aesop, The Row).

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
: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.
For design.md, .cursorrules or AGENTS.md
## Design direction
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.

## Tokens
: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 }

Keep hover and focus-visible states on every interactive element. Do not add a CSS framework.