Sonos

近白色基底、大幅摄影展示与胶囊形控件。
页面以近白色为基底。字体采用 aktiv-grotesk。视觉特点包括大幅摄影展示、胶囊形控件、大字排版、网格布局。适合参考的场景:商品详情页、品牌产品介绍页。
查看原始网站使用规范
建议采用
- 所有按钮和交互胶囊都使用 80px 或 9999px 圆角。胶囊形是标志性组件几何。
- 展示标题设为 64–96px、字重 400、行高 1.0,让尺度而非字重承担权威。
- 摄影满幅填充视口,不添加渐变叠层或遮罩。对比由图像本身创造。
- 整套配色只由 #000000、#ffffff、#f5f5f5 和 #2e2e2 构成,界面系统没有彩色强调。
- #f5f5f5 画布上的卡片表面使用 #ffffff。细微灰白区分无需边框就能建立表面层级。
- 区块内容采用 48–80px 垂直间隔,卡片水平内边距为 48px。宽裕留白是结构,而不是装饰。
- 行内标签、状态胶囊和类别标签使用 14px、字重 500 与 9999px 圆角。
建议避免
- 绝不引入彩色。0% 的彩色感是有意设计,摄影承担全部情绪颜色。
- 标题不要加粗到字重 600–700。系统以巨大字号下的 400 代替粗体,加粗会让戏剧性尺度扁平。
- 大多数区块之间不要添加可见边框,通过背景从 #f5f5f5 到 #ffffff 再到 #000000 的变化来区分。
- 展示字号行高不要超过 1.2。紧密的 1.0 行高,让 96px 文字像海报,而不是段落。
- 卡片不要使用 box-shadow 来悬浮。如需纵深,采用灰色 50 → 白色 → 深色 900 的表面叠层,而非阴影。
- 主要界面元素不要采用 0–4px 的锐利圆角,它只用于小型实用元素或数据表。系统建立在柔和曲线上。
- 正文或长篇文案不要居中。只有展示标题居中,正文保持左对齐,并采用 640px 最大宽度。