큐레이션 · 오픈 · 무료

Master & Dynamic

Master & Dynamic은 절제된 인더스트리얼 미학을 가진 깔끔하고 이미지 중심의 전자상거래를 통해 프리미엄 오디오 하드웨어를 선보입니다.

01

디자인 DNA

섬세하게 제작된 오디오 하드웨어를 전시하는 하이엔드 디자인 갤러리

02

컬러

고품질 제품 사진이 시각적 경험을 이끄는 미니멀리스트 흑백 회색 팔레트

03

타이포그래피

grotesque-sans · geometric-sans

• display52px · 400
• heading41px · 700
• body-lg20px · 400
• body18px · 400
• body-sm16px · 400

내비게이션 및 카테고리 라벨의 대문자 변환 · 전체적으로 타이트한 자간 (네거티브 트래킹) · 단일 줄 텍스트 요소의 행간이 폰트 크기와 일치

04

여백

기본 4px에 주로 4배(16px), 6배(24px), 12배(48px)의 승수 사용

05

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

1px solid rgba(74, 74, 74, 0.12)

rgba(0, 0, 0, 0.5) 0px 5px 15px 0px

06

레이아웃

중앙 정렬된 텍스트 오버레이가 있는 풀와이드 히어로 이미지; 3열 기능 격자; 콘텐츠 정렬 텍스트 섹션

07

모션과 인터랙션

메뉴 및 오버레이 인터랙션을 위한 페이드 전환 · 인터랙티브 요소의 부드러운 색상 및 background-size 전환 · 150ms 타이밍의 미세한 hover 상태 변화

배경색, 색상, box-shadow, 테두리의 150ms ease-in-out 전환 · 미세한 스케일 또는 opacity 피드백

08

컴포넌트

• button 어두운 채우기와 흰색 텍스트 또는 어두운 테두리가 있는 외곽선 형태의 알약 모양 버튼; 대문자 텍스트
• card 엣지투엣지 제품 사진을 사용하는 미니멀 카드, 이미지 기반 카드에는 눈에 띄는 테두리나 그림자 없음
• chip 테두리와 대문자 텍스트가 있는 작은 알약 모양 필터
• input 미세한 하단 테두리가 있는 깔끔한 텍스트 입력 필드, 미니멀 스타일링
• hero 이미지 위에 왼쪽 정렬된 텍스트 오버레이가 있는 풀블리드 고화질 제품 사진

09

보이스와 금지 목록

• 톤 자신감 있고, 프리미엄이며, 간결합니다; 제품의 특성과 브랜드 철학에 집중합니다
• 헤드라인 직접적인 제품명과 혜택 진술, 주로 대문자 또는 타이트한 트래킹의 디스플레이 타이포그래피
• CTA '지금 쇼핑하기', '더 알아보기', '계속하기'와 같이 알약 모양 버튼에 간단하고 행동 지향적인 동사

• 장식적인 세리프를 사용하지 마세요 — 스크린샷은 모든 디스플레이 및 본문 텍스트에 깔끔한 grotesque/기하학적 sans-serif 시스템을 보여줍니다
• 고채도 액센트 색상을 사용하지 마세요 — 스크린샷은 흑백 회색의 엄격한 단일 색상 팔레트를 보여줍니다
• 카드에 무거운 그림자나 테두리를 사용하지 마세요 — 스크린샷은 미니멀한 표면 처리가 있는 엣지투엣지 제품 사진을 보여줍니다
• 둥글거나 장난스러운 border-radius를 사용하지 마세요 — 스크린샷은 일관된 타이트한 반경(4-8px) 또는 알약 형태(9999px)를 보여줍니다
• 넓은 자간을 사용하지 마세요 — 스크린샷은 모든 텍스트 크기에서 타이트한 네거티브 트래킹을 보여줍니다
• 레이아웃에 텍스트로 가득 채우지 마세요 — 스크린샷은 풍부한 여백과 시각적 계층을 지배하는 큰 히어로 이미지를 보여줍니다
• 여러 폰트 두께를 사용하지 마세요 — 스크린샷은 주로 regular(400) 두께를 사용하고 minimal한 bold(700) 사용을 보여줍니다
• 장식적인 배경을 사용하지 마세요 — 스크린샷은 제품 사진이 시각적 재미를 제공하도록 평면적인 흰색, 검정색 또는 회색 배경을 보여줍니다
• 피하기: 기술 용어 과다 사용
• 피하기: 영업적인 긴급성 언어
• 피하기: 장식적인 타이포그래피
• 피하기: 텍스트 뒤의 복잡한 배경
• 피하기: 둥글고 친근한 미학
• 피하기: 네온 또는 고채도 액센트 색상

10

팩 안의 실제 스크린샷

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

11

System Prompt

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