hero.luxury-whitespace-detail · Whitespace detail

A hero pattern from Luxury Fashion, drawn alone below with this design's tokens and sample copy. Not used in this design: shown with its tokens for comparison. Give the section root data-pattern="hero.luxury-whitespace-detail". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A full-height screen almost empty: a caps line high on 2–4, one small 4:5 detail photo floating on 8–10, a short italic headline low on 2–6 and an underline link low on 10–12.
Slots
eyebrow, heroImage, headline, cta
Grid areas
label 2-4 · detail 8-10 · headline 2-6 · action 10-12 (12-column grid, 1-based inclusive spans)
Notes
Resist filling the space. The photograph is small on purpose: one detail (a seam, a clasp, a fold).
Tokens
bg #FAF8F4 · text #1A1A1A · heading #0A0A0A · accent #111111 · accent2 #5C4311 · Bodoni Moda / Jost · radius 0px · space unit 8px (full list in design/tokens.json)
Section
vertical padding step 6

Pattern notes

  • A viewport-tall screen that stays mostly empty. A caps eyebrow at the top on 2–4; a small 4:5 detail photograph floating in the middle on 8–10; at the bottom, an italic h1 at step 3 on 2–6 and a small underline link on 10–12. Do not add anything else.

Brand & product studio

We make complicated companies simple to choose

Start a project