---
version: alpha
name: "Patek Philippe"
website: "https://www.patek.com"
description: >-
  A Genevan luxury watchmaker whose marketing site runs on a near-monochrome palette of only four distinct hex values — dark charcoal (#2e2e33) as the dominant text and border tone, white (#ffffff) as canvas, and a warm taupe (#8c7a66) as the single chromatic accent appearing in secondary labels and decorative dividers. Type pairs Lora, a variable-weight serif, for body and navigation links against Open Sans for all uppercase display headings, hero h1s, and UI labels — an editorial serif-plus-geometric-sans split that positions the brand closer to a luxury magazine than a watch retailer. Display headings run Open Sans weight 300 in uppercase at up to 40px with generous 1.08px tracking, a restraint that Rolex and Omega abandon for heavy 700-weight display copy.

seo:
  title: "Patek Philippe Design System for React — taupe accent, Lora + Open Sans, 14 components"
  metaDescription: "Patek Philippe's marketing design system as a DESIGN.md file. Four-color palette, Lora serif navigation, Open Sans uppercase display, warm taupe #8c7a66, 14 components. For React, Next.js, and AI tools."
  highlights:
    - "Four-color palette — the entire marketing surface runs on charcoal (#2e2e33), white, taupe (#8c7a66), and pure black — no additional chromatic accent"
    - "Serif navigation links — Lora at 15px for nav links and body copy, Open Sans for every uppercase label and heading — the editorial split positions the brand as a publisher, not a retailer"
    - "Weight 300 display at 40px uppercase — Open Sans light-weight uppercase with generous tracking defines the primary h1/h2; Rolex and Omega use weight 700 for the same role"
    - "Warm taupe as the single accent — #8c7a66 appears 67 times as secondary label color and decorative divider, never as a CTA fill"
    - "Full-bleed dark photography — near-black watch imagery fills the hero and editorial bands above the fold; the page goes to grey editorial panels below"
  tags:
    - "E-commerce & Retail"
    - "Automotive"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Patek Philippe's marketing site treats the watch as a cultural object, not a commercial product — and the design system builds a frame appropriate for that ambition. The above-fold hero is full-bleed dark photography (a near-black background carrying an intricate watch movement or dial in extreme close-up) with Open Sans weight 300 uppercase display text floating over it in white. Below the fold the page moves through grey editorial panels, alternating between dark-photography sections and light-grey article layouts. The system uses only four distinct hex values across 1499 scanned elements: a dark charcoal (#2e2e33) for all structural chrome, white for canvas and overlaid text, a warm taupe (#8c7a66) for secondary accents and decorative marks, and pure black for full-bleed dark panels. Where Rolex holds color back entirely and Omega uses a crimson voltage in headings, Patek Philippe's chromatic restraint is even more complete — the taupe is the sole accent and it never appears in a CTA.

    This DESIGN.md packages the system into a machine-readable spec using the Google Labs open format. Inside: 8 color tokens drawn from the four-color palette; 12 typography tokens pairing Lora (a variable-weight serif) for navigation links and body copy with Open Sans (a geometric sans) for every uppercase heading, label, and h1/h2 — the editorial serif-plus-geometric-sans combination is the system's distinguishing typographic move; a near-flat radius vocabulary (circular at 50% for the play-button icon, 999px full pill for the progress indicator, 10px for a single small surface); 8 spacing tokens derived from the extracted 16/24/80px rhythm; and 14 components covering the top navigation, hero photography band, uppercase display headings, serif body text, the taupe-accented label, progress pill, editorial grey panel, and footer.

    Feed this file to an AI coding tool and it reproduces Patek Philippe's stance: four structural colors plus one warm taupe accent, Lora for editorial navigation, Open Sans weight 300 uppercase for display, full-bleed dark photography without decorative chrome, and near-flat geometry with circular-only rounded forms. The one move worth borrowing is the serif-for-navigation discipline — using a literary typeface for nav links signals that every page is worth reading, not just browsing.
  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.patek.com"
      title: "Patek Philippe — official site"
      description: "Patek Philippe'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: "What is Patek Philippe's primary brand color?"
      answer: "Patek Philippe's marketing system uses no traditional 'brand voltage' color — there is no single chromatic accent used for CTAs or primary actions. The dominant structural color is charcoal #2e2e33 (565 total occurrences), which carries all body text, navigation labels, and border rules. The single warm accent is taupe #8c7a66 — appearing 67 times across text and border roles — used for secondary labels, decorative dividers, and sub-category spans. The primary CTA (the 'Discover' button visible in the hero) uses a charcoal background with white text, not the taupe. This makes Patek Philippe one of the few luxury brands that reserves even its accent color from action-element roles."
    - id: "typography"
      title: "What typefaces does Patek Philippe use, and what should I substitute?"
      answer: "Patek Philippe runs two typefaces in strictly separated roles. Lora — a variable-weight serif — carries navigation links (15px / 400), body paragraphs (16px / 400 / 26px line-height), and editorial text. Open Sans — a geometric sans — carries every uppercase heading, label, and section title: 40px / weight 300 at 0.12px tracking for h1/h2, 32px / weight 300 at 1.08px tracking for h2, 24px / weight 300 at 0.72px tracking for h3, and 14px / weight 400 at 0.28px tracking for small uppercase labels. The Lora-for-links pattern is the most distinctive move: most luxury brands use sans-serif for navigation. For substitution: Merriweather or Playfair Display for Lora; Inter for Open Sans at equivalent weights."
    - id: "shape-language"
      title: "What corner-radius philosophy does Patek Philippe use?"
      answer: "Patek Philippe's radius vocabulary is close to flat. The primary CTA button uses the 999px full pill (appearing 10 times in the extracted radii), the play-button icon is a 50% circle (11 occurrences), and a single 10px surface appears once. There is no intermediate card radius — the editorial cards and section panels all use 0px sharp corners. The pill is used exclusively for interactive elements (the CTA button and a progress-indicator band), while circles are reserved for the circular play-button control. This binary is less extreme than Rolex's 9999px-or-0px split — the 50% circle adds a third shape mode."
    - id: "editorial-pattern"
      title: "Why does Patek Philippe alternate dark and light editorial panels?"
      answer: "Patek Philippe structures the page as an editorial magazine spread: a full-bleed dark hero (near-black photography), followed by a grey-toned editorial section with alternating content panels, followed by lighter product-announcement sections. The charcoal (#2e2e33) tone appears in dark panel text and borders, while pure black (#000000) fills the full-bleed dark photography backgrounds. The alternation is the brand's pacing device — each section change signals a new editorial chapter, not a new product category. This approach is closer to how The New Yorker or Dossier Journal structure long-form content than to how typical e-commerce brands structure a product grid."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build a luxury editorial site in React?"
      answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI coding tool that reads structured design tokens. The agent will reproduce Patek Philippe's specific moves: four-color near-monochrome palette with warm taupe as the sole accent, Lora serif for navigation links and body copy, Open Sans weight 300 uppercase for display headings, full-bleed dark photography for hero bands, and near-flat geometry with circular play-button controls and 999px pill CTAs. The 14 components cover the top nav, hero band, editorial panels, body text, label spans, footer, and circular play-button. One caveat: the system is calibrated for a high-quality photographic content library — substituting stock photography for the Patek Philippe watch imagery will expose the canvas rather than fill it."

mockups:
  - "marketing-hero"
  - "editorial-article"

colors:
  ink: "#2e2e33"
  canvas: "#ffffff"
  accent: "#8c7a66"
  pure-black: "#000000"
  ink-light: "#ffffff"
  surface-grey: "#f8f7f7"

typography:
  display-xl:
    fontFamily: "openSans, \"openSans Fallback\", Arial, sans-serif"
    fontSize: 40px
    fontWeight: 300
    lineHeight: 48px
    letterSpacing: "0.12px"
    textTransform: uppercase
  display-lg:
    fontFamily: "openSans, \"openSans Fallback\", Arial, sans-serif"
    fontSize: 32px
    fontWeight: 300
    lineHeight: 38px
    letterSpacing: "1.08px"
    textTransform: uppercase
  display-md:
    fontFamily: "openSans, \"openSans Fallback\", Arial, sans-serif"
    fontSize: 24px
    fontWeight: 300
    lineHeight: 30px
    letterSpacing: "0.72px"
    textTransform: uppercase
  heading-sm:
    fontFamily: "openSans, \"openSans Fallback\", Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 14px
    letterSpacing: "0.34px"
    textTransform: uppercase
  label-lg:
    fontFamily: "openSans, \"openSans Fallback\", Arial, sans-serif"
    fontSize: 16px
    fontWeight: 300
    lineHeight: 20px
    letterSpacing: "0.48px"
    textTransform: uppercase
  label-md:
    fontFamily: "openSans, \"openSans Fallback\", Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 26px
    letterSpacing: "0.28px"
    textTransform: uppercase
  label-sm:
    fontFamily: "openSans, \"openSans Fallback\", Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: "0.28px"
    textTransform: uppercase
  body-md:
    fontFamily: "lora, \"lora Fallback\", Times, serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 26px
    letterSpacing: 0
  body-sm:
    fontFamily: "lora, \"lora Fallback\", Times, serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 19px
    letterSpacing: 0
  button-md:
    fontFamily: "openSans, \"openSans Fallback\", Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: "0.28px"
    textTransform: uppercase
  nav-link:
    fontFamily: "lora, \"lora Fallback\", Times, serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 19px
    letterSpacing: 0
  meta-label:
    fontFamily: "openSans, \"openSans Fallback\", Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0

rounded:
  none: "0px"
  sm: "10px"
  full: "999px"
  circle: "50%"

spacing:
  xs: "4px"
  sm: "8px"
  md: "12px"
  base: "16px"
  lg: "24px"
  xl: "36px"
  2xl: "48px"
  3xl: "80px"

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.ink-light}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: "0px 24px"
    height: "40px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.accent}"
    typography: "{typography.label-md}"
    rounded: "{rounded.none}"
    padding: "8px 12px"
    border: "1px solid"
    borderColor: "{colors.accent}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: "0px 24px"
    height: "60px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: "0px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink-light}"
    typography: "{typography.display-xl}"
    padding: "0px"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-lg}"
    padding: "0px"
  section-subheading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-md}"
    padding: "0px"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink-light}"
    typography: "{typography.body-md}"
  body-on-light:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
  accent-label:
    backgroundColor: "transparent"
    textColor: "{colors.accent}"
    typography: "{typography.label-md}"
  hero-band:
    backgroundColor: "{colors.pure-black}"
    textColor: "{colors.ink-light}"
    typography: "{typography.display-xl}"
    rounded: "{rounded.none}"
    padding: "80px 80px 170px"
  play-button:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.ink-light}"
    rounded: "{rounded.circle}"
    padding: "0px"
    height: "80px"
  editorial-panel:
    backgroundColor: "{colors.surface-grey}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "80px"
  footer:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    padding: "80px 80px 170px"
---

## Overview

Patek Philippe's marketing system is built on a principle of **editorial gravity** — the page moves with the unhurried cadence of a luxury print magazine, not with the conversion urgency of an e-commerce site. The palette is the sparsest in the Swiss watch category: four distinct hex values across 1499 scanned elements, the lowest count in the extraction set. Charcoal #2e2e33 carries all structural chrome (navigation, body text, hairline rules), white handles the canvas and overlaid photography text, warm taupe #8c7a66 provides the single chromatic signal in secondary labels and decorative dividers, and pure black fills the full-bleed dark-photography panels. Where Omega uses a saturated crimson voltage in section headings and Rolex holds one forest-green accent in the nav crown, Patek Philippe holds its taupe entirely out of action contexts — the CTA is a charcoal pill, never taupe.

**Serif navigation as editorial signal**: unlike the near-universal convention of sans-serif navigation in luxury e-commerce, Patek Philippe routes nav links through Lora — a variable-weight serif — at 15px / 400. Open Sans handles every uppercase heading, label, and UI element. The split functions as a semantic marker: Lora text is "read this slowly," Open Sans text is "this is a label or heading." Most brands treat typography as a single-family decision; Patek Philippe uses the family split to encode reading speed.

The shape language is **near-flat with circular controls**: most surfaces use 0px sharp corners, the primary CTA uses a 999px full pill, and the play-button control is a 50% circle at 80px diameter. No intermediate rounding exists.

**Key Characteristics:**
- Four-color palette: charcoal (#2e2e33), white, taupe (#8c7a66), pure black — nothing else across 1499 scanned elements.
- Lora serif for navigation links and body copy; Open Sans for all uppercase headings, labels, and UI.
- Open Sans weight 300 uppercase for display — h1/h2 at 40px / weight 300, not the 700 that Rolex and Omega use.
- Taupe (#8c7a66) as secondary-label accent — 67 total occurrences, never in a CTA or primary action.
- Full-bleed dark photography (near-black backgrounds) in hero and editorial panels, alternating with light-grey body sections.
- Near-flat radius: 0px for cards and bands, 999px for the primary CTA pill, 50% for the circular play-button control.
- 80px vertical section padding — more generous than Rolex's 60px; editorial breathing room.
- Sparse spacing base (4-16px system) for internal component spacing, generous section-level padding (80px).

## Colors

### Structural

- **Ink** (`{colors.ink}` — #2e2e33): frequency 565 — the dominant color across the entire page. 281 as text, 281 as border. A dark charcoal with a very slight violet-grey hue (oklch c: 0.009, h: 286°), never pure black. Carries all body text, navigation labels, sub-headings, and hairline borders. The extraction's dominant color by a factor of 7 over the next most frequent.
- **Canvas** (`{colors.canvas}` — #ffffff): frequency 79 — white editorial body canvas, CTA text, and overlaid text on dark photography. Also merged from #f8f7f7 (a near-identical near-white used for the light-grey editorial panels, wired as the surface-grey alternate).
- **Accent** (`{colors.accent}` — #8c7a66): frequency 67 — 33 as text, 33 as border, 1 as background fill. A warm muted taupe that reads as the brand's second-voice tone. Used for secondary label spans ("Learn more," sub-category dividers), never as a primary action fill. This is the only chromatic color in the system.
- **Pure Black** (`{colors.pure-black}` — #000000): frequency 5 — 3 as background, 1 as text, 1 as border. The full-bleed dark photography panels and the hero band canvas. Not used for body text — charcoal (#2e2e33) handles running text.

### Surface

- **Surface Grey** (`{colors.surface-grey}` — #f8f7f7): the near-white canvas for light editorial panels; merged into the `{colors.canvas}` cluster at the extraction level. Appears as the background of below-fold article-style sections.
- **Ink Light** (`{colors.ink-light}` — #ffffff): white text and overlaid typography on the full-bleed dark photography panels. Structurally the same as canvas white — semantically used as overlay text rather than surface fill.

## Typography

### Font Families

The system runs two families with strictly divided roles. **Lora** (a variable-weight serif, loaded as the CSS variable `--font-primary`) carries navigation links and body paragraphs — the "read slowly" voice. **Open Sans** (`--font-secondary`) carries every uppercase heading, label, sub-navigation chip, and UI element — the "this is structured information" voice. A third family, **Erbaum** (`--font-alt`), appears in the CSS variables but does not appear in the extracted rendering — likely reserved for a specific sub-brand or future context.

The Lora-for-navigation pattern is the typographic signature. Among the luxury watch brands in the extraction set, only Patek Philippe routes nav links through a serif. The effect is that the nav reads like a table of contents rather than a menu bar.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 40px | 300 | 48px | 0.12px | Hero h1 ("New models 2026"), major section h2 (uppercase) |
| `{typography.display-lg}` | 32px | 300 | 38px | 1.08px | Section h2 (uppercase, generous tracking) |
| `{typography.display-md}` | 24px | 300 | 30px | 0.72px | Sub-section h3 (uppercase) |
| `{typography.heading-sm}` | 17px | 400 | 14px | 0.34px | Small h4 / emphasis spans (uppercase) |
| `{typography.label-lg}` | 16px | 300 | 20px | 0.48px | Category labels (uppercase, light weight) |
| `{typography.label-md}` | 14px | 400 | 26px | 0.28px | Default uppercase label / sub-nav chip |
| `{typography.label-sm}` | 14px | 400 | 18px | 0.28px | Compact uppercase label |
| `{typography.body-md}` | 16px | 400 | 26px | 0 | Lora serif — default body paragraphs |
| `{typography.body-sm}` | 15px | 400 | 19px | 0 | Lora serif — nav links, footer text |
| `{typography.button-md}` | 14px | 400 | 20px | 0.28px | Open Sans — CTA button label (uppercase) |
| `{typography.nav-link}` | 15px | 400 | 19px | 0 | Lora serif — primary navigation links |
| `{typography.meta-label}` | 14px | 400 | 20px | 0 | Open Sans — metadata spans |

### Principles

Display weight stays at 300 across every heading tier. Not 700, not 600 — 300. The hero h1 at 40px / 300 uppercase is among the lightest typographic moments for a display heading in the luxury-watch category. This is the deliberate anti-gesture: the brand trusts the watch photograph to carry visual authority, and the heading floats over it without competing. The 1.08px letter-spacing on the 32px h2 adds presence without weight — the opposite of bold.

Open Sans uppercase with generous tracking is the system's "announcement" mode; Lora is the "editorial conversation" mode. The two voices never appear at the same size tier.

### Note on Font Substitutes

Lora is freely available on Google Fonts. Open Sans is also on Google Fonts — these are the closest-to-zero-friction substitutes in the extraction set. The Erbaum alternate has no obvious open-source equivalent; its role is unclear from the captured surface.

## Layout

### Spacing System

- **Base unit:** 4px.
- **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.base}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 36px · `{spacing.2xl}` 48px · `{spacing.3xl}` 80px.
- **Component internal padding:** 0×12px for nav links, 0×24px for CTA pills, 12px for compact containers.
- **Section vertical padding:** 80px at the major editorial bands — the most frequent large-spacing value (5 occurrences at `0px 80px`). Section ends carry 170px bottom padding on the hero and footer.

### Grid & Container

- **Max content width:** inferred ~1280px on editorial bands. No explicit CSS grid variable exposed (unlike Rolex's 12-column declaration).
- **Hero band:** full-bleed dark photography. Content centered with display text floating in the lower third of the band.
- **Below-fold editorial sections:** alternating between full-width dark-photography panels and constrained-width grey editorial panels at 80px horizontal padding.

### Rhythm

The page alternates between cinematic dark panels (full-bleed watch photography, white uppercase text) and light-grey editorial panels (Lora body copy, charcoal text, taupe accents). The transition is abrupt — no gradient fade between bands. The rhythm creates two reading modes: visual (dark panels) and textual (light panels), reflecting the dual audience of the brand's site (collectors who want technical depth, admirers who want the image).

## Elevation

No shadow tier. The system achieves depth through photography contrast: dark-panel photography reads as depth against light-canvas editorial sections. The taupe accent (#8c7a66) carries border rules and decorative dividers, providing the only surface-level element distinction. Cards and editorial panels are flat — no `box-shadow` appears in the extracted component data.

## Shapes

The radius vocabulary is **binary with a circular mode**:

- `{rounded.none}` 0px — all editorial panels, section containers, and the hero band. Sharp corners throughout.
- `{rounded.sm}` 10px — a single secondary surface, 1 occurrence.
- `{rounded.full}` 999px — the primary CTA button pill. 10 occurrences, the fully-rounded button shape.
- `{rounded.circle}` 50% — the play-button control. 11 occurrences, a circular icon button at 80×80px.

The play-button circle is the system's most distinctive radius move: a fully circular control centered over the hero video, rendered in charcoal on a dark panel. It is the only circular form among the captured luxury watch brands.

## Components

**`button-primary`** — Charcoal (#2e2e33) fill, white text, 999px full-pill radius, 0×24px padding, 40px height. Open Sans 14px / 400 uppercase with 0.28px tracking. The CTA label is "Discover" — the fill is charcoal, not taupe; the accent color is held back.

**`button-secondary`** — Transparent fill, taupe (#8c7a66) text and 1px taupe border, 0px radius. Used for secondary editorial actions.

**`top-nav`** — White canvas, charcoal text, Lora nav-link (15px / 400 serif), 0px radius, 24px horizontal padding, 60px height. The Patek Philippe cross emblem left, nav links (Watches / Collections / Maison / Our values / Boutiques) center-right, a compact language/account utility cluster far right. All nav labels in Lora serif — the most visually distinctive nav typography in the dataset.

**`nav-link`** — Transparent background, charcoal text, Lora serif at 15px / 400. No uppercase, no tracking — reads as editorial prose navigation rather than a structured menu.

**`hero-heading`** — Transparent background, white text, display-xl (40px / 300 / 48px / 0.12px / uppercase). Floats over the full-bleed dark watch photography.

**`section-heading`** — Charcoal ink text, display-lg (32px / 300 / 38px / 1.08px / uppercase). Used for "Rare Handcrafts Collection" and other below-fold section titles.

**`section-subheading`** — Charcoal text, display-md (24px / 300 / 30px / 0.72px / uppercase). Sub-section headers in the editorial grey panels.

**`body-paragraph`** — White text, Lora body-md (16px / 400 / 26px). Used over dark photography panels — the Lora serif body over dark contrast is the editorial signature.

**`body-on-light`** — Charcoal text, Lora body-md (16px / 400 / 26px). Default running text on light editorial panels.

**`accent-label`** — Taupe (#8c7a66) text, Open Sans label-md (14px / 400 uppercase). The secondary voice — sub-category attribution spans, "Learn more" links, decorative divider labels.

**`hero-band`** — Pure black canvas, white text, display-xl, 0px radius. 80px top/bottom padding, 170px bottom on the hero to give the typography generous footing above the fold.

**`play-button`** — Charcoal fill, white icon, 50% circle (80×80px). The circular video play control centered over the hero watch photography.

**`editorial-panel`** — Light-grey canvas (#f8f7f7), charcoal text, Lora body-md, 0px radius, 80px padding. The alternating light editorial panel below the fold.

**`footer`** — White canvas, charcoal text, Lora body-sm (15px / 400), 80px side / 170px bottom padding. Multi-column link grid: Watches / Collections / Maison / Our values / Boutiques.

## Do's and Don'ts

**Do** use Lora for every navigation link and body paragraph. The serif-for-navigation choice is the system's editorial signature — swapping nav links to Open Sans would make the brand read as any other Swiss luxury e-commerce site.

**Do** keep display headings at Open Sans weight 300 uppercase. The 40px / weight 300 hero h1 is deliberate restraint — the watch photography carries visual authority, the heading floats without competing. Bumping to weight 700 turns the editorial into a SaaS announcement.

**Do** hold the taupe (#8c7a66) in secondary-label roles only. It appears 67 times as a decorative and attributive color — never as a CTA fill. Using taupe as an action color would break the four-color discipline.

**Do** maintain the circular play-button (50% radius) as the only non-flat rounded form besides the CTA pill. The circle-or-pill-or-nothing radius rule is the shape signature.

**Don't** introduce a fourth chromatic color — the extraction found exactly 4 hex values across 1499 elements. Adding a brand blue, a gold, or an additional green would exceed the system's palette discipline.

**Don't** use Open Sans at weight 700 for body copy. The system's Open Sans weight range is 300-400; weight 700 appears nowhere in the captured extraction. The heavy weight is Lora's domain in the serif voice, not Open Sans's.

**Don't** apply the 999px CTA pill to secondary buttons. The full pill is reserved for the primary "Discover" CTA — secondary actions use a rectangular frame with taupe border at 0px radius.

**Don't** use the circular play-button (50% radius) outside of video control contexts. It is calibrated at 80px diameter to signal a very specific interaction; a smaller or larger circle in a different context would read as a UI aberration.

## Known Gaps

- **Erbaum typeface:** declared in CSS as `--font-alt: 'erbaum'` but does not appear in the captured rendering. Its role — possibly a seasonal display variant or a sub-brand accent — is not documented here.
- **CTA hover and focus states:** the charcoal CTA pill's hover variant was not captured in the extraction; CSS variables do not expose an explicit hover color.
- **Form input states:** no text input appears in the extracted components; boutique-finder and configurator forms on patek.com carry inputs not exposed in the marketing page.
- **Motion:** the hero watch photographs use scroll-triggered entrance animations and the play-button triggers a video modal; easing curves and duration values are not captured here.
- **Dark mode:** the system is light-only on the marketing surface. No dark-mode alternative was captured.
- **Gold and precious-metal accents:** the watch photography itself contains gold, rose-gold, and platinum tones, but these live inside photograph content rather than in the design system's CSS. No gold or metallic hex is extracted.