精选 · 开放 · 免费

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

所有文本使用干净、现代的无衬线字体（如指定的‘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

薄而细的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）以及黑底白字或白底黑字的单一强调；不存在主导性的高饱和度强调色。排版采用干净、现代的无衬线字体，主要使用常规字重（400）。关键设计规则：1) 优先使用填满视口的大型电影感场景图像。2) 所有主要行动号召都使用高度圆润的药丸形按钮。3) 通过大量留白和每个章节单一、聚焦的标题来保持极致的简约。4) 避免技术性的杂乱、多种字重以及会分散高级感、向往感氛围的鲜艳强调色。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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