精選 · 開放 · 免費

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（如已指定的 'aktiv-grotesk'）。 · 大多數文字維持常規字重 (400)，特定強調處 slightly 提高至 (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

細 1px 邊框，使用淺中性灰 (#BFBFBF) 或純黑 (#000000)，用於定義容器。

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

內容揭示使用淡入淡出與滑動過渡。 · 互動狀態使用流暢、快速的透明度變化。

互動元素上的細微透明度變化或輕微色彩偏移。 · 立即的視覺回饋，通常透過輕微縮放或透明度降低。

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，主要以常規字重 (400) 使用。關鍵設計規則：1) 優先使用填滿視窗的大型電影感生活風格影像。2) 所有主要行動號召使用高度圓潤的膠囊形按鈕。3) 保持極度簡約，運用充裕留白，每個區塊單一、聚焦的標題。4) 避免技術性雜亂、多重字重，以及會分散高級、令人嚮往感受的鮮豔強調色。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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