--- version: alpha name: Audemars Piguet description: Haute horlogerie rendered as a precision instrument — deep forest-green-black canvas drawn from Le Brassus ateliers, Neue Helvetica at featherweight 100 in screaming uppercase, white as the only ink, and a palette that subordinates every interface atom to the geometry of the Royal Oak. colors: # Primary canvas — AP brand green-black from CSS manifest background: "#142924" # manifest backgroundColor; the forest-night atelier base surface: "#02291f" # --color-brand-color; deepest brand green for nav/primary surface surface-mid: "#1a1a1a" # near-black panels, watch-grid sections surface-light: "#f6f5f3" # opaque approx of rgb(246,245,243) — warm off-white inset sections, light mode accents surface-dark: "#000000" # absolute black hero scrims and video overlays # Ink ink: "#ffffff" ink-secondary: "#bfbfbf" # --color-palette-grey75; supporting body and metadata on dark surfaces ink-muted: "#8b8c8c" # mid-grey; disabled states, placeholder copy ink-inverted: "#142924" # for text on light surfaces # On-color on-background: "#ffffff" on-surface: "#ffffff" on-primary: "#ffffff" # Brand accent — deep forest green drawn from CSS variables; used for CTA fills and structural accents primary: "#456148" # --color-brand-green; brand forest green primary-dark: "#02291f" # --color-brand-color; darkest brand green, primary nav fill primary-hover: "#31663a" # --color-enrichment-color; hover lift on green elements # Focus / accessibility focus-ring: "#3939ff" # --color-reference-normal-focus; accessibility focus indicator # Reference accent — teal-green from AP Chronicles footer branding accent-teal: "#2b4f4f" # --color-reference-contrast-accent; footer/secondary accent only # White gold — heritage metal tint used in premium editorial moments accent-gold: "#c9b586" # --color-white-gold; gold accent for anniversary/heritage sections # Semantic states error: "#b02828" # --color-palette-red42; form errors and alerts # Borders border: "#656565" # --color-grey-5-ui; structural dividers, section separators border-subtle: "#d1d1d1" # opaque approx of rgb(209,209,209) — form input outlines border-dark: "#000000" # absolute-black rule on dark separators # Shadow shadow-soft: "#999999" # opaque approx of rgb(153,153,153) — rare drop-shadow on overlay panels typography: display-hero: fontFamily: "Helvetica Neue Web, Neue-Helvetica-25-Ultra-Light, HelveticaNeueLTCom-UltLt, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 56px fontWeight: 100 lineHeight: 1.00 letterSpacing: -0.56px display: fontFamily: "Helvetica Neue Web, Neue-Helvetica-25-Ultra-Light, HelveticaNeueLTCom-UltLt, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 30px fontWeight: 100 lineHeight: 1.00 letterSpacing: 1.2px heading-section: fontFamily: "Helvetica Neue Web, Neue-Helvetica-55-Regular, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 30px fontWeight: 400 lineHeight: 1.00 letterSpacing: 1.2px heading-sub: fontFamily: "Helvetica Neue Web, Neue-Helvetica-65-Medium, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.50 letterSpacing: 0.21px heading-utility: fontFamily: "Helvetica Neue Web, Neue-Helvetica-65-Medium, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 1.33 letterSpacing: 1.8px body-large: fontFamily: "Helvetica Neue Web, Neue-Helvetica-45-Light, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 17px fontWeight: 300 lineHeight: 1.35 letterSpacing: 0.26px body: fontFamily: "Helvetica Neue Web, Neue-Helvetica-45-Light, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 300 lineHeight: 1.49 letterSpacing: 0.21px nav-link: fontFamily: "Helvetica Neue Web, Neue-Helvetica-65-Medium, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.49 letterSpacing: 0.21px button-ui: fontFamily: "Helvetica Neue Web, Neue-Helvetica-65-Medium, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.43 letterSpacing: 0.21px caption: fontFamily: "Helvetica Neue Web, Neue-Helvetica-65-Medium, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 1.00 letterSpacing: 0.96px label-upper: fontFamily: "Helvetica Neue Web, Neue-Helvetica-65-Medium, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 1.33 letterSpacing: 1.8px spacing: xs: 4px sm: 8px md: 16px lg: 32px xl: 64px 2xl: 100px 3xl: 120px rounded: none: 0px sm: 2px # buttons and primary interactive controls md: 24px # pill-adjacent spans and badge elements components: # Primary CTA — black fill, white label, near-sharp corners, uppercase Medium button-primary: backgroundColor: "{colors.surface}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.sm}" padding: 20px 16px button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-primary}" # Ghost / outline button — transparent with white border on dark backgrounds button-ghost: backgroundColor: "{colors.surface-dark}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.sm}" padding: 20px 16px button-ghost-hover: backgroundColor: "{colors.surface-mid}" textColor: "{colors.ink}" # Navigation tab — underline-bottom indicator, uppercase Medium button-tab: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: 12px 20px button-tab-active: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" # Navigation bar nav-bar: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: 16px 32px # Watch tile card card: backgroundColor: "{colors.surface-mid}" textColor: "{colors.ink}" rounded: "{rounded.none}" padding: 24px card-hover: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" # Light-mode card (editorial and heritage sections) card-light: backgroundColor: "{colors.surface-light}" textColor: "{colors.ink-inverted}" rounded: "{rounded.none}" padding: 24px # Form inputs — dark bg, 1px border outline input: backgroundColor: "{colors.surface-dark}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 12px 16px input-focus: backgroundColor: "{colors.surface-dark}" textColor: "{colors.ink}" # Category badge / filter chip badge: backgroundColor: "{colors.surface-mid}" textColor: "{colors.ink}" typography: "{typography.caption}" rounded: "{rounded.md}" padding: 4px 12px # Heritage/anniversary gold accent badge badge-gold: backgroundColor: "{colors.accent-gold}" textColor: "{colors.ink-inverted}" typography: "{typography.caption}" rounded: "{rounded.none}" padding: 4px 12px --- # Audemars Piguet Design System ## Overview The Audemars Piguet website carries the weight of 150 years in Le Brassus. Its design language is not a luxury brand's standard dark-mode showroom — it is something more specific: the visual register of a manufacture that has been making complications by hand since 1875, digitized. The canvas is `{colors.background}`, a deep forest-green-black drawn directly from the brand's CSS color manifest. It is not the warm charcoal of a Rolls-Royce gallery or the pure lacquer black of a Porsche configurator. It is the color of a watch atelier at dusk, lit by a single lamp over the dial. Everything on it — product photography, headlines, navigation — reads against this deep organic ground. The typographic choice is almost aggressive in its restraint. Neue Helvetica at Ultra Light (weight 100) carries the hero display text at 56px, the tracking slightly negative at -0.56px. Neue Helvetica is a Swiss precision instrument in its own right — a typeface associated with technical drawing, scientific documentation, and mid-century modernism — and AP weaponizes its Ultra Light cut to create a headline register that feels machined rather than styled. Below display, the system moves through Light (300) for body reading and Medium (500) for UI labels and navigation, with small uppercase tracking at 1.2–1.8px reinforcing the sense of technical precision. The typeface never shouts; it declares. Color is purposefully withheld. `{colors.primary}` is AP's brand forest green (`{colors.primary}`), a deeply saturated deep green derived from the brand color system and used for primary structural elements including the navigation surface itself. But the visual weight of the system is concentrated in black and white — `{colors.surface}` ground, `{colors.ink}` text — with the green operating more as an architectural constant than an interactive accent. Photography carries all the emotional weight. The Royal Oak's octagonal bezel, the Offshore's rubber strap, the Concept Flying Tourbillon's skeletal movement — these are the color story. **Key Characteristics:** - Deep forest-green-black `{colors.background}` as the signature canvas — not pure black but a lived-in organic dark drawn from the AP brand color system - Neue Helvetica Ultra Light (weight 100) at 56px / -0.56px tracking for hero display — typographic precision over typographic warmth - Uppercase treatment across every level: CTAs, headings, navigation, badges — the system speaks only in capitals - `{colors.primary}` forest green as the primary surface fill for the navigation bar — structural, not decorative - `{colors.accent-gold}` (`{colors.accent-gold}`) appearing in anniversary and heritage sections — the only warm metal in a cold system - `{colors.focus-ring}` (`{colors.focus-ring}`) as the explicit accessibility focus ring — the one vivid blue in the entire palette - Near-sharp `{rounded.sm}` (2px) radius on buttons — a hairline softening that preserves the technical-precision aesthetic without going fully sharp - Horizontal watch-grid layout on the homepage — watches presented in sequence like objects in a museum vitrine - 0.3s ease-in transitions on navigation links; 0.5s ease-in-out on buttons — measured, not urgent - 100px vertical section spacing at `{spacing.2xl}` — the breathing room of a grande complication - TimesNow Extra Light Italic appearing in limited editorial moments — the serif exception in a sans-serif system ## Colors ### Primary - **Atelier Night** (`{colors.background}`): The canvas. A forest-green-black drawn from AP's brand color manifest. Warmer and more organic than pure black; reads like the darkest green in a drawing-room by candlelight. - **Brand Ground** (`{colors.surface}`): The deepest brand green, derived from `--color-brand-color`. Fills the navigation bar and primary structural surfaces — the color of the building itself, not just the backdrop. ### Surface Scale - **Near-Black Panel** (`{colors.surface-mid}`): Secondary sections, watch tile backgrounds, and dark editorial panels. - **Absolute Black** (`{colors.surface-dark}`): Hero scrims and video overlays where imagery must read without competition. - **Warm Off-White** (`{colors.surface-light}`): Inset editorial sections in heritage, "AP Chronicles", and dealer-locator contexts. An exception, never the default. ### Ink - **Primary Text** (`{colors.ink}`): All headings, body copy, navigation, and CTA labels — pure white on all dark surfaces. - **Secondary Text** (`{colors.ink-secondary}`): Supporting labels, metadata, and specifications. Maps to `--color-palette-grey75`. - **Muted** (`{colors.ink-muted}`): Disabled states, placeholder text. - **Inverted** (`{colors.ink-inverted}`): Text on light-mode surface sections. ### Brand Accent - **Forest Green Primary** (`{colors.primary}`): The AP brand green, used for structural interactive fills and nav bar surface. Reference: `--color-brand-green`. - **Deep Brand Green** (`{colors.primary-dark}`): The darkest brand anchor, used for the nav surface itself. - **Green Hover** (`{colors.primary-hover}`): Lifts slightly on interactive green elements. Maps to `--color-enrichment-color`. ### Special Accents - **White Gold** (`{colors.accent-gold}`): Heritage metal tint from `--color-white-gold`. Anniversary editions, 150th-year sections. - **Teal Accent** (`{colors.accent-teal}`): Structural accent from `--color-reference-contrast-accent`. Appears in AP Chronicles footer branding. - **Focus Blue** (`{colors.focus-ring}`): `--color-reference-normal-focus` — vivid blue accessibility focus ring, contrast-safe on all brand backgrounds. ### Semantic - **Error** (`{colors.error}`): `--color-palette-red42` — form validation errors and alerts. ### Borders - **Structural Divider** (`{colors.border}`): `--color-grey-5-ui` — section separators, rule lines. - **Input Outline** (`{colors.border-subtle}`): Hairline on form fields and subtle component edges. ## Typography ### Font Family - **Neue Helvetica Web** — self-hosted in five weights: Ultra Light (100 / `Neue-Helvetica-25-Ultra-Light.woff2`), Light (300 / `Neue-Helvetica-45-Light.woff2`), Regular (400 / `Neue-Helvetica-55-Regular.woff2`), Medium (500 / `Neue-Helvetica-65-Medium.woff2`), Bold (700 / `Neue-Helvetica-75-Bold.woff2`), Bold Italic (700i). The workhorse of the system; technical, Swiss, authoritative. - **TimesNow Extra Light Italic** — self-hosted. Appears sparingly in editorial and heritage contexts, providing a calligraphic serif counterpoint to the Helvetica ground. The serif exception. - **icomoon** — icon font for UI symbols (arrows, navigation markers). - System fallbacks: `Helvetica Neue, Helvetica, Arial, sans-serif`. ### Hierarchy | Token | Use | |---|---| | `display-hero` | 56px Ultra Light, -0.56px tracking, UPPERCASE — hero headlines, product launches, section openers | | `display` | 30px Ultra Light, 1.2px tracking, UPPERCASE — secondary display moments, novelties section titles | | `heading-section` | 30px Regular, 1.2px tracking, UPPERCASE — section headings with more presence than Ultra Light | | `heading-sub` | 16px Medium, 0.21px tracking — watch names, subsection labels, feature headings | | `heading-utility` | 12px Medium, 1.8px tracking, UPPERCASE — eyebrow labels, category identifiers, filter headers | | `body-large` | 17px Light, 0.26px tracking — lead paragraphs, introductory copy, product descriptions | | `body` | 16px Light, 0.21px tracking — standard reading copy, specifications | | `nav-link` | 14px Medium, 0.21px tracking — navigation, footer links, utility labels | | `button-ui` | 14px Medium, 0.21px tracking — CTA labels | | `caption` | 12px Medium, 0.96px tracking — category tags, gallery labels, fine UI metadata | | `label-upper` | 12px Medium, 1.8px tracking, UPPERCASE — filter labels, tab identifiers | ### Principles - **Ultra Light carries authority here.** At 56px, weight 100 Neue Helvetica reads more imposing than a bold face at the same size — the precision of a calibrated instrument. - **Letter-spacing inverts with hierarchy.** Display text runs negative (-0.56px) for tight mastery; small caps and labels run positive (1.2–1.8px) for legibility and ceremoniousness. - **Uppercase is the system's voice.** Every CTA, heading, navigation item, and badge is all-caps. The system does not whisper. - **TimesNow Italic is a single instrument.** Use it only for editorial moments where the brand's 150-year craft heritage needs calligraphic warmth. Never for UI. - **Light (300) is the reading weight.** The system trusts AP's audience to read extended prose in a thin weight; compression or bold would cheapen the register. ## Layout ### Spacing System The complete spacing scale lives in the `spacing:` token block above. Base unit: 8px. The standout values are `{spacing.2xl}` (100px) and `{spacing.3xl}` (120px) — found repeatedly in section vertical padding, signaling that time is the one thing AP will never appear to save. ### Grid & Container - Max content width: approximately 1440px (observed breakpoint ceiling) - Watch-grid sections: horizontal scroll carousels rather than static grids — objects presented like a museum vitrine, one at a time - Editorial sections: full-bleed photography alternating with constrained text columns (~800–1000px) - Navigation: full-width dark-green strip; AP logotype centered, category navigation left, utility (search, cart) right ### Whitespace Philosophy - Whitespace at AP is not breathing room — it is precision tolerancing. Every gap is deliberate, like the gap between a case and its crystal. - Section padding at `{spacing.2xl}` (100px) and `{spacing.3xl}` (120px) refuses the internet's compression logic. - Between watch tiles in the horizontal carousel, spacing is generous enough that each watch reads as an individual object, not a product list. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow, no border | Default — all sections on `{colors.background}` and `{colors.surface}` | | Hairline (Level 1) | `1px solid {colors.border-subtle}` | Form inputs, section dividers, tab indicators | | Bottom-rule (Level 2) | `0px 0px 1px solid {colors.ink}` | Decorative underline rules beneath section headings | | Ambient (Level 3) | `rgb(153,153,153) 0px 2px 10px -3px` | Overlay panels and watch-detail drawers | | Dialog (Level 4) | `rgba(0,0,0,0.2) 0px 0px 18px 0px` | Lightbox overlays and modal dialogs | | Focus Ring | `2px solid {colors.focus-ring}` | Accessibility focus indicator on all interactive elements | **Shadow Philosophy**: Audemars Piguet's elevation system is architecturally flat. The canvases are dark by nature, so shadows provide little definition; depth comes from photography and section color contrast (`{colors.background}` vs `{colors.surface}` vs `{colors.surface-light}`). The rare drop-shadow appears only in overlay drawers and modal dialogs — contexts where a panel floats above the product surface. This restraint reinforces the idea that the watches are three-dimensional objects in a two-dimensional space; the UI refuses to claim dimensionality for itself. ## Shapes The radius system is nearly binary — near-sharp rectangular structure and a moderate-rounded span for tags. | Token | Value | Use | |---|---|---| | `none` | 0px | All large sections, editorial containers, input underlines | | `sm` | 2px | All CTA buttons — a hairline softening that maintains technical precision | | `md` | 24px | Badge/tag chips and filter pill elements | The 2px button radius is an important signal. AP does not use sharp 0px corners on buttons (which would read as militant) or pill radius (too casual, too e-commerce). The 2px hairline is the watchmaker's chamfer — an acknowledgment that edges need to be addressed, executed with maximum restraint. ## Components The complete component spec lives in the `components:` token block above. Reference component tokens directly rather than reconstructing them. ### Buttons - **`button-primary`** — Deep brand green or near-black fill (`{colors.surface}`), white `{colors.ink}` label, 2px radius, `{typography.button-ui}` 14px Medium uppercase. The "Subscribe" and primary CTA pattern. Hover lifts to `{colors.primary-hover}`. - **`button-ghost`** — Transparent with `{colors.ink}` label; same 2px radius, same typography. Used over dark surfaces when a solid fill would compete with photography. - **`button-tab`** — Rectangular, `{rounded.none}`, Medium nav-link style. Active state marked by a bottom underline rule. No fill change — the underline is the signal. ### Cards - **`card`** — Near-black `{colors.surface-mid}` background, zero radius, 24px padding. Watch tiles and editorial panels. - **`card-light`** — Warm `{colors.surface-light}` background for heritage and editorial inset sections. `{colors.ink-inverted}` text. The rarest surface in the system. ### Inputs - **`input`** — Dark surface background, 1px `{colors.border-subtle}` outline, zero radius, Light body text. Used in search, configurator, and dealer-locator forms. Focus state applies `{colors.focus-ring}` 2px ring for accessibility compliance. ### Badges - **`badge`** — Semi-dark `{colors.surface-mid}` background with 24px radius for the filter/category pill pattern. Medium caption text. - **`badge-gold`** — `{colors.accent-gold}` background with sharp `{rounded.none}` corners. Reserved for anniversary and "150 years" editorial markers. ### Navigation - Full-width `{colors.surface}` (brand deep green) strip. Logotype centered. Category nav (`Watches`, `Our World`, `Services`, `Stories`) left cluster in `{typography.nav-link}`. Hover: 0.3s ease-in color shift from `{colors.ink}` to `{colors.ink-secondary}`. ## Do's and Don'ts ### Do - Use `{colors.background}` as the default canvas for all sections — the forest-green-black, not pure black or a generic dark. - Apply `{rounded.sm}` (2px) to every button — the one hairline chamfer is a system rule. - Set CTA labels in `{typography.button-ui}` — Neue Helvetica Medium 14px uppercase with 0.21px tracking. - Use `{typography.display-hero}` at 56px / Ultra Light / uppercase for any marquee headline — the extreme thinness at large scale is the brand signature. - Apply `{spacing.2xl}` (100px) or `{spacing.3xl}` (120px) for section vertical padding — AP never compresses. - Use `{colors.focus-ring}` as the 2px focus indicator on all interactive elements — this is both a brand CSS variable and an accessibility requirement. - Preserve the horizontal-scroll watch-carousel pattern for product grids — objects in a vitrine, not a catalogue. - Reserve `{colors.accent-gold}` for anniversary and heritage editorial sections only — it is precious because it is withheld. ### Don't - Don't use pure `{colors.surface-dark}` (black) as the default canvas — AP's canvas is `{colors.background}`, the specific forest-green-black. - Don't introduce mid-radius (4–16px) on buttons or containers — the system is 0px / 2px / 24px; anything between is wrong. - Don't use Neue Helvetica Bold (700) for headings — the system scales from Ultra Light through Medium. Bold appears only in bold-italic `Neue-Helvetica-76-Bold-Italic` for exceptional contrast moments. - Don't reduce letter-spacing on label-upper or heading-utility below 1.2px — the positive tracking on small text is what makes it feel engraved rather than printed. - Don't use `{colors.accent-gold}` for interactive affordances or buttons — it is editorial-only, not an interactive color. - Don't introduce promotional UI patterns (sale ribbons, countdown timers, discount badges) — they are categorically incompatible with the brand register. - Don't use TimesNow Italic for UI chrome — it is editorial-only, reserved for craft-heritage and long-form writing contexts. - Don't apply color transitions faster than 0.3s — the system's measured pace communicates unhurried precision. --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile Small | ≤425px | Single column; hamburger navigation; hero text scales to ~28–36px; full-width CTAs | | Mobile | 426–768px | Single column; navigation drawer; 30px display; horizontal carousel becomes swipeable | | Tablet | 769–1024px | 2-column editorial grids; navigation partially expanded; headline ~40px | | Desktop | 1025–1280px | Full navigation with all category labels; 3-up watch grids; headline 56px | | Large Desktop | 1281–1440px | Maximum content width; generous lateral gutters; hero at full 56px impact | | Ultra-Wide | >1440–1921px | Container locks at ~1440px; cinematic hero photography fills viewport width | ### Touch Targets - Primary buttons at 20px vertical padding + 1.43 line-height resolve to approximately 50px tall — meets WCAG AAA 44px minimum. - Navigation links in the drawer at Medium weight provide adequate touch area. - Watch tiles in the horizontal carousel: full-tile tap target. ### Collapsing Strategy - **Navigation**: Full horizontal nav collapses to hamburger + centered AP logotype on mobile. - **Hero**: Full-viewport hero maintained at all sizes; display text scales 56 → 40 → 28px. - **Watch carousel**: Horizontal scroll maintained on all sizes; swipe gesture on touch, scroll on desktop. - **Section padding**: 100–120px → 64px → 48px as screens narrow. - **Editorial grids**: 2-column alternating text/image → single column stacked on mobile. ### Image Behavior - Watch photography served with `object-fit: cover`; aspect ratios preserved across carousel tiles. - Hero images full-bleed; `object-position: center` default. - Lazy-load on all below-fold product and editorial imagery. - Dynamic Media serving via `dynamicmedia.audemarspiguet.com` with `wid` and `fmt=avif-alpha` parameters for responsive image optimization. --- ## Agent Prompt Guide ### Quick Color Reference - Canvas: `{colors.background}` (forest-green-black) - Nav surface: `{colors.surface}` (deep brand green) - Primary text: `{colors.ink}` (white) - Secondary text: `{colors.ink-secondary}` - CTA fill: `{colors.surface}` (deep green) or `{colors.surface-dark}` (black) - Border / divider: `{colors.border}` - Focus ring: `{colors.focus-ring}` - Heritage accent: `{colors.accent-gold}` ### Example Component Prompts 1. *"Create a full-viewport hero section on `{colors.background}`. Place a full-bleed watch photography background. Overlay the collection name in Neue Helvetica Ultra Light 56px / ALL CAPS / -0.56px tracking in `{colors.ink}`. Beneath it: a 30px sub-heading at Ultra Light / 1.2px tracking UPPERCASE. A primary CTA button (`{components.button-primary}`) with 'DISCOVER MORE' label, 40px below the sub-heading. Section padding top/bottom: 100px."* 2. *"Design a horizontal watch carousel on `{colors.background}`. Each tile: `{components.card}` with watch photography in a 3:4 ratio (no radius). Beneath: watch reference in `{typography.heading-sub}` 16px Medium, model name in `{typography.body}` 16px Light, a ghost CTA (`{components.button-ghost}`) labeled 'DISCOVER MORE'. Gap between tiles: 32px. Carousel full-width with overflow-x scroll."* 3. *"Build a navigation bar on `{colors.surface}`: AP logotype centered in `{colors.ink}` at 20px height. Left cluster: WATCHES / OUR WORLD / SERVICES / STORIES in `{typography.nav-link}` 14px Medium uppercase with 0.3s ease-in color-shift hover to `{colors.ink-secondary}`. Right: search icon + boutique locator link. Full-width; 16px vertical padding."* 4. *"Create an editorial feature section alternating photography and text on `{colors.background}`. Text side: eyebrow label in `{typography.label-upper}` 12px Medium 1.8px tracking UPPERCASE in `{colors.ink-secondary}`. Heading in `{typography.display}` 30px Ultra Light UPPERCASE. Body in `{typography.body-large}` 17px Light. One `{components.button-ghost}` CTA. Section padding: 120px vertical. At tablet breakpoint: stack image above text."* 5. *"Design a watch filter/category toolbar on `{colors.surface-mid}`: Filter chips using `{components.badge}` (24px radius, `{colors.surface-mid}` fill, `{colors.ink}` label, `{typography.caption}` 12px Medium). Active chip: `{colors.primary}` fill. Left-aligned, 16px gap between chips. Full-width horizontal scroll on mobile."* 6. *"Build a 150th anniversary editorial card on `{colors.surface-light}` (warm off-white). Headline in TimesNow Extra Light Italic (serif exception) at 36px in `{colors.ink-inverted}`. Body in `{typography.body-large}` Light. Anniversary badge: `{components.badge-gold}` with 'SINCE 1875' label. A dark CTA button (`{components.button-primary}`) at bottom. Padding: 48px all sides."* ### Iteration Guide 1. **Audit the canvas.** Sections should use `{colors.background}` by default. Navigation uses `{colors.surface}`. Pure black (`{colors.surface-dark}`) is reserved for hero scrims. If you see a generic `#111` or `#222` grey, it is wrong. 2. **Audit typography weight.** Display headlines should be weight 100 (Ultra Light) — if they look normal-weight, they are wrong. Body should be weight 300 (Light). 3. **Audit uppercase.** Every heading, CTA, navigation item, and badge label should be `text-transform: uppercase`. Sentence case anywhere in the UI is wrong. 4. **Audit button radius.** Every button should have `border-radius: 2px`. Zero (too militant) or anything above 4px is wrong. 5. **Audit spacing.** Section padding should feel excessive — 100px is the minimum between major sections. If it looks like a normal website, the gaps are too tight. 6. **Audit the focus ring.** Ensure `{colors.focus-ring}` (#3939ff) appears on all `:focus-visible` states — it is an explicit brand CSS variable, not just an accessibility afterthought. 7. **Audit gold usage.** `{colors.accent-gold}` should appear only in anniversary or heritage editorial moments. If it appears on a button or navigation element, remove it. --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Audemars Piguet. Brand names and trademarks belong to their respective owners.