What is Patek Philippe's primary brand color?

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.

What typefaces does Patek Philippe use, and what should I substitute?

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.

What corner-radius philosophy does Patek Philippe use?

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.

Why does Patek Philippe alternate dark and light editorial panels?

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.

Can I use this DESIGN.md to build a luxury editorial site in React?

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.

Patek Philippe Design System

Patek Philippe's marketing design system as a DESIGN.md file.

About Patek Philippe DESIGN.md

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

E-commerce & Retail
Automotive

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.

What makes it distinct

Four-color palettethe entire marketing surface runs on charcoal (#2e2e33), white, taupe (#8c7a66), and pure black — no additional chromatic accent
Serif navigation linksLora 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 uppercaseOpen 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 photographynear-black watch imagery fills the hero and editorial bands above the fold; the page goes to grey editorial panels below

Live at patek.com

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

patek.com

Explore Patek Philippe

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Other

Specialty colors.

Patek Philippe design system FAQ

Common questions about Patek Philippe'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.

Patek Philippe — official site

Patek Philippe'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.