의류도 판매하는 고급 패션 매거진으로, 사진이 서사를 이끌고 타이포그래피는 조용한 인프라 역할을 합니다.
02
컬러
#333333Ink
#888888Ink soft
#F4F4F4BG
#FFFFFFBG quiet
#979797Muted
rgba(51, 51, 51, 0.2)Line
흑백과 그레이의 다양한 굵기를 활용한 엄격한 단색 팔레트로 사진에 대한 깔끔하고 갤러리 같은 집중을 유지합니다.
03
타이포그래피
transitional-serif
display66px · 400
heading20px · 400
body15px · 400
caption11px · 400
네비게이션과 유틸리티 링크에는 기하학적 산세리프를 사용하며, 대문자와 자간 조정을 적용합니다. · 모든 편집 제목과 본문 텍스트에는 JHA Times Now (트랜지셔널 세리프)를 사용합니다. · 대형 디스플레이 텍스트에는 극도로 좁은 행간을 유지합니다. · 디스플레이 및 제목 타이포그래피에는 미세한 음수 자간을 활용합니다.
04
여백
4px
8px
16px
20px
30px
48px
80px
콘텐츠 블록 주변에 넉넉한 패딩을 두어 공간감 있고 숨 쉬는 편집 느낌을 유지하며, 주로 80px 세로 마진을 활용합니다.
05
표면 (라운드 / 그림자 / 경계선)
sm · 0px
md · 0px
lg · 0px
pill · 999px
섹션을 구분하고 기사 카드 경계를 정의하는 데 사용되는 미세한 1px 수평선.
06
레이아웃
1280container
12columns
20pxgutter
768 / 1024breakpoints
대형 히어로 이미지가 먼저 오고, 넓은 이미지, 적층된 텍스트 블록, 수평 목록을 조합한 레이아웃이 이어지는 비대칭 편집 그리드입니다.
07
모션과 인터랙션
220msmicro
350mssmall
500msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
인터랙티브 요소의 매끄러운 호버 전환 · 이미지 호버 시 미세한 스케일링 또는 패닝 · 매끄러운 페이지 전환
텍스트 링크에 미세한 밑줄 표시 또는 색상 반전 · 무거운 애니메이션 없이 즉각적인 네비게이션
08
컴포넌트
button텍스트 기반 링크로, 유틸리티 네비게이션용으로 자주 사용되는 대문자 산세리프이며, 채워진 배경 대신 호버 상태에 의존합니다.
card테두리 없는 사진 카드로 타이포그래피가 아래에 위치하거나, 상단이나 하단에 1px 테두리가 있는 분할 카드입니다.
chip없음
input보이는 것 없음
hero넓은 자간을 적용한 거대하고 맞춤형 타이포그래피로 고정된 전체 폭 사진 레이아웃입니다.
09
보이스와 금지 목록
톤객관적이고 쿨하며, 편집적으로 거리감을 둡니다.
헤드라인임팩트를 위해 좁은 자간의 대문자 산세리프 또는 강한 트랜지셔널 세리프를 사용합니다.
이것은 극도의 단색 디지털 경험과 풍부한 편집 사진을 혼합한 프리미엄 패션 전자상거래 플랫폼입니다. 미학은 미니멀리스트이며 갤러리 같으며, 오프화이트(#F4F4F4)와 딥 그레이(#333333)의 기본 팔레트를 사용하고 밝은 채도의 악센트는 없습니다. 타이포그래피는 편집 콘텐츠를 위해 가벼운 트랜지셔널 세리프(JHA Times Now)에 크게 의존하며, UI용 기하학적 산세리프와 쌍을 이루며, 거대한 대문자 디스플레이 텍스트에는 좁은 음수 자간을 사용합니다. 핵심 주의 사항: 드롭 섀도우나 장식적인 UI 요소를 도입하지 마세요; 밝게 칠해진 악센트를 절대 사용하지 마세요; 둥근 모서리나 부드러운 UI 패턴을 피하세요; 두꺼운 볼드 스타일보다 가벼운 폰트 굵기를 유지하세요; 편집적 숨 쉬는 공간을 보존하기 위해 넉넉한 여백을 사용하세요; UI 장식보다 순전히 타이포그래피와 사진에 의존하세요.
이 감각을 당신의 에이전트에
이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.
