# Audemars Piguet · Design system migration spec

> Source: https://www.audemarspiguet.com  ·  Curated by OpenDesign  ·  en

> This site is a masterclass in using typography (thin serifs) and negative space to convey luxury and heritage without relying on complex UI patterns.

## 1. Identity DNA

The design system for Audemars Piguet operates as a cinematic fashion editorial, where every element is staged to support a narrative of heritage and Swiss craftsmanship. It is a study in restraint, where the absence of decoration becomes the primary statement of sophistication.

**One-liner:** A premium editorial experience for Audemars Piguet, emphasizing heritage, cinematic photography, and restrained luxury.
**Keywords:** Heritage · Sophistication · Swiss Craftsmanship · Timeless
**Analogy:** A cinematic fashion editorial blending heritage with modern storytelling.

## 2. Color

The palette is a deliberate exercise in monochrome, using strict blacks, whites, and cool grays. This chromatic discipline ensures that photographic content—the true protagonist—remains unchallenged and visually dominant.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--bg-soft` | `#f6f5f3` | card background |
| `--ink` | `#ffffff` | body text |
| `--ink-soft` | `#8b8c8c` | secondary text |
| `--muted` | `#808080` | placeholder |
| `--line` | `rgba(139, 140, 140, 0.3)` | divider |

**Color principle:** Strict monochrome palette (black, white, and cool grays) to allow photographic content to dominate.

The governing principle is clear: color serves content, never competes with it.

## 3. Typography

Typography is split into a distinct voice pairing: a transitional-serif for high-impact editorial headlines and a humanist-sans for all functional UI and body copy. This duality creates a dialogue between timeless elegance and modern legibility.

- **Display:** transitional-serif
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 60px | 1.0 | 300 | -1.2px | Major headlines and section titles |
| body | 16px | 1.49 | 300 | 0.21px | Standard body text and descriptions |
| caption | 14px | 1.71 | 300 | 1.8px | Micro-captions and small labels |

**Type rules:**
- Use transitional-serif for high-impact editorial headlines.
- Use humanist-sans for all UI elements, navigation, and body copy.
- Maintain generous letter spacing for uppercase captions.

## 4. Spacing

Vertical rhythm is defined by generous, unhurried pacing, with large section padding that frames content like a spread in a luxury magazine.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 / 120 px
- **Rhythm:** Generous vertical rhythm with large section padding (100px+) to frame content.

## 5. Surfaces

Depth is communicated through subtle, refined means: delicate shadows and the finest possible borders. Surfaces remain clean, allowing the interplay of typography and photography to define the spatial hierarchy.

- **Radius:** sm 2px · md 3px · lg 0px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0.2) 0px 0px 18px 0px
  - rgba(0, 0, 0, 0.2) 0px 0px 10px 0px
- **Borders:** 1px solid rgba(139, 140, 140, 0.3)

## 6. Layout

The layout skeleton is built on full-bleed hero sections that transition into constrained, black editorial blocks. This framework creates a strong, left-aligned grid that guides the eye with deliberate, unhurried focus.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-bleed hero sections transitioning into black, content-constrained editorial blocks.

## 7. Motion & Interaction

Motion is treated as a punctuation mark, not a flourish. All interaction relies on smooth, 300ms transitions—subtle shifts in color or opacity that affirm action without breaking the serene, premium atmosphere.

- **Durations:** micro 220ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color and background transitions on interactive elements.

- **Hover:** Subtle color shifts with a 0.3s ease-in-out transition.
- **Click:** Subtle feedback, likely through opacity or color change.
- **Transition:** All interactive elements use a 300ms transition for consistency.
- **Keyboard:** Standard tab-based navigation for menu items and buttons.

## 8. Voice & Don'ts

The editorial voice is sophisticated and poetic, narrating the brand's legacy rather than selling a product. It speaks in a measured, literary tone, using large, thin serif typography to convey gravity.

- **Tone:** Sophisticated, poetic, and narrative-driven.
- **Headline style:** Large, thin serif typography, often italicized for emphasis.
- **CTA style:** Subtle and understated, using a line icon and lowercase text.
- **Avoid:** Urgency-driven language / Aggressive call-to-action buttons / Marketing jargon / Busy or cluttered interfaces

### Don'ts
- ❌ Don't use bright or neon accent colors — screenshot shows a strict monochrome palette.
- ❌ Don't use thick, blocky borders for UI elements — screenshot shows delicate 1px lines or borderless text links.
- ❌ Don't use heavy, bold fonts for headlines — screenshot shows thin, light-weight serif typography.
- ❌ Don't center all text content — screenshot shows a strong left-aligned typography layout.
- ❌ Don't use traditional rectangular buttons — screenshot shows text links preceded by a horizontal line.
- ❌ Don't clutter the interface with multiple competing fonts — screenshot shows a strict serif/sans-serif pairing.

The system deliberately avoids urgency, marketing jargon, and any visual noise that might compromise the timeless, heritage-driven narrative.

## System Prompt (paste into AI tool)

```
This is a premium luxury watch website for Audemars Piguet. The design DNA is deeply cinematic and editorial, prioritizing high-quality photography over UI elements. Key hex colors are #000000 for primary backgrounds and #ffffff for text, creating a high-contrast, monochrome foundation. Typography categories are transitional-serif for display headlines and humanist-sans for body text. Key critical donts: Do not use bright or neon accent colors; do not use thick, blocky borders for UI elements; and do not use heavy, bold fonts for headlines. The layout is defined by full-bleed hero images and generous vertical spacing, creating a sophisticated, unhurried browsing experience.
```