受 Spotify 启发的设计系统

Category: 媒体与消费者 音乐流媒体。深色背景上的鲜明绿色、粗犷字体、以专辑封面为视觉核心。

1. 视觉主题与氛围

Spotify 的 Web 界面是一个沉浸式的深色音乐播放器，将听众包裹在近黑色的空间（#121212、#181818、#1f1f1f）中，专辑封面与内容成为色彩的主要来源。其设计理念是”内容优先的黑暗感”——UI 退入阴影，让音乐、播客和播放列表得以发光。每一个界面层次都是深浅不一的炭灰色，营造出剧院般的氛围，唯一真正的色彩来自标志性的 Spotify 绿（#1ed760）和专辑封面本身。

字体使用 SpotifyMixUI 和 SpotifyMixUITitle——这是来自 CircularSp 字族的专有字体（由 Lineto 设计的 Circular，经 Spotify 定制），并配备了包含阿拉伯语、希伯来语、西里尔语、希腊语、梵文及 CJK 字体的完整回退栈，体现了 Spotify 的全球化覆盖。字体系统紧凑而功能性强：700（粗体）用于强调和导航，600（半粗体）用于次要强调，400（常规）用于正文。按钮使用全大写搭配正字间距（1.4px–2px），呈现出系统性的标签感。

Spotify 的独特之处在于其胶囊与圆形的几何语言。主要按钮使用 500px–9999px 圆角半径（完整胶囊形），圆形播放按钮使用 50% 半径，搜索输入框为 500px 的胶囊形。结合悬浮元素上的重阴影（rgba(0,0,0,0.5) 0px 8px 24px）和独特的内嵌边框阴影组合（rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset），最终呈现出一个如同高端音频设备般的界面——触感圆润，专为触控而生。

核心特征：

• 近黑色沉浸式深色主题（#121212–#1f1f1f）——UI 隐退于内容之后
• Spotify 绿（#1ed760）作为唯一品牌强调色——从不装饰性使用，始终功能性呈现
• SpotifyMixUI/CircularSp 字族，支持全球文字系统
• 胶囊按钮（500px–9999px）与圆形控件（50%）——圆润、触控优化
• 按钮标签全大写搭配宽字间距（1.4px–2px）
• 悬浮元素上的重阴影（rgba(0,0,0,0.5) 0px 8px 24px）
• 语义色：负面红（#f3727f）、警告橙（#ffa42b）、通告蓝（#539df5）
• 专辑封面是主要色彩来源——UI 本身在设计上保持无彩色

2. 色彩规范

主品牌色

• Spotify 绿（#1ed760）：主品牌强调色——播放按钮、激活状态、CTA
• 近黑色（#121212）：最深的背景层
• 深色表面（#181818）：卡片、容器、悬浮表面
• 中深色（#1f1f1f）：按钮背景、可交互表面

文字色

• 白色（#ffffff）：--text-base，主要文字
• 银色（#b3b3b3）：次要文字、静音标签、非激活导航
• 近白色（#cbcbcb）：稍亮的次要文字
• 浅色（#fdfdfd）：接近纯白，用于最高强调

语义色

• 负面红（#f3727f）：--text-negative，错误状态
• 警告橙（#ffa42b）：--text-warning，警告状态
• 通告蓝（#539df5）：--text-announcement，信息状态

表面与边框

• 深色卡片（#252525）：悬浮卡片表面
• 中色卡片（#272727）：备用卡片表面
• 边框灰（#4d4d4d）：深色背景上的按钮边框
• 浅边框（#7c7c7c）：描边按钮边框、静音链接
• 分隔线（#b3b3b3）：分割线
• 浅色表面（#eeeeee）：浅色模式按钮（较少使用）
• Spotify 绿边框（#1db954）：绿色强调边框变体

阴影

• 重阴影（rgba(0,0,0,0.5) 0px 8px 24px）：对话框、菜单、悬浮面板
• 中阴影（rgba(0,0,0,0.3) 0px 8px 8px）：卡片、下拉菜单
• 内嵌边框（rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset）：输入框边框阴影组合

3. 字体规范

字族

• 标题字体：SpotifyMixUITitle，回退栈：CircularSp-Arab, CircularSp-Hebr, CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva, Helvetica Neue, helvetica, arial, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, MS Gothic
• UI / 正文字体：SpotifyMixUI，同上回退栈

层级

原则

• 粗体/常规二元对立：大多数文字要么是 700（粗体）要么是 400（常规），600 仅少量使用。这通过字重对比而非字号变化来建立清晰的视觉层级。
• 大写按钮即系统语言：按钮标签使用全大写加宽字间距（1.4px–2px），形成区别于内容文字的系统性”标签”声调。
• 紧凑的字号区间：范围为 10px–24px——比大多数系统更窄。Spotify 的字体紧凑而功能性强，专为浏览播放列表而设计，而非阅读长文。
• 全球文字支持：完整的回退栈（阿拉伯语、希伯来语、西里尔语、希腊语、梵文、CJK）反映了 Spotify 覆盖 180 多个市场的全球化布局。

4. 组件样式

按钮

深色胶囊

• 背景：#1f1f1f
• 文字：#ffffff 或 #b3b3b3
• 内边距：8px 16px
• 圆角：9999px（完整胶囊）
• 用途：导航胶囊、次要操作

深色大胶囊

• 背景：#181818
• 文字：#ffffff
• 内边距：0px 43px
• 圆角：500px
• 用途：主要应用导航按钮

浅色胶囊

• 背景：#eeeeee
• 文字：#181818
• 圆角：500px
• 用途：浅色模式 CTA（Cookie 通知、营销页面）

描边胶囊

• 背景：透明
• 文字：#ffffff
• 边框：1px solid #7c7c7c
• 内边距：4px 16px 4px 36px（非对称，为图标留位）
• 圆角：9999px
• 用途：关注按钮、次要操作

圆形播放

• 背景：#1f1f1f
• 文字：#ffffff
• 内边距：12px
• 圆角：50%（圆形）
• 用途：播放/暂停控件

卡片与容器

• 背景：#181818 或 #1f1f1f
• 圆角：6px–8px
• 大多数卡片无可见边框
• 悬停时：背景轻微变亮
• 阴影：悬浮状态下 rgba(0,0,0,0.3) 0px 8px 8px

输入框

• 搜索输入框：#1f1f1f 背景，#ffffff 文字
• 圆角：500px（胶囊形）
• 内边距：12px 96px 12px 48px（考虑图标空间）
• 聚焦时：边框变为 #000000，outline 1px solid

导航

• 深色侧边栏，激活项使用 SpotifyMixUI 14px 字重 700，非激活项字重 400
• 非激活项 #b3b3b3 静音色，激活项 #ffffff
• 圆形图标按钮（50% 圆角）
• 左上角 Spotify 绿色 Logo

5. 布局原则

间距系统

• 基础单位：8px
• 比例尺：1px、2px、3px、4px、5px、6px、8px、10px、12px、14px、15px、16px、20px

网格与容器

• 固定侧边栏 + 主内容区
• 基于网格的专辑/播放列表卡片
• 底部全宽”正在播放”栏
• 响应式内容区填充剩余空间

留白哲学

• 深色压缩：Spotify 内容密度高——播放列表网格、曲目列表和导航都排列紧密。深色背景在元素之间提供了视觉休憩，无需大间距。
• 内容密度优先于呼吸空间：这是一个应用，而非营销网站。每一个像素都服务于聆听体验。

圆角比例尺

• 极小（2px）：徽章、显式标签
• 细微（4px）：输入框、小元素
• 标准（6px）：专辑封面容器、卡片
• 舒适（8px）：板块、对话框
• 中等（10px–20px）：面板、浮层元素
• 大（100px）：大型胶囊按钮
• 胶囊（500px）：主要按钮、搜索输入框
• 完整胶囊（9999px）：导航胶囊、搜索框
• 圆形（50%）：播放按钮、头像、图标

6. 深度与层级

阴影哲学：Spotify 对深色主题应用使用了明显偏重的阴影。0.5 不透明度、24px 模糊的阴影为对话框和菜单营造出”悬浮于黑暗中”的戏剧性效果，而 0.3 不透明度、8px 模糊的阴影则为卡片提供更为细腻的悬浮感。输入框上独特的内嵌边框阴影组合营造出凹陷的、有触感的质地。

7. 应做与避免

应做

• 使用近黑色背景（#121212–#1f1f1f）——通过色调深浅变化营造层次感
• 仅将 Spotify 绿（#1ed760）用于播放控件、激活状态和主要 CTA
• 所有按钮使用胶囊形（500px–9999px），播放控件使用圆形（50%）
• 按钮标签使用全大写加宽字间距（1.4px–2px）
• 保持紧凑的字号（10px–24px 范围）——这是应用，不是杂志
• 对深色背景上的悬浮元素使用重阴影（0.3–0.5 不透明度）
• 让专辑封面提供色彩——UI 本身保持无彩色

避免

• 不要将 Spotify 绿用作装饰或背景——它仅作功能性使用
• 不要将浅色背景用于主要表面——深色沉浸感是核心体验
• 不要在按钮上跳过胶囊/圆形的几何语言——方形按钮会破坏品牌识别
• 不要使用细弱的阴影——在深色背景上，阴影必须足够重才能显现
• 不要添加额外的品牌色——绿色加无彩灰阶就是完整的色板
• 不要使用宽松的行高——Spotify 的字体排版紧凑而密集
• 不要暴露裸露的灰色边框——改用基于阴影或内嵌的边框方式

8. 响应式行为

断点

折叠策略

• 侧边栏：完整 → 折叠 → 隐藏
• 专辑网格：5 列 → 3 列 → 2 列 → 1 列
• “正在播放”栏：所有尺寸下保持可见
• 搜索框：胶囊形输入框保持，宽度自适应
• 导航：侧边栏 → 移动端底部导航栏

9. Agent 提示词指南

快速色彩参考

• 背景：近黑色（#121212）
• 表面：深色卡片（#181818）
• 文字：白色（#ffffff）
• 次要文字：银色（#b3b3b3）
• 强调色：Spotify 绿（#1ed760）
• 边框：#4d4d4d
• 错误色：负面红（#f3727f）

组件提示词示例

• “创建一个深色卡片：#181818 背景，8px 圆角。标题使用 16px SpotifyMixUI 字重 700，白色文字。副标题使用 14px 字重 400，#b3b3b3。悬停时阴影 rgba(0,0,0,0.3) 0px 8px 8px。”
• “设计一个胶囊按钮：#1f1f1f 背景，白色文字，9999px 圆角，8px 16px 内边距。14px SpotifyMixUI 字重 700，全大写，字间距 1.4px。”
• “制作一个圆形播放按钮：Spotify 绿（#1ed760）背景，#000000 图标，50% 圆角，12px 内边距。”
• “创建搜索输入框：#1f1f1f 背景，白色文字，500px 圆角，12px 48px 内边距。内嵌边框：rgb(124,124,124) 0px 0px 0px 1px inset。”
• “设计导航侧边栏：#121212 背景。激活项：14px 字重 700，白色。非激活项：14px 字重 400，#b3b3b3。“

迭代指南

1. 从 #121212 开始——一切都生活在近黑的黑暗中
2. Spotify 绿仅用于功能性高亮（播放、激活、CTA）
3. 胶囊化一切——大型用 500px，小型用 9999px，圆形控件用 50%
4. 按钮使用全大写加宽字间距——这是系统性的标签声调
5. 使用重阴影（0.3–0.5 不透明度）表达层级——轻阴影在深色背景上不可见
6. 专辑封面提供所有色彩——UI 保持无彩色