open-design/design-systems/slack/DESIGN-zh-tw.md

受 Slack 啟發的設計系統

Category: 生產力與 SaaS 職場通訊平台。以深茄紫為主色，多色調 Logo 調色板，明亮介面搭配深色側邊欄，溫暖而親切。

1. 視覺主題與氛圍

Slack 的品牌形象建立在「工作也可以充滿人情味，甚至有點趣味」的理念之上。標準介面是明亮的——白色內容區搭配深茄紫（#4A154B）側邊欄——與深色優先工具形成反差。這種對比是刻意為之：側邊欄是沉穩、始終存在的導航錨點，而內容區則明亮開闊。

Logo 調色板——藍、綠、黃、紅——主要出現在井號圖示和行銷場景中，而非散落於整個 UI。在產品本身中，Slack 使用克制、專業的配色系統，以茄紫色作為唯一的品牌錨點。

核心特徵：

• 明亮優先的內容介面：白色 #FFFFFF 與近白色 #F8F8F8
• 深茄紫 #4A154B 側邊欄——品牌最具辨識度的 UI 元素
• 四種 Logo 強調色（藍、綠、黃、紅）僅少量用作高亮
• 標題使用 Larsseit（行銷場景），UI 使用系統無襯線字體
• 圓潤但不卡通：大多數元件圓角為 4–8px
• 緊湊而透氣：訊息行緊密，討論串層級清晰
• 溫暖對話的語調——表情符號、回應和插圖是一等公民

---

2. 色彩規範與用途

品牌主色

變數	Hex	用途
--color-aubergine	#4A154B	側邊欄背景，品牌主色
--color-aubergine-dark	#350d36	茄紫介面上的懸停狀態
--color-aubergine-light	#611f69	側邊欄活躍項高亮

Logo 強調色（少量使用——僅用於高亮、圖示、行銷）

變數	Hex	名稱	用途
--color-blue	#36C5F0	天藍	頻道圖示、連結、資訊狀態
--color-green	#2EB67D	青綠	線上狀態、成功狀態
--color-yellow	#ECB22E	金黃	離開狀態、警告、高亮
--color-red	#E01E5A	寶石紅	通知、錯誤、提及徽章

介面背景色

變數	Hex	用途
--bg-primary	#FFFFFF	主訊息區、彈窗
--bg-secondary	#F8F8F8	討論串面板、次級介面
--bg-tertiary	#F1F1F1	輸入框背景、懸停狀態
--bg-sidebar	#4A154B	左側邊欄（茄紫色）
--bg-sidebar-hover	rgba(255,255,255,0.1)	側邊欄項懸停
--bg-sidebar-active	rgba(255,255,255,0.2)	活躍側邊欄項
--bg-message-hover	#F8F8F8	訊息行懸停

文字顏色

變數	Hex	用途
--text-primary	#1D1C1D	主要正文（近黑色）
--text-secondary	#616061	時間戳記、靜音標籤
--text-sidebar	rgba(255,255,255,0.9)	側邊欄頻道名稱
--text-sidebar-muted	rgba(255,255,255,0.6)	側邊欄未啟用項
--text-link	#1264A3	訊息內聯連結
--text-mention	#1264A3	@提及文字顏色

語意色

變數	Hex	用途
--color-success	#2EB67D	成功提示、積極狀態
--color-warning	#ECB22E	警告狀態
--color-danger	#E01E5A	錯誤狀態、破壞性操作
--color-info	#36C5F0	資訊性高亮

邊框與分隔線

變數	Hex	用途
--border-default	#DDDDDD	標準分隔線、卡片邊框
--border-subtle	#F1F1F1	行間細微分隔線
--border-focus	#1264A3	焦點環顏色

---

3. 字體排版規則

字體

用途	官方字體	網頁後備
展示 / 行銷標題	Larsseit	'Larsseit', 'Helvetica Neue', Arial, sans-serif
UI / 正文 / 框架	Slack Lato（定製）	system-ui, -apple-system, BlinkMacSystemFont, sans-serif
程式碼 / 等寬	—	'Monaco', 'Menlo', 'Courier New', monospace

Slack 行銷標題使用 Larsseit，產品內 UI 使用定製版 Lato。網頁使用時，system-ui 是最安全的後備方案。

字號層級

層級	大小	字重	行高	字間距	用途
Display XL	48px	800	1.1	-1px	行銷主視覺標題
Display L	36px	700	1.15	-0.5px	區塊主視覺
Heading 1	28px	700	1.25	normal	彈窗標題、頁面標題
Heading 2	22px	700	1.3	normal	卡片標題、設定區塊
Heading 3	18px	700	1.35	normal	子區塊標題
Body L	16px	400	1.5	normal	訊息文字、說明
Body	15px	400	1.46667	normal	預設 UI 文字（Slack 基礎字號）
Body SM	13px	400	1.38462	normal	次要元資料
Caption	12px	400	1.33	normal	時間戳記、提示
Code	12px	400	1.5	normal	行內程式碼、程式碼區塊

排版規則

• Slack 基礎正文字號為 15px——比 16px 略小，以提高密度
• 未讀頻道：字重 700——粗體是主要的未讀指示器
• 時間戳記：12px --text-secondary，僅懸停時顯示
• 程式碼區塊：背景 #F8F8F8，邊框 1px solid #DDDDDD，圓角 4px
• 不使用 12px 以下的字號
• 行銷標題：大展示尺寸使用字間距 -1px

---

4. 元件樣式

按鈕

/* Primary */
.btn-primary {
  background: #4A154B;
  color: #FFFFFF;
  border-radius: 4px;
  padding: 0 16px;
  height: 36px;
  font-size: 15px;
  font-weight: 700;
  border: none;
}
.btn-primary:hover { background: #611f69; }

/* Secondary */
.btn-secondary {
  background: #FFFFFF;
  color: #1D1C1D;
  border: 1px solid #DDDDDD;
  border-radius: 4px;
  padding: 0 16px;
  height: 36px;
  font-size: 15px;
  font-weight: 700;
}
.btn-secondary:hover { background: #F8F8F8; }

/* Danger */
.btn-danger {
  background: #E01E5A;
  color: #FFFFFF;
  border-radius: 4px;
}
.btn-danger:hover { background: #B3114A; }

輸入框

.input {
  background: #FFFFFF;
  border: 1px solid #DDDDDD;
  border-radius: 4px;
  color: #1D1C1D;
  font-size: 15px;
  padding: 8px 12px;
  height: 36px;
}
.input:focus {
  border-color: #1264A3;
  box-shadow: 0 0 0 2px rgba(18,100,163,0.25);
  outline: none;
}

側邊欄頻道項

.channel-item {
  height: 28px;
  padding: 0 16px;
  border-radius: 6px;
  color: rgba(255,255,255,0.7);
  font-size: 15px;
  font-weight: 400;
}
.channel-item:hover {
  background: rgba(255,255,255,0.1);
  color: #FFFFFF;
}
.channel-item.active {
  background: rgba(255,255,255,0.2);
  color: #FFFFFF;
}
.channel-item.unread {
  color: #FFFFFF;
  font-weight: 700;
}

未讀徽章

.badge {
  background: #E01E5A;
  color: #FFFFFF;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  min-width: 18px;
}

訊息附件 / 卡片

.attachment {
  border-left: 4px solid #DDDDDD;
  background: #F8F8F8;
  border-radius: 0 4px 4px 0;
  padding: 8px 12px;
  margin: 4px 0;
}

回應

.reaction {
  border: 1px solid #DDDDDD;
  border-radius: 24px;
  background: #F8F8F8;
  padding: 2px 8px;
  font-size: 13px;
  cursor: pointer;
}
.reaction:hover { background: #F1F1F1; }
.reaction.active {
  background: rgba(18,100,163,0.1);
  border-color: #1264A3;
}

---

5. 版面原則

三欄版面

┌──────────────┬──────────────────────────────┬─────────────┐
│   Sidebar    │        Message Area          │   Thread    │
│   (240px)    │          (flex: 1)           │  (400px)    │
│  #4A154B     │          #FFFFFF             │  optional   │
└──────────────┴──────────────────────────────┴─────────────┘

間距系統（基礎單位 4px）

變數	數值	用途
--space-1	4px	緊湊間隙
--space-2	8px	元件內邊距
--space-3	12px	輸入框內邊距
--space-4	16px	標準內邊距
--space-6	24px	卡片內邊距
--space-8	32px	區塊間距

側邊欄結構

[工作區名稱 ▼]
────────────────────
Threads
All DMs
Drafts & Sent
────────────────────
▼ Channels
  # general
  # random
  # design  ● (unread)
────────────────────
▼ Direct Messages
  John Doe
  Jane Smith

訊息編輯器

• 固定在訊息區底部
• border: 1px solid #DDDDDD，border-radius: 8px，margin: 0 16px 16px
• 工具列：表情符號、附件、格式化、傳送按鈕

---

6. 深度與層級

Slack 在明亮介面上使用輕柔陰影：

層級	用途	陰影
扁平	訊息行、側邊欄項	none
低	卡片、輸入框	0 1px 3px rgba(0,0,0,0.08)
中	下拉選單、彈出層	0 4px 12px rgba(0,0,0,0.12)
高	強制回應視窗、對話框	0 8px 24px rgba(0,0,0,0.15)
遮罩	強制回應背景遮罩	rgba(0,0,0,0.5)

---

7. 應該與不應該

✅ 應該

• 側邊欄使用茄紫色 #4A154B——這是 Slack 最標誌性的 UI 元素
• 保持主內容區白色和明亮
• 所有正文使用 #1D1C1D（近黑色），而非純黑
• 用粗體頻道名稱表示未讀狀態——字重是指示器
• 四種強調色僅用於語意角色（成功、警告、危險、資訊）
• 訊息附件和嵌入內容使用 border-left: 4px
• 僅在懸停時顯示時間戳記
• 連結和焦點狀態使用 #1264A3
• 側邊欄項保持緊湊：高度 28px，圓角 6px

❌ 不應該

• 不要使用深色主內容區——Slack 是明亮優先的
• 不要將藍/綠/黃/紅作為裝飾性強調色散落各處
• 不要使用純黑 #000000 作為文字顏色
• 不要使用氣泡——訊息是扁平行
• 不要將按鈕做成大圓角——4px 是標準
• 不要永久顯示時間戳記
• 不要將頻道名稱全大寫
• 不要使用 12px 以下的字號

---

8. 響應式行為

斷點

斷點	寬度	版面
行動裝置	< 768px	單面板，側邊欄作為左抽屜
平板	768–1024px	側邊欄 + 僅訊息區
桌機	> 1024px	完整三欄版面

行動端適配

• 側邊欄：左抽屜，向右滑動開啟
• 底部標籤列：首頁、私訊、動態、我
• 討論串面板：全螢幕覆蓋層
• 編輯器：固定在鍵盤上方
• 頻道清單項：44px 觸控目標高度
• 行動端保留茄紫色頂部標題列

---

9. Agent 提示指南

產生 Slack 風格設計時，遵循以下方法：

顏色應用：

將 background: #FFFFFF 設為主畫布。側邊欄使用 #4A154B（茄紫色）。所有主要文字使用 #1D1C1D。連結和焦點環使用 #1264A3。四種 Logo 顏色——#36C5F0、#2EB67D、#ECB22E、#E01E5A——僅作語意用途：資訊、成功、警告、危險。

排版：

所有 UI 使用 system-ui, -apple-system, sans-serif。基礎字號為 15px。未讀頻道：字重 700。正文：字重 400。時間戳記：12px #616061，僅懸停顯示。程式碼：Monaco, Menlo, monospace，12px，背景 #F8F8F8。

版面：

三欄：240px 茄紫色側邊欄 + 彈性白色訊息區 + 可選 400px 討論串面板。側邊欄項：高度 28px，圓角 6px，未讀時加粗。編輯器：固定底部，border: 1px solid #DDDDDD，border-radius: 8px。

元件：

按鈕：圓角 4px，高度 36px，茄紫色主按鈕。輸入框：1px solid #DDDDDD 邊框，#1264A3 焦點環。訊息行：扁平，無氣泡，36px 圓形頭像。回應：膠囊形 border: 1px solid #DDDDDD，border-radius: 24px。

語調：

Slack 是溫暖、專業且充滿人情味的。空狀態使用友善插圖。行動呼籲直接明確：「Send message」、「Get started」。錯誤訊息清晰且有幫助。絕不令人感到警覺。

需要避免的反模式：

不要深色內容區。不要氣泡。不要純黑文字。不要散落的多色強調。不要全大寫頻道名稱。不要低於 12px 的字號。不要大圓角按鈕。