큐레이션 · 오픈 · 무료

Bernerkuhl

에디토리얼 및 갤러리 같은 미적 감각을 갖춘 미니멀 패션 전자상거래.

01

디자인 DNA

하이엔드 패션 갤리리 카탈로그.

02

컬러

오프화이트 배경 위의 고대비 블랙을 중심으로 한 단색 팔레트.

03

타이포그래피

transitional-serif

• display20px · 400
• body12px · 400

내비게이션과 주요 라벨에는 대문자를 사용합니다. · 타이트한 행간을 유지하여 컴팩트하고 정제된 느낌을 줍니다. · 일관성을 위해 모든 곳에 표준 굵기 (400)를 사용합니다.

04

여백

섹션 사이에 넉넉한 여백을 두고, 제품 전시에는 타이트하고 구조화된 그리드를 사용합니다.

05

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

입력 필드와 구분선에는 날카로운 1px solid 블랙 테두리를 사용합니다.

06

레이아웃

데스크톱에서는 엣지투엣지 이미지를 사용하며, 깨끗한 화이트 배경과 구조화된 제품 그리드로 전환됩니다.

07

모션과 인터랙션

스크롤 시 부드러운 페이드인과 섬세한 트랜스폼.

인터랙티브 요소에서 커서가 포인터로 변경되며, 은은한 투명도 변화가 있을 수 있습니다. · 과도한 피드백 애니메이션 없이 즉각적인 반응.

08

컴포넌트

• button 미니멀한 텍스트 기반 버튼으로, 주로 대문자를 사용하며 때로는 작은 단색 사각형 표시기가 포함됩니다.
• card 고품질 사진에 전적으로 의존하는 경계 없는 제품 카드.
• chip 제품 번호를 표시하기 위한 작은 둥근 화이트 필.
• input 하단 테두리만 있는 미니멀한 입력 필드.
• hero 대형 풀블리드 분할 화면 이미지 또는 단일 스트레이트 포토.

09

보이스와 금지 목록

• 톤 세련되고 절제되며 직관적인 어조.
• 헤드라인 간결하고 기능적이며, 종종 번호 매긴 시퀀스를 사용합니다.
• CTA 모두 대문자, 미니멀하며, 전체 그리드에 통합되어 있습니다.

• 카드나 컨테이너에 둥근 모서리를 사용하지 마세요 — 스크린샷은 날카롭고 사각적인 모서리를 보여줍니다.
• 볼드 폰트 굵기를 사용하지 마세요 — 스크린샷은 모든 텍스트에 걸쳐 일관되게 굵기 400을 사용하는 것을 보여줍니다.
• 화려한 악센트 색상을 사용하지 마세요 — 스크린샷은 블랙, 화이트, 그레이의 엄격한 단색 팔레트를 보여줍니다.
• UI 요소에 드롭 섀도우를 사용하지 마세요 — 스크린샷은 완전히 플랫한 디자인을 보여줍니다.
• 본문 텍스트에 복잡한 다중 열 레이아웃을 사용하지 마세요 — 스크린샷은 매우 단순하고 종종 단일 열 구조를 보여줍니다.
• 표준 산세리프 폰트를 사용하지 마세요 — 스크린샷은 모든 타이포그래피에 고유한 전환형 세리프를 사용합니다.
• 피하기: 화려한 색상
• 피하기: 장난스러운 카피
• 피하기: 밀도 높은 텍스트 블록
• 피하기: 복잡한 배경

10

팩 안의 실제 스크린샷

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

11

System Prompt

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