Design System Inspired by Spotify

1. 视觉主题与氛围

Spotify 的网页界面是一个深度的沉浸式音乐播放器，将听众包裹在一个近黑色的茧（#121212、#181818、#1f1f1f）中，专辑封面与内容成为主要的色彩来源。设计哲学是"内容优先的黑暗"——UI 退入阴影，让音乐、播客与歌单能够发光。每一个表面都是炭灰色的一个色阶，营造出剧院般的环境，其中唯一的真实色彩来自标志性的 Spotify Green（#1ed760）以及专辑封面本身。

字体排版使用 SpotifyMixUI 与 SpotifyMixUITitle——CircularSp 家族（Circular by Lineto，为 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 Green（#1ed760）作为唯一的品牌强调色——从不装饰，永远功能
• SpotifyMixUI/CircularSp 字体族配全球文字支持
• 胶囊按钮（500px–9999px）与圆形控件（50%）——圆角的、为触摸优化
• 大写字母按钮标签配宽字距（1.4px–2px）
• 抬升元素上的重阴影（rgba(0,0,0,0.5) 0px 8px 24px）
• 语义色：负向红（#f3727f）、警告橙（#ffa42b）、公告蓝（#539df5）
• 专辑封面作为主要色彩来源——UI 本身刻意为无彩色

2. 配色与角色

主品牌色

• Spotify Green（#1ed760）：主品牌强调色——播放按钮、激活态、CTA
• Near Black（#121212）：最深的背景表面
• Dark Surface（#181818）：卡片、容器、抬升表面
• Mid Dark（#1f1f1f）：按钮背景、交互表面

文本

• White（#ffffff）：--text-base，主文本
• Silver（#b3b3b3）：次级文本、弱化标签、非激活导航
• Near White（#cbcbcb）：略亮的次级文本
• Light（#fdfdfd）：近纯白，用于最高强调

语义色

• Negative Red（#f3727f）：--text-negative，错误状态
• Warning Orange（#ffa42b）：--text-warning，警告状态
• Announcement Blue（#539df5）：--text-announcement，信息状态

表面与边框

• Dark Card（#252525）：抬升的卡片表面
• Mid Card（#272727）：备用卡片表面
• Border Gray（#4d4d4d）：深色上的按钮边框
• Light Border（#7c7c7c）：描边按钮边框、弱化链接
• Separator（#b3b3b3）：分隔线
• Light Surface（#eeeeee）：浅色模式按钮（罕见）
• Spotify Green Border（#1db954）：绿色强调边框变体

阴影

• Heavy（rgba(0,0,0,0.5) 0px 8px 24px）：对话框、菜单、抬升面板
• Medium（rgba(0,0,0,0.3) 0px 8px 8px）：卡片、下拉菜单
• Inset Border（rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset）：输入框边框-阴影组合

3. 字体排版规则

字体族

• Title：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 / Body：SpotifyMixUI，相同的回退栈

层级

原则

• 粗体/常规二元：大多数文本要么是 700（粗体）要么是 400（常规），600 谨慎使用。这通过字重对比而非尺寸变化创造出清晰的视觉层级。
• 大写按钮作为系统：按钮标签使用大写 + 宽字距（1.4px–2px），创造出与内容文本不同的系统化"标签"声音。
• 紧凑的尺寸：范围在 10px–24px——比大多数系统更窄。Spotify 的字体紧凑而功能化，为扫描歌单而设计，而非阅读文章。
• 全球文字支持：广泛的回退栈（阿拉伯文、希伯来文、西里尔文、希腊文、天城文、CJK）反映了 Spotify 180+ 市场的触达。

4. 组件样式

按钮

Dark Pill

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

Dark Large Pill

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

Light Pill

• 背景：#eeeeee
• 文本：#181818
• 圆角：500px
• 用途：浅色模式 CTA（cookie 同意、营销）

Outlined Pill

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

Circular Play

• 背景：#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，轮廓 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）——通过色阶变化实现深度
• 仅在播放控件、激活态与主 CTA 上应用 Spotify Green（#1ed760）
• 所有按钮使用胶囊形（500px–9999px），播放控件使用圆形（50%）
• 在按钮标签上应用大写 + 宽字距（1.4px–2px）
• 保持字体排版紧凑（10px–24px 范围）——这是一个应用，不是杂志
• 在深色背景的抬升元素上使用重阴影（0.3–0.5 不透明度）
• 让专辑封面提供色彩——UI 本身保持无彩色

避免

• 不要装饰性地或作为背景使用 Spotify Green——它仅用于功能
• 不要为主表面使用浅色背景——深色沉浸是核心
• 不要跳过按钮上的胶囊/圆形几何——方形按钮破坏身份
• 不要使用薄/微妙的阴影——在深色背景上，阴影需要足够重才可见
• 不要添加额外的品牌色——绿色 + 无彩色灰色是完整的调色板
• 不要使用放松的行高——Spotify 的字体排版紧凑且密集
• 不要暴露原始的灰色边框——使用基于阴影的或内嵌边框

8. 响应式行为

断点

折叠策略

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

9. 智能体 Prompt 指南

颜色速查

• 背景：Near Black（#121212）
• 表面：Dark Card（#181818）
• 文本：White（#ffffff）
• 次级文本：Silver（#b3b3b3）
• 强调色：Spotify Green（#1ed760）
• 边框：#4d4d4d
• 错误：Negative Red（#f3727f）

组件 Prompt 示例

• "创建一个深色卡片：#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 Green（#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 Green 仅用于功能高亮（播放、激活、CTA）
3. 全部胶囊化——大的 500px，小的 9999px，圆形的 50%
4. 按钮使用大写 + 宽字距——系统化的标签声音
5. 重阴影（0.3–0.5 不透明度）表达高度——浅阴影在深色上不可见
6. 专辑封面提供所有色彩——UI 保持无彩色