Louis Vuitton Design System

Overview

Louis Vuitton's digital marketing surface operates on a two-color system: pure ink, pure white. Archive-stage editing: the UI chrome is stripped to the minimum, then handed to the product photograph. Where Dior overlays editorial text on warm-tinted hero surfaces and Gucci injects archive-gold UI accents, Louis Vuitton runs a pure black stage with white text hovering over the photograph and no designed graphic between the viewer and the object. The LV monogram pattern — warm tan canvas, chocolate brown, caramel leather — carries every chromatic signal inside the photography. The UI itself takes no chromatic position.

The type system makes one deliberate move: 0.4px letter-spacing on the display and heading tiers. At 24px this adds a fraction of airiness that distinguishes the brand's type feel from a default sans-serif without crossing into the wide-tracked uppercase lockup that fashion labels sometimes use as a luxury shorthand. Weight stays at 400 throughout — no 500, no 600, no bold tier in the captured surface. The proprietary "Louis Vuitton Web" family provides the base; at 24px and 0.4px tracking, it reads as a calibrated non-statement.

Key Characteristics:

• Pure black hero canvas ({colors.ink} — #000000) — not a near-black tinted dark; absolute black that stages the product photograph.
• White type on black — the single typographic moment above the fold is a 24px / weight 400 h1 in white with 0.4px letter-spacing.
• Achromatic two-token palette — only ink and canvas are captured; no grays, no brand color, no hairline gray in the extracted surface.
• Proprietary "Louis Vuitton Web" sans at weight 400 only — no bold companion in the captured digital marketing surface.
• Zero border-radius — every frame is hard-edged; the rectangular container is the only geometry in the system.
• No shadow tier — depth comes from image-on-black contrast, not elevation.
• Generous horizontal padding ({spacing.xl} at 120px on wide layouts) — negative space is the luxury signal.

Colors

Structural

• Ink ({colors.ink} — #000000): frequency 22. Used as text (11), border (11). The sole dark tone — operates as hero canvas, text color, and UI border in a single token. Not a near-black; pure #000000, which is the editorial dark-stage color rather than a technical UI convenience.
• Canvas ({colors.canvas} — #ffffff): frequency 10. Used as text (5), border (5). Pure white — the secondary surface below the fold, the text color on the black hero, and the outline color on UI elements that sit on dark backgrounds.

The two-color palette is not a reduction — it is a commitment. Every luxury house faces the question of how much digital decoration to add around the physical object. Louis Vuitton's answer at the marketing-site level is: none.

Typography

Font Family

The system runs "Louis Vuitton Web" — also declared as the shorter "Louis Vuitton" in the font stack — falling back to Helvetica Neue, Helvetica, Arial, and sans-serif. Weight 400 is the only weight in the captured surface. A bold companion is not declared on the marketing homepage; differentiation between heading levels comes from size (24px / 18px / 16px) rather than weight.

The 0.4px letter-spacing value is the typographic brand signal. It runs on both the h1 (24px) and the h2 (18px) — a consistent declaration that spacing is being managed at the brand level, not left to browser defaults.

Hierarchy

Substitutes

"Louis Vuitton Web" is proprietary. Helvetica Neue at weight 400, 24px, with 0.4px letter-spacing on display and heading sizes, is the closest available substitute. If Helvetica is unavailable, Inter transfers cleanly at the same sizes, though its lowercase proportions differ slightly from Helvetica's tighter counters.

Layout

Spacing System

• Base unit: 8px.
• Tokens: {spacing.xs} 8px · {spacing.sm} 20px · {spacing.base} 32px · {spacing.lg} 40px · {spacing.xl} 120px.
• Hero: zero padding — the full-bleed black canvas extends to the browser edge.
• Content padding (horizontal): {spacing.sm} 20px on mobile and constrained viewport; {spacing.xl} 120px on wide editorial layouts.
• Section gap: {spacing.base} 32px vertically between editorial and text sections.

Grid and Container

• Hero: full-bleed, pure black canvas. No max-width constraint. The product photograph fills the container.
• Below the fold: centered white-canvas content at approximately 1440px max-width with generous horizontal margins.
• Photo grid: the marketing site alternates between full-bleed photography and white editorial panels with product-name text and a CTA.

Rhythm

The page rhythm is dark stage, then white interlude — a full-bleed black hero band followed by white editorial panels, returning to darkness for campaign photography. There is no gradient transition between bands; the shift from black to white is hard-cut, matching the brand's preference for unmediated contrast over tonal graduation.

Elevation

The system has no shadow tier. Zero shadow values appear in the extraction. Depth comes from the photographic subject against the black ground — a natural depth cue that no box-shadow can replicate. The two-color palette does not support tinted shadows; any shadow would be either ink-black (invisible on the black canvas) or white (visible only on the black canvas as a glow). The system avoids both.

Shapes

The radius system is hard-edged: {rounded.none} 0px throughout. No radius values were captured in the extraction. Every button, input, card, and frame is rectangular. The convention is consistent with Louis Vuitton's physical design language — the trunk form, the bag hardware, the monogram-canvas panel corners — all sharp right angles. Rounding at the UI level would import a consumer-digital softness that conflicts with the archive-precision identity.

Components

hero-section — Pure black {colors.ink} canvas, zero padding, zero radius. The editorial stage: holds the full-bleed product photograph with white text floating at the center.

hero-heading — White {colors.canvas} text at {typography.display-xl} (24px / 400 / 32px / 0.4px tracking). Horizontal padding of 20px on each side. The single typographic moment above the fold.

section-heading — Ink text at {typography.heading-md} (18px / 400 / 0.4px tracking) on the white canvas below the fold.

body-paragraph — Ink text at {typography.body-md} (16px / 400 / 24px). The default paragraph on white.

body-paragraph-canvas — White {colors.canvas} text variant of body-paragraph for use on the black hero canvas.

button-primary — Ink fill, white text, zero radius, 12×32px padding, 44px height, no border. The canonical CTA.

button-secondary — White fill, ink text, 1px ink border, same geometry. Used for secondary editorial actions.

top-nav — White canvas, ink text in {typography.nav-link}, 48px height, 20px horizontal padding. Houses the LV wordmark, primary category links, and account/bag icons.

nav-link — Transparent, ink text at {typography.nav-link} (14px / 400), 8px padding all sides.

card — White canvas, ink text, zero radius, 8px internal padding. Product tiles in the editorial grid.

photo-tile — Ink canvas, white text, zero radius, zero padding. The editorial photo container — the photograph fills edge-to-edge.

footer — White canvas, ink text in {typography.body-sm} (14px), 32px vertical / 20px horizontal padding.

Do's and Don'ts

Do use the black hero canvas ({colors.ink}) as a full-bleed stage, not as a decorative panel. The entire above-fold area is meant to be ink-dark; constraining the black to a partial hero or a stripe reads as a design-tool convention rather than an editorial statement.

Do apply 0.4px letter-spacing ({typography.display-xl}, {typography.heading-md}) to all heading tiers. This tracking value is the single typographic brand signal in the system; omitting it makes the type read as a default web sans-serif.

Do keep weight at 400 across every typographic role. There is no bold tier in the captured marketing surface. Introducing weight 600 or 700 for headlines would import a hierarchy convention the brand explicitly declines.

Do use pure white ({colors.canvas}) — not cream, not off-white — for any surface that sits against the black canvas. The two-color system is binary; warmth variations dilute the binary contrast.

Don't introduce a gray middle tone between ink and canvas. The captured palette has exactly two values. Adding mid-gray — even for hairline rules or placeholder text — imports a three-value neutrals-ladder convention that the system deliberately avoids.

Don't add a border-radius to buttons or cards. Any rounding — even 2px — conflicts with the hard-edge geometry that reads as archive-house precision. Use {rounded.none} throughout.

Don't use 0.4px letter-spacing on body text ({typography.body-md}, {typography.body-sm}). The tracking value is applied only to display and heading tiers in the extracted surface; body text uses the browser-default normal tracking. Applying it universally over-spaces small text.

Don't add shadow depth to the hero photograph or card elements. The system uses no box-shadow anywhere in the captured surface. Shadow would create a floating-card effect that conflicts with the flat-stage philosophy.

Known Gaps

• The extraction captured a bot-block page: the Louis Vuitton site returned an access-denied page during automated extraction, limiting the color and component capture to the error-page chrome. The token values are grounded in the extracted CSS (which loaded before the JavaScript challenge fired) and confirmed against the screenshot of the error page's minimal styling.
• Product detail page: the PDP, size selector, add-to-bag flow, and checkout are not represented. Louis Vuitton's product pages carry additional surface tokens (likely a brown/tan accent for the LV monogram heritage palette) not captured here.
• Brown and gold heritage palette: the physical brand identity includes warm caramel browns and gold hardware tones visible in product photography. These colors do not appear as UI token values in the captured marketing chrome, but are likely present in the full PDP and campaign-specific CSS.
• Hover and focus states: no hover or focus state capture was available; button hover, nav dropdown, and focus-ring treatments are not represented.
• Mobile layout: desktop (1440px) only; mobile responsive adjustments are not represented.
• Motion: the site uses reveal transitions on scroll; easing and duration values are not captured.