큐레이션 · 오픈 · 무료

Diptyque

풍부한 여백, 뛰어난 사진, 절제된 타이포그래피로 정의되는, 럭셔리 파리안 향수 하우스를 위한 프리미엄 편집 중심 전자상거래 경험입니다.

beautyfragrance
Diptyque 스크린샷
↓ 디자인 시스템 다운로드 (58 MB)OpenDesign 에서 열기

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

📦 팩 내용 보기 →

01

디자인 DNA

럭셔리세련된아티장유산향수

각 제품이 자연적이고 질감 있는 배경 앞에서 귀중한 유물로 제시되는, 아티장 향수로 구성된 큐레이션된 갤러리입니다.

02

컬러

#000000Ink
#717171Ink soft
#FFFFFFBG
#F8F8F8BG quiet
#A1A1A1Muted
rgba(229, 231, 235, 1)Line

편집 사진 내 풍부하고 자연스러운 색상 팔레트에 완전히 양보하는, 고대비 모노크롬 UI (화이트에 블랙)

03

타이포그래피

transitional-serif · geometric-sans

감각적인 헤드라인을 위해 전환 세리프를 사용하여 우아함을 확립합니다. · 명확성을 위해 모든 기능적 UI 텍스트와 내비게이션에 기하학적 산세리프를 사용합니다. · 편집적이고 지저분하지 않은 느낌을 유지하기 위해 본문 텍스트는 14px로 유지합니다.

04

여백

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

풍부한 여백과 패딩이 레이아웃을 정의하여 럭셔리와 평온한 느낌을 만듭니다. 수직 리듬은 주로 큰 섹션 구분선과 이미지 마진을 통해 확립됩니다.

05

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

sm · 0px
md · 0px
lg · 0px
pill · 9999px

rgba(229, 231, 235, 1)를 사용한 최소한의 깔끔한 테두리. 버튼은 모서리가 sharp한 1px solid 테두리를 사용하며, 가끔 pill 형태의 입력 필드를 제외하고는 border-radius를 사용하지 않습니다.

없음 · 인터랙티브 요소에 inset 0px -2px 0px 0px rgba(0, 0, 0, 1)

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

풍부한 마진을 가진 중앙 정렬 콘텐츠 블록으로 전환되는 풀블리드 히어로 이미지. 그리드는 주로 제품 캐러셀에만 절제되게 사용되며, 임팩트를 위해 단일 칼럼 편집 레이아웃에 의존합니다.

07

모션과 인터랙션

220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 1, 1)easing

메뉴 오버레이 및 배너를 위한 부드러운 불투명도 전환. · 인터랙티브 요소의 hover 상태에서의 섬세한 easing. · 캐러셀 내 객체 위치 이동을 위한 표준 선형 전환.

텍스트 밑줄 또는 버튼의 섬세한 테두리 전환. · 무거운 피드백 애니메이션 없이 즉각적인 상태 변경.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

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

11

System Prompt

Diptyque Paris는 절제된 편집적 접근 방식으로 정의되는 프리미엄 럭셔리 향수 전자상거래 사이트입니다. 이 디자인은 풍부하고 자연주의적인 제품 사진이 감정적 무게를 지니도록, 엄격한 모노크롬 UI (순수 블랙 #000000과 화이트 #FFFFFF)에 의존합니다. 타이포그래피는 우아한 디스플레이 헤드라인을 위한 전환 세리프와 기능적 본문 및 내비게이션 텍스트를 위한 깔끔한 기하학적 산세리프 (Apercu와 같은) 사이의 신중한 균형을 이루며, 가독성을 위해 14px 기본값을 유지합니다. 레이아웃은 갤러리 같은 느낌을 만들기 위해 풀블리드 이미징과 풍부한 여백을 활용하여 넓게 구성됩니다. 핵심적인 주요 금지 사항은 다음과 같습니다: 버튼이나 카드에 둥근 모서리를 절대 사용하지 마세요, 사진과 경쟁하는 밝은 악센트 색상을 피하세요, 그리고 빽빽한 텍스트 블록이나 무거운 드롭 섀도우로 인터페이스를 지저분하게 만들지 마세요. 전체 시스템은 고요한 럭셔리와 세련된 절제의 느낌을 보존해야 합니다.

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

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

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

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