# 以 Spotify 為靈感的設計系統

> Category: 媒體與消費者
> 音樂串流。深色背景上的鮮明綠色、粗獷字型、以專輯封面為視覺驅動。

## 1. 視覺主題與氛圍

Spotify 的網頁介面是一個沉浸式的深色音樂播放器，以近乎純黑的色繭（`#121212`、`#181818`、`#1f1f1f`）包裹聆聽者，讓專輯封面與內容成為主要的色彩來源。設計哲學是「以內容為先的暗色調」——UI 退隱於陰影之中，讓音樂、播客與播放清單得以發光。每一個介面層都是一種深炭色調，營造出如劇院般的環境，唯一真正的色彩來自標誌性的 Spotify Green（`#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`），整體呈現出如頂級音響設備般的介面質感——觸覺豐富、圓潤，且為觸控操作而生。

**Key Characteristics:**
- 近純黑沉浸式深色主題（`#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
- **近純黑**（`#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 Green 邊框**（`#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 同意、行銷頁面）

**外框膠囊**
- 背景：transparent
- 文字：`#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 標誌位於左上角，以綠色顯示

## 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 Green（`#1ed760`）用於播放控制、啟用狀態與主要 CTA
- 所有按鈕使用膠囊形狀（500px–9999px），播放控制使用圓形（50%）
- 在按鈕標籤上套用全大寫與寬字距（1.4px–2px）
- 保持字型緊縮（10px–24px 範圍）——這是一款應用程式，不是雜誌
- 對深色背景上的高層元素使用重陰影（0.3–0.5 不透明度）
- 讓專輯封面提供色彩——UI 本身保持無彩色

### 禁止
- 不可將 Spotify Green 用於裝飾或背景——它僅具功能性
- 不可將淺色背景用於主要表面——深色沉浸感是核心特質
- 不可在按鈕上省略膠囊／圓形幾何——方形按鈕會破壞品牌識別
- 不可使用細緻或輕微的陰影——在深色背景上，陰影必須夠重才可見
- 不可增加額外品牌色——綠色加無彩色灰階即是完整調色盤
- 不可使用寬鬆的行高——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 Green（`#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 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 本身保持無彩色