# 受 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`，同上回退栈

### 层级

| 用途 | 字体 | 字号 | 字重 | 行高 | 字间距 | 备注 |
|------|------|------|--------|-------------|----------------|-------|
| 板块标题 | SpotifyMixUITitle | 24px (1.50rem) | 700 | normal | normal | 粗体标题字重 |
| 功能标题 | SpotifyMixUI | 18px (1.13rem) | 600 | 1.30（紧凑） | normal | 半粗体区段标题 |
| 正文粗体 | SpotifyMixUI | 16px (1.00rem) | 700 | normal | normal | 强调文字 |
| 正文 | SpotifyMixUI | 16px (1.00rem) | 400 | normal | normal | 标准正文 |
| 按钮大写 | SpotifyMixUI | 14px (0.88rem) | 600–700 | 1.00（紧凑） | 1.4px–2px | `text-transform: uppercase` |
| 按钮 | SpotifyMixUI | 14px (0.88rem) | 700 | normal | 0.14px | 标准按钮 |
| 导航链接粗体 | SpotifyMixUI | 14px (0.88rem) | 700 | normal | normal | 导航 |
| 导航链接 | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | 非激活导航 |
| 说明文字粗体 | SpotifyMixUI | 14px (0.88rem) | 700 | 1.50–1.54 | normal | 粗体元数据 |
| 说明文字 | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | 元数据 |
| 小字粗体 | SpotifyMixUI | 12px (0.75rem) | 700 | 1.50 | normal | 标签、计数 |
| 小字 | SpotifyMixUI | 12px (0.75rem) | 400 | normal | normal | 细则文字 |
| 徽章 | SpotifyMixUI | 10.5px (0.66rem) | 600 | 1.33 | normal | `text-transform: capitalize` |
| 极小字 | SpotifyMixUI | 10px (0.63rem) | 400 | normal | normal | 最小文字 |

### 原则
- **粗体/常规二元对立**：大多数文字要么是 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. 深度与层级

| 层级 | 处理方式 | 用途 |
|-------|-----------|-----|
| 基础层（Level 0） | `#121212` 背景 | 最深层，页面背景 |
| 表面层（Level 1） | `#181818` 或 `#1f1f1f` | 卡片、侧边栏、容器 |
| 悬浮层（Level 2） | `rgba(0,0,0,0.3) 0px 8px 8px` | 下拉菜单、悬停卡片 |
| 对话层（Level 3） | `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` | 输入框边框 |

**阴影哲学**：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. 响应式行为

### 断点
| 名称 | 宽度 | 关键变化 |
|------|-------|-------------|
| 小屏手机 | <425px | 紧凑移动端布局 |
| 手机 | 425–576px | 标准移动端 |
| 平板 | 576–768px | 两列网格 |
| 大平板 | 768–896px | 扩展布局 |
| 小桌面 | 896–1024px | 侧边栏可见 |
| 桌面 | 1024–1280px | 完整桌面布局 |
| 大桌面 | >1280px | 扩展网格 |

### 折叠策略
- 侧边栏：完整 → 折叠 → 隐藏
- 专辑网格：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 保持无彩色