← OpenDesign
큐레이션 · 오픈 · 무료
Rebeccaatwood
보태니컬 포토그래피와 정제된 타이포그래피를 융합한 아티장 텍스타일 브랜드.
Photographic Premium Refined Editorial Clean
01
디자인 DNA
아티장 보태니컬 정제된 오가닉 스튜디오
오가닉 텍스처와 에디토리얼 타이포그래피가 만나는 햇살 가득한 아티장 스튜디오.
02
컬러
#F5A73CAccent
#000000Ink
#F5F5F5BG
#F1F1F0BG soft
#6084B5Muted
rgba(0,0,0,1)Line
화이트와 따뜻한 어스톤으로 구성된 절제된 중성 팔레트를 사용하여, 오가닉 포토그래피 위에 활기차고 고크로마의 오렌지 악센트가 단일하고 에너제틱한 초점 역할을 하도록 합니다.
03
타이포그래피
transitional-serif · monospace
display 40px · 400h2 24px · 400body 16px · 400caption 12px · 400모든 주요 제목과 브랜드 아이덴티티에 Signifier를 사용합니다. · 네비게이션 링크, 버튼 텍스트, 라벨과 같은 기능적 UI 요소에는 monospace를 사용합니다.
04
여백
4px
8px
16px
24px
32px
48px
64px
96px
이미지가 숨 쉴 수 있도록 섹션 간 넉넉한 패딩과 넓은 간격을 둡니다.
05
표면 (라운드 / 그림자 / 경계선)
sm · 0px
md · 0px
lg · 0px
pill · 999px
최소화 또는 없음; 구분을 위해 간격과 배경색 변화에 의존합니다.
06
레이아웃
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
겹쳐진 타이포그래피와 함께 풀블리드 포토그래피를 사용하다가, 제품 표시를 위해 깔끔한 화이트 그리드로 전환합니다.
07
모션과 인터랙션
220ms micro
400ms small
800ms medium
cubic-bezier(0.25, 0.46, 0.45, 0.94) easing
0.5초 동안의 부드러운 opacity 및 background-color 트랜지션. · 표시 애니메이션을 위한 섬세한 높이 변화.
잠재적인 opacity 또는 색상 변화가 가능한 섬세한 커서 포인터 상태. · 표준 포인터 상태.
08
컴포넌트
button monospace 폰트를 사용한 텍스트 전용 버튼으로, hover 시 밑줄 표시, 배경 없음. card 중심 정렬된 제품 포토그래피와 세리프 타이포그래피가 세로로 배치된 깔끔한 화이트 배경. chip 보이지 않음. input 단일 하단 테두리가 있는 최소한의 텍스트 입력. hero 겹쳐진 거대하고 좁게 트래킹된 세리프 브랜드명이 있는 풀블리드 포토그래피 배경.
09
보이스와 금지 목록
톤 아티장적, 개인적, 그리고 친근한. 헤드라인 주의를 끄는 우아하고 좁게 트래킹된 세리프 타이포그래피. CTA 절제된 기능적 monospace 텍스트, 대문자 사용이 일반적. 강렬하거나 네온 색상을 사용하지 마세요 — 스크린샷은 절제된 어스톤 팔레트를 보여줍니다. 둥근 모서리나 부드러운 테두리를 사용하지 마세요 — 스크린샷은 sharp하고 zero-radius 에지를 보여줍니다. 무거운 드롭 섀도우를 사용하지 마세요 — 스크린샷은 간격과 이미지 대비에 의존합니다. 헤드라인에 산세리프 폰트를 사용하지 마세요 — 스크린샷은 전환 세리프를 사용합니다. 레이아웃을 밀집된 UI 요소로 복잡하게 만들지 마세요 — 스크린샷은 넉넉한 여백을 우선시합니다. 주요 제목에 monospace 폰트를 사용하지 마세요 — 스크린샷은 기능적 UI에만 사용합니다. 피하기: 강렬하고 공격적인 색상 피하기: 僵硬하고 기업적인 레이아웃 피하기: 장난스럽고 둥근 기하학적 형태
10
팩 안의 실제 스크린샷
桌面首屏(hero) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 移动首屏 실제 페이지에서 캡처 · 실 computed styles
11
System Prompt
이 사이트는 프리미엄 아티장 텍스타일 브랜드 이커머스 플랫폼입니다. 설계 DNA는 고품질 보태니컬 포토그래피가 숨 쉴 수 있도록 하는 절제된 따뜻한 중성 팔레트(#F1F1F0, #F5F5F5)로 정의됩니다. 타이포그래피는 디스플레이 및 본문 텍스트를 위한 정제된 전환 세리프(Signifier)와 네비게이션 및 버튼과 같은 기능적 UI 요소를 위한 깔끔한 monospace(SohneMono)의 혼합입니다. 단일의 고크로마 오렌지 악센트(#F5A73C)는 뉴스레터 팝업에 절제적으로 사용됩니다. 핵심 주의 사항: 강렬하거나 네온 색상을 절대 사용하지 마세요, 둥근 모서리나 드롭 섀도우를 절대 사용하지 마세요, 그리고 항상 밀집된 레이아웃보다 넉넉한 간격을 우선시하세요. 전체적인 미학은 에디토리얼하고 정제되어 있으며, 포토그래피 스토리텔링에 크게 의존합니다.
더 보기
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
왜 수록: 절제된 색상과 우아한 타이포그래피를 통해 프리미엄 아티장 브랜딩과 깔끔한 이커머스 기능을 어떻게 융합하는지 보여주는 탁월한 예시입니다.