큐레이션 · 오픈 · 무료
Diptyque
풍부한 여백, 뛰어난 사진, 절제된 타이포그래피로 정의되는, 럭셔리 파리안 향수 하우스를 위한 프리미엄 편집 중심 전자상거래 경험입니다.
beauty fragrance
01
디자인 DNA
럭셔리 세련된 아티장 유산 향수
각 제품이 자연적이고 질감 있는 배경 앞에서 귀중한 유물로 제시되는, 아티장 향수로 구성된 큐레이션된 갤러리입니다.
02
컬러
#000000Ink
#717171Ink soft
#FFFFFFBG
#F8F8F8BG quiet
#A1A1A1Muted
rgba(229, 231, 235, 1)Line
편집 사진 내 풍부하고 자연스러운 색상 팔레트에 완전히 양보하는, 고대비 모노크롬 UI (화이트에 블랙)
03
타이포그래피
transitional-serif · geometric-sans
display 32px · 400body 14px · 400caption 12px · 400감각적인 헤드라인을 위해 전환 세리프를 사용하여 우아함을 확립합니다. · 명확성을 위해 모든 기능적 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
레이아웃
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
풍부한 마진을 가진 중앙 정렬 콘텐츠 블록으로 전환되는 풀블리드 히어로 이미지. 그리드는 주로 제품 캐러셀에만 절제되게 사용되며, 임팩트를 위해 단일 칼럼 편집 레이아웃에 의존합니다.
07
모션과 인터랙션
220ms micro
400ms small
800ms medium
cubic-bezier(0.4, 0, 1, 1) easing
메뉴 오버레이 및 배너를 위한 부드러운 불투명도 전환. · 인터랙티브 요소의 hover 상태에서의 섬세한 easing. · 캐러셀 내 객체 위치 이동을 위한 표준 선형 전환.
텍스트 밑줄 또는 버튼의 섬세한 테두리 전환. · 무거운 피드백 애니메이션 없이 즉각적인 상태 변경.
08
컴포넌트
button 1px 블랙 테두리의 sharp하고 직사각형 윤곽선, 대문자 또는 혼합 세리프 텍스트, 그리고 채우기 없음. pill 변형을 제외하고는 border-radius 없음. card 최소한의 UI를 가진 이미지 우선 카드; 텍스트는 일반적으로 깔끔하고 구조화되지 않은 레이아웃에서 이미지 경계 외부에 배치됩니다. chip 두드러지게 사용되지 않음. input 무거운 배경 채우기 없이 깨끗한 라인에 초점을 맞춘, 단순한 블랙 테두리의 미니멀리스트 필드. hero 오버레이되거나 중앙 정렬된 CTA 버튼을 가진 지배적인 풀블리드 사진 배너.
09
보이스와 금지 목록
톤 럭셔리 향수 마케팅에 전형적인, 감각적이고 세련되며 약간 시적인 어조. 헤드라인 공격적인 세일즈보다는 분위기를 조성하는 짧고 묘사적이며 우아한 구절. CTA 강제적인 행동보다는 탐험을 유도하는, 장식적인 점이나 단순한 마침표로 흔히 프레이밍되는 절제된 스타일. 버튼에 둥근 모서리를 사용하지 마세요 — 스크린샷은 sharp한 직사각형 테두리를 보여줍니다 카드나 요소에 드롭 섀도우를 사용하지 마세요 — 스크린샷은 테두리 기반의 평면 분리를 보여줍니다 밝고 고채도의 악센트 색상을 사용하지 마세요 — 스크린샷은 색상이 사진에서만 나오는 엄격한 모노크롬 UI를 보여줍니다 빽빽한 텍스트 레이아웃을 사용하지 마세요 — 스크린샷은 풍부한 여백과 짧고 감각적인 카피를 보여줍니다 헤드라인에 무겁고 볼드한 산세리프를 사용하지 마세요 — 스크린샷은 디스플레이 텍스트를 위한 섬세한 세리프 타이포그래피를 보여줍니다 장난스럽거나 둥근 타이포그래피를 사용하지 마세요 — 스크린샷은 sharp한 모서리를 가진 구조화되고 우아한 폰트를 보여줍니다 피하기: 지나치게 판매적인 언어나 느낌표 사용을 피합니다. 피하기: 빽빽한 단락이나 무거운 텍스트 블록을 피합니다. 피하기: 거친 밝은 악센트 색상을 피합니다. 피하기: 지저분한 레이아웃이나 바쁜 UI 요소를 피합니다. 피하기: 장난스럽거나 비공식적인 어조를 피합니다. 피하기: 무거운 드롭 섀도우나 복잡한 그라데이션을 피합니다.
10
팩 안의 실제 스크린샷
桌面首屏(hero) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 移动首屏 실제 페이지에서 캡처 · 실 computed styles
11
System Prompt
Diptyque Paris는 절제된 편집적 접근 방식으로 정의되는 프리미엄 럭셔리 향수 전자상거래 사이트입니다. 이 디자인은 풍부하고 자연주의적인 제품 사진이 감정적 무게를 지니도록, 엄격한 모노크롬 UI (순수 블랙 #000000과 화이트 #FFFFFF)에 의존합니다. 타이포그래피는 우아한 디스플레이 헤드라인을 위한 전환 세리프와 기능적 본문 및 내비게이션 텍스트를 위한 깔끔한 기하학적 산세리프 (Apercu와 같은) 사이의 신중한 균형을 이루며, 가독성을 위해 14px 기본값을 유지합니다. 레이아웃은 갤러리 같은 느낌을 만들기 위해 풀블리드 이미징과 풍부한 여백을 활용하여 넓게 구성됩니다. 핵심적인 주요 금지 사항은 다음과 같습니다: 버튼이나 카드에 둥근 모서리를 절대 사용하지 마세요, 사진과 경쟁하는 밝은 악센트 색상을 피하세요, 그리고 빽빽한 텍스트 블록이나 무거운 드롭 섀도우로 인터페이스를 지저분하게 만들지 마세요. 전체 시스템은 고요한 럭셔리와 세련된 절제의 느낌을 보존해야 합니다.
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
왜 수록: 럭셔리 리테일 디자인 시스템의 대표적인 예로, UI가 의도적으로 물러서서 제품 사진과 편집적 스토리텔링의 예술성을 전면에 내세우는 점을 주목할 만합니다.