큐레이션 · 오픈 · 무료

Wgsn

세계 최고의 트렌드 예측 플랫폼.

01

디자인 DNA

하이엔드 패션 에디토리얼과 엔터프라이즈 SaaS 대시보드의 만남.

02

컬러

고대비의 흑백 단색 기반으로, 이미지가 주요 색상을 제공합니다.

03

타이포그래피

humanist-sans · monospace

• display56px · 700
• h248px · 400
• body18px · 400

모든 텍스트 레이어에 DM Sans를 사용합니다. · 여유로운 line-height로 본문 텍스트의 가독성을 유지합니다. · 큰 디스플레이 텍스트에는 좁은 letter-spacing을 적용합니다.

04

여백

프리미엄 포지셔닝을 반영한 여유로운 여백.

05

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

rgba(0,0,0,0.6)의 얇은 1px 테두리.

rgb(0, 0, 0) 0px 0px 0px 1px inset

06

레이아웃

스플릿 스크린 히어로 레이아웃을 갖춘 표준 중앙 정렬 컨테이너.

07

모션과 인터랙션

인터랙티브 요소의 매끄러운 배경색 전환.

버튼과 링크의 배경색 전환. · 즉각적인 시각적 피드백.

08

컴포넌트

• button 40px border-radius의 알약 모양 버튼으로, 고대비(흰색 배경에 검정 또는 검정 배경에 흰색)를 적용합니다.
• card 이미지와 텍스트 오버레이를 포함한 둥근 모서리(16px) 사각형.
• chip 해당 없음
• input 해당 없음
• hero 한쪽에는 트렌드 이미지 콜라주를, 다른 쪽에는 굵은 타이포그래피를 배치한 대형 스플릿 레이아웃.

09

보이스와 금지 목록

• 톤 권위적이고, 미래지향적이며, 전문적인 어조.
• 헤드라인 짧고 강렬하며 미래지향적인 스타일 (예: '내일을 만드세요').
• CTA 직관적이고 행동 지향적인 스타일 (예: '데모 요청하기').

• 화려한 네온색을 사용하지 마세요 — 스크린샷은 엄격한 흑백 단색 기반을 보여줍니다.
• 날카로운 0px 모서리를 사용하지 마세요 — 스크린샷은 알약 버튼(40px)과 둥근 카드(16px)를 보여줍니다.
• 헤드라인에 넓은 letter-spacing을 사용하지 마세요 — 스크린샷은 좁은 트래킹(-1px)을 보여줍니다.
• 헤드라인에 얇은 폰트 웨이트를 사용하지 마세요 — 스크린샷은 굵은/세미볼드 디스플레이 텍스트를 보여줍니다.
• 바쁜 배경을 사용하지 마세요 — 스크린샷은 섹션에 단색 블랙, 화이트 또는 밝은 그레이를 사용합니다.
• 작고 비좁은 텍스트를 사용하지 마세요 — 스크린샷은 여유로운 18px 본문 텍스트와 높은 line-height를 사용합니다.
• 피하기: 일상적인 은어
• 피하기: 수동태
• 피하기: 지나치게 기술적인 전문 용어

10

팩 안의 실제 스크린샷

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

11

System Prompt

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