CURATED · OPEN · FREE

Audemars Piguet

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

watchesluxury
Audemars Piguet screenshot
↓ Download design system (32 MB)Open in OpenDesign

Visit: https://www.audemarspiguet.com

📦 Browse pack contents →

01

Identity DNA

HeritageSophisticationSwiss CraftsmanshipTimeless

A cinematic fashion editorial blending heritage with modern storytelling.

02

Color

#ffffffInk
#8b8c8cInk soft
#000000BG
#f6f5f3BG soft
#808080Muted
rgba(139, 140, 140, 0.3)Line

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

03

Typography

transitional-serif · 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.

04

Spacing

4px
8px
16px
24px
32px
48px
64px
96px
120px

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

05

Surfaces

sm · 2px
md · 3px
lg · 0px
pill · 999px

1px solid rgba(139, 140, 140, 0.3)

rgba(0, 0, 0, 0.2) 0px 0px 18px 0px · rgba(0, 0, 0, 0.2) 0px 0px 10px 0px

06

Layout

1280container
12columns
24pxgutter
768 / 1024breakpoints

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

07

Motion & Interaction

220msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth color and background transitions on interactive elements.

Subtle color shifts with a 0.3s ease-in-out transition. · Subtle feedback, likely through opacity or color change.

08

Components

09

Voice & Don'ts

10

Inside the pack — real screenshots

Audemars Piguet — 桌面首屏（hero）
桌面首屏（hero）
Audemars Piguet — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Audemars Piguet — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Audemars Piguet — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Audemars Piguet — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Audemars Piguet — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Audemars Piguet — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Audemars Piguet — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Audemars Piguet — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Audemars Piguet — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Audemars Piguet — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Audemars Piguet — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Audemars Piguet — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Audemars Piguet — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Audemars Piguet — 移动首屏
移动首屏

Captured from the live site · real computed styles

11

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko