Design for AI

Photography-led: UI design prompt

Palette, type rules and a pasteable prompt for photography-led. Also called photo-first design, image-led website, full-bleed photography, visual storytelling site, lookbook. 2012 onward (Medium covers, Airbnb 2014, Unsplash, travel and hospitality).

Traits

  • large edge-to-edge photographs set the mood; UI recedes to hairlines and small type
  • text overlaid on images with a gradient scrim, or placed in the negative space of the photo
  • consistent colour grading across all photos (one preset) so the site feels authored
  • alternating full-bleed and contained images to set rhythm
  • masonry or editorial grids for galleries with captions
  • lazy-loaded, responsive images with blurred placeholders; aspect ratios locked
  • motion: slow Ken Burns on heroes, parallax at 5-10%, crossfades

Palette

taken from the photography; UI is #ffffff, #111111, rgba(0,0,0,0.5) scrim, #f2f2f2 surface, one accent sampled from the dominant photo tone

Type

Manrope, DM Sans or Instrument Sans for UI at 13-15px; a light serif (Cormorant, Newsreader) or the same sans at 48-88px for overlaid titles; captions 12px muted

Do

  • grade every photo with one preset (contrast, warmth, slight fade) and export at 1600px max, webp under 200KB
  • reserve every image slot with aspect-ratio so nothing shifts on load; use a 20px blurred placeholder
  • place text in the calm area of each photo and add a 40% bottom scrim only when needed

Don't

  • do not put UI chrome on top of photos: no cards, no borders, no coloured buttons over imagery
  • do not mix stock photography styles; one look or none
  • do not use hero carousels; one strong photo beats five

Known for it: Airbnb, National Geographic, Unsplash, Kinfolk, Aman resorts

CSS seed
:root {
  --bg: #ffffff;
   --fg: #111111;
   --muted: #8a8a8a;
   --scrim: linear-gradient(transparent,rgba(0,0,0,0.5));
   --surface: #f2f2f2;
   --radius: 0;
   --ratio: 3/2;
   --font: 'Manrope',sans-serif
}
Prompt

Build the site photography-led. All photos share one colour grade (slightly warm, lifted blacks) and are served as webp under 200KB at 1600px, lazy-loaded with a blurred placeholder and a fixed aspect-ratio (3/2 for landscape, 4/5 for portrait). UI colours: #ffffff, #111111, muted #8a8a8a, surface #f2f2f2. Font Manrope: overlaid hero title 300 at 80px with -0.02em placed in the photo's negative space (bottom-left, 64px inset) over a bottom scrim linear-gradient(transparent, rgba(0,0,0,0.5)); UI text 14px; captions 12px muted below each image. Hero: full-viewport photo with a 20s Ken Burns zoom (scale 1 to 1.08). Body: alternate full-bleed images with contained two-column image-and-text rows, 120px apart. Gallery: 3-column masonry with 16px gaps, no radius, no borders, hover darkens 10%. Buttons are underlined text, white on photos, black on white. Nav is transparent over the hero, white with a hairline after 80px scroll. Parallax 6% on full-bleed images.
For design.md, .cursorrules or AGENTS.md
## Design direction
Build the site photography-led. All photos share one colour grade (slightly warm, lifted blacks) and are served as webp under 200KB at 1600px, lazy-loaded with a blurred placeholder and a fixed aspect-ratio (3/2 for landscape, 4/5 for portrait). UI colours: #ffffff, #111111, muted #8a8a8a, surface #f2f2f2. Font Manrope: overlaid hero title 300 at 80px with -0.02em placed in the photo's negative space (bottom-left, 64px inset) over a bottom scrim linear-gradient(transparent, rgba(0,0,0,0.5)); UI text 14px; captions 12px muted below each image. Hero: full-viewport photo with a 20s Ken Burns zoom (scale 1 to 1.08). Body: alternate full-bleed images with contained two-column image-and-text rows, 120px apart. Gallery: 3-column masonry with 16px gaps, no radius, no borders, hover darkens 10%. Buttons are underlined text, white on photos, black on white. Nav is transparent over the hero, white with a hairline after 80px scroll. Parallax 6% on full-bleed images.

## Tokens
:root { --bg:#ffffff; --fg:#111111; --muted:#8a8a8a; --scrim:linear-gradient(transparent,rgba(0,0,0,0.5)); --surface:#f2f2f2; --radius:0; --ratio:3/2; --font:'Manrope',sans-serif }

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