큐레이션 · 오픈 · 무료

Represent

강한 타이포그래피와 풀블리드 사진에 중점을 둔 미니멀하고 볼드한 패션 에디토리얼 사이트.

01

디자인 DNA

깔끔한 에디토리얼 매거진으로 구성된 하이엔드 스트릿웨어 룩북.

02

컬러

강조를 위해 단일한 딥 레드 악센트가 더해진 고대비 단색 구성.

03

타이포그래피

grotesque-sans

• display48px · 700
• h232px · 600
• body16px · 400
• caption12px · 400

네비게이션, 태그 및 보조 UI 요소에는 대문자를 사용합니다. · 큰 디스플레이 타이포그래피에는 타이트한 트래킹을 유지합니다.

04

여백

타이트한 UI 요소를 위한 4px 마이크로 스텝이 포함된 8px 베이스.

05

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

1px solid rgba(0,0,0,0.1)

rgba(0, 0, 0, 0.3) 0px 0px 24px 0px

06

레이아웃

오버레이된 텍스트와 함께 풀블리드 사진을 사용하다가, 제품 목록을 위해 깔끔한 그리드로 전환됩니다.

07

모션과 인터랙션

hover 및 scroll 시 부드러운 opacity와 transform 전환. · 사진 전환을 위한 미세한 페이딩.

인터랙티브 요소에 미세한 opacity 변화 또는 약간의 스케일링. · 전환 효과를 통한 즉각적인 시각적 피드백.

08

컴포넌트

• button 흰색 대문자 텍스트가 있는 검정색 직사각형 버튼으로, 가끔 필 모양 변형이 사용됩니다.
• card 테두리 없이 이미지에 초점을 맞춘 깔끔한 제품 카드.
• chip 필터링을 위한 대문자, 볼드 텍스트 칩.
• input 1px solid 하단 테두리가 있는 미니멀 인풋.
• hero 오버레이된 타이포그래피가 있는 전환적인 임팩트의 풀스크린 사진 히어로.

09

보이스와 금지 목록

• 톤 미니멀하고 직접적이며 프리미엄.
• 헤드라인 볼드, 대문자, 콘덴스.
• CTA 액션 지향적, 대문자, 높은 가시성.

• 장식용 폰트를 사용하지 마세요 — 스크린샷은 보드 그로테스크산세리프에 대한 엄격한 의존성을 보여줍니다.
• 기본 UI 요소에 둥근 모서리를 사용하지 마세요 — 스크린샷은 날카롭고 직사각형의 모서리를 보여줍니다.
• 다색 팔레트를 사용하지 마세요 — 스크린샷은 단일한 레드 악센트가 더해진 엄격한 단색 기반을 보여줍니다.
• 카드에 미세한 그림자를 사용하지 마세요 — 스크린샷은 플랫 표면 또는 매우 강하고 특정적인 그림자를 보여줍니다.
• 기본 내비게이션에 혼합된 대소문자를 사용하지 마세요 — 스크린샷은 UI 레이블에 대문자만 독점적으로 사용함을 보여줍니다.
• 부드러운 파스텔 배경을 사용하지 마세요 — 스크린샷은 순백 또는 밝은 회색(#F7F7F7) 기반을 보여줍니다.
• 피하기: 커프트 폰트
• 피하기: 지나치게 화려한 그라데이션
• 피하기: 어수선한 레이아웃

10

팩 안의 실제 스크린샷

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

11

System Prompt

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