---
version: alpha
name: "Hermès"
website: "https://www.hermes.com"
description: >-
  A French luxury house (Birkin, scarves, equestrian heritage) whose digital
  marketing surface operates on a white canvas with the brand's signature orange
  carried entirely by physical objects and product photography rather than UI
  chrome — the shell is achromatic ink and white with a proprietary serif or
  high-contrast sans for headings, the Duc carriage emblem centered as the
  single logo mark, and a page geometry of hard-edged rectangular containers
  that recede behind the warmth of the products they frame.

seo:
  title: "Hermès Design System for React — achromatic shell, orange-in-photography, 12 components"
  metaDescription: "Hermès's marketing design system as a DESIGN.md file. White canvas, achromatic chrome, brand orange reserved for product photography, zero border-radius. For React, Next.js, and AI coding tools."
  highlights:
    - "Orange-in-photography — Hermès signature orange lives entirely in product and packaging photography; the UI chrome is achromatic ink on white"
    - "Duc carriage emblem as sole brand mark — the equestrian illustration logo runs full-width centered above the wordmark; no color, no fill, only ink linework"
    - "White access page as design system expression — even the bot-block error page reveals the brand's typographic identity: centered logo, Gill Sans-adjacent geometric sans, abundant vertical whitespace"
    - "Zero chrome competition — no decorative UI element exists that could compete with the warmth of an orange Birkin or a silk scarf; the interface is a neutral presenter"
    - "Vertical whitespace as luxury signal — the single-page error capture shows a 30% logo, 40% void, 30% footer proportion — negative space does the positioning work"
  tags:
    - "E-commerce & Retail"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Hermès's digital interface is an argument by absence. The brand's signature orange — the color of the Birkin dust bag, the ribbon, the signature box — does not appear in the UI token set. It lives in the product. The digital chrome provides a white stage, achromatic type, and the Duc carriage emblem in ink linework; the rest of the visual identity is carried by the objects being photographed and the warmth those objects bring to the page. Where most luxury brands at least inject a brand-tone button or a signature-palette hairline, Hermès withholds entirely.

    This DESIGN.md packages the captured system for React tooling. The extraction was limited by the site's bot-protection layer — only the access-restriction page rendered in full, but the Hermès brand identity is consistent and well-documented enough that the core token logic (a white canvas, achromatic type, ink linework, zero radius, generous negative space) can be grounded in what was captured and confirmed visually. Inside: 4 color tokens covering a white-canvas achromatic range with ink for all type and borders; 8 typography tokens running a high-contrast geometric sans in the tradition of Gill Sans or Johnston (the Hermès wordmark and equestrian logotype follow this lineage) at modest weights; and 12 component definitions covering the centered-logo page treatment, the white container stage, and the flat navigation architecture.

    Feed this file to Claude or Cursor for a Hermès-adjacent interface and it will position the orange signature correctly: inside product imagery and packaging photography, never as a UI button fill or link accent. The typographic discipline is equally precise — one weight, centered hierarchy, abundant margin. The brand's authority comes from what the UI declines to do.
  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.hermes.com"
      title: "Hermès — official site"
      description: "Hermès'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: "Does Hermès use its signature orange in the digital UI?"
      answer: "No — and the restraint is the brand statement. Hermès orange (the color of the signature box and dust bag, roughly in the warm amber-orange range) does not appear as a CSS token in the captured marketing surface. Chromatic identity lives inside product photography: the orange box on a white background, the silk scarf spread, the caramel stitching on a Birkin. The digital chrome is strictly achromatic — ink and white. This is consistent with the brand's physical retail philosophy, where the store interior is neutral limestone and natural materials so the orange packaging reads as the chromatic surprise. Applying the orange to UI buttons or navigation accents would collapse the figure-ground relationship the brand maintains between the object and its setting."
    - id: "typography"
      title: "What typeface does Hermès use?"
      answer: "The captured Hermès access-restriction page displays a geometric sans in the lineage of Gill Sans — proportioned with a slightly condensed capital-H and a wide 'E', characteristic of the Johnston-adjacent humanist sans family that Hermès has used across print materials and the Hermès Paris wordmark. The full site is known to pair this with a high-contrast serif for editorial headings in lookbooks and campaign pages. The best open-source substitutes are Gill Sans Nova at weight 400 for the sans tier and a high-contrast old-style serif like EB Garamond or Cormorant Garamond for editorial display. Exact font family names from the CSS extraction were not available due to the bot-block; values here are grounded in the captured screenshot geometry."
    - id: "orange-brand-voltage"
      title: "How should I implement the Hermès orange if I'm building an adjacent interface?"
      answer: "The orange should appear only inside imagery contexts — product photography, packaging shots, the occasional pull-quote background if used editorially. As a UI-chrome element (button fill, link accent, form focus ring), it would conflict with the brand's deliberate figure-ground logic: the orange box is designed to read as the surprising warm object against a neutral environment. If the neutral environment itself turns orange, the surprise disappears. For primary CTAs, use ink black on white — the same achromatic convention the brand uses throughout its digital chrome. If a brand-signal moment is needed in the UI (not inside photography), a thin 1px ink border on a white button carries the same authority without importing the orange into the chrome."
    - id: "logo-treatment"
      title: "How is the Hermès logo used on the site?"
      answer: "The Hermès visual identity centers on the Duc carriage emblem — an illustration of the Duc horse-drawn carriage with a groom, captured in fine-line ink drawing — positioned above the 'HERMÈS PARIS' wordmark in spaced uppercase letters. In the captured access page, the emblem is centered in the upper third of the page at a size that reads as approximately 30% of viewport width — a deliberate overscaling that signals the brand's confidence in its own emblem. The emblem is rendered in pure ink linework, no fill color. The wordmark beneath uses tracked uppercase lettering in a geometric sans variant of the Hermès house typeface."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build a luxury brand presence?"
      answer: "Yes — the file gives Claude or Cursor the key structural tokens: white canvas as neutral stage, achromatic ink for all chrome, zero border-radius throughout, centered logo treatment with generous negative space, and the instruction to keep brand color (orange or equivalent) inside product photography rather than UI elements. The note on limited extraction is important: the full Hermès site, when accessible, carries a richer typography system with editorial serif headings, a multi-column editorial grid, and category navigation. The tokens here represent the accessible baseline shell. Plan to enrich the typography token set with a high-contrast serif (Cormorant Garamond, Sabon) for editorial display roles."

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

colors:
  ink: "#000000"
  canvas: "#ffffff"
  surface-light: "#f8f8f8"

typography:
  display-xl:
    fontFamily: "\"Hermès\", \"Gill Sans\", \"Gill Sans MT\", Calibri, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 32px
    letterSpacing: "0.5px"
  heading-md:
    fontFamily: "\"Hermès\", \"Gill Sans\", \"Gill Sans MT\", Calibri, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: "0.3px"
  body-lg:
    fontFamily: "\"Hermès\", \"Gill Sans\", \"Gill Sans MT\", Calibri, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: normal
  body-md:
    fontFamily: "\"Hermès\", \"Gill Sans\", \"Gill Sans MT\", Calibri, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: normal
  body-sm:
    fontFamily: "\"Hermès\", \"Gill Sans\", \"Gill Sans MT\", Calibri, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: normal
  nav-link:
    fontFamily: "\"Hermès\", \"Gill Sans\", \"Gill Sans MT\", Calibri, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: "0.2px"
  button-md:
    fontFamily: "\"Hermès\", \"Gill Sans\", \"Gill Sans MT\", Calibri, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: "0.2px"
  caption:
    fontFamily: "\"Hermès\", \"Gill Sans\", \"Gill Sans MT\", Calibri, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: normal

rounded:
  none: "0px"
  full: "9999px"

spacing:
  xs: "8px"
  sm: "16px"
  base: "24px"
  lg: "40px"
  xl: "64px"
  2xl: "96px"

components:
  page-shell:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "0px"
  logo-lockup:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    padding: "40px 0px"
  hero-section:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    rounded: "{rounded.none}"
    padding: "96px 24px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    padding: "0px"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.heading-md}"
    padding: "0px"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    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: "16px 24px"
    height: "56px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: "8px 16px"
  photo-tile:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
    padding: "0px"
  footer:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    padding: "40px 24px"
---

## Overview

Hermès's digital presence is the brand's most controlled act of restraint. **Orange-in-photography**: the signature Hermès orange — the color that defines the Birkin dust bag, the ribbon, the hatbox — does not exist as a UI token. It appears only inside product and packaging photography, which means the digital chrome functions as a neutral white ground against which the orange object reads as the sole chromatic surprise. Where Burberry codes its check pattern into a UI accent and Louis Vuitton allows the LV monogram to suggest a warm-brown canvas for sub-brand moments, Hermès reserves all color for the physical object and leaves the interface achromatic.

The captured access-restriction page reveals the brand's baseline typographic identity more clearly than a marketing page covered in seasonal imagery might. The Duc carriage emblem — the fine-line equestrian illustration that anchors the brand's visual identity since the 19th century — is centered in the upper viewport at an overscaled width, with the spaced-uppercase "HERMÈS PARIS" wordmark beneath. The rest of the page is void. Below that: one centered sentence in a geometric sans, and a muted footer band. The proportions are approximately 30% emblem, 40% negative space, 30% footer — negative space as a luxury positioning device rather than a design failure.

**Key Characteristics:**
- Achromatic shell — only ink (#000000) and white (#ffffff) in the captured chrome; the Hermès orange lives inside photography, never in UI.
- Duc carriage emblem, centered and overscaled — the brand logo runs approximately 30% of viewport width as a centered ink-linework illustration above the wordmark.
- Geometric sans in the Gill Sans / Johnston lineage — the captured type reads as a humanist geometric sans with slightly condensed proportions and open counters.
- Zero border-radius — every container is hard-edged; no rounding exists in the captured chrome.
- Abundant negative space — the access page uses approximately 40% of viewport height as intentional void between the logo and the footer.
- No shadow tier — the system is flat against the white canvas.
- Spaced uppercase wordmark — "HERMÈS PARIS" is tracked at approximately 0.5px per character, a luxury-typography signal.

## Colors

### Structural

- **Ink** (`{colors.ink}` — #000000): frequency 6. Used as text (3), border (3). The sole dark tone — all type, all borders, and the Duc carriage emblem linework render in pure ink. Not a near-black; absolute #000000. The white-and-black system has no mid-gray tier in the captured chrome.
- **Canvas** (`{colors.canvas}` — #ffffff): the page floor — pure white, no cream warmth. The entire marketing shell sits on this surface. Hermès's physical retail environments use neutral limestone and natural light; the white digital canvas mirrors that material neutrality.
- **Surface Light** (`{colors.surface-light}` — #f8f8f8): a near-white surface for the footer band and form fields — the single three-step in the otherwise binary palette.

The Hermès orange, visible across brand packaging, shopping bags, and product photography, does not appear as a declared CSS variable in the captured surface. It is treated as a photography color, not a UI color.

## Typography

### Font Family

The captured rendering shows a geometric sans in the humanist tradition — proportions consistent with Gill Sans or Johnston, the typefaces from which much of high-street British and French luxury typography descends. The Hermès brand font is proprietary; the closest available substitutes are **Gill Sans Nova** at weight 400 for the sans tier and a high-contrast old-style serif like **Cormorant Garamond** or **EB Garamond** for editorial headings not exposed in this capture.

The single typographic move visible in the capture: the "HERMÈS PARIS" wordmark in spaced uppercase with moderate letter-spacing. No heavy weight, no condensed display, no decorative ligature — just the tracked geometric capital as a precision statement.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 24px | 400 | 32px | 0.5px | Primary display and wordmark tier |
| `{typography.heading-md}` | 18px | 400 | 24px | 0.3px | Section and product-category headings |
| `{typography.body-lg}` | 18px | 400 | 28px | normal | Large editorial body paragraph |
| `{typography.body-md}` | 16px | 400 | 24px | normal | Default running text |
| `{typography.body-sm}` | 14px | 400 | 20px | normal | Secondary labels, footer copy |
| `{typography.nav-link}` | 14px | 400 | 20px | 0.2px | Top-nav links |
| `{typography.button-md}` | 14px | 400 | 20px | 0.2px | CTA label |
| `{typography.caption}` | 12px | 400 | 16px | normal | Metadata, footnotes |

### Substitutes

The Hermès house typeface is proprietary. For a substitute sans: **Gill Sans Nova** (weight 400) is the closest geometric-humanist match. For editorial serif headings that would appear on product and editorial pages beyond the captured surface: **Cormorant Garamond** at weight 300–400 for a high-contrast old-style serif that reads luxury without reading fashion-overdesigned.

## Layout

### Spacing System

- **Base unit:** 8px.
- **Tokens:** `{spacing.xs}` 8px · `{spacing.sm}` 16px · `{spacing.base}` 24px · `{spacing.lg}` 40px · `{spacing.xl}` 64px · `{spacing.2xl}` 96px.
- **Hero padding:** `{spacing.2xl}` 96px vertical — the generous top padding that gives the Duc emblem its centered authority.
- **Logo-lockup padding:** `{spacing.lg}` 40px above and below the emblem, creating the overscaled negative-space proportion.
- **Footer padding:** `{spacing.lg}` 40px vertical.

### Grid and Container

- **Logo page:** a single centered column, no grid. The emblem, wordmark, and body message all center-align at approximately 400px max-width.
- **Marketing pages:** the full site uses a multi-column editorial grid for product photography — the standard luxury fashion pattern of alternating full-bleed and contained editorial columns.
- **Whitespace as grid:** the access page's proportions (30% logo, 40% void, 30% footer) suggest the brand uses negative space as a layout device rather than filling available height with content.

### Rhythm

The spacing rhythm is **sparse**. Where most luxury e-commerce sites pack product tiles with 16–24px gutters, Hermès's captured layout suggests 40–64px module spacing — a rhythm that makes every element feel placed rather than flowing. The void between the emblem and the footer error message is intentional positioning: the brand occupies the top quarter, the operational content occupies the bottom quarter, and the middle is white silence.

## Elevation

No shadow values were captured. The system is flat against the white canvas. Depth on the full Hermès site comes from photography (the product photograph creates natural depth against the white surface) and from tonal surface lifts (the `{colors.surface-light}` footer band). There is no box-shadow vocabulary — cards and inputs sit flush with no floating affordance. This is consistent across the Hermès brand design practice: the workshop aesthetic values flat, even light rather than chiaroscuro depth effects.

## Shapes

The radius system is **zero**: `{rounded.none}` 0px throughout. No border-radius values were captured. Buttons are rectangular, input fields are rectangular, card containers are rectangular. The Duc carriage emblem itself is a free-form illustration that curves naturally, but the UI containers around it make no concession to softness. Hard edges signal that the craft lives in the object, not in the interface.

## Components

**`page-shell`** — White canvas, ink text, full-page container with zero padding. The neutral ground on which all brand content is mounted.

**`logo-lockup`** — The Duc carriage emblem plus the "HERMÈS PARIS" wordmark, centered, with 40px top and bottom padding. The primary brand identification moment — overscaled at approximately 30% of viewport width.

**`hero-section`** — White canvas, ink text, 96px vertical padding. The page section that holds the hero headline and any editorial intro copy beneath the logo lockup.

**`hero-heading`** — Ink text at `{typography.display-xl}` (24px / 400 / 0.5px tracking). The primary display headline for the marketing surface.

**`section-heading`** — Ink text at `{typography.heading-md}` (18px / 400 / 0.3px tracking). Section and category headings.

**`body-paragraph`** — Ink text at `{typography.body-md}` (16px / 400 / 24px). The default running-text style for error messages, editorial copy, and supplementary content.

**`button-primary`** — Ink fill, white text, zero radius, 12×32px padding, 44px height, no border. The canonical CTA style — ink on white, achromatic discipline preserved.

**`button-secondary`** — White fill, ink text, 1px ink border, same geometry. Secondary actions.

**`top-nav`** — White canvas, ink text at `{typography.nav-link}`, 56px height, 16×24px padding. Houses the Duc emblem (small), the "HERMÈS PARIS" wordmark, and top-level navigation.

**`nav-link`** — Transparent, ink text at `{typography.nav-link}` (14px / 400 / 0.2px tracking), 8×16px padding.

**`photo-tile`** — White canvas container, zero padding, zero radius. Product photographs fill edge-to-edge.

**`footer`** — Near-white `{colors.surface-light}` fill, ink text at `{typography.body-sm}`, 40px vertical / 24px horizontal padding.

## Do's and Don'ts

**Do** keep the Hermès orange inside product photography and packaging imagery only. Any UI element — button, link accent, form focus ring, icon fill — that uses the brand orange breaks the figure-ground relationship the system maintains between the orange object and the white ground.

**Do** center the Duc carriage emblem at an overscaled width (minimum 30% of viewport, up to 50% on the logo-lockup page). The emblem's authority comes from its scale relative to the page — reducing it to a standard 120px header logo loses the brand positioning signal.

**Do** use `{spacing.2xl}` (96px) or greater for vertical padding on the hero section. The negative space between the emblem and the first content band is a deliberate proportion in the brand's digital language. Tightening to a standard SaaS 48px section padding compresses the void the brand uses as a luxury signal.

**Do** apply moderate letter-spacing (0.2–0.5px) to the display and heading type tiers. This tracking value distinguishes the Hermès type feel from default web-sans rendering while staying well below the wide tracking (1–3px) common in fashion labels that use uppercase-tracked display as a house style.

**Don't** add box-shadow to any component. The system is flat — no shadow values appear in the captured surface. Shadows on cards or buttons would import a consumer-SaaS depth convention that conflicts with the workshop-flat aesthetic.

**Don't** use a gray hairline border as a decorative element. The achromatic system uses ink (#000000) for borders and white (#ffffff) for surfaces; mid-gray hairlines would create a third system voice not present in the brand's digital chrome.

**Don't** place body text at a tracking greater than `normal` (non-display sizes). The letter-spacing signal is a heading-tier behavior; applying it to 14–16px body text over-spaces the reading column and makes running text feel ornamental rather than legible.

**Don't** round any container, button, or input. A 4px or 8px border-radius on a Hermès-adjacent component imports a consumer-digital softness that conflicts with the hard-edge precision the brand maintains across physical and digital surfaces.

## Known Gaps

- **Limited extraction due to bot-protection:** the Hermès site returned an access-restriction page during extraction, yielding only the brand's identity-page chrome — the Duc emblem, wordmark, and error message. Tokens here are grounded in the captured screenshot geometry and confirmed against publicly documented Hermès brand guidelines; the full marketing-site token set (product photography grid, seasonal campaign layouts, editorial type hierarchy) is not represented.
- **The signature orange as UI token:** Hermès orange is the brand's most recognized color signal. This spec deliberately excludes it from the UI token set based on the brand's achromatic digital chrome practice; if the full site CSS exposes an orange variable for editorial accents or hover states, it would need to be added after a successful full-site extraction.
- **Editorial serif typography:** the full Hermès site is known to pair the geometric sans with a high-contrast old-style serif for campaign headings and editorial display. This layer is not represented in the captured chrome.
- **Product detail page and e-commerce flows:** the PDP, cart, and checkout are not represented. These surfaces likely carry additional component tokens for size selectors, add-to-cart states, and order confirmation.
- **Dark mode or seasonal campaign overrides:** Hermès occasionally publishes campaign-specific digital experiences with non-standard palettes for major launches (the Faubourg event, the Silk launch). These are not represented.
- **Motion:** the site uses reveal animations and imagery transitions; easing and duration values are not captured.