What is Dior's primary brand color?

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.

What typeface does Dior use, and what should I use as a substitute?

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.

Why does Dior use so much negative space?

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.

What is Dior's corner-radius philosophy?

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.

Can I use this DESIGN.md to build a luxury editorial React site?

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.

Dior Design System

Dior's marketing design system: Futura on a white canvas, ink black as the only authority, zero brand accent.

About Dior DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source dior.com

E-commerce & Retail

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.

What makes it distinct

No brand accentink black is the only non-neutral color; the system achieves distinction through typography and negative space rather than a voltage color
Futura as couture signalthe 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 authoritypure white is the floor, black is the ceiling, and a mid-grey mist carries all supporting text between them
Hairline border disciplinea single grey rule divides content the way a seam divides fabric: structurally necessary, visually minimal
Editorial density over commercial densitysections breathe with generous vertical spacing; the page reads as a periodical, not a product catalogue

Live at dior.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

dior.com

Explore Dior

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Dior design system FAQ

Common questions about Dior's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Dior — official site

Dior's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.