A maison look: enormous campaign photography, high-contrast Didone headlines in italic, tiny wide-tracked capitals, black and ivory, and whitespace so generous it reads as confidence.
Full page preview with sample copy, rendered from the same tokens and layout the agent receives.
For coding agents
Rules and live patterns
Every pattern Luxury Fashion owns, drawn by the same renderer as the picker with the style's default tokens and sample copy. Each has an anchor (#<pattern id>). A design's own DESIGN.md and tokens.json stay the source of truth; this page shows what the patterns look like.
Make photographs the largest elements on every screen: hero images fill at least 60% of the viewport height at 1440 px; product shots sit on the `surface` tone.
Set headlines in the heading Didone at weight 400; use italic for collection names, quotes and section titles. Display steps 5–8 only in heroes and the footer wordmark.
Set labels, links, buttons, prices and captions in the body sans at the small size, uppercase, `letter-spacing: 0.18em` or wider.
Keep the type scale's big jumps: a section uses a huge step (4–8) next to tiny caps, with nothing in between.
Use only `bg` (ivory), `heading`/`text` (near-black), `textMuted` and `surface`; the `accent` is black (or the variant's single thread colour) and appears on one element per screen at most.
Give every section the full `space.section` (160 px) of vertical padding; never tighten it to fit more in.
Use text buttons: `underline` (1 px line under caps text) and `link`; the only filled or outlined button is the one in the appointment CTA.
Fade and slide images in slowly (700 ms, the motion easing, 24 px rise); crossfade carousels; nothing bounces. Respect `prefers-reduced-motion`.
Centre text only where the pattern says so (campaign title, press quote, appointment CTA, footer wordmark); everything else is flush left.
At 375 px keep the photography large (full width, no side margins for campaign images), keep caps at 11–12 px and Didone headlines at least step 3.
Don't
No bold or black weights on the Didone, no bold sans headlines.
No rounded corners, shadows, gradients, cards or coloured backgrounds behind text.
No icons, badges, stars, emoji or "sale" stickers; no more than one CTA per screen.
No small thumbnails grids, no three-column product cards with prices in bold.
No more than one colour beyond black, ivory and grey — and only as the variant's accent.
No lowercase or sentence-case labels and buttons; no wide paragraphs (max 52 characters).
No stock lifestyle photography with visible text, no illustrations.
No busy carousels with dots and arrows overlapping images; arrows are tiny caps "Prev / Next" text.
Two tall campaign photographs edge to edge across the grid (1–6, 7–12), then a tiny-caps line and the campaign title in huge italic Didone, centred beneath.
Slots
gallery1, gallery2, eyebrow, headline, cta
Grid
left 1-6 · right 7-12 · title 1-12 · action 5-8
Notes
The two images touch (8 px gap at most) and are the same height. At phone width show them side by side at half width, not stacked.
Two 4:5 campaign photographs edge to edge across the grid (1–6 and 7–12, gap 8 px at most, same height). Below them, centred: a tiny caps eyebrow (season or collection), the campaign title at step 6 in italic Didone weight 400, and a small underline caps link centred beneath. The hero is full-bleed; at phone width the two photos stay side by side at half width, never stacked or dropped.
A vertical tiny-caps label runs up column 1; a 3:4 portrait fills 4–8; the italic Didone headline, a caps line and an underline link are bottom-aligned on 9–12.
Slots
eyebrow, heroImage, headline, subhead, cta
Grid
label 1-1 · portrait 4-8 · text 9-12
Notes
Columns 2–3 stay empty. The label reads bottom-to-top.
A tiny caps label rotated −90° reads bottom-to-top in column 1 (hidden on phone). Columns 2–3 are empty. A 3:4 portrait fills 4–8. Columns 9–12, bottom-aligned: the headline at step 5, italic, weight 400, max ~9 characters per line; a caps line (max 30 ch); a small underline link. The hero is a full viewport tall.
The house name set enormous in uppercase Didone across the full width, a 21:9 campaign image directly beneath it, and a hairline-thin row of caps: season, link, place.
Slots
headline, heroImage, eyebrow, cta, meta
Grid
wordmark full · image full · base full
Notes
The wordmark's letters touch the left and right edges of the grid; size it to the container width, not to a fixed step, if your stack allows.
The house name in uppercase Didone at step 8, centred and sized so it spans the full width, sits directly on top of a 21:9 campaign image (full-bleed). Under the image, one line of tiny caps: the season on the left, an underline link in the middle, the city on the right. Phone: the three caps items stay on one row and wrap only if they must.
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.
Resist filling the space. The photograph is small on purpose: one detail (a seam, a clasp, a fold).
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.
Tiny caps links on 1–4, the wordmark centred on 5–8, a tiny caps text action right-aligned on 9–12; no rule.
Slots
pages, siteName, cta
Grid
links 1-4 · logo 5-8 · action 9-12
Tiny caps links on 1–4 (hidden on phone, moved to a full-screen menu), the wordmark centred on 5–8 in the heading Didone, and a caps text action ("Bag", "Appointments") right-aligned on 9–12 (also hidden on phone). No divider, no background.
The wordmark on the left and a tiny 'Menu' ghost button on the right; desktop may show up to four plain caps links between them, hidden on phone; the full link list lives in a full-screen overlay.
Slots
siteName, cta, pages
Grid
logo 1-3 · menu 10-12
The wordmark on the left and a tiny caps "Menu" ghost button on the right; desktop may show plain caps links between them when there are four or fewer. The menu opens a full-screen ivory overlay with links set in italic Didone at step 4.
A tiny caps label and an italic title on one line, then a full-bleed carousel of tall 3:4 looks with a look number and name in caps beneath each.
Slots
sectionLabel, title, items[4..8]
Grid
header 1-12 · rail full
A caps label on the left and an italic h3 title (step 3) on the right of one baseline. Then a full-bleed horizontal rail of 4–8 tall 3:4 looks with 16 px gaps (about 3.5 visible); under each, the look number and name in caps on one line. Navigation is drag/scroll plus tiny caps "Prev / Next".
A 3:4 photograph on 1–5 spanning two rows; the text sits low on 7–11 in the second row: caps label, italic headline, a short paragraph, an underline link.
Slots
image, sectionLabel, title, body, cta
Grid
photo 1-5 · text 7-11
A 3:4 photograph on 1–5 spans two rows. In the second row, bottom-aligned on 7–11: a caps label, the h2 at step 4 in italic (max 16 ch), one paragraph (max 52 ch) and a small underline link. Column 6 and 12 stay empty.
Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.
Start a project
Desktop
About
How we think
Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.
Collections as a ruled index of huge italic names: a tiny number in column 1, the name at step 5 on 2–9, a caps detail bottom-right on 10–12.
Slots
sectionLabel, items[3..6]
Grid
number 1-1 · name 2-9 · detail 10-12
Notes
On hover, a small image of the collection may follow the cursor; never show it as a thumbnail column.
A caps section label, then 3–6 collections as a ruled index: a tiny caps number in column 1, the collection name at step 5 in italic Didone on 2–9, and a caps detail (season, piece count) bottom-aligned on 10–12. Hairlines between rows, generous row padding.
Two products on ivory: a 4:5 shot on 2–5 and a second on 8–11 set one row lower; the caps name, a muted line and an underline link sit above the second, so the pair reads as a diagonal.
Slots
gallery1, gallery2, title, body, cta
Grid
first 2-5 · caption 8-11 · second 8-11
On the `surface` band: a 4:5 product shot on 2–5 (rows 1–2) and a second on 8–11 set one row lower (rows 2–3). Above the second, on 8–11 and bottom-aligned in row 1: the product name in caps, a muted line and a small underline link. Never a price in bold.
Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.
Start a project
Desktop
Selected work
Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.
One press quote centred in italic Didone at step 4, framed by a tiny caps label above and the publication name in caps below.
Slots
sectionLabel, quote, author
Grid
quote 3-10
Centred within 3–10: a tiny caps label, the quote at step 4 in italic Didone (max 30 ch), and the publication's name in caps. Extra vertical padding (step 16).
On the surface tone, centred on 4–9: caps line, italic headline, a short line and a black outlined button. Nothing else.
Slots
eyebrow, headline, body, cta
Grid
panel 4-9
On the `surface` tone, centred on 4–9: caps eyebrow, the h2 at step 4 in italic, a muted small line and one small outlined (secondary) black button. Extra padding (step 16).
Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.
Start a project
Desktop
Brand & product studio
Have a hard thing to explain?
Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.
Title and a line on 1–3; boutiques on 5–12 in two columns under hairlines (city in caps, address, hours); an appointment form below on 5–10.
Slots
title, body, items[2..4], contact
Grid
title 1-3 · boutiques 5-12 · form 5-10
Columns 1–3: the h2 in italic and a muted line. Columns 5–12: 2–4 boutiques two per row, each opened by a hairline: the city in caps, the address, muted opening hours. Below on 5–10: an appointment form (name, email, date) with underlined fields and a caps submit button.
Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.
Discovery sprint
Two weeks of interviews, audits and competitor teardown.
2 weeks
Positioning workshop
A day with your leadership to agree on one story.
1 day
Identity design
Logo, type, colour, motion and a working toolkit.
8 weeks
Website
Strategy, copy, design and build in Webflow or Next.js.
10 weeks
Name
Your name
Email
you@example.com
Date
Fri 12 June
Send message
Desktop
Start a conversation
Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.
Discovery sprint
Two weeks of interviews, audits and competitor teardown.
2 weeks
Positioning workshop
A day with your leadership to agree on one story.
1 day
Identity design
Logo, type, colour, motion and a working toolkit.
8 weeks
Website
Strategy, copy, design and build in Webflow or Next.js.
One feature story: a 16:9 image on 1–8, caps date, italic title and a line low on 10–12; then three or four more stories as italic titles in a row.
Slots
image, meta, title, body, posts[3..4]
Grid
image 1-8 · story 10-12 · more 1-12
A 16:9 feature image on 1–8; bottom-aligned on 10–12 a caps date, the italic h3 title (step 3) and a muted line. Below, across the grid, 3–4 more stories four per row, each opened by a hairline: a muted caps date and an italic h4 title. No thumbnails for the smaller stories.
Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.
Apr 3, 2026 · 8 min
Your homepage is a sales call nobody attends
Mar 1, 2026 · 5 min
The case against the brand book
Jan 22, 2026 · 6 min
Naming a product in 2026
Dec 9, 2025 · 4 min
Industrial brands deserve good type
Desktop
Booking projects from June 2026
Field notes
Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.
Services as a ruled list: an italic name at step 4 on 1–5, a small description on 6–9, the price in caps on 10–11 and a tiny arrow link on 12.
Slots
sectionLabel, plans[2..4]
Grid
name 1-5 · detail 6-9 · price 10-11 · link 12-12
A caps label, then 2–4 services as a ruled list: the service name at step 4 in italic on 1–5, a muted small description on 6–9, the price ("From €1,200") in caps on 10–11, and a small arrow link on 12, all on one baseline.
Caps links on 1–6 and an underlined email signup on 8–12, then the house name in wide Didone capitals across the page and a centred caps legal line.
Slots
pages, newsletter, siteName, legal
Grid
links 1-6 · signup 8-12 · wordmark full
Caps links on 1–6 and an inline email signup (underlined field, caps submit) on 8–12 on one line; then the house name in uppercase Didone at step 7, centred across the page; then a centred muted caps legal line.
A hairline, then four small columns: links stacked on 1–3, the flagship address on 5–7, a client-services email on 8–9, and the muted legal line bottom-aligned on 10–12.