---
name: Audemars Piguet
description: "This site is a masterclass in using typography (thin serifs) and negative space to convey luxury and heritage without relying on complex UI patterns."
version: alpha

colors:
  background: "#000000"
  primary: "#ffffff"
  secondary: "#8b8c8c"
  neutral: "#808080"
  bg-soft: "#f6f5f3"
  line: "rgba(139, 140, 140, 0.3)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 60px
    lineHeight: 1.0
    fontWeight: 300
    letterSpacing: "-1.2px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.49
    fontWeight: 300
    letterSpacing: "0.21px"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.71
    fontWeight: 300
    letterSpacing: "1.8px"

rounded:
  sm: 2px
  md: 3px
  lg: 0px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A premium editorial experience for Audemars Piguet, emphasizing heritage, cinematic photography, and restrained luxury.

*A cinematic fashion editorial blending heritage with modern storytelling.*

## Colors

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

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#ffffff`)** — uses `ink` token
- **Secondary text (`#8b8c8c`)** — uses `ink-soft` token
- **Muted (`#808080`)** — uses `muted` token
- **Borders (`rgba(139, 140, 140, 0.3)`)** — uses `line` token

## Typography

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

- 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.

## Layout

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

*Rhythm:* Generous vertical rhythm with large section padding (100px+) to frame content.

## Elevation & Depth

- 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)

## Shapes

- `sm`: 2px
- `md`: 3px
- `lg`: 0px
- `pill`: 999px

## Components

- **button:** Minimalist text links with a horizontal line prefix instead of traditional borders.
- **card:** Large, edge-to-edge photographic cards for editorial storytelling.
- **input:** Standard cookie consent buttons with high-contrast black/white styling.
- **hero:** Full-viewport cinematic photography with overlaid serif typography.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```