Louis Vuitton design specCommercial

Restrained luxury editorial: 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, and carousel arrows use an asymmetric 18px/5px radius.

Browse Louis Vuitton in the interactive gallery

Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.

Marketing site

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.

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.

Color Palette & Roles

Neutrals

TokenHexRole / usage
ink#1a1a1aPrimary text, headings
warm-black#19110bDark buttons / dark UI (warm brown-black)
black#000000Button outlines, pure-black moments
gray-600#727272Secondary text
gray-500#545454Tertiary text
gray-400#929292Muted
off-white#f8f8f8Text on dark imagery / light panels
white#ffffffCanvas
sage#bdc1beCampaign / section image tone

Accent (rare)

TokenHexRole / usage
link blue#00a4e4Rare inline link
campaign green#548837Seasonal campaign block

Rule: the palette is monochrome near-black on white; colour lives only in campaign photography, never in decorative chrome.

Typography Rules

RoleFamilySize/LineWeightTracking
WordmarkLouis Vuitton Web~28400wide, UPPERCASE
Heading (h2)Louis Vuitton Web32 / 40400+0.4px
BodyLouis Vuitton Web16400+0.4px
NavLouis Vuitton Web14 / 17.5400+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.

Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.