Audemars Piguet Design System

Overview

Audemars Piguet's marketing site refuses the conventions of luxury-goods typography. Counterpoint system: where Cartier commits to all-caps proprietary sans at a single weight and Ferrari commits to FerrariSans, AP divides the page between two voices — Helvetica Neue Web in ultra-thin weight 100 for every interface headline, and Times Now in weight 250 italic for every editorial subhead and pull-quote. The sans is uppercase, tracked slightly negative at -0.56px, mechanically precise; the serif is lowercase, oblique, unhurried. The counterpoint reads as the two faces of Swiss watchmaking: the movement's technical geometry on one side, the horological tradition on the other. Unlike Rolex, which leans entirely on a gold-and-green brand palette to signal status, AP holds all color in reserve and trusts the tension between typefaces and photography to carry the weight.

The system is architecturally monochrome. The brand's declared green tokens (deep forest {colors.brand-forest} at --color-brand-color, muted sage {colors.brand-green} at --color-brand-green) produce zero rendered occurrences in the captured marketing surface. The page reads as white-on-black and black-on-white — near-white warm canvas {colors.canvas} / {colors.surface-1} alternating with full-bleed cinematic photography. The brand color exists but the marketing surface never uses it.

Key Characteristics:

• Dual-typeface counterpoint: Helvetica Neue Web (mechanical, sans, uppercase) vs. Times Now (editorial, serif, italic) — the contrast is the system's identity.
• Ultra-thin display: weight 100 at 56px for the sans headline tier is the loudest typographic moment; maximum weight across the page is 500.
• Near-white warm canvas: {colors.surface-1} (#f6f5f3) and {colors.canvas} (#ffffff) merge into a single warm off-white floor; the beige undertone softens photography edges.
• Declared brand green absent from marketing surface — all chromatic expression deferred entirely to photography.
• Negative letter-spacing at display sizes (-0.56px at 56px) gives the thin uppercase sans a precision-machined feel rather than a fashionable-thin feel.
• Full-bleed photography alternates with tight editorial text zones; no decorative elements, no ornamental chrome.
• Uppercase letter-spacing labels in weight 500 at 1.8px spacing mark section categories and product families.

Colors

Canvas

• Canvas ({colors.canvas} — #ffffff): frequency 1425 merged — the dominant surface across the page. Used as text color (714), border/hairline (710), and occasionally as background fill (1). The white-on-dark photography sections invert this to text-on-canvas. Also merged with a warm beige variant (#f6f5f3) into the same perceptual token.
• Surface-1 ({colors.surface-1} — #f6f5f3): the warm light beige, wired as --color-light-beige and --color-palette-beige96. The off-white floor tone that runs beneath editorial text zones and product cards. Not pure white; the warmth absorbs the transition from photography to text bands.
• Surface-2 ({colors.surface-2} — #e7e4df): a slightly deeper warm tone wired as --color-palette-beige89 and --color-reference-contrast-neutral6. Used sparingly for divider bands and subtle surface lifts.

Ink

• Ink ({colors.ink} — #000000): frequency 39. Pure black — used as text (15), border (15), and background fill (9). The dominant text on white bands and the fill for primary CTA buttons.
• Ink-Soft ({colors.ink-soft} — #1b1b1b): wired as --color-palette-grey11. Very near-black structural tone.
• Ink-Muted ({colors.ink-muted} — #8b8c8c): frequency 4 — used as text (2) and border (2). Mid-gray for captions and secondary navigation labels. Wired as --color-gunsmoke and --color-reference-normal-neutral3.
• Ink-Faint ({colors.ink-faint} — #757575): wired as --color-boulder / --color-grey-3-ui. A slightly lighter caption gray.

Hairlines

• Hairline ({colors.hairline} — #bfbfbf): wired as --color-palette-grey75. The light gray divider tone between sections.
• Mid-Gray ({colors.mid-gray} — #656565): wired as --color-grey-5-ui.
• Mid-Gray-2 ({colors.mid-gray-2} — #818181): wired as --color-grey-2-ui.

Brand (declared, absent from marketing surface)

• Brand-Forest ({colors.brand-forest} — #02291f): wired as --color-brand-color. A very dark, almost black forest green. Total rendered occurrences on the captured page: 0. Reserved for product or campaign contexts not exposed on the marketing homepage.
• Brand-Green ({colors.brand-green} — #456148): wired as --color-brand-green. A muted sage green. Total rendered occurrences: 0. The same absence-of-brand-color discipline documented in Patagonia's system.
• Brand-Teal ({colors.brand-teal} — #2b4f4f): wired as --color-reference-normal-accent and --color-palette-green24. A dark teal, also invisible on the marketing surface. Declared as the accent token in the CSS custom-property schema.
• Accent-Mint ({colors.accent-mint} — #45de93): wired as --color-palette-green57. A bright mint declared in the palette but not visible on marketing surfaces.
• Gold-Warm ({colors.gold-warm} — #c9b586): wired as --color-white-gold. A warm champagne gold, likely used on product pages for gold-case watch references.
• Error ({colors.error} — #b02828): wired as --color-palette-red42 / --color-reference-normal-error. Reserved for form validation states.

Typography

Font Families

The system runs two voices. Helvetica Neue Web handles every interface surface — display, heading, body, button, label, and navigation. It runs at weights 100 (ultra-thin display), 300 (body and labels), and 500 (button labels and strong captions); there is no 400 weight used on the captured page and no 700. Times Now is the serif editorial voice — appearing at weight 250 italic at 60–93px for the largest editorial moments and at intermediate italic instances for pull-quotes and section titles. The two families do not share a register.

Hierarchy

Principles

Display weight tops out at 100 for the sans family — the opposite of conventional luxury-goods hierarchy where weight = authority. The system trusts typeface contrast and photography over typographic force. The Times Now tier tops out at weight 250 italic, maintaining the same restraint. Uppercase letter-spacing labels ({typography.label-sm}) at 12px / 500 / 1.8px spacing are the only instance where tracking is used for emphasis rather than for display-size compensation.

Font Substitutes

Helvetica Neue Web is licensed. At weight 100–300, Neue Haas Grotesk Display (Google Fonts: Neue Haas Grotesk) or Inter at weights 200–300 with reduced letter-spacing is the closest open-source match. Times Now at weight 250 italic is best approximated by Playfair Display italic (weight 300) or DM Serif Display italic. Neither substitute is exact at large display sizes, but both preserve the voice split.

Layout

Spacing System

• Base unit: 8px with 16px as the dominant padding module (47 occurrences).
• Tokens: {spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 16px · {spacing.md} 24px · {spacing.base} 32px · {spacing.lg} 64px · {spacing.xl} 80px · {spacing.2xl} 120px.
• Section padding (vertical): the CSS exposes explicit spacing tokens up to 256px (--spacing-4xl); the marketing surface uses approximately 100px vertical on major section transitions.
• Photography containers: full-bleed with 0px padding; text zones beneath sit at ~92.5px horizontal padding.

Grid & Container

• Max content width: text zones sit inside an approximately 412px column in the captured desktop render, centered on the 1440px viewport — a deliberately narrow single-column editorial layout for the text portions.
• Photography: full-bleed with no container constraint.
• Two-column split panels: appear below the fold where a product photograph sits beside an editorial text block, typically in a 60/40 or 50/50 split.

Rhythm

The page alternates between full-bleed photography and tight typographic editorial zones — there is no mid-density state. Text zones are narrow and generous with vertical spacing; photography containers are edge-to-edge. The rhythm is magazine-paced: a long breath of image, then a short focused text beat.

Elevation

The system has essentially no shadow tier. The CSS declares --shadow-primary (0 5px 15px 0 rgba(0,0,0,0.06)) and --shadow-secondary (0 2px 4px 0 rgba(0,0,0,0.19)) as tokens, but neither appears on the captured marketing surface. Depth comes entirely from surface-color layering — {colors.surface-1} cards against the {colors.canvas} floor — and from the physical depth of full-bleed photography above text zones. There is no elevation hierarchy in the component set.

Shapes

The radius scale is sharp-dominant plus pill:

• {rounded.none} 0px — the dominant treatment for CTAs, section dividers, and all editorial surfaces. The CSS declares --radius-none: 0px.
• {rounded.xs} 4px — --radius-2xs; the smallest soft option, used for micro-chips.
• {rounded.sm} 8px — --radius-xs; form inputs and small UI surfaces.
• {rounded.md} 12px — --radius-sm; the step just below card rounding.
• {rounded.lg} 16px — --radius-md; the default card radius.
• {rounded.xl} 24px — --radius-lg; larger surface tiles.
• {rounded.pill} 56px — --radius-2xl; pill-style promotional containers.

The dominant treatment on CTAs and typography containers is 0px — sharp and without ornament. The soft radius tiers exist primarily for product surface cards and photography wrappers. Unlike Ferrari, which uses 0px exclusively on CTAs, AP offers a full ladder but defaults to sharp on the interface layer.

Components

button-primary — Pure black {colors.ink} fill, white {colors.canvas} text, {rounded.none} 0px radius, 16×32px padding, 48px height. The CTA reads as a precise mechanical stamp — no radius, no shadow, no decoration.

button-primary-hover — Near-black {colors.ink-soft} fill on hover, same dimensions. The press-state is a lightness shift, not a color shift.

button-secondary — Transparent fill with a 1px ink border, ink text. Same sharp 0px radius. Used for secondary actions alongside hero CTAs.

top-nav — Transparent background over the hero photograph, white {colors.canvas} text, 64px height. Houses the AP logo (center or flush left), category navigation links, and right-aligned actions.

nav-link — Transparent, white text at {typography.nav-link} (14px / 500), 8px padding. The nav links at 14px / 500 are the same size as the button label — the system makes no visual distinction between navigation and action at the label level.

hero-heading — White text, Helvetica Neue Web at {typography.display-lg} (56px / 100 / uppercase / -0.56px), transparent background. The mechanical voice at its loudest.

hero-serif — White text, Times Now italic at {typography.display-serif-xl} (60px / 250), transparent background. The editorial voice at its loudest — these two headings alternate across section transitions.

section-heading — Ink text, same {typography.display-lg} token, for white-canvas sections below the fold.

editorial-heading — Ink serif italic at {typography.display-serif-lg} (36px / 250). The smaller editorial serif moment.

body-paragraph — White Helvetica Neue Web at {typography.body-lg} (17px / 300 / 0.26px tracking), for photography overlay text zones.

body-paragraph-on-light — Ink text, {typography.body-md} (16px / 300), for white-canvas editorial sections.

label-overline — White uppercase {typography.label-sm} (12px / 500 / 1.8px tracking). Used to mark product categories ("ROYAL OAK CONCEPT", "CODE 11.59") above section headings.

card — Off-white {colors.surface-1} fill, ink text, {rounded.none} 0px radius, 24px internal padding. Holds product specification breakdowns and editorial summaries.

text-input — Transparent background, ink text, 0px radius, 1px bottom ink border only (no surrounding border). The underline-only input form on the newsletter section.

Do's and Don'ts

Do use Helvetica Neue Web weight 100 (ultra-thin) for all headline text, not weight 300 or 400. The ultra-thin is the brand's typographic identity marker — switching to a medium-weight sans turns the display into a generic SaaS headline.

Do use Times Now italic (weight 250) exclusively for editorial subheadings and pull-quotes — never for interface labels. The voice split is the system. Mixing the italic serif into navigation or button labels collapses the counterpoint.

Do let full-bleed photography provide all chromatic expression. The declared brand green ({colors.brand-forest}) is invisible on the marketing surface by design; adding a green UI accent on an AP-inspired interface would read as a misuse of the system's discipline.

Do use {rounded.none} 0px on all CTAs and section containers. The sharp edge is the mechanical identity of the system.

Don't use {colors.gold-warm} (#c9b586, --color-white-gold) as a general accent or hover fill. It is reserved for gold-case product page contexts where the watch case material is being referenced. Using it in nav or body chrome reads as gilding — the opposite of AP's discipline.

Don't render display headlines at weight 300 or above in Helvetica Neue Web. The system's authority resides in the ultra-thin weight 100 — a move that inverts the category default where luxury brands reach for weight 700 to command attention. Weight 300 at 56px is merely thin; weight 100 at 56px reads as a precision instrument. The difference is audible.

Don't use {colors.accent-mint} (#45de93) or {colors.brand-teal} (#2b4f4f) in marketing chrome. These are declared in the CSS custom-property schema but are absent from the rendered surface; they belong to product or sub-brand contexts.

Don't use {typography.label-sm} (12px / 500 / 1.8px uppercase spacing) for body text or button labels — it is a category overline only. Using it at paragraph size produces the over-tracked "luxury fashion" parody look the system carefully avoids at large text sizes.

Known Gaps

• Brand green in context: the declared {colors.brand-forest} (#02291f, --color-brand-color) and {colors.brand-green} (#456148, --color-brand-green) do not appear on the captured homepage; they likely appear on collection pages, About pages, or campaign microsites not captured here.
• Dark mode: the page shows only a light-canvas system with white-text overlays on photography. No explicit dark-mode tokens are declared.
• Hover and focus states: captured only for {component.button-primary-hover}; the full matrix (focus rings, input active, hover backgrounds) was not visible on the captured surface.
• Product configurator surfaces: the watch configurator (strap / case / dial selection) carries a richer token set that is not represented here.
• Animation and parallax: the hero photography sections animate on scroll (parallax depth), but this spec captures end-state values only. Easing curves and parallax depth are not documented.
• Localization typefaces: the CSS declares fallback families for Chinese (Noto Sans SC), Japanese (Noto Sans JP), Korean (Noto Sans KR), Russian (MyriadPro / Cormorant Garamond), and Arabic (Tajawal) — none are represented in these tokens.
• Times Now usage at 93px: the CSS token --font-secondary-display-xl specifies 9.3rem/0.83 at weight 250 italic — this is the maximum display-serif moment but was not verified as rendered in the captured page.