큐레이션 · 오픈 · 무료

Audemars Piguet

전통, 시네마틱 사진, 그리고 절제된 럭셔리를 강조하는 오데마 피게의 프리미엄 에디토리얼 경험.

watchesluxury
Audemars Piguet 스크린샷
↓ 디자인 시스템 다운로드 (32 MB)OpenDesign 에서 열기

원본 사이트: https://www.audemarspiguet.com

📦 팩 내용 보기 →

01

디자인 DNA

전통세련미스위스 장인정신시대를 초월한

전통과 현대적인 스토리텔링을 결합한 시네마틱 패션 에디토리얼.

02

컬러

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

사진 콘텐츠가 지배할 수 있도록 엄격한 단색 팔레트(검정, 흰색, 쿨 그레이)를 사용합니다.

03

타이포그래피

transitional-serif · humanist-sans

강렬한 에디토리얼 헤드라인에는 트랜지셔널 세리프를 사용합니다. · 모든 UI 요소, 네비게이션, 본문 텍스트에는 휴머니스트 산스를 사용합니다. · 대문자 캡션에는 넉넉한 자간을 유지합니다.

04

여백

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

콘텐츠를 프레이밍하기 위한 넉넉한 수직 리듬과 큰 섹션 padding(100px+)을 적용합니다.

05

표면 (라운드 / 그림자 / 경계선)

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

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

풀블리드 히어로 섹션에서 검정색, 콘텐츠 제한 에디토리얼 블록으로 전환되는 레이아웃입니다.

07

모션과 인터랙션

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

인터랙티브 요소에서의 부드러운 색상 및 배경 전환.

0.3s ease-in-out 전환을 사용한 미묘한 색상 변화. · 불투명도 또는 색상 변경을 통한 미묘한 피드백.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

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 — 移动首屏
移动首屏

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

이것은 오데마 피게를 위한 프리미엄 럭셔리 시계 웹사이트입니다. 디자인 DNA는 깊이 시네마틱하고 에디토리얼적이며, UI 요소보다 고품질 사진을 우선시합니다. 주요 hex 색상은 배경용 #000000과 텍스트용 #ffffff로, 고대비 단색 기반을 만듭니다. 타이포그래피 카테고리는 디스플레이 헤드라인용 트랜지셔널 세리프와 본문 텍스트용 휴머니스트 산스입니다. 주요 필수 규칙: 밝거나 네온 강조색을 사용하지 마세요; UI 요소에 두껍고 네모난 테두리를 사용하지 마세요; 헤드라인에 무겁고 볼드한 글꼴을 사용하지 마세요. 레이아웃은 풀블리드 히어로 이미지와 넉넉한 수직 간격으로 정의되어, 세련되고 여유로운 탐색 경험을 만듭니다.

이 감각을 당신의 에이전트에

이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

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