# Luxe product detail > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is The product page for *Vetiver No. 7* by the fictional house *Maison Aurel*. The viewport splits 55 / 45: the left 704px is a cream-to-sand gradient stage holding a 200 × 320 bottle built entirely from CSS (gradient body, black cap, paper label, radial shadow) with three 52px variant swatches that recolour it; the right 576px is the information column: uppercase breadcrumb and bag count, gold eyebrow, a 54px Cormorant Garamond name with an italic numeral, serif price with a per-ml line, a 38ch description, a three-option size radio whose black indicator slides between options, a 56px "Add to bag" button that morphs into a gold "Added to bag" with a drawn check, and a notes list. Palette is cream, near-black and one gold; no shadows except the bottle's. The detail worth copying is the button morph: two stacked labels cross-slide while the surface turns gold and the check draws itself. ## Reference behaviour 1. Initial state: amber variant selected (swatch 1 outlined in black, index reads "01 / 03"); size "50 ml" checked with the indicator behind it; price "€148", per-line "50 ml · €2.96 / ml"; button reads "ADD TO BAG — €148"; bag count 0. 2. Click "30 ml" or "100 ml" (or use arrow keys within the group): the black indicator translates to that third over 280ms with expo-out; the checked label turns cream over 160ms; price, per-ml and the button's price update instantly (€92 / 30 ml · €3.07 per ml; €236 / 100 ml · €2.36 per ml). If the button was in the Added state it resets to idle. 3. Click "Add to bag": over 360ms the surface goes black → gold, the idle label slides up 10px and fades, the "Added to bag" label slides in from 10px below, and the 16px check draws its 24-unit stroke over 300ms after a 200ms delay. Bag count increments and the bag link's `aria-label` updates. Clicking again while Added does nothing. 4. Hover the idle button: background `#2a2622`. Hover a size option that is not checked: no change (the indicator is the only cue). Hover a swatch: 1px `--ink-3` border. 5. Click a swatch: the bottle's `--c1`/`--c2` change and the body gradient crossfades over 500ms; the top-right index updates ("02 / 03"); `aria-pressed` moves. 6. Focus-visible: 1px `--ink` outline at 4px offset on links, swatches and the add button; inside the size group the outline is cream and inset 5px so it is visible on the black indicator. 7. Reduced motion: all transitions 1ms and no delays; the check appears drawn. ## Structure ``` 1280 × 800 ┌───────────────────────────────────────┬────────────────────────────────────┐ │ MAISON AUREL 01 / 03 │ FRAGRANCE / EAU DE PARFUM ⌂ 0 │ 36px from top │ │ │ │ ┌──┐ cap 76×58 │ EAU DE PARFUM · UNISEX (gold) │ │ ┌─┴──┴─┐ │ Vetiver No. 7 (54px) │ │ │ │ body 200×276 │ €148 50 ML · €2.96 / ML │ │ │ No.7 │ label 132×74 │ Haitian vetiver root steeped … │ 38ch │ └──────┘ │ SIZE Size guide │ │ ‾‾shadow‾‾ 280×34 │ [ 30 ml │■50 ml■│ 100 ml ] 44px │ │ │ [ ADD TO BAG — €148 ] 56px │ │ ▣ ▢ ▢ swatches 52px │ TOP Bergamot, pink pepper … │ │ │ HEART Haitian vetiver, iris … │ │ │ BASE Atlas cedar, ambrette … │ │ │ Complimentary shipping over €120 … │ └───────────────────────────────────────┴────────────────────────────────────┘ 55% = 704px 45% = 576px, padding 36/56 ``` - `` — `grid-template-columns: 55% 1fr`. - `

` — `.brand`, `.idx`, `.bottle[role="img"]` (children `.cap`, `.body`, `.label`, `.shadow`), `.thumbs[role="group"]` of three `` swatches carrying `--c1/--c2` inline. - `

` — `