workbuddy_skills/open-design/design-systems/discord/DESIGN-zh-tw.md

# 以 Discord 為靈感的設計系統

> Category: 生產力與 SaaS
> 語音／聊天平台。深邃的靛紫藍、以暗色為主的介面層次，以及活潑的強調色時刻。

## 1. 視覺主題與氛圍

Discord 的產品是為夜晚、團隊突襲與群組語音量身打造的，因此整個介面以暗色為基調。預設畫布是深沉的「Background Primary」（淺色主題為 `#313338`，暗色主題為 `#1e1f22`），聊天欄疊加於稍亮或稍暗的層次之上，以區分頻道、討論串與側邊面板。標誌性的 **Blurple**（`#5865f2`）專用於品牌標識、主要 CTA、提及標記與「你自己」的視覺線索——刻意克制地使用，才能在低調的中性色中脫穎而出。

字型採用 **gg sans**（Discord 的自訂 Whitney 替代字型），圓潤的幾何造型在聊天客戶端所需的小字級下依然親切且易讀。標題逐級遞增；聊天列間距緊湊（訊息群組之間 4–8px），讓大量捲動的紀錄仍保持可掃讀性。

形狀語言圓潤但不過度軟化：卡片圓角 8px，輸入框 4px，狀態徽章與標籤則使用完整的膠囊形狀。伺服器圖示為 48px 的圓角方形頭像，滑鼠懸停時會變形為圓形——這個細微的動態效果已成為品牌識別的一部分。

**主要特徵：**
- 暗色優先的介面層次：`#1e1f22` / `#2b2d31` / `#313338`（三階深度）
- Blurple `#5865f2` 是聊天介面中唯一高飽和度的強調色
- gg sans（Whitney 風格）用於所有文字——友善、幾何、中性
- 圓角方形伺服器頭像（圓角半徑 16px），懸停時平滑轉為圓形
- 聊天列間距緊湊，側邊面板留白充裕
- 狀態圓點：綠色代表上線、黃色代表閒置、紅色代表請勿打擾、灰色代表離線
- 以低透明度細微米白色繪製的 1px 像素對齊分隔線

## 2. 色彩調色盤與角色定位

### 主色
- **Blurple**（`#5865f2`）：品牌主色、主要 CTA、提及高亮。
- **Blurple Hover**（`#4752c4`）：Blurple 的懸停／啟用狀態。
- **Blurple Soft**（`#7289da`）：舊版 Blurple，行銷素材中的次要強調色。

### 介面層（暗色主題——預設）
- **Background Tertiary**（`#1e1f22`）：伺服器列表軌道、最深的背景。
- **Background Secondary**（`#2b2d31`）：頻道側邊欄、設定側邊欄。
- **Background Primary**（`#313338`）：聊天介面、訊息欄。
- **Background Floating**（`#111214`）：浮動彈出層、工具提示、自動補全。
- **Background Modifier Hover**（`rgba(78, 80, 88, 0.3)`）：列上的懸停覆蓋層。
- **Background Modifier Selected**（`rgba(78, 80, 88, 0.6)`）：已選取的列。

### 介面層（淺色主題）
- **Light Bg Primary**（`#ffffff`）：淺色主題的聊天介面。
- **Light Bg Secondary**（`#f2f3f5`）：淺色主題的側邊欄。
- **Light Bg Tertiary**（`#e3e5e8`）：最深的淺色介面層。

### 文字
- **Header Primary**（`#f2f3f5`）：暗色主題中的頻道標題、對話框標題。
- **Header Secondary**（`#b5bac1`）：較低調的標題。
- **Text Normal**（`#dbdee1`）：暗色主題的內文——比純白略帶冷調。
- **Text Muted**（`#949ba4`）：時間戳記、伺服器名稱、次要元資料。
- **Text Link**（`#00a8fc`）：訊息中的超連結——天空藍，與 Blurple 有明確區隔。
- **Channels Default**（`#80848e`）：側邊欄中未啟用的頻道名稱。

### 狀態與語意色
- **Status Online**（`#23a55a`）：上線圓點、成功狀態。
- **Status Idle**（`#f0b232`）：閒置圓點、離開狀態。
- **Status DND**（`#f23f43`）：請勿打擾，同時作為破壞性動作的紅色。
- **Status Streaming**（`#593695`）：「直播中」紫色。
- **Status Offline**（`#80848e`）：離線灰色。
- **Mention Highlight**（`rgba(88, 101, 242, 0.1)`）：@提及列上的柔和 Blurple 底色。

### 邊框與分隔線
- **Background Modifier Accent**（`rgba(255, 255, 255, 0.06)`）：暗色主題的標準分隔線。
- **Border Subtle**（`#3f4147`）：卡片的實線分隔線。

## 3. 字型規則

### 字型家族
- **內文／UI／標題**：`gg sans`，備用字型：`"Helvetica Neue", Helvetica, Arial, sans-serif`
- **展示用（舊版／Whitney）**：`Whitney`，備用字型：`gg sans`
- **程式碼／等寬**：`"gg mono"`，備用字型：`Consolas, Andale Mono, Courier New, Courier, monospace`

### 層級

| 角色 | 字型 | 大小 | 字重 | 行高 | 字距 | 備註 |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | gg sans | 56px (3.5rem) | 800 | 1.1 | -0.02em | 行銷主視覺 |
| Page Heading | gg sans | 24px (1.5rem) | 700 | 1.25 | normal | 設定／個人資料標題 |
| Channel Name | gg sans | 16px (1rem) | 600 | 1.25 | normal | `#general`、頻道標題 |
| Message Body | gg sans | 16px (1rem) | 400 | 1.375 | normal | 標準聊天文字 |
| Username | gg sans | 16px (1rem) | 500 | 1.25 | normal | 訊息作者 |
| Timestamp | gg sans | 12px (0.75rem) | 500 | 1.25 | normal | 「今天 下午 4:32」 |
| Sidebar Channel | gg sans | 16px (1rem) | 500 | 1.25 | normal | 頻道列表各列 |
| Server Name | gg sans | 16px (1rem) | 600 | 1.25 | normal | 伺服器標題 |
| Caption / Meta | gg sans | 12px (0.75rem) | 400 | 1.3 | 0.02em | 狀態文字、已編輯標記 |
| Code Inline | gg mono | 0.875em | 400 | inherit | normal | 行內 `code` |
| Code Block | gg mono | 14px (0.875rem) | 400 | 1.5 | normal | ```三反引號區塊``` |

### 原則
- **友善的幾何感**：gg sans 以圓潤字形末端取代 Whitney，適用於 a/g/s 等字母——品牌希望傳遞溫度，同時不犧牲易讀性。
- **以字重對比取代色彩對比**：層級來自 400→500→600→700→800 的字重遞進；介面層保持中性。
- **內文 16px**：聊天訊息不縮小至 16px 以下。密度感來自行高（1.375），而非字級大小。

## 4. 元件樣式

### 按鈕

**主要按鈕**
- 背景：`#5865f2`
- 文字：`#ffffff`
- 內距：8px 16px
- 圓角：4px
- 懸停：`#4752c4`
- 用途：主要 CTA、「繼續」、「加入伺服器」

**次要按鈕**
- 背景：`#4e5058`
- 文字：`#ffffff`
- 內距：8px 16px
- 圓角：4px
- 懸停：`#6d6f78`

**第三層級／低調（連結樣式）**
- 背景：transparent
- 文字：`#dbdee1`
- 懸停：文字加底線，背景不變

**危險按鈕**
- 背景：`#da373c`
- 文字：`#ffffff`
- 懸停：`#a12d2f`

### 輸入框
- 背景：`#1e1f22`
- 文字：`#dbdee1`
- 邊框：1px solid `#1e1f22`
- 圓角：4px
- 內距：10px 12px
- 焦點：邊框 `#5865f2`

### 伺服器頭像
- 尺寸：48×48px
- 圓角：預設 16px（圓角方形）；懸停與啟用狀態時過渡為 50%。
- 啟用狀態：圖示欄左側邊緣有 4px 白色膠囊形指示條。

### 狀態圓點
- 尺寸：10×10px
- 邊框：3px solid background-tertiary（製造「缺口」效果）
- 位置：頭像右下角。

### 卡片／嵌入內容
- 背景：`#2b2d31`（暗色）或 `#f2f3f5`（淺色）
- 左側邊框：4px solid 嵌入強調色。
- 圓角：4px
- 內距：8px 16px

### 提及膠囊
- 背景：`rgba(88, 101, 242, 0.3)`
- 文字：`#c9cdfb`
- 內距：0 2px
- 圓角：3px

## 5. 間距與版型

- **基礎單位**：4px。比例：4、8、12、16、20、24、32、40。
- **伺服器軌道**：寬度 72px，固定。
- **頻道側邊欄**：寬度 240px。
- **成員列表**：桌面版寬度 240px。
- **聊天欄**：彈性寬度，最小 380px。

## 6. 動態效果

- **時長**：懸停 200ms；頭像圓形變形 350ms；工具提示淡入 80ms。
- **緩動函數**：`cubic-bezier(0.215, 0.61, 0.355, 1)` 用於頭像變形（快速啟動後緩慢定位）。
- **通知脈衝**：未讀提及指示器以 1.4s ease-in-out infinite 循環。

## 7. 使用規範

- 暗色外殼、緊湊的資訊密度與 Blurple 的操作層級必須一起保留；將 Blurple 用於淺色行銷版型會破壞 Discord 產品的整體感。
- 導覽密集的介面應以軌道、側邊欄與聊天欄為結構核心，而非使用孤立的裝飾性卡片。
- 在呈現人員、伺服器或即時狀態時，請使用圓角方形頭像與狀態圓點的視覺語言。