큐레이션 · 오픈 · 무료

Bitofdenim

업사이클 데님 제품을 위한 미니멀, 에디토리얼 스타일 전자상거래 사이트.

01

디자인 DNA

하이엔드 패션 에디토리얼 매거진

02

컬러

타이포그래피와 이미지에 초점을 맞춘 고대비 무채색 팔레트

03

타이포그래피

didone-serif · monospace

• display280px · 700
• heading28px · 300
• body14px · 400

모든 UI 및 본문 텍스트에 Space Mono를 사용합니다 · 히어로 브랜드 이름에는 Meno Display Condensed를 사용합니다 · 내비게이션 텍스트는 깔끔하게 대문자 또는 문장 대문자로 유지합니다

04

여백

여유로운 여백과 padding

05

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

1px solid #1A0A0E

06

레이아웃

비대칭 레이아웃과 여유로운 여백을 갖춘 전체 너비 히어로

07

모션과 인터랙션

Opacity 페이드 · 이미지 슬라이드쇼

미묘한 opacity 변화 · 즉각적인 반응

08

컴포넌트

• button 대문자 텍스트를 가진 미니멀하고 윤곽이 있는 사각형
• card 보이는 카드는 없으며, 제품 이미지가 직접적으로 제시됩니다
• input 간단한 윤곽 텍스트 입력
• hero 대형 타이포그래피와 스튜디오 사진의 조합

09

보이스와 금지 목록

• 톤 조용하고 자신감 있는, 에디토리얼 톤
• 헤드라인 'No Denim Left Behind'와 같이 짧고 임팩트 있는 문구
• CTA '모두 쇼핑하기' 또는 '확인!'과 같이 간단하고 기능적인 표현

• gradient를 사용하지 않습니다 — 스크린샷은 평탄하고 단색 배경을 보여줍니다
• 컨테이너에 둥근 모서리를 사용하지 않습니다 — 스크린샷은 날카롭고 직사각형 가장자리를 보여줍니다
• drop shadow를 사용하지 않습니다 — 스크린샷은 높이 효과 없는 요소를 보여줍니다
• 밝은 강조색을 사용하지 않습니다 — 스크린샷은 엄격히 단색 팔레트를 보여줍니다
• 내비게이션에 sans-serif를 사용하지 않습니다 — 스크린샷은 고정폭 글꼴을 보여줍니다
• 레이아웃을 지저분하게 하지 않습니다 — 스크린샷은 여유로운 여백과 미니멀한 요소를 보여줍니다
• 피하기: 과장된 형용사
• 피하기: 시끄럽거나 공격적인 언어
• 피하기: 지저분한 인터페이스

10

팩 안의 실제 스크린샷

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

11

System Prompt

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