---
version: alpha
name: "Hermès"
description: "Hermès Orange on white, a discreet Didot-class serif for editorial grandeur, and a flat maison restraint that trusts craft photography over decoration"

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f5f0eb"           # warm ivory cream panel, secondary section surface /* estimated */
  surface-dark: "#1a1a1a"      # near-black inverse surface for footer /* estimated */

  # Text / ink
  ink: "#1a1a1a"               # near-black for all primary text /* estimated */
  ink-muted: "#767676"         # muted grey for captions and secondary labels /* estimated */
  on-background: "#1a1a1a"
  on-surface: "#1a1a1a"
  on-primary: "#ffffff"        # white text on orange CTAs

  # Brand accent — the iconic Hermès orange
  primary: "#f37021"           # Hermès Orange, pantone-grounded /* estimated */
  primary-dark: "#c95c0e"      # deeper orange for hover states /* estimated */
  primary-container: "#fde8d6" # tinted orange wash for light-touch backgrounds /* estimated */

  # State / interaction
  text-hover: "#f37021"        # links and nav items shift to orange on hover /* estimated */
  focus-ring: "#f37021"        # orange focus indicator matching brand accent /* estimated */

  # Semantic
  error: "#c0392b"             # deep red for form errors /* estimated */

  # Borders & dividers
  border: "#d9cdc4"            # warm taupe hairline, barely-there /* estimated */
  border-dark: "#1a1a1a"       # black hairline for strong section rules /* estimated */

  # Shadow tints
  shadow-soft: "#c8b8aa"       # warm-tinted shadow for rare elevation moments /* estimated */

typography:
  # Hermès uses a proprietary maison serif (Hermès Antiqua-class) for display and
  # a clean grotesk (close to Akzidenz Grotesk or custom sans) for UI chrome.
  # Closest Google Font substitutes: Cormorant Garamond (serif) / Libre Baskerville; Barlow (sans)
  display-hero:
    fontFamily: "Hermès Antiqua, Cormorant Garamond, Georgia, serif"
    fontSize: 80px
    fontWeight: 300
    lineHeight: 1.0
    letterSpacing: -1.5px
  display:
    fontFamily: "Hermès Antiqua, Cormorant Garamond, Georgia, serif"
    fontSize: 56px
    fontWeight: 300
    lineHeight: 1.05
    letterSpacing: -0.75px
  heading-section:
    fontFamily: "Hermès Antiqua, Cormorant Garamond, Georgia, serif"
    fontSize: 36px
    fontWeight: 300
    lineHeight: 1.15
    letterSpacing: -0.5px
  heading-sub:
    fontFamily: "Hermès Antiqua, Cormorant Garamond, Georgia, serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: -0.25px
  body-large:
    fontFamily: "Hermès Sans, Barlow, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Hermès Sans, Barlow, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.1px
  nav-link:
    fontFamily: "Hermès Sans, Barlow, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.5px
  button-ui:
    fontFamily: "Hermès Sans, Barlow, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 1.5px
  caption:
    fontFamily: "Hermès Sans, Barlow, Helvetica Neue, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.5px
  label-eyebrow:
    fontFamily: "Hermès Sans, Barlow, Helvetica Neue, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 2px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
  2xl: 80px
  3xl: 120px
  4xl: 160px

rounded:
  none: 0px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 32px
  button-primary-hover:
    backgroundColor: "{colors.primary-dark}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 32px
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    borderColor: "{colors.border-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 13px 32px
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.background}"
    borderColor: "{colors.border-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 13px 32px
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 4px 0px
  button-ghost-hover:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 4px 0px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
  card-elevated:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 32px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    borderColor: "{colors.border}"
    rounded: "{rounded.none}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  nav-item:
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 8px 0px
  nav-item-hover:
    textColor: "{colors.primary}"
    typography: "{typography.nav-link}"
    padding: 8px 0px
---

# Hermès Design System

## Overview

The Hermès digital presence is a maison vitrine translated into pixels — white canvas stretched to its maximum, punctuated by eruptions of the signature `{colors.primary}` orange and anchored by a proprietorial Didot-class serif that carries eight generations of Parisian heritage in its hairlines. The homepage is not a shopping interface; it is closer to a gallery installation that happens to allow purchase. Long horizontal bands of full-bleed editorial photography alternate with pure-type sections where a single 80px serif headline sits in total silence. Nothing is decorated. Nothing explains itself. The brand trusts that the visitor already knows.

Typography is the primary visual argument. Hermès deploys a refined high-contrast serif — the in-house Antiqua — at extreme scale for campaign moments (the `{typography.display-hero}` token sits at 80px weight 300, with hairline strokes that read like engraving) and pairs it with a clean neutral grotesk for all navigational and transactional chrome. The two faces never overlap in function: the serif is prestige, the sans is service. Letter-spacing on the sans chrome is distinctly positive — `{typography.button-ui}` runs at 1.5px tracking, stamping every label with the cadence of a hallmark. Upper-case with tracking is the Hermès UI grammar.

The orange (`{colors.primary}`) earns its authority through scarcity and context. It surfaces on the primary CTA, on hover states, on the monogram ribbon motif, and nowhere else. The Hermès brandmark and the iconic tangerine shopping bag live in the user's memory so that when this orange appears in a pixel context, it reads as a signature rather than a design choice. The system is otherwise completely desaturated — white (`{colors.background}`), warm ivory (`{colors.surface}`), near-black (`{colors.ink}`) — which amplifies the orange's impact every time it appears. Border radius is binary: zero for all structural elements, pill only for rare pill-style tags. There are no shadows, no gradients, no decorative icons. The maison communicates with photography, serif proportion, and the precision of a perfectly sized margin.

**Key Characteristics:**
- White canvas (`{colors.background}`) with warm ivory cream panels (`{colors.surface}`) for secondary sections
- Signature Hermès Orange (`{colors.primary}`) used exclusively for CTAs, hover states, and monogram accent — scarcity is the strategy
- Dual-typeface system: proprietary Antiqua serif for editorial grandeur, neutral grotesk for UI chrome
- Display serif at extreme weights (300) and sizes (80px hero) — hairline strokes read as engraved letterpress
- All button labels and nav chrome in uppercase with wide tracking (`{typography.button-ui}` at 1.5px letterSpacing)
- Border-radius binary: `{rounded.none}` everywhere structural, `{rounded.pill}` only for tags
- Zero drop shadows — the system is entirely flat; no elevation, no ambient lift
- Atelier-scale whitespace: `{spacing.2xl}`–`{spacing.4xl}` between editorial sections
- Full-bleed maison photography — no rounded crops, no shadows, no decorative overlays
- Near-black ink (`{colors.ink}`) rather than pure black — warmer, more like printed letterpress

## Colors

### Primary Brand
- **Hermès Orange** (`{colors.primary}`): The sole chromatic event in the system. Applied to the primary CTA button, hover states on links and nav items, the monogram ribbon motif, and the hover highlight on product tiles. Its rarity is its power — everything else is achromatic, so when this orange appears, it reads as a maison seal.
- **Deep Orange** (`{colors.primary-dark}`): Hover state for primary CTA — a one-step deepening of the orange that communicates depression without a shadow or scale change.
- **Orange Wash** (`{colors.primary-container}`): Used sparingly for tinted promotional banners or tag backgrounds where the full orange would overpower. A pale echo.

### Canvas & Surface
- **Pure White** (`{colors.background}`): The default page canvas — unmodified, unwarmed. Every editorial section, every product tile background.
- **Ivory Cream** (`{colors.surface}`): Secondary panel background for alternating editorial sections, the newsletter sign-up band, and the side-panel drawers. A step warmer than white — the colour of hot-pressed maison paper.
- **Near-Black** (`{colors.surface-dark}`): Footer background and occasional inverse-surface hero treatments. Deep enough to read as black, warm enough to not be cold.

### Text / Ink
- **Primary Ink** (`{colors.ink}`): All primary text — headings, body, labels. Near-black, not pure black, for a warmer letterpress character.
- **Muted Grey** (`{colors.ink-muted}`): Image captions, secondary metadata, fine print. Low-contrast against white — intentionally recessive.

### Borders & Dividers
- **Warm Taupe Hairline** (`{colors.border}`): The default section divider — a barely-there line between content zones. Warm, not cold grey.
- **Black Rule** (`{colors.border-dark}`): Strong structural rules beneath the masthead, above the footer, framing the secondary button outline.

### Semantic
- **Error** (`{colors.error}`): Form validation — deep red with warm bias.

### Shadow System
Hermès is functionally shadow-free. No drop shadows, no ambient elevation, no inner glows. The dembrandt extract confirmed zero shadow values — depth is communicated through photography contrast, ivory-on-white surface layering, and the orange accent, never through computed lighting.

## Typography

### Font Family
- **Display / Editorial**: `"Hermès Antiqua"`, fallback `Cormorant Garamond, Georgia, serif`. A high-contrast Didot-class serif in the tradition of French maison typography — extreme hairline contrast, refined ball terminals, distinctly Parisian character. Not commercially available; the brand commissioned it. For external implementations, Cormorant Garamond (Google Fonts) is the closest open match in spirit; EB Garamond or Libre Baskerville for more restrained editorial.
- **UI / Chrome**: `"Hermès Sans"`, fallback `Barlow, Helvetica Neue, Arial, sans-serif`. A clean, slightly condensed grotesk used for all navigational, transactional, and label text. Helvetica Neue is an acceptable stand-in for digital prototyping.
- **OpenType Features**: Standard ligatures on body copy; no discretionary alternates, no swashes.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Campaign hero headlines — one or two words, 80px, weight 300, serif |
| `display` | Secondary editorial titles, chapter headings — 56px, weight 300 |
| `heading-section` | Section openers — 36px, weight 300, serif |
| `heading-sub` | Product category headings, editorial pull-quotes — 24px, weight 400 |
| `body-large` | Lead editorial paragraphs — 18px, grotesk, weight 400 |
| `body` | Standard body copy, product descriptions — 14px, grotesk |
| `nav-link` | Primary navigation links — 13px, grotesk, 0.5px tracking |
| `button-ui` | Button labels, CTA text — 13px, uppercase, 1.5px tracking |
| `caption` | Image captions, fine print — 11px, grotesk |
| `label-eyebrow` | Category eyebrows above headings — 11px, uppercase, 2px tracking |

### Principles
- **Serif for prestige, sans for service**: the Antiqua carries all editorial and campaign weight; the grotesk handles every transaction and interaction. The two roles never cross.
- **Display at restraint**: the largest text (80px) is also the lightest weight (300) — hairline contrast at scale creates engraved elegance, not brute-force impact.
- **Uppercase chrome with generous tracking**: button labels at 1.5px tracking, eyebrows at 2px — the hallmark rhythm of a maison brand stamp.
- **No bold in the editorial system**: weight 300 through 500 covers the full range. 700 does not exist in Hermès' digital vocabulary.
- **Serif never descends to UI scale**: the Antiqua is not used for body copy, captions, or button labels — its authority depends on operating only at headline sizes.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

Hermès lives at the generous end of the spacing spectrum — `{spacing.2xl}` (80px) is the baseline between content sections; `{spacing.3xl}` (120px) and `{spacing.4xl}` (160px) are common for hero and campaign modules. The negative space is the luxury signal. Product tiles share modest gutters of `{spacing.lg}`–`{spacing.xl}`, but section-to-section transitions are always breathed out to maison scale.

### Grid & Container
- Max content width: approximately 1440px for editorial modules; 1280px for product grids
- Hero modules: full-bleed photography, no container constraints
- Product grid: 4-up on large desktop, 2-up on tablet, 1-up on mobile with consistent `{spacing.lg}` gutters
- Editorial columns: centred 600–900px text columns for long-form, never full-width prose

### Whitespace Philosophy
- Every major section transition uses at minimum `{spacing.2xl}` vertical padding — negative space communicates craft
- Campaign modules breathe at `{spacing.3xl}`–`{spacing.4xl}` — enough space to let photography register before the eye moves
- Navigation and footer chrome are compact — the whitespace is reserved for the work, not the apparatus
- Product tile imagery is surrounded by air — tiles never touch; the gutter is always visible

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | `box-shadow: none` | Universal default — all cards, modals, panels at rest |
| Hairline (Level 1) | `border-bottom: 1px solid {colors.border}` | Section dividers, input underlines at rest |
| Strong Rule (Level 2) | `border: 1px solid {colors.border-dark}` | Masthead separator, secondary button outline |
| Orange Rule (Level 3) | `border-bottom: 2px solid {colors.primary}` | Active navigation underline, focus indicator on inputs |
| Scrim (Level 4) | `background: linear-gradient(transparent, rgba(26,26,26,0.4))` | Legibility scrim for text overlaid on dark hero photography |

**Shadow Philosophy**: Hermès is flat by design, not by constraint. The dembrandt extract returned zero shadow values. The maison communicates depth through photographic contrast, the ivory-cream / pure-white surface layering, and the orange accent's chromatic isolation — never through simulated light. Every surface sits on the page plane. No cards lift, no drawers float with ambient glow. This is how a printed maison catalogue translates to the screen.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system is binary:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All structural elements — buttons, inputs, cards, modals, image crops |
| `pill` | 9999px | Rare tag/badge elements only |

Hermès does not use mid-range radius values (4–16px). The choice is absolute: the sharp rectangle of the orange label on a maison box, or the pill of a catalog tag. Nothing in between. This binary stance gives the system its typographic precision — shapes echo the serif's geometric rigour.

## Components

The complete component spec lives in the `components:` token block above.

### Button Variants

- **`button-primary`** — Orange fill (`{colors.primary}`), white label, uppercase 1.5px tracking, zero radius, 14px 32px padding. The orange CTA is visually reserved for the single most important action per view — add to cart, discover the collection, book an appointment.
- **`button-primary-hover`** — Fill deepens to `{colors.primary-dark}` — a quiet darkening that reads as physical pressure without lifting off the page.
- **`button-secondary`** — Transparent background, `{colors.ink}` label, `1px solid {colors.border-dark}` outline, same typography and padding. Used for secondary paths — "Discover more", "View all".
- **`button-secondary-hover`** — Fill inverts to `{colors.ink}` background with white label — a sharp transition that communicates confidence.
- **`button-ghost`** — Underline-style link button with no border or background. Used inline for tertiary editorial actions — "Read the story", "Watch the film".

### Cards

- **`card`** — Zero padding, zero radius, no background fill, no shadow. Product tiles are pure photography + typography on the white canvas; the "card" is defined by its image's edge, not a container.
- **`card-elevated`** — Warm ivory (`{colors.surface}`) background with generous padding (`32px`) for editorial feature panels. Still no shadow — elevation is implied by colour contrast, not lighting.

### Inputs

- **`input`** — White background, warm taupe border (`{colors.border}`), zero radius, no shadow. The input field is visually consistent with the surrounding page — not a lifted affordance.
- **`input-focus`** — Border shifts to orange (`{colors.focus-ring}`), matching the brand accent exactly. The focus state is the only moment a form input announces itself.

### Badges / Tags
- **`badge`** — Light orange wash background (`{colors.primary-container}`), orange text, pill shape. Used sparingly for promotional labels ("New", "Limited edition"). Inherits the brand accent without the full orange saturation.

### Navigation
- White background, full-width masthead with `1px solid {colors.border}` bottom rule
- Wordmark: serif logotype centered or left-aligned, followed by "HERMÈS" in spaced small caps
- Primary nav: 13px grotesk, uppercase, 0.5px tracking, `{colors.ink}` at rest, shifts to `{colors.primary}` orange on hover
- Active section: `2px solid {colors.primary}` underline beneath the active category
- Mobile: hamburger icon → full-screen white overlay with vertical nav, generous padding, orange hover states

## Do's and Don'ts

### Do
- Use `{colors.primary}` orange exclusively for primary CTAs, nav hover states, and focus indicators — its rarity is the brand
- Set all display copy in the Antiqua serif at weight 300 — the hairline contrast is the editorial identity
- Uppercase every button label, eyebrow, and nav link with generous tracking (`{typography.button-ui}` at 1.5px, `{typography.label-eyebrow}` at 2px)
- Keep border-radius at `{rounded.none}` for all structural elements — no rounded corners on buttons, cards, inputs, or image crops
- Use `{spacing.2xl}`–`{spacing.4xl}` between content sections — the whitespace is the luxury signal
- Reserve `{colors.primary-container}` orange wash for tag backgrounds only — never as a section fill
- Keep all card surfaces flat with `box-shadow: none` — depth comes from photography contrast, not shadows
- Allow product photography to be full-bleed and rectangular — never circle-crop, never apply shadow overlays
- Use the near-black `{colors.ink}` rather than pure `#000000` — letterpress warmth, not screen-grade black
- Default body and UI copy to the grotesk — the serif is for editorial moments only, never for body paragraphs or form fields

### Don't
- Don't use `{colors.primary}` orange as a background fill for sections or panels — it belongs only on small accent elements
- Don't add drop shadows to any surface — the system is flat, shadow-free, and confirmed by extraction
- Don't introduce a third typeface — the dual-face contract (Antiqua serif + grotesk) is non-negotiable
- Don't use mid-range border-radius (4–16px) — the system is binary: `{rounded.none}` or `{rounded.pill}` only
- Don't set the serif below 24px — at small sizes the hairline contrast collapses; switch to grotesk instead
- Don't apply letter-spacing to serif display text (keep it at `{typography.display-hero}`'s -1.5px or tighter — positive tracking on a high-contrast serif damages its proportion)
- Don't lowercase navigation or button labels — uppercase tracking is the maison's UI grammar
- Don't crowd tile grids — always preserve the visible gutter between product tiles; they must never touch
- Don't use gradients as decorative surfaces — only the legibility scrim (transparent to near-black) is permissible
- Don't substitute a rounded grotesk for UI chrome (no Rounded Helvetica, no Nunito) — the system requires geometric neutrality

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single-column, hamburger nav, hero photography stacks, body at 14px |
| Tablet | 640–1024px | 2-up product grid, condensed nav, serif display scales to 40px |
| Desktop | 1024–1440px | Full horizontal nav, 4-up product grid, hero serif at 80px |
| Large Desktop | >1440px | Maximum container (1440px), expanded outer margins, editorial full-bleed at native ratio |

### Touch Targets
- Primary buttons: minimum 44px tap height via 14px vertical padding + 13px line-height at 1.0
- Navigation links: full-row tappable in mobile drawer
- Product tiles: entire image + caption zone is tappable, not just the title link

### Collapsing Strategy
- **Nav**: Horizontal primary nav collapses to a hamburger icon → full-screen white overlay with vertical link stack, generous `{spacing.lg}` row padding, orange hover states retained
- **Hero**: Full-bleed photography scales to fill viewport; serif headline reduces to `{typography.heading-section}` (36px) on mobile — maison never reduces to a single word on small screens, but will break to two lines
- **Product grid**: 4-up → 2-up → 1-up; gutters scale from `{spacing.lg}` to `{spacing.md}` on mobile
- **Editorial columns**: 600–900px text columns go full-width on mobile with 16px horizontal margin
- **Footer**: Multi-column link grid collapses to accordion on mobile with `{spacing.md}` row height

### Image Behavior
- Photography maintains its native aspect ratio across breakpoints — Hermès does not crop images to square on mobile
- Full-bleed hero modules use `object-fit: cover` with the focal point preserved via `object-position`
- Product photography is always shown on white — never staged on coloured backgrounds in responsive contexts
- The maison wordmark and orange monogram remain at full resolution at all breakpoints — they never simplify

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Primary Text: `{colors.ink}`
- Brand Orange: `{colors.primary}`
- Orange Hover: `{colors.primary-dark}`
- Secondary Surface: `{colors.surface}`
- Muted Text: `{colors.ink-muted}`
- Hairline Border: `{colors.border}`
- Strong Rule: `{colors.border-dark}`
- CTA: `{colors.primary}`

### Example Component Prompts

- "Create a Hermès campaign hero on `{colors.background}` with full-bleed editorial photography covering the full viewport height. Overlay a centered `{typography.display-hero}` serif headline (80px, weight 300, letterSpacing -1.5px, color `{colors.background}`) — a single word or phrase. Below it: a `{typography.button-ui}` orange CTA button (`{colors.primary}` fill, white label, uppercase, 1.5px tracking, `{rounded.none}`, 14px 32px padding). No shadows, no gradients except a transparent-to-rgba(26,26,26,0.4) scrim behind the text."
- "Design a Hermès product tile — full-width product photography on `{colors.background}`, no border, no shadow, `{rounded.none}`. Below the image: an 11px grotesk category eyebrow in `{colors.ink-muted}` uppercase 2px tracking, then a 18px `{typography.body-large}` product name in `{colors.ink}`, then a 14px price in `{colors.ink}`. On hover, the product name shifts to `{colors.primary}` orange."
- "Build a primary CTA button — `{colors.primary}` background, `{colors.on-primary}` white text, `{typography.button-ui}` (13px, uppercase, 1.5px tracking), `{rounded.none}`, 14px 32px padding. Hover: background deepens to `{colors.primary-dark}`. No shadow, no border."
- "Create a Hermès navigation bar on `{colors.background}` with a `1px solid {colors.border}` bottom rule. Left-align the Hermès logotype in the Antiqua serif. Center the primary nav links at `{typography.nav-link}` (13px, uppercase, 0.5px tracking, `{colors.ink}`). On hover each link shifts to `{colors.primary}` with a `2px solid {colors.primary}` underline. Include a cart icon and search icon right-aligned."
- "Design a Hermès newsletter signup band on the `{colors.surface}` ivory cream background. Center: a 36px `{typography.heading-section}` serif headline, one line of 14px `{typography.body}` copy in `{colors.ink-muted}`, a side-by-side input + button. Input: `{colors.background}` fill, `1px solid {colors.border}` border, `{rounded.none}`, 12px 16px padding. Button: `{colors.ink}` fill, `{colors.background}` white label, `{typography.button-ui}` uppercase, `{rounded.none}`, 14px 32px padding."
- "Create an editorial text section on `{colors.background}` with `{spacing.3xl}` (120px) vertical padding. Center a `{typography.label-eyebrow}` uppercase orange eyebrow (`{colors.primary}`, 2px tracking), then a `{typography.display}` serif headline (56px, weight 300, `{colors.ink}`), then a 600px-max-width `{typography.body-large}` paragraph (18px, `{colors.ink}`, line-height 1.6). No borders, no background fills."

### Iteration Guide

1. Start from `{colors.background}` white — the canvas is pure and unmodified. Secondary panels use `{colors.surface}` ivory cream as the only surface variation.
2. Orange (`{colors.primary}`) is earned, not given. One CTA per view maximum. Never as a section fill. Nav hover and focus ring are its secondary habitats.
3. Typography hierarchy is strict: Antiqua serif (weight 300) for editorial headlines 24px+; grotesk for everything 13px and below and all UI.
4. All UI chrome is uppercase with tracking — `{typography.button-ui}` at 1.5px, `{typography.label-eyebrow}` at 2px. No sentence-case in navigation or CTAs.
5. Border radius is `{rounded.none}` for every structural element. Pill only for small tags.
6. Shadow budget is zero. Depth comes from photography contrast and the ivory-cream / white surface layering.
7. Whitespace between content zones is never less than `{spacing.2xl}` (80px). Campaign sections breathe at `{spacing.3xl}`–`{spacing.4xl}`.
8. Product photography is always on white, always rectangular, always full resolution. Never circle-cropped.
9. The serif is for prestige moments only — if in doubt about whether to use it, use the grotesk instead.
10. The `{colors.primary}` orange is the only chromatic event in the system — guard it. Its impact depends on everything else being neutral.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Hermès. Brand names and trademarks belong to their respective owners.