Guidelines

Imagery

The photography is the colour, the mood and most of the page. Three crops, cut straight, never boxed, never tinted, and a slow push on hover.

Crops

Every picture is set by StoryImage, which crops with object-cover into one of three ratios. Mixing portrait and landscape in a row is what gives the grid its rhythm.
People. Half the cards in a row, the lead story on mobile.

Portrait 4:5

People. Half the cards in a row, the lead story on mobile.

aspect-4/5
Product, places and groups. The other half of a row.

Landscape 5:4

Product, places and groups. The other half of a row.

aspect-5/4
The hero on desktop, a wide frame inside a campaign band.

Wide 16:10

The hero on desktop, a wide frame inside a campaign band.

aspect-16/10

Hover

Inside a card, the picture eases in by 3% over 900ms: the way a print is brought closer, not zoomed. Nothing else on the card moves except the title's underline.
A model in a red jersey with a cream bag

Press

Your style. Your soundtrack. Your story.

Hover the card.

PropertyValue
Scale1 → 1.03
Duration--duration-image: 900ms
Curve--ease-coach: cubic-bezier(0.22, 1, 0.36, 1)
Reduced motionNo scale

Text on photography

Text goes on a photograph only in the hero and the co-brand lockup, in white, over an ink gradient rising from the edge the text sits on. The rest of the picture stays clear.

Golden hour, on the water

DoA 65% ink gradient from the bottom, clear above the middle.

Golden hour, on the water

Don'tNo scrim: the title disappears into the highlights.

Art direction

The same rules as the campaign: people wearing the product in real places, product still lifes on plain grounds, and the atelier's hands.
People in motion, the bag worn, not held up
People in motion, the bag worn, not held up
Product on a plain ground, lit softly
Product on a plain ground, lit softly
Hands and materials: the craft, close
Hands and materials: the craft, close
Real places, available light
Real places, available light
DoSquare edges, the colour as shot.
Don'tRounded corners, shadows and filters make a photograph a thumbnail.

Rules

  • Every picture holds its space in coach-mist while it loads, so the grid never jumps.
  • Pass sizes for the columns a picture spans; the hero and the first row load eagerly.
  • Set focus (object-position) when the crop would cut through a face or the product.
  • Alt text says what is in the picture, not what the story is about.
  • No text baked into images. Titles are live text over a scrim, or under the picture.