큐레이션 · 오픈 · 무료

Hypebeast

프리미엄 스트릿웨어와 라이프스타일 문화를 위한 권위 있는 디지털 매거진.

01

디자인 DNA

하이엔드 패션 매거진의 디지털 입구.

02

컬러

단일 권위 있는 블루 액센트가 적용된 고대비 단색 팔레트.

03

타이포그래피

grotesque-sans · humanist-sans

• display48px · 700
• h324px · 700
• body18px · 400
• small12px · 500

헤드라인은 임팩트를 위해 타이트한 자간과 두꺼운 웨이트를 사용합니다. · 본문 텍스트는 깔끔하고 읽기 좋은 휴머니스트 스타일을 유지합니다. · 내비게이션과 카테고리 레이블은 일관되게 대문자로 표시합니다.

04

여백

콘텐츠 분리를 위한 풍부한 padding이 적용된 표준 4px 그리드.

05

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

콘텐츠 섹션을 구분하기 위해 절제된 얇은 밝은 회색 선.

06

레이아웃

편집 계층을 위한 비대칭 다중 컬럼 그리드.

07

모션과 인터랙션

상호작용 상태를 위한 빠르고 미세한 색상 전환.

텍스트와 아이콘의 미세한 색상 변화. · 즉각적인 반응, 무거운 피드백 없음.

08

컴포넌트

• button 미니멀리스트, 주로 텍스트 기반 또는 고스트 버튼.
• card 장식을 최소화하고 강렬한 타이포그래피에 의존하는 이미지 중심 카드.
• chip 'Gaming'이나 'Footwear'와 같은 카테고리를 위한 간결한 대문자 텍스트 레이블.
• input 하단 border가 적용된 깔끔한 검색 바.
• hero 단일 주요 편집 기사를 특징으로 하는 크고 주도적인 hero 섹션.

09

보이스와 금지 목록

• 톤 권위 있고, 쿨하며, 문화적으로 감각적인.
• 헤드라인 직설적이고, 굵으며, 선언적인.
• CTA 절제된, 주로 텍스트 링크 또는 간단한 버튼으로 통합됨.

• 카드에 둥근 모서리를 사용하지 마세요 — 스크린샷은 날카롭거나 2px 반경의 모서리를 보여줍니다.
• UI 요소에 그림자를 사용하지 마세요 — 스크린샷은 플랫 디자인을 보여줍니다.
• 다색 그라데이션 배경을 사용하지 마세요 — 스크린샷은 단색 화이트를 보여줍니다.
• 장식용 세리프 폰트를 사용하지 마세요 — 스크린샷은 깔끔한 고트릭-산스 계열을 사용합니다.
• 모든 텍스트를 중앙 정렬하지 마세요 — 스크린샷은 헤드라인에 강한 좌측 정렬을 사용합니다.
• 버튼에 밝은 기본 색상을 사용하지 마세요 — 스크린샷은 단일 딥 블루 액센트를 사용합니다.
• 피하기: 장난스러운 언어
• 피하기: 밝은 네온 색상
• 피하기: 과도한 장식 요소

10

팩 안의 실제 스크린샷

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

11

System Prompt

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