What is CHANEL's primary brand color?

CHANEL has no chromatic brand color. The extraction scanned 1847 elements and found nine distinct color values, all within a greyscale: the dominant tone is medium grey #767676 (367 occurrences as text and border), followed by pure white #ffffff (126 occurrences), light grey #9b9b9b (98), warm charcoal #333333 (97), near-black #1d1d1d (94), and ink black #000000 (40 in gradients and sparse text). There is a single CSS variable --swiper-theme-color set to cobalt blue #007aff, but this is a third-party Swiper library default and registers zero actual render occurrences — it is not part of the CHANEL system. The brand signal is the abchanel-corpo typeface, not a color.

What typefaces does CHANEL use, and what should I substitute?

CHANEL runs two typefaces: abchanel-corpo, a proprietary compressed face appearing at weight 600 in uppercase and lowercase variants (11–30px), for every UI label, heading, and navigation element; and Helvetica (with fallback to Open-Sans, sans-serif-light, sans-serif) at ultra-light weight 100–300 for body paragraphs, supporting text, and form fields. The two voices are deliberately polarized: proprietary compressed bold uppercase for identity, universal ultra-light sans-serif for content. For open-source substitutes: Univers Condensed Bold approximates abchanel-corpo's compressed geometry; for the body voice, any system font at weight 100–200 transfers the ultra-light feel, though a true Helvetica Neue Ultralight is closest.

Why does CHANEL use weight 100 for body text?

CHANEL's body paragraphs run Helvetica at weight 100 — ultra-light, typically the lightest weight a typeface offers. The extraction confirms this in the bodyText component: a paragraph about contacting CHANEL advisors renders in Helvetica weight 100 at 14px. The effect is a near-ghostly reading experience that makes the abchanel-corpo labels at weight 600 read as even more authoritative by contrast. Where most web UI runs body at 400 (regular) for readability, CHANEL intentionally sacrifices some rendering weight for the tonal contrast. It's a choice that works at larger text sizes and on high-DPI screens but may reduce legibility at small sizes or on low-resolution displays.

What is CHANEL's corner-radius philosophy?

The extraction found a single radius value in use: 40px, appearing once on a pill-shaped element. All other structural surfaces — the navigation bar, product cards, image frames, section containers, and the text input field — use zero rounding. The system is architecturally sharp-cornered by default, with a single pill exception for a specific UI element (likely a cookie consent or notification chip). This matches the couture tradition: hard edges read as architectural precision, as cut fabric with a straight seam rather than a curved one.

Can I use this DESIGN.md to build a luxury fashion 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 CHANEL's moves: white canvas, abchanel-corpo weight 600 uppercase for every identity-bearing label (substitute Univers Condensed Bold for open-source deployment), Helvetica ultra-light for body text, and zero chromatic accent anywhere. The key discipline: every label must run at abchanel-corpo (or its substitute) — using a generic sans for nav links or section headers immediately breaks the brand's typographic identity layer. The greyscale palette is intentionally shared with many other systems; the typeface is what makes it CHANEL.

CHANEL Design System

CHANEL's marketing design system as a DESIGN.md file.

About CHANEL DESIGN.md

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

E-commerce & Retail

CHANEL's digital system runs a five-step greyscale and stops there. The palette is pure white for the canvas, near-black for the hardest structural elements, and three intermediate greys separating information tiers — middle grey at 767676 for body text and borders (the most frequently used tone in the system, at 367 total occurrences), light grey at 9b9b9b for secondary labels, and warm charcoal at 333333 for heading-weight text. There is no chromatic accent, no brand rouge, no gold-adjacent warm. The identity is carried entirely by abchanel-corpo — a proprietary compressed uppercase typeface that appears on every navigation label, every product category, every section identifier, and the two interlocked C marks of the logo. Where other luxury houses use a brand color as their primary identity signal, CHANEL uses a letterform.

The DESIGN.md file captures 13 color tokens from the five-step greyscale, 11 typography tokens spanning abchanel-corpo at 11–30px (weight 600, uppercase or lowercase depending on context) and Helvetica at 12–14px (weight 100–300 for body and supporting text), a minimal radius scale (only 40px captured, used for a single pill element), 7 spacing tokens, and 17 component definitions. The extraction confirms one notable detail: CHANEL's body text runs Helvetica at weight 100 — ultra-light, unusual for running prose — which creates a deliberate contrast with the weight-600 uppercase abchanel-corpo labels.

Feed this file to Claude or Cursor and it reproduces CHANEL's specific moves: white canvas, abchanel-corpo uppercase at 12px / 600 for every label and navigation element, Helvetica at ultra-light for body paragraphs, and the absence of any chromatic accent. The discipline worth studying: the system functions because abchanel-corpo is doing the job that brand color normally does — it's the single signal that identifies this as CHANEL rather than any other luxury white-canvas site. Without it, the greyscale and Helvetica could belong to anyone.

What makes it distinct

Proprietary uppercase type as logoabchanel-corpo at 12px bold uppercase, with weight 600, is the brand mark at every scale from the interlocking CC to the navigation label
Five-step greyscale with no chromatic elementthe entire system runs from pure white through three grey tones to near-black, with zero hue involvement anywhere
Weight 600 as the only boldabchanel-corpo uses a single weight (600), which reads as simultaneously authoritative and controlled; there is no 700 or 800 tier
Helvetica as the deliberate supporting voicewhere other brands would use a second proprietary family, CHANEL uses a universal system font, making abchanel-corpo the sole carrier of identity
Full-bleed photography over token decorationthe site's visual richness comes entirely from campaign imagery; the UI chrome is stripped to the minimum that keeps photography centered

Live at chanel.com

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

chanel.com

Explore CHANEL

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.

CHANEL design system FAQ

Common questions about CHANEL'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.

CHANEL — official site

CHANEL'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.