---
version: alpha
name: "Dior"
website: "https://www.dior.com"
description: >-
  A French couture house whose digital marketing surface runs Futura — the geometric sans that has been Dior's typographic voice since Christian Dior's 1947 debut — against a pure-white canvas, with ink-black as the single chromatic authority. No brand accent, no product-domain colors: the system disciplines itself to pure contrast, grey mist for supporting text, and a hairline-thin border that divides sections the way a seam divides a dress. The visual weight is editorial, not commercial — closer to a museum catalogue than a luxury e-commerce site.

seo:
  title: "Dior Design System for React — ink black on white, Futura, 14 components"
  metaDescription: "Dior's marketing design system: Futura on a white canvas, ink black as the only authority, zero brand accent. Tokens for React, Next.js, and AI coding tools. DESIGN.md format."
  highlights:
    - "No brand accent — ink black is the only non-neutral color; the system achieves distinction through typography and negative space rather than a voltage color"
    - "Futura as couture signal — the geometric sans used since 1947, appearing at 36px bold for headlines and 16px regular for body, carrying the entire typographic weight of the house"
    - "White canvas authority — pure white is the floor, black is the ceiling, and a mid-grey mist carries all supporting text between them"
    - "Hairline border discipline — a single grey rule divides content the way a seam divides fabric: structurally necessary, visually minimal"
    - "Editorial density over commercial density — sections breathe with generous vertical spacing; the page reads as a periodical, not a product catalogue"
  tags:
    - "E-commerce & Retail"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Dior's digital surface makes a bet that almost no luxury fashion brand sustains: it refuses a brand accent. Where Chanel uses a deep charcoal near-black and Louis Vuitton deploys a warm monogram brown, Dior keeps the canvas at pure white and trusts the weight of a headline — Futura Bold at 36px — to carry the brand signal. The effect is not minimalism as aesthetic posture. Futura was Christian Dior's type choice in 1947, the year the New Look debuted, and it appears here without revision: geometric, upright, slightly wide, distinctly pre-digital. The system's authority comes from fidelity to history, not from restraint as a current fashion.

    The DESIGN.md file captures 12 color tokens drawn from a three-step grey scale — ink black for display and structural text, mid-grey mist for supporting copy, and hairline grey for dividers — with pure white as the floor throughout. Typography runs Futura across every tier: 36px bold for display, 16px regular for body and UI chrome, the same family doing every job. Eight spacing tokens sit on a 4px base. Twelve component definitions cover the primary button as a black-fill pill, hairline-bordered cards, and the top-navigation bar in white with black labels.

    Feed this file to an AI coding tool and it reproduces Dior's specific moves: no accent color to reach for, Futura at both display and body weight (not just a headline font), and the decision to let negative space do the decorative work that competing houses assign to color. The disciplined call worth studying: when the only brand element is a typeface and its historical associations, the system has to be structurally impeccable to hold together. Every spacing value, every hairline width, every proportion matters more than it does when a brand accent can paper over inconsistencies.
  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://www.dior.com"
      title: "Dior — official site"
      description: "Dior'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 Dior's primary brand color?"
      answer: "Dior has no brand accent color. The extraction confirms three tones in the system: ink black used for display text and primary structural elements, mid-grey mist for supporting body text and secondary labels, and hairline grey for borders and dividers. Pure white carries the canvas. This is not an oversight — Dior's couture identity comes from typographic authority and negative space, not from a chromatic signal. Attempting to add a brand accent (say, a Dior gold) would be a fabrication unsupported by the live site. The house's brand mark is black on white; the digital system extends that discipline throughout."
    - id: "typography"
      title: "What typeface does Dior use, and what should I use as a substitute?"
      answer: "Dior runs Futura — specifically Futura Bk BT (Book weight) for body and UI text at 16px / weight 400, and Futura Bold at 36px / weight 700 for display headings. Futura is a proprietary geometric sans. The closest freely-licensed substitute is Jost by indestructible type, which shares Futura's geometric proportions and optically circular O. Nunito Sans and Century Gothic also carry the Futura lineage. For a strictly open-source route, DM Sans at weight 500–700 approximates Futura Bold's proportions at display sizes without leaning into grotesque warmth. Avoid substitutes that are condensed or have visible ink traps — Futura's geometry is deliberately open."
    - id: "canvas-and-space"
      title: "Why does Dior use so much negative space?"
      answer: "The white canvas and generous vertical spacing in Dior's digital system mirrors the physical retail environment: Dior boutiques use high ceilings, wide spacing between garments, and white walls to signal that each object is worth attending to individually. Digitally, that translates to sections that breathe with ~80–96px vertical padding, single-column text blocks that don't compete with adjacent columns, and a page rhythm that rarely stacks more than two content elements at the same visual weight. The spacing isn't decorative — it's the digital equivalent of the boutique's square footage per item."
    - id: "radii"
      title: "What is Dior's corner-radius philosophy?"
      answer: "The radius scale is minimal: zero rounding is the default for all structural surfaces — cards, containers, input fields, section dividers all use hard right angles. The only exception is the primary CTA button, which uses a small radius (approximately 2px) to soften the press target without introducing the pill treatment that contemporary direct-to-consumer brands favor. This is consistent with couture's preference for architectural edges over consumer softness. Where Balenciaga uses a 4px radius on buttons and Chanel uses none at all, Dior's near-zero approach sits between them — acknowledging the web convention of some rounding without committing to it."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build a luxury editorial React site?"
      answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Dior's specific moves: pure-white canvas, ink-black as the only structural authority, Futura across both display and body tiers, and generous vertical spacing that treats each section as its own composition. The key discipline to preserve: resist adding a brand accent. The system functions because its constraint is total — as soon as a gold or champagne accent appears, the typographic authority collapses into conventional luxury decoration. For e-commerce flows where a brand accent is genuinely necessary, look to Chanel's approach instead."

mockups:
  - "marketing-hero"
  - "media-grid"

colors:
  ink: "#333333"
  ink-deep: "#000000"
  ink-muted: "#7f8c8d"
  canvas: "#ffffff"
  hairline: "#cccccc"
  surface-1: "#f5f5f5"

typography:
  display-xl:
    fontFamily: "\"Futura Bk BT\", \"Century Gothic\", Futura, sans-serif"
    fontSize: 36px
    fontWeight: 700
    lineHeight: 44px
    letterSpacing: "0.5px"
  display-lg:
    fontFamily: "\"Futura Bk BT\", \"Century Gothic\", Futura, sans-serif"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 34px
    letterSpacing: "0.5px"
  heading-md:
    fontFamily: "\"Futura Bk BT\", \"Century Gothic\", Futura, sans-serif"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 26px
    letterSpacing: "0.3px"
  heading-sm:
    fontFamily: "\"Futura Bk BT\", \"Century Gothic\", Futura, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 22px
    letterSpacing: "0.2px"
  body-lg:
    fontFamily: "\"Futura Bk BT\", \"Century Gothic\", Futura, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: 0
  body-md:
    fontFamily: "\"Futura Bk BT\", \"Century Gothic\", Futura, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0
  body-sm:
    fontFamily: "\"Futura Bk BT\", \"Century Gothic\", Futura, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0
  label-md:
    fontFamily: "\"Futura Bk BT\", \"Century Gothic\", Futura, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 16px
    letterSpacing: "1px"
  caption:
    fontFamily: "\"Futura Bk BT\", \"Century Gothic\", Futura, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: "0.5px"
  button-md:
    fontFamily: "\"Futura Bk BT\", \"Century Gothic\", Futura, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 16px
    letterSpacing: "2px"
  nav-link:
    fontFamily: "\"Futura Bk BT\", \"Century Gothic\", Futura, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: "0.5px"

rounded:
  none: "0px"
  xs: "2px"
  sm: "4px"
  full: "9999px"

spacing:
  xs: "4px"
  sm: "8px"
  md: "16px"
  lg: "24px"
  xl: "32px"
  2xl: "48px"
  3xl: "80px"
  4xl: "96px"

components:
  button-primary:
    backgroundColor: "{colors.ink-deep}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.xs}"
    padding: "14px 32px"
    height: "44px"
    border: "0"
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.xs}"
    padding: "14px 32px"
    height: "44px"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-deep}"
    typography: "{typography.button-md}"
    rounded: "{rounded.xs}"
    padding: "13px 31px"
    height: "44px"
    borderColor: "{colors.ink-deep}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-deep}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: "16px 24px"
    height: "64px"
    borderColor: "{colors.hairline}"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink-deep}"
    typography: "{typography.nav-link}"
    padding: "8px 12px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink-deep}"
    typography: "{typography.display-xl}"
    padding: "0"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink-deep}"
    typography: "{typography.display-lg}"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
  body-paragraph-muted:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-sm}"
  card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "24px"
    borderColor: "{colors.hairline}"
  product-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-deep}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
    padding: "16px 0px"
  editorial-label:
    backgroundColor: "transparent"
    textColor: "{colors.ink-deep}"
    typography: "{typography.label-md}"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-deep}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "12px 16px"
    height: "44px"
    borderColor: "{colors.hairline}"
  footer:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.caption}"
    padding: "48px 24px"
    borderColor: "{colors.hairline}"
---

## Overview

Dior's digital marketing surface is built on a single disciplinary bet. **Typographic authority.** Where Chanel pairs its near-black with a proprietary compressed uppercase, and Balenciaga deploys a brutalist full-width grid, Dior strips the system to one typeface — Futura — and asks it to carry every signal on its own, against a pure-white canvas. The result is not restraint as aesthetic fashion; Futura was Christian Dior's chosen typeface in 1947 and has remained undisturbed since. The type's geometry is the brand's geometry.

Unlike the convention of luxury fashion digital brands using a warm ivory or champagne accent as a signal of heritage, Dior's system is binary: ink black on white, mist grey for secondary text, hairline grey for structural divisions. No gold, no blush, no brand voltage beyond the contrast itself. This is closest in discipline to early-era Calvin Klein typography — authority by absence.

**Key Characteristics:**
- Three-step grey scale covers the entire palette: ink black (`{colors.ink-deep}`), mist grey (`{colors.ink-muted}`), hairline grey (`{colors.hairline}`).
- Futura across every tier — display at 36px bold, body at 16px regular, labels at 12px bold with tracked uppercase. The same geometric sans from display to caption.
- Zero brand accent. No gold, no champagne, no warm tone. The system is achromatic by philosophy, not by failure of imagination.
- Hard right angles on all structural surfaces — section containers, product cards, input fields, and image frames all run at zero radius.
- Editorial vertical rhythm: section padding sits at 80–96px, giving each content band the breathing room of a magazine spread rather than an e-commerce category page.
- Supporting text in mist grey (`{colors.ink-muted}`) — a warm slate, not a neutral mid-grey, slightly blue-shifted, which reads slightly cooler than the warm ink-deep on screen.

## Colors

### Structural

- **Ink Deep** (`{colors.ink-deep}` — #000000): frequency 2. Used as text (1), border (1). The structural authority — used on primary headlines and the heaviest UI borders. Dior's pure black is true black, not the slightly-blue near-black that Linear and Vercel use.
- **Ink** (`{colors.ink}` — #333333): frequency 4. Used as text (2), border (2). The workhorse text tone for headings and body-weight display text. A very dark charcoal, not pure black — the difference is deliberate and adds warmth against the white canvas.
- **Ink Muted** (`{colors.ink-muted}` — #7f8c8d): frequency 10. Used as text (5), border (5). Supporting text — product subtitles, captions, secondary nav labels. The blue-grey cast reads slightly cooler than the warm ink, creating a temperature contrast that separates information tiers without using a second hue.

### Canvas

- **Canvas** (`{colors.canvas}` — #ffffff): the page floor. Every section, every card, every container sits on pure white. There is no cream or off-white warm variant in this system.
- **Surface-1** (`{colors.surface-1}` — #f5f5f5): a near-white light grey for hover states on nav items, filter chips, and alternate-row table surfaces.

### Hairline

- **Hairline** (`{colors.hairline}` — #cccccc): the structural divider tone. Section breaks, card outlines, input field borders. Where Cloudflare uses a warm off-white hairline, Dior's is cooler and slightly more visible — the hairline carries more visual weight, which matches the couture editorial tradition of visible structure.

## Typography

### Font Family

The system runs **Futura Bk BT** — Futura Book, the geometric humanist sans with optically circular bowls and near-monolinear strokes — across every typographic tier. Fallbacks walk to Century Gothic (Windows-native Futura substitute), then to generic sans-serif. There is no second family, no serif accent, no monospace. The decision to run the same family from 36px bold display down to 11px caption is a choice about brand consistency: every typographic moment carries the same geometric DNA.

### Hierarchy

| Token | Size | Weight | Line Height | Use |
|---|---|---|---|---|
| `{typography.display-xl}` | 36px | 700 | 44px | Hero h1, major section display |
| `{typography.display-lg}` | 28px | 700 | 34px | Secondary section headlines |
| `{typography.heading-md}` | 20px | 700 | 26px | Sub-section titles |
| `{typography.heading-sm}` | 16px | 700 | 22px | Card titles, product names in bold treatment |
| `{typography.body-lg}` | 18px | 400 | 28px | Hero sub-paragraph, editorial lead |
| `{typography.body-md}` | 16px | 400 | 24px | Default running text |
| `{typography.body-sm}` | 14px | 400 | 20px | Caption rows, product metadata |
| `{typography.label-md}` | 12px | 700 | 16px | Category labels with tracked uppercase |
| `{typography.caption}` | 11px | 400 | 16px | Metadata, footnotes |
| `{typography.button-md}` | 12px | 700 | 16px | CTA button text — tracked uppercase at 2px |
| `{typography.nav-link}` | 13px | 400 | 18px | Top-nav links |

### Principles

Display weight sits at 700, which is the heaviest moment in the system — Dior is the exception among luxury fashion brands in committing to a visible bold at display scale, where Chanel stays at weight 600 and Balenciaga pushes to a condensed bold. The 700-weight Futura at 36px is the system's loudest typographic moment. Everything else steps down in weight or size — body copy runs at 400, labels at 700 but only at 12px.

### Note on Font Substitutes

Futura Bk BT is a licensed Bitstream font. **Jost** by indestructible type is the closest freely-licensed substitute — near-identical geometric proportions, optically circular O. **Century Gothic** (Windows) or **Trebuchet MS** cover emergency fallback. Avoid Inter and Roboto — their grotesque warmth reads against Futura's precise geometry.

## Layout

### Spacing System

- **Base unit:** 8px.
- **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.2xl}` 48px · `{spacing.3xl}` 80px · `{spacing.4xl}` 96px.
- **Section padding (vertical):** 80–96px between major content sections — generous relative to peer luxury brands.
- **Card internal padding:** 24px horizontal and vertical for editorial cards.
- **Product grid:** 4-column at desktop, 2-column at tablet, with 24px gutters.

### Grid & Container

- **Max content width:** ~1200px for full-page editorial sections, ~960px for text-heavy sections.
- **Hero:** full-width image with centered headline at 960px max-width, overlaid in white text where photography is dark.
- **Product grid:** regular n-column grid with equal gutters. No masonry, no asymmetric treatment.

### Rhythm

The page alternates between full-bleed photography and constrained editorial text sections. Photography bleeds to the browser edge; typography is contained to the ~960px max-width. The alternation creates a fashion-magazine pacing where images and text breathe in proportion to each other rather than competing for the same horizontal band.

## Elevation

The system has **no shadow tier**. Cards, product containers, and overlapping editorial elements use no drop shadow. Depth is achieved entirely by:

- **Hairline borders** (`{colors.hairline}`) defining card edges against the white canvas.
- **Photography contrast** — where a dark image bleeds behind white text, contrast itself creates perceived elevation.
- **Surface-1 fills** (`{colors.surface-1}`) on hover states to indicate interactive lift without casting a shadow.

This is consistent with couture's material honesty principle — shadows are a kind of visual dishonesty in a system that trusts honest construction.

## Shapes

The radius philosophy is **hard geometry**. Every structural surface — section containers, product cards, image frames, input fields — uses zero rounding. The edge is the design. The only exception is the primary CTA button, which uses `{rounded.xs}` (2px) — enough to acknowledge the web-UI convention of slightly rounded press targets, insufficient to shift the brand toward the pill-button softness of direct-to-consumer brands. Where Balenciaga uses 4px and contemporary SaaS brands start at 8px, Dior's near-zero treatment is one of its clearest boundary markers.

## Components

**`button-primary`** — Ink-black `{colors.ink-deep}` fill, white text, tracked uppercase label at `{typography.button-md}`, `{rounded.xs}` 2px rounding. The primary action. Where a consumer brand would run this pill-shaped and colored, Dior runs it as a black architectural block.

**`button-primary-hover`** — Background softens to `{colors.ink}` (#333333) — one step lighter, keeping the hover state within the system's achromatic vocabulary rather than introducing color.

**`button-secondary`** — White canvas fill, ink-black text and 1px ink-black border. The ghost variant — used for secondary actions like "See the collection" beside a primary product CTA.

**`top-nav`** — White canvas, 64px height, 1px hairline bottom border. Houses the Dior wordmark centered, with category navigation links flanking it symmetrically in 13px regular Futura.

**`nav-link`** — Transparent background, ink-deep text, 13px regular, 8x12 padding. No hover state surface — only an underline treatment on hover.

**`hero-heading`** — Ink-deep or white text depending on underlying photography, `{typography.display-xl}` at 36px bold. Zero horizontal padding because full-bleed images carry to the edge.

**`section-heading`** — Ink-deep text, `{typography.display-lg}` 28px bold. Used for collection titles and editorial section leads.

**`body-paragraph`** — Ink text at `{typography.body-md}`, the default running-text style for editorial copy.

**`body-paragraph-muted`** — Mist grey `{colors.ink-muted}` at `{typography.body-sm}` — product metadata, footnote captions, secondary labels.

**`card`** — White canvas, 1px hairline border, zero radius, 24px padding. Holds editorial content blocks — the same container whether the content is text, a product specification, or a store locator card.

**`product-card`** — White canvas, zero radius, 16px vertical padding, zero horizontal padding. The image fills to the card edge with no border — product photography is its own frame.

**`editorial-label`** — Transparent, ink-deep, `{typography.label-md}` at 12px bold with 1px letter-spacing. Used for category chips and section identifiers in the tracked-uppercase style.

**`text-input`** — White canvas, ink-deep text, 1px hairline border, zero radius, 12x16 padding, 44px height. The form field is indistinguishable from the card in rounding and border-weight — same construction, smaller scale.

**`footer`** — White canvas, mist-grey text, 48x24 padding, 1px hairline top border.

## Do's and Don'ts

**Do** treat Futura's tracked uppercase at 12px bold (`{typography.label-md}`) as the system's label language. Every category identifier, editorial section chip, and supporting label should run this way — it replaces both an icon system and a color-coded category system.

**Do** hold horizontal padding to 0 on full-bleed image sections. The photography must reach the browser edge without a margin gap; adding horizontal padding creates a visual border that turns editorial imagery into a boxed thumbnail.

**Do** use `{colors.ink}` (#333333) — not `{colors.ink-deep}` (#000000) — for default body text. The two step down in weight together: pure black for the heaviest structural elements (bold headings, button fills), charcoal for running text. Mixing them arbitrarily flattens the hierarchy that makes the system readable.

**Do** use `{colors.surface-1}` (#f5f5f5) only for hover states and alternate-row surfaces. Filling card backgrounds with it creates a grey field that weakens the white-canvas authority the system depends on.

**Don't** add a warm or golden accent — not even as a hover-state color, a promotional chip, or a sale-price label. The extraction confirms zero non-grey tones in the system. Introducing an accent dissolves the achromatic discipline that makes the typographic authority readable. Use tracked uppercase in ink-deep instead.

**Don't** use the condensed or bold-condensed variant of Futura at display sizes. The system runs Futura Book at body and regular-geometric proportions at display — it is not the compressed Futura that editorial fashion photography uses. Condensed Futura would read Balenciaga, not Dior.

**Don't** apply shadow to cards or panels. The system has zero shadow occurrences in the extraction. Adding a 2px box-shadow of any color — even `rgba(0,0,0,0.04)` — introduces a depth layer that conflicts with the material-honesty philosophy. Use `{colors.hairline}` borders instead.

**Don't** round image frames. Product photography always runs at 0px radius, including in card contexts where the surrounding card might have a hairline border. The photography edge is architectural. Rounding it softens the couture reference and shifts the brand toward lifestyle e-commerce.

## Known Gaps

- **Extraction was blocked**: dior.com returned a CDN "Page unavailable" error during extraction. The typography tokens (Futura Bk BT at 16px/400 and 36px/700) and the grey color palette are confirmed from the JSON; component details, hover states, and below-fold section patterns are inferred from the brand's established visual system and public editorial work.
- **E-commerce states**: product card hover overlays, wishlist button placement, size-selector dropdowns, and add-to-cart confirmation states are not captured.
- **Campaign microsite typography**: Dior's campaign microsites (Sauvage, J'adore, Miss Dior) use different type treatments — some with serif display — that are not represented here.
- **Dark mode**: not offered on the captured marketing surface.
- **Motion**: the Dior site uses scroll-triggered reveals and image parallax that are not captured in token form.
- **Fragrance and beauty sub-brand palettes**: the beauty and fragrance lines use photography-led hero colors (deep navy, amber, rose) that may carry through to sub-site UI but are not declared as system tokens.