큐레이션 · 오픈 · 무료

Dyson

깔끔한 타이포그래피와 웅장한 제품 사진을 통해 엔지니어링 혁신을 선보이는 프리미엄 하드웨어 전자상거래 사이트.

01

디자인 DNA

임상적 정밀함이 느껴지는 하이엔드 하드웨어 쇼룸

02

컬러

검정 헤더와 흰색 콘텐츠 영역을 사용한 고대비 기반, 인터랙티브 요소를 위한 단일 블루 포인트 컬러 활용

03

타이포그래피

humanist-sans

• display56px · 300
• heading-lg36px · 300
• heading-md24px · 400
• body16px · 400
• caption14px · 400

큰 디스플레이 텍스트에는 라이트 웨이트(300)를 사용합니다 · 본문 텍스트에는 레귤러 웨이트(400)를 사용합니다 · 특정 강조를 위한 경우를 제외하고는 볼드 웨이트를 사용하지 않습니다

04

여백

섹션별 넉넉한 수직 패딩을 위한 8px 기본 리듬

05

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

입력 필드용 1px solid rgb(51, 51, 51), 카드용 미묘한 border

0 0 0 1px rgba(51, 51, 51, 1) inset · 0 0 18px 0 rgba(0, 0, 0, 0.2)

06

레이아웃

왼쪽 정렬 콘텐츠가 있는 풀폭 히어로 섹션, 그 아래로 그리드 기반 제품 카드

07

모션과 인터랙션

기본적으로 모든 트랜지션이 활성화됩니다 · 부드러운 이미지 표시

인터랙티브 요소의 미묘한 색상 전환 · 색상 상태 변화를 통한 즉각적인 시각적 피드백

08

컴포넌트

• button 최소 반경의 솔리드 채우기 버튼, 대문자 텍스트, 밝은 배경 위의 어두운 스타일
• card 제품 이미지가 있는 깔끔한 카드, 최소한의 border, 넉넉한 여백
• chip 미묘한 border가 있는 최소 인라인 레이블
• input 하단 border가 있는 깔끔한 텍스트 입력 필드, 통합된 검색 아이콘
• hero 어둡거나 웅장한 이미지 위의 밝은 텍스트 오버레이가 있는 풀블리드 제품 사진

09

보이스와 금지 목록

• 톤 절제된 자신감을 갖춘 기술적 권위
• 헤드라인 라이트 웨이트, 대형 스케일의 제품명 및 주장
• CTA 화살표 표시가 있는 직접적인 '지금 쇼핑하기', 대문자 스타일링

• 장식적 요소를 사용하지 마세요 — 스크린샷에는 장식 없이 깔끔하고 기능적인 레이아웃이 보입니다
• 둥근 컨테이너를 사용하지 마세요 — 스크린샷에는 최대 2-8px의 최소한의 border-radius가 보입니다
• 모든 곳에 볼드 타이포그래피를 사용하지 마세요 — 스크린샷에는 라이트 웨이트(300)가 디스플레이 텍스트를 지배하는 것이 보입니다
• 따뜻한 색상 팔레트를 사용하지 마세요 — 스크린샷에는 차가운 그레이, 검정, 단일 블루 포인트 컬러가 보입니다
• 인터페이스를 어지럽히지 마세요 — 스크린샷에는 넉넉한 여백과 집중된 제품 프레젠테이션이 보입니다
• 캐주얼하고 친근한 언어를 사용하지 마세요 — 스크린샷에는 정확한 기술적 제품 명명과 주장이 보입니다
• 피하기: 과장된 마케팅 문구
• 피하기: 장식적 요소
• 피하기: 둥근 친근한 형태

10

팩 안의 실제 스크린샷

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

11

System Prompt

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