# Photography-led

Also called: photo-first design, image-led website, full-bleed photography, visual storytelling site, lookbook  
Era: 2012 onward (Medium covers, Airbnb 2014, Unsplash, travel and hospitality)  
Page: https://designforai.dev/style/photography-led

## 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

```css
: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.