--- version: alpha name: "Louis Vuitton" website: "https://us.louisvuitton.com" description: >- An LVMH flagship whose digital marketing surface runs entirely in achromatic black and white — ink on canvas, canvas on pure black — with the LV monogram pattern doing all chromatic work inside the product photography rather than the UI chrome; type is the proprietary "Louis Vuitton Web" sans at 24px / weight 400 for the display tier with generous 0.4px letter-spacing, all rendered at zero border-radius on a page that treats every UI frame as a stage for the archive bag photograph behind it. seo: title: "Louis Vuitton Design System for React — achromatic, Louis Vuitton Web, 12 components" metaDescription: "Louis Vuitton's marketing design system as a DESIGN.md file. Achromatic black and white, Louis Vuitton Web sans, zero border-radius, photography-led. For React, Next.js, and AI coding tools." highlights: - "Monogram-as-brand-voltage — the LV canvas pattern carries all chromatic identity inside product photography; the digital UI is strictly achromatic" - "Proprietary web font at a single weight — 'Louis Vuitton Web' runs at weight 400 across every display, heading, and body tier with no bold companion in the captured surface" - "0.4px letter-spacing on display text — a measured tracking value that reads as luxury restraint without crossing into wide-tracked fashion-label territory" - "Pure black hero canvas — the editorial photograph sits on a pure ink stage; white text floats over the darkened product image rather than a designed graphic surface" - "Zero border-radius throughout — no rounding anywhere; the rectangular frame signals archive-house precision rather than consumer-app approachability" tags: - "E-commerce & Retail" lastUpdated: "2026-05-19" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | Louis Vuitton's digital marketing surface is a dark stage. The homepage opens on a full-bleed pure black canvas with a large archival product photograph — in the captured instance, the Keepall bag with its LV monogram canvas and caramel leather trim — centered against the darkness. White serif-weight type floats over the image at 24px. No gradient, no color wash, no marketing layer between the viewer and the object. The UI provides the frame; the archive does the rest. This DESIGN.md packages the system for React tooling. Inside: 6 color tokens drawn from a strict achromatic range — ink black, pure white, and nothing between them with meaningful frequency; 9 typography tokens running the proprietary "Louis Vuitton Web" sans (falling back to Helvetica Neue) at a single weight 400 across display, heading, and body roles, with a 0.4px letter-spacing value that distinguishes the brand's type feel from utilitarian web sans-serifs; 5 spacing tokens on a loose 8–40px rhythm; and 12 component definitions covering the dark hero stage, the white-text floating headline, the flat-edged navigation, and the card surface. Feed this file to Claude or Cursor and it reproduces Louis Vuitton's specific restraint: a pure black editorial stage, a single proprietary sans at weight 400, 0.4px letter-spacing on display text, zero radius, and a UI that refuses to compete with the monogram canvas pattern it is framing. The system's discipline is its message: the brand is old enough not to need digital decoration. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://us.louisvuitton.com" title: "Louis Vuitton — official site" description: "Louis Vuitton's public marketing site — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is Louis Vuitton's primary digital brand color?" answer: "The digital marketing shell is achromatic — strictly ink black and canvas white, with no brand color declared in the UI token set. Louis Vuitton's visual identity in the physical world is driven by the LV monogram pattern (warm tan canvas with chocolate brown and gold hardware) and the maison's navy and gold secondary palette, but none of these appear as CSS color values in the captured marketing surface. Chromatic identity lives entirely inside the product photography. This is the same approach taken by Bottega Veneta and Celine: the luxury tier increasingly treats UI color as interference and leaves the canvas to the object." - id: "typography" title: "What typeface does Louis Vuitton use, and what should I substitute?" answer: "Louis Vuitton runs a proprietary font family named 'Louis Vuitton Web' (also declared as 'Louis Vuitton' without the Web suffix) falling back to Helvetica Neue, Helvetica, Arial, and sans-serif. The captured surface uses weight 400 exclusively at 24px for the display tier (h1), 18px for section headings (h2), and 16px for body paragraphs. Letter-spacing is 0.4px on the display and heading tiers — a consistent brand mark that runs across all extracted heading sizes. The closest open-source substitute is Helvetica Neue at the same weights and letter-spacing values." - id: "canvas-color" title: "Why does Louis Vuitton use a pure black hero background?" answer: "The pure black hero stage is an editorial choice borrowed from luxury fashion print practice — runway photography is often shot against a flat dark ground to direct attention entirely to the garment or accessory. In digital form, the pure black (#000000) canvas makes the product photograph read as if lit and floating rather than placed on a designed surface. This is distinct from near-black backgrounds used by technology brands (Linear's #0f0f11, Vercel's #000000 with blue-tinted surfaces) where the darkness signals technical authority. Louis Vuitton's black is an archive-house staging decision, not a dark-mode convention." - id: "letter-spacing" title: "Why does Louis Vuitton use 0.4px letter-spacing rather than zero or tight tracking?" answer: "The 0.4px letter-spacing on all heading tiers is a deliberate brand-feel marker that sits between two failure modes: zero-tracking reads as a generic web sans, and wide tracking (1-3px, common in fashion labels using uppercase all-caps lockups) reads as shouting. At 0.4px on a 24px h1, the tracking adds a fraction of airiness without announcing itself as a fashion-house affectation. It is consistent across the h1 (24px) and h2 (18px) sizes, suggesting it is a brand-level declaration rather than a size-specific adjustment. The closest analog is Chanel's 0.3px tracking on Chanel Sans." - id: "use-in-project" title: "Can I use this DESIGN.md to build a luxury e-commerce or editorial site?" answer: "Yes — the file gives Claude or Cursor the specific tokens to reproduce Louis Vuitton's editorial restraint: pure black stage, white type, 0.4px letter-spacing, weight 400 throughout, zero radius, and a two-color achromatic shell. Substitute 'Louis Vuitton Web' with Helvetica Neue or a comparable geometric neutral sans. The one constraint: this system has almost no UI chrome — it works only if the product photography is strong enough to carry the page. Without archive-quality imagery, the achromatic shell reads sparse rather than authoritative." mockups: - "marketing-hero" - "media-grid" colors: ink: "#000000" canvas: "#ffffff" typography: display-xl: fontFamily: "\"Louis Vuitton Web\", \"Louis Vuitton\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 24px fontWeight: 400 lineHeight: 32px letterSpacing: "0.4px" display-md: fontFamily: "\"Louis Vuitton Web\", \"Louis Vuitton\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 24px fontWeight: 400 lineHeight: 32px letterSpacing: "0.4px" heading-md: fontFamily: "\"Louis Vuitton Web\", \"Louis Vuitton\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 24px letterSpacing: "0.4px" body-md: fontFamily: "\"Louis Vuitton Web\", \"Louis Vuitton\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px letterSpacing: normal body-sm: fontFamily: "\"Louis Vuitton Web\", \"Louis Vuitton\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20px letterSpacing: normal nav-link: fontFamily: "\"Louis Vuitton Web\", \"Louis Vuitton\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20px letterSpacing: normal button-md: fontFamily: "\"Louis Vuitton Web\", \"Louis Vuitton\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20px letterSpacing: normal label-md: fontFamily: "\"Louis Vuitton Web\", \"Louis Vuitton\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20px letterSpacing: normal caption: fontFamily: "\"Louis Vuitton Web\", \"Louis Vuitton\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 16px letterSpacing: normal rounded: none: "0px" full: "9999px" spacing: xs: "8px" sm: "20px" base: "32px" lg: "40px" xl: "120px" components: hero-section: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.display-xl}" rounded: "{rounded.none}" padding: "0px" hero-heading: backgroundColor: "transparent" textColor: "{colors.canvas}" typography: "{typography.display-xl}" padding: "0px 20px" section-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.heading-md}" padding: "0px" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-md}" body-paragraph-canvas: backgroundColor: "transparent" textColor: "{colors.canvas}" typography: "{typography.body-md}" button-primary: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.none}" padding: "12px 32px" height: "44px" border: "0" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.none}" padding: "12px 32px" height: "44px" borderColor: "{colors.ink}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: "0px 20px" height: "48px" nav-link: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: "8px 8px" card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "8px" photo-tile: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "0px" footer: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" padding: "32px 20px" --- ## 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 | Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | `{typography.display-xl}` | 24px | 400 | 32px | 0.4px | Hero h1 — white text on black canvas | | `{typography.display-md}` | 24px | 400 | 32px | 0.4px | Section display (same as display-xl) | | `{typography.heading-md}` | 18px | 400 | 24px | 0.4px | Section h2 | | `{typography.body-md}` | 16px | 400 | 24px | normal | Default paragraph text | | `{typography.body-sm}` | 14px | 400 | 20px | normal | Secondary text, captions | | `{typography.nav-link}` | 14px | 400 | 20px | normal | Top-nav link labels | | `{typography.button-md}` | 14px | 400 | 20px | normal | CTA button label | | `{typography.label-md}` | 14px | 400 | 20px | normal | Form labels, category labels | | `{typography.caption}` | 12px | 400 | 16px | normal | Metadata, legal footnotes | ### 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.