# Louis Vuitton — Marketing Site Design Spec > Source: us.louisvuitton.com (live DOM, computed styles), 2026-07-25 (desktop 1512px). > Coverage: home. Account: `needs-dashboard`. Responsive: breakpoints not captured. Motion: cinematic hero/carousels; not captured in detail. ## 1. Visual Theme & Atmosphere Louis Vuitton's site is restrained luxury editorial: a white canvas, near-black type set entirely in the house's custom "Louis Vuitton Web" typeface, and full-bleed cinematic campaign film and photography doing all the emotional work. The chrome all but disappears — a centered letter-spaced LOUIS VUITTON wordmark, thin 14px nav labels, and generous whitespace — so the imagery leads and the interface whispers. Everything is at a single regular weight (400) with a consistent 0.4px tracking, giving the type a calm, engraved quality. The signature control is a frosted translucent pill (a 1px black outline over a 25%-white fill) that floats over campaign imagery, and the dark UI moments use a warm near-black brown rather than pure black. Nothing is loud; hierarchy comes from scale, space and photography, not weight or colour. Feels: refined, editorial, monochrome, quietly luxurious. ## 2. Color Palette & Roles ### Neutrals | Token | Hex | Role / usage | |---|---|---| | ink | `#1a1a1a` | Primary text, headings | | warm-black | `#19110b` | Dark buttons / dark UI (warm brown-black) | | black | `#000000` | Button outlines, pure-black moments | | gray-600 | `#727272` | Secondary text | | gray-500 | `#545454` | Tertiary text | | gray-400 | `#929292` | Muted | | off-white | `#f8f8f8` | Text on dark imagery / light panels | | white | `#ffffff` | Canvas | | sage | `#bdc1be` | Campaign / section image tone | ### Accent (rare) | Token | Hex | Role / usage | |---|---|---| | link blue | `#00a4e4` | Rare inline link | | campaign green | `#548837` | Seasonal campaign block | Rule: the palette is monochrome near-black on white; colour lives only in campaign photography, never in decorative chrome. ## 3. Typography Rules - `Louis Vuitton Web` — the house custom typeface used for absolutely everything (wordmark, headings, nav, body, buttons). Weight stays at 400; a consistent 0.4px letter-spacing runs throughout. | Role | Family | Size/Line | Weight | Tracking | |---|---|---|---|---| | Wordmark | Louis Vuitton Web | ~28 | 400 | wide, UPPERCASE | | Heading (h2) | Louis Vuitton Web | 32 / 40 | 400 | +0.4px | | Body | Louis Vuitton Web | 16 | 400 | +0.4px | | Nav | Louis Vuitton Web | 14 / 17.5 | 400 | +0.4px | Patterns: one custom family, one weight (400) throughout; a uniform 0.4px tracking; mixed case for headings/body (only the wordmark is uppercase). Hierarchy is size and whitespace, never bold. ## 4. Component Stylings ### Buttons - **Frosted pill (over imagery)**: bg `rgba(255,255,255,.25)`, text `#1a1a1a`, 1px black border, radius `40px` (pill), height `48px`, padding `13px 32px`, Louis Vuitton Web 16px/400 +0.4px. Floats over campaign photography. - **Dark solid (modals / confirm)**: warm near-black `#19110b` fill, off-white text, radius ~`40px` pill. ### Nav - Transparent header over the hero: left "Menu" (hamburger) + "Search"; centered letter-spaced LOUIS VUITTON wordmark; right "Contact Us", wishlist heart, account, bag — all 14px Louis Vuitton Web. ### Carousels - Product/collection carousels with asymmetric-radius arrow controls (`18px 5px 5px 18px`). ### Cards / product tiles - Full-bleed image tiles with a 32px heading and a frosted pill CTA; flat, no shadow. ### Inputs / select - Bordered select (region modal) with thin hairline border; sharp/rounded per context. ## 5. Layout Principles - Full-bleed cinematic campaign film/photography heroes with a centered heading and a frosted pill CTA. - Transparent centered-wordmark nav over the hero. - Editorial rows: "Shop by Category", "Iconic Bags for Her", "The Latest Bags for Him" — each a 32px heading over image tiles. - Generous whitespace; monochrome chrome; imagery carries the brand. ## 6. Depth & Elevation - Radii: `40px` pills (CTAs); asymmetric `18px 5px` carousel arrows; small `4px` / `2px` minor. - Elevation: flat — minimal shadows (a faint `rgba(0,0,0,.6) 0 1px 0` for legibility over imagery; a `#19110b` 1px ring on the dark button). - Structure from whitespace and full-bleed imagery, not shadows. ## 7. Motion - Cinematic autoplay hero film and collection carousels. Restrained, elegant transitions. Exact durations/easings not captured. ## 8. Backgrounds, Effects & WebGL - Full-bleed cinematic **campaign film and photography** as heroes and tiles — the primary source of colour and mood. - White editorial sections between campaign moments. - No CSS gradients as tokens, no canvas/WebGL observed. Imagery-led surfaces. ## 9. Do's and Don'ts ### Do - Set everything in the custom Louis Vuitton typeface at weight 400 with a uniform 0.4px tracking. - Lead with full-bleed cinematic campaign film/photography; let it carry the colour and mood. - Keep chrome monochrome near-black `#1a1a1a` on white; center a letter-spaced wordmark. - Use frosted translucent pills (25% white + 1px black border, radius 40px) as CTAs over imagery. - Build hierarchy from scale and whitespace — 32px headings, thin 14px nav. - Use warm near-black `#19110b` for dark UI rather than pure black. ### Don't - Don't use bold weights — the whole site is weight 400. - Don't add decorative colour to the chrome; colour belongs in campaign imagery. - Don't drop the 0.4px tracking or switch type families; it is one custom face throughout. - Don't add drop shadows or heavy elevation; the surface is flat and imagery-led. - Don't crowd the layout; restraint and whitespace are the luxury. ## 10. Responsive Behavior - Not captured (desktop 1512px only). A region modal and cookie banner are present; the site localizes by country. ## 11. Agent Prompt Guide Quick token reference: - Canvas `#ffffff` · Text `#1a1a1a` · Dark UI `#19110b` · Muted `#727272` · Off-white `#f8f8f8` - Font: `Louis Vuitton Web` (one custom family, weight 400, +0.4px tracking) · Heading 32/40 · Nav 14 · Body 16 · Radius 40px pill · Button height 48px - Buttons: frosted pill `rgba(255,255,255,.25)` + 1px black border over imagery / warm-black `#19110b` solid · Flat, imagery-led Use the Louis Vuitton design language: restrained luxury editorial on a white canvas with near-black `#1a1a1a` type set entirely in the house custom "Louis Vuitton Web" typeface, where full-bleed cinematic campaign film and photography does all the emotional work. Everything is one family at a single regular weight (400) with a uniform 0.4px letter-spacing, giving the type a calm, engraved quality; the chrome all but disappears — a centered letter-spaced LOUIS VUITTON wordmark, thin 14px nav, 32/40 headings, and generous whitespace — so hierarchy comes from scale and space, never bold or colour. The signature control is a frosted translucent pill: `rgba(255,255,255,.25)` fill with a 1px black border, radius 40px, 48px tall, floating over campaign imagery; dark UI moments use a warm near-black brown `#19110b` rather than pure black. The palette is monochrome near-black on white — colour lives only in the photography, never in decorative chrome. Elevation is flat with only faint legibility shadows over imagery. Feels: refined, editorial, monochrome, quietly luxurious. Avoid: bold weights, decorative colour in the chrome, dropping the 0.4px tracking or switching type families, drop shadows or heavy elevation, and crowded layouts.