큐레이션 · 오픈 · 무료

Sonos

홈 전체 오디오 시스템을 위한 프리미엄, 시네마틱하고 깔끔한 브랜드로, 라이프스타일 이미지와 대담하고 읽기 쉬운 타이포그래피에 중점을 둡니다.

hardwareaudio
Sonos 스크린샷
↓ 디자인 시스템 다운로드 (38 MB)OpenDesign 에서 열기

원본 사이트: https://www.sonos.com

📦 팩 내용 보기 →

01

디자인 DNA

프리미엄 오디오라이프스타일홈 전체 사운드미니멀리즘프리미엄 하드웨어

프리미엄 라이프스타일 매거진과 하이엔드 소비자 전자제품 카탈로그의 만남.

02

컬러

#000000Ink
#2E2E2EInk soft
#FFFFFFBG
#F5F5F5BG soft
#BFBFBFMuted
rgba(0,0,0,0.1)Line

흑백을 광범위하게 사용하는 고대비의 중립색이며, 풍부하고 따뜻한 톤의 사진에 의존하여 색감을 제공합니다.

03

타이포그래피

grotesque-sans

모든 텍스트에 깔끔하고 현대적인 grotesque sans-serif(예: 지정된 'aktiv-grotesk')를 사용합니다. · 대부분의 텍스트에는 보통 두께(400)를 유지하고, 특정 강조에는 약간 높인 두께(500)를 사용합니다. · 행간을 빡빡하지만 읽기 쉬운 정도로 유지합니다. 헤드라인은 약 1.2, 본문은 약 1.3 수준으로 설정합니다.

04

여백

4px
8px
16px
24px
32px
48px
64px
96px

일관된 간격을 제공하는 기본 4 시스템을 사용하며, 큰 섹션에는 상당한 수직 패딩(예: 112px)을 둡니다.

05

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

sm · 4px
md · 8px
lg · 20px
pill · 9999px

정의된 컨테이너를 위해 밝은 중립 회색(#BFBFBF) 또는 단색 검정(#000000)의 얇은 1px 테두리를 사용합니다.

0 1px 3px rgba(0,0,0,0.1)

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

콘테이너를 중앙에 배치하고 상당한 여백과 큰 이미지를 활용하는 넓은 풀블리드 레이아웃입니다.

07

모션과 인터랙션

100msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 1, 1)easing

콘텐츠 노출을 위한 페이드 및 슬라이드 전환. · hover 상태를 위한 부드럽고 빠른 opacity 변화.

인터랙티브 요소의 미세한 opacity 변화 또는 약간의 색상 변화. · 즉각적인 시각적 피드백으로, 종종 약간의 scale 또는 opacity 감소를 통해 구현합니다.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

Sonos — 桌面首屏（hero）
桌面首屏（hero）
Sonos — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Sonos — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Sonos — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Sonos — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Sonos — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Sonos — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Sonos — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Sonos — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Sonos — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Sonos — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Sonos — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Sonos — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Sonos — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Sonos — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Sonos — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Sonos — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Sonos — 移动首屏
移动首屏

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

11

System Prompt

Sonos는 라이프스타일 사진과 대담하고 깔끔한 타이포그래피를 강조하는 프리미엄 오디오 브랜드입니다. 핵심 팔레트는 고대비의 검정(#000000)과 흰색(#FFFFFF), 밝은 회색(#F5F5F5), 그리고 흰색 위의 검정 또는 그 반대의 단일 강조색으로 구성됩니다. 지배적인 고채도 강조색은 없습니다. 타이포그래피는 깔끔하고 현대적인 grotesque sans-serif로, 주로 보통 두께(400)로 사용됩니다. 핵심 디자인 규칙: 1) 뷰포트를 채우는 대형 시네마틱 라이프스타일 이미지를 우선시합니다. 2) 모든 주요 CTA에 매우 둥근 알약 모양 버튼을 사용합니다. 3) 넉넉한 여백과 섹션당 단일 집중 헤드라인으로 극도의 미니멀리즘을 유지합니다. 4) 프리미엄적이고 영감을 주는 느낌을 흐리게 할 수 있는 기술적 복잡성, 다양한 폰트 두께, 선명한 강조 색상을 피합니다.

이 감각을 당신의 에이전트에

이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

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