What is Audemars Piguet's primary brand color?

Audemars Piguet's extracted CSS declares a deep forest green (#02291f) wired as --color-brand-color and a muted sage (#456148) wired as --color-brand-green, but neither produces a rendered occurrence on the captured marketing surface. The page read as strictly two-tone: near-white (#ffffff / #f6f5f3 merged) and pure black (#000000), with full-bleed photography providing all chromatic expression. This is the same discipline Patagonia uses — a declared brand color that lives inside the product and campaign context but cedes the marketing surface entirely to imagery. The practical implication: if you are building an AP-inspired React surface, reach for the photography container before reaching for the brand green.

What typefaces does Audemars Piguet use, and what are the open-source substitutes?

The system runs two proprietary or licensed families. Helvetica Neue Web handles all sans surfaces: ultra-thin weight 100 for hero and section display, weight 300 for body and label copy, weight 500 for button labels and strong captions. Times Now is the serif editorial voice: weight 250 italic at 60–93px for the biggest editorial moments, with smaller italic instances at 28–52px for sub-headers and pull-quotes. Open-source substitutes: for Helvetica Neue Web at weight 100–300, Neue Haas Grotesk or Inter at weights 200–300 are the closest matches. For Times Now italic at weight 250, Georgia italic or Playfair Display italic read comparably for body editorial use, though Playfair is slightly more expressive.

Why does Audemars Piguet use an off-white rather than pure white canvas?

The captured extraction merges two near-identical values — pure white (#ffffff) and a warm light beige (#f6f5f3, wired as --color-light-beige and --color-palette-beige96) — into a single canvas token. The beige fraction reads as a parchment warmth that softens the contrast between the canvas and the full-bleed cinematic photographs. On a pure white floor, product photography with warm amber or warm-neutral backgrounds would clash with the canvas edge; the beige undertone absorbs that transition. The same move appears at Aesop, which uses a warm sand canvas to set its photographic materials off without a visible seam.

Why does Audemars Piguet use such light font weights — 100 and 250 — for its largest display text?

The ultra-thin weight is the brand's authority signal: where most luxury-adjacent brands use weight 700 at large sizes to command attention, AP holds display at weight 100 and trusts the photography and the watch mechanism to do the visual labor. The 56px / weight 100 uppercase Helvetica Neue Web headline at negative letter-spacing (-0.56px) reads as precision engineering, not as a shout. Times Now at weight 250 italic extends the same logic into the serif editorial voice — barely there, yet legible. The discipline is consistent: the maximum weight on the page is 500, used only for small button labels and micro-captions.

Can I use this DESIGN.md to build a luxury-watch product page in React?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce AP's specific moves: Helvetica Neue Web weight 100 display uppercase, Times Now italic editorial subheads, off-white warm canvas, zero decorative chrome beyond the photography containers. The 14 component definitions cover the hero heading, section h2, editorial pull-quote, nav, body copy, CTA, and card surface. The one caveat: both Helvetica Neue Web and Times Now are licensed typefaces not available on Google Fonts. Reference the typography substitution note in the Typography section for open-source alternatives.

Audemars Piguet Design System

Audemars Piguet's design system as a DESIGN.md file.

About Audemars Piguet DESIGN.md

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

E-commerce & Retail

Audemars Piguet's marketing site runs a dual-typeface system that is nearly unique in the luxury-goods sector: Helvetica Neue Web in ultra-thin weight 100 handles every headline and interface label, while Times Now italic in weight 250 holds every editorial subheading and pull-quote. The two voices do not compete — the sans is uppercase, tracked, mechanical; the serif is lowercase, italic, unhurried. The hero h1 reads "The Infinite Craft of the Établisseurs" in white Helvetica Neue Web at 56px / 100 / uppercase; on the next editorial beat the same text might appear in Times Now at 60px / 250 / italic over a photograph of a workshop scene. The tension between those two surfaces is the brand's typographic signature. Where Cartier commits to all-caps sans throughout and Ferrari commits to a single FerrariSans, AP splits the page between machine and manuscript.

This DESIGN.md file packages the system into 17 color tokens — primarily white, off-white, pure black, and mid-grays, plus a declared-but-invisible brand green wired as --color-brand-color; 14 typography tokens covering Helvetica Neue Web at weights 100 through 500 and Times Now italic at 250; 5 corner-radius values from the extracted CSS variables (none to 56px pill); 8 spacing tokens on an approximate 8px base; and 14 component definitions covering the hero heading, section headings, navigation, body copy, CTA buttons, and card surfaces. The absence of a rendered brand accent color is documented and intentional.

Feed this file to Claude or Cursor and it will reproduce AP's counterpoint system: ultra-thin sans uppercase display, lightweight italic serif editorial, off-white warm canvas, zero decorative chrome. The most consequential discipline to preserve is the typeface split — when in doubt, use the sans for anything interface-level and the serif for anything editorial. Breaking that rule collapses the tension the system depends on.

What makes it distinct

Dual-typeface counterpointHelvetica Neue Web in ultra-thin weight 100 for sans display, Times Now in weight 250 italic for serif editorial; no other weights above 500
Near-white warm canvasthe page floor merges pure white and light beige into a single off-white floor; the system never uses a blue-white or neutral gray canvas
Declared brand green absent from marketing render--color-brand-color (deep forest) and --color-brand-green are in CSS but produce zero rendered occurrences; photography carries all color
Uppercase all-caps sans at 56px weight 100the system's loudest typographic moment uses negative letter-spacing (-0.56px) at ultra-thin weight, not heavyweight
Full-bleed photography between typographic bandsevery editorial section transitions through a cinematic photograph before the next text zone

Live at audemarspiguet.com

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

audemarspiguet.com

Explore Audemars Piguet

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.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Audemars Piguet design system FAQ

Common questions about Audemars Piguet'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.

Audemars Piguet — official site

Audemars Piguet'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.