Hermès Design System

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

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.