큐레이션 · 오픈 · 무료

Markaware Jp

갤러리 스타일 사진과 절제된 타이포그래피를 갖춘 정교한 일본 패션 전자상거래 경험.

01

디자인 DNA

고요한 프리미엄 직물 갤러리

02

컬러

제품 사진이 모든 색상과 질감을 제공하는 중성적인 고키 팔레트.

03

타이포그래피

geometric-sans

• display48px · 400
• headline32px · 400
• body14px · 400

모든 텍스트는 동일한 기하학적 산세리프체(ABCDiatype)를 웨이트 400으로 사용합니다. · 브랜드 로고는 넓은 간격의 대문자 트래킹으로 설정합니다. · 본문 텍스트는 가독성을 높이기 위해 약간 더 넓은 자간(0.4px)을 사용합니다.

04

여백

히어로 이미지와 콘텐츠 섹션 사이의 넉넉한 패딩(398px에서 70px)으로 수직 리듬을 유지합니다.

05

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

모든 인터랙티브 요소와 컨테이너 경계에 1px solid black를 사용하여 날카로운 구조적 정의를 만듭니다.

rgba(0,0,0,0.2) 0px 0px 18px 0px · rgba(0,0,0,0.3) 0px 12px 60px 0px · rgba(0,0,0,0.05) 0px 0px 2px 1px

06

레이아웃

풀블리드 히어로 이미지와 균일한 20px 간격을 유지하는 4열 제품 그리드를 결합합니다.

07

모션과 인터랙션

'Stay in Touch' 모달과 같은 오버레이를 위한 부드러운 불투명도 및 가시성 전환(0.5s). · UI 요소 표시를 위한 표준 cubic-bezier를 사용하는 너비 및 최대 너비 전환(0.4s).

사이트의 전반적인 절제를 유지하면서 미묘한 색상 변화 또는 불투명도 변경. · 페이지 전환 또는 모달 표시를 통한 즉각적인 피드백.

08

컴포넌트

• button 검은색 텍스트와 투명 배경을 사용하며, 19px border-radius를 가진 필 모양 윤곽선 버튼.
• card 대형 제품 이미지와 그 아래에 작은 좌측 정렬 타이틀을 가진 미니멀 카드로, 얇은 테두리로 분리됩니다.
• chip 제품 변형 선택에 사용되는 작은 색상 패치(검정, 베이지, 차콜, 화이트).
• input 최소한의 테두리를 가진 깔끔한 텍스트 입력 필드로, 종종 검은색 밑줄 또는 테두리와 함께 제공됩니다.
• hero 데스크톱에서는 너비의 약 60%를 차지하는 이미지를 가진 스플릿 스크린 히어로를 사용하며, 모바일에서는 풀 너비로 전환됩니다.

09

보이스와 금지 목록

• 톤 고요하고 정교하며 유익한 어조로, 소재의 품질과 장인 정신에 중점을 둡니다.
• 헤드라인 명확하고 묘사적이며 종종 기술적입니다(예: 'Organic Wool 2/80 Tropical').
• CTA 직접적이고 기능적입니다(예: 'Shop', 'Join Mailing List', 'Read More').

• 고채도 강조 색상을 사용하지 마세요 — 팔레트는 엄격히 모노크롬하고 중성적입니다.
• 굵은 폰트 웨이트를 사용하지 마세요 — 모든 눈에 보이는 타이포그래피는 웨이트 400입니다.
• 복잡한 장식적 배경을 사용하지 마세요 — 디자인은 깔끔한 사진과 여백에 의존합니다.
• 주요 UI 요소에 둥근 모서리를 사용하지 마세요 — 사이트는 대부분의 컨테이너에 날카로운 모서리를 사용하고 버튼에만 필을 예약합니다.
• 인터페이스를 복잡하게 하지 마세요 — 레이아웃은 모든 요소 사이에 넉넉하고 의도적인 간격을 유지합니다.
• 바쁘거나 다채로운 팔레트를 사용하지 마세요 — 제품 색상과 사진이 유일한 색채 다양성의 원천입니다.
• 피하기: 과장된 마케팅 용어
• 피하기: 공격적인 판매 언어
• 피하기: 과도한 감탄사 사용
• 피하기: 소재 스펙에서 주의를 산만하게 하는 모호하고 화려한 설명

10

팩 안의 실제 스크린샷

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

11

System Prompt

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