Does Hermès use its signature orange in the digital UI?

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.

What typeface does Hermès use?

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.

How should I implement the Hermès orange if I'm building an adjacent interface?

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.

How is the Hermès logo used on the site?

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.

Can I use this DESIGN.md to build a luxury brand presence?

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.

Hermès Design System

Hermès's marketing design system as a DESIGN.md file.

About Hermès DESIGN.md

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

E-commerce & Retail

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.

What makes it distinct

Orange-in-photographyHermès signature orange lives entirely in product and packaging photography; the UI chrome is achromatic ink on white
Duc carriage emblem as sole brand markthe equestrian illustration logo runs full-width centered above the wordmark; no color, no fill, only ink linework
White access page as design system expressioneven the bot-block error page reveals the brand's typographic identity: centered logo, Gill Sans-adjacent geometric sans, abundant vertical whitespace
Zero chrome competitionno 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 signalthe single-page error capture shows a 30% logo, 40% void, 30% footer proportion — negative space does the positioning work

Live at hermes.com

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

hermes.com

Explore Hermès

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.

Hermès design system FAQ

Common questions about Hermès'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.

Hermès — official site

Hermès'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.