Patek Philippe Design System

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

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.