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

# 受 IBM 啟發的設計系統

> Category: 媒體與消費
> 企業級技術。Carbon 設計系統，結構化藍色調色板。

## 1. 視覺主題與氛圍

IBM 的網站是建立在 Carbon 設計系統之上的企業權威的數位化體現——這套設計語言結構嚴謹，讀起來像是以網頁形式呈現的工程規範。頁面基於鮮明的二元對比運作：明亮的白色（`#ffffff`）畫布配以近乎純黑（`#161616`）的文字，點綴以唯一且始終如一的強調色——IBM 藍 60（`#0f62fe`）。這不是新創科技公司式的俏皮極簡主義；這是將企業精確性凝練為像素的產物。每個元素都存在於 Carbon 嚴格的 2x 網格中，每種顏色映射至語義化 token，每個間距值都對齊 8px 基礎單位。

IBM Plex 字體族是該系統的骨架。細體（300）的 IBM Plex Sans 用於展示標題，在大尺寸下創造出出人意料的輕盈、近乎精緻的質感——這是對 IBM 企業厚重感的刻意反襯。在正文尺寸下，常規字重（400）配以 14px 說明文字 0.16px 字間距，引入精心調校的微觀字距追蹤，使 Carbon 文字質感更像是工程設計而非排版設計。IBM Plex Mono 用於程式碼、資料和技術標籤，與鮮少出現的 IBM Plex Serif 共同構成完整的字體三位一體。

IBM 視覺身份的定義，超越單色加藍色之外，在於對 Carbon 元件 token 系統的依賴。每個互動狀態都映射至以 `--cds-`（Carbon Design System）為前綴的 CSS 自訂屬性。按鈕沒有硬編碼顏色；它們引用 `--cds-button-primary`、`--cds-button-primary-hover`、`--cds-button-primary-active`。這種 token 化架構意味著整個視覺層是一張覆蓋在深度系統化基礎之上的薄皮——相當於設計領域中一套型別嚴謹的 API。

**核心特徵：**
- IBM Plex Sans 細體（Light 300）用於展示——通過排版克制傳達企業氣場
- IBM Plex Mono 用於程式碼和技術內容，小尺寸下保持一致的 0.16px 字間距
- 單一強調色：IBM 藍 60（`#0f62fe`）——所有互動元素、所有行動呼籲、所有連結
- Carbon token 系統（`--cds-*`）驅動所有語義顏色，支援在變數層面切換主題
- 嚴格遵循 8px 間距網格——無任意值，一切對齊
- `#f4f4f4` 灰 10 表面上的扁平無邊框卡片——透過背景色分層實現層次，而非陰影
- 下邊框輸入框（非盒狀）——Carbon 表單的標誌性模式
- 主要按鈕圓角 0px——矩形毫不妥協，無任何柔化

## 2. 色彩調色板與角色

### 主色
- **IBM 藍 60**（`#0f62fe`）：唯一互動色。主要按鈕、連結、焦點狀態、啟用指示器。這是核心 UI 調色板中唯一的有彩色調。
- **白色**（`#ffffff`）：頁面背景、卡片表面、藍底白字、`--cds-background`。
- **灰 100**（`#161616`）：主要文字、標題、深色表面背景、導覽列、頁尾。`--cds-text-primary`。

### 中性灰度（灰色系列）
- **灰 100**（`#161616`）：主要文字、標題、深色 UI 裝飾、頁尾背景。
- **灰 90**（`#262626`）：次級深色表面、深色背景懸停狀態。
- **灰 80**（`#393939`）：三級深色、啟用狀態。
- **灰 70**（`#525252`）：次要文字、輔助文字、說明。`--cds-text-secondary`。
- **灰 60**（`#6f6f6f`）：佔位文字、停用文字。
- **灰 50**（`#8d8d8d`）：停用圖示、靜音標籤。
- **灰 30**（`#c6c6c6`）：邊框、分隔線、輸入框下邊框。`--cds-border-subtle`。
- **灰 20**（`#e0e0e0`）：微妙邊框、卡片輪廓。
- **灰 10**（`#f4f4f4`）：次級表面背景、卡片填充、交替列。`--cds-layer-01`。
- **灰 10 懸停**（`#e8e8e8`）：灰 10 表面的懸停狀態。

### 互動色
- **藍 60**（`#0f62fe`）：主要互動色——按鈕、連結、焦點。`--cds-link-primary`，`--cds-button-primary`。
- **藍 70**（`#0043ce`）：連結懸停狀態。`--cds-link-primary-hover`。
- **藍 80**（`#002d9c`）：藍色元素的啟用/按下狀態。
- **藍 10**（`#edf5ff`）：藍色淺底表面、選取列背景。
- **焦點藍**（`#0f62fe`）：`--cds-focus` — 聚焦元素 2px 內嵌邊框。
- **焦點內嵌**（`#ffffff`）：`--cds-focus-inset` — 深色背景上焦點的白色內圈。

### 支援色與狀態色
- **紅 60**（`#da1e28`）：錯誤、危險。`--cds-support-error`。
- **綠 50**（`#24a148`）：成功。`--cds-support-success`。
- **黃 30**（`#f1c21b`）：警告。`--cds-support-warning`。
- **藍 60**（`#0f62fe`）：資訊。`--cds-support-info`。

### 深色主題（灰 100 主題）
- **背景**：灰 100（`#161616`）。`--cds-background`。
- **圖層 01**：灰 90（`#262626`）。卡片和容器表面。
- **圖層 02**：灰 80（`#393939`）。提升表面。
- **主要文字**：灰 10（`#f4f4f4`）。`--cds-text-primary`。
- **次要文字**：灰 30（`#c6c6c6`）。`--cds-text-secondary`。
- **微妙邊框**：灰 80（`#393939`）。`--cds-border-subtle`。
- **互動色**：藍 40（`#78a9ff`）。連結和互動元素變淺以確保對比度。

## 3. 字體排版規則

### 字體族
- **主要字體**：`IBM Plex Sans`，備用字體：`Helvetica Neue, Arial, sans-serif`
- **等寬字體**：`IBM Plex Mono`，備用字體：`Menlo, Courier, monospace`
- **襯線字體**（限制使用）：`IBM Plex Serif`，用於編輯/表達性場景
- **圖示字體**：`ibm_icons` — 20px 專有圖示字形

### 層級

| 角色 | 字體 | 尺寸 | 字重 | 行高 | 字間距 | 備註 |
|------|------|------|--------|-------------|----------------|-------|
| Display 01 | IBM Plex Sans | 60px (3.75rem) | 300 (Light) | 1.17 (70px) | 0 | 最大視覺衝擊力，細體優雅 |
| Display 02 | IBM Plex Sans | 48px (3.00rem) | 300 (Light) | 1.17 (56px) | 0 | 次級英雄區，響應式備用 |
| Heading 01 | IBM Plex Sans | 42px (2.63rem) | 300 (Light) | 1.19 (50px) | 0 | 表達性標題 |
| Heading 02 | IBM Plex Sans | 32px (2.00rem) | 400 (Regular) | 1.25 (40px) | 0 | 區塊標題 |
| Heading 03 | IBM Plex Sans | 24px (1.50rem) | 400 (Regular) | 1.33 (32px) | 0 | 子區塊標題 |
| Heading 04 | IBM Plex Sans | 20px (1.25rem) | 600 (Semibold) | 1.40 (28px) | 0 | 卡片標題、功能標題 |
| Heading 05 | IBM Plex Sans | 20px (1.25rem) | 400 (Regular) | 1.40 (28px) | 0 | 較輕的卡片標題 |
| Body Long 01 | IBM Plex Sans | 16px (1.00rem) | 400 (Regular) | 1.50 (24px) | 0 | 標準閱讀文字 |
| Body Long 02 | IBM Plex Sans | 16px (1.00rem) | 600 (Semibold) | 1.50 (24px) | 0 | 強調正文、標籤 |
| Body Short 01 | IBM Plex Sans | 14px (0.88rem) | 400 (Regular) | 1.29 (18px) | 0.16px | 緊湊正文、說明文字 |
| Body Short 02 | IBM Plex Sans | 14px (0.88rem) | 600 (Semibold) | 1.29 (18px) | 0.16px | 粗體說明、導覽項目 |
| Caption 01 | IBM Plex Sans | 12px (0.75rem) | 400 (Regular) | 1.33 (16px) | 0.32px | 中繼資料、時間戳記 |
| Code 01 | IBM Plex Mono | 14px (0.88rem) | 400 (Regular) | 1.43 (20px) | 0.16px | 行內程式碼、終端機 |
| Code 02 | IBM Plex Mono | 16px (1.00rem) | 400 (Regular) | 1.50 (24px) | 0 | 程式碼區塊 |
| Mono Display | IBM Plex Mono | 42px (2.63rem) | 400 (Regular) | 1.19 (50px) | 0 | 英雄區等寬裝飾 |

### 原則
- **展示尺寸使用細體**：Carbon 的表達型字體集在 42px 以上使用細體（300）。這製造出一種獨特的張力——內容以企業權威口吻發聲，而字形卻以排版的輕盈低語表達。
- **小尺寸微觀字距追蹤**：14px 時 0.16px 字間距，12px 時 0.32px。這些看似微不足道的值是 Carbon 在緊湊尺寸下提升可讀性的秘密武器——它們將緊密的 IBM Plex 字形適度打開。
- **三個功能字重**：300（展示/表達）、400（正文/閱讀）、600（強調/UI 標籤）。700 字重被刻意從生產排版規範中排除。
- **生產型與表達型**：生產型使用更緊的行高（1.29）以適應密集 UI；表達型呼吸感更強（1.40-1.50），用於行銷和編輯內容。

## 4. 元件樣式

### 按鈕

**主要按鈕（藍色）**
- 背景：`#0f62fe`（藍 60）→ `--cds-button-primary`
- 文字：`#ffffff`（白色）
- 內邊距：14px 63px 14px 15px（不對稱——為尾部圖示留空間）
- 邊框：1px solid transparent
- 圓角：0px（銳利矩形——Carbon 標誌）
- 高度：48px（預設）、40px（緊湊）、64px（表達型）
- 懸停：`#0353e9`（藍 60 懸停）→ `--cds-button-primary-hover`
- 啟用：`#002d9c`（藍 80）→ `--cds-button-primary-active`
- 焦點：`2px solid #0f62fe` 內嵌 + `1px solid #ffffff` 內圈

**次要按鈕（灰色）**
- 背景：`#393939`（灰 80）
- 文字：`#ffffff`
- 懸停：`#4c4c4c`（灰 70）
- 啟用：`#6f6f6f`（灰 60）
- 內邊距/圓角與主要按鈕相同

**三級按鈕（幽靈藍）**
- 背景：transparent
- 文字：`#0f62fe`（藍 60）
- 邊框：1px solid `#0f62fe`
- 懸停：`#0353e9` 文字 + 藍 10 背景淺底
- 圓角：0px

**幽靈按鈕**
- 背景：transparent
- 文字：`#0f62fe`（藍 60）
- 內邊距：14px 16px
- 邊框：無
- 懸停：`#e8e8e8` 背景淺底

**危險按鈕**
- 背景：`#da1e28`（紅 60）
- 文字：`#ffffff`
- 懸停：`#b81921`（紅 70）

### 卡片與容器
- 背景：白色主題為 `#ffffff`，提升卡片為 `#f4f4f4`（灰 10）
- 邊框：無（扁平設計——大多數卡片無邊框或陰影）
- 圓角：0px（與矩形按鈕美學一致）
- 懸停：可點按卡片背景變為 `#e8e8e8`（灰 10 懸停）
- 內容內邊距：16px
- 分隔方式：背景色分層（白 → 灰 10 → 白），而非陰影

### 輸入框與表單
- 背景：`#f4f4f4`（灰 10）— `--cds-field`
- 文字：`#161616`（灰 100）
- 內邊距：0px 16px（僅水平方向）
- 高度：40px（預設）、48px（大型）
- 邊框：側邊/頂部無邊框 — 底部 `2px solid transparent`
- 底邊框啟用：`2px solid #161616`（灰 100）
- 焦點：底邊框 `2px solid #0f62fe`（藍 60）— `--cds-focus`
- 錯誤：底邊框 `2px solid #da1e28`（紅 60）
- 標籤：12px IBM Plex Sans，0.32px 字間距，灰 70
- 輔助文字：12px，灰 60
- 佔位文字：灰 60（`#6f6f6f`）
- 圓角：0px（頂部）——輸入框為尖角

### 導覽
- 背景：`#161616`（灰 100）— 全寬深色頂欄
- 高度：48px
- 標誌：IBM 八條紋標誌，深色背景上白色，靠左對齊
- 連結：14px IBM Plex Sans，字重 400，`#c6c6c6`（灰 30）預設
- 連結懸停：`#ffffff` 文字
- 啟用連結：`#ffffff` 配下邊框指示器
- 平台切換器：靠左對齊水平標籤
- 搜尋：圖示觸發的滑出搜尋框
- 行動裝置：漢堡選單配左側滑出面板

### 連結
- 預設：`#0f62fe`（藍 60），無底線
- 懸停：`#0043ce`（藍 70），有底線
- 已造訪：保持藍 60（無已造訪狀態變化）
- 正文行內連結：在正文中預設帶底線

### 特色元件

**內容區塊（英雄區/特色區）**
- 全寬交替白/灰 10 背景帶
- 60px 或 48px 展示型文字靠左對齊標題
- 帶箭頭圖示的藍色主要按鈕作為行動呼籲
- 圖片/插畫在行動裝置上靠右對齊或置於下方

**磁磚（可點按卡片）**
- 背景：`#f4f4f4` 或 `#ffffff`
- 全寬底邊框或背景色切換懸停效果
- 懸停時右下角顯示箭頭圖示
- 無陰影——扁平即是身份

**標籤**
- 背景：對應顏色 10% 不透明度（如藍 10、紅 10）
- 文字：對應 60 級別顏色
- 內邊距：4px 8px
- 圓角：24px（膠囊形——0px 規則的例外）
- 字體：12px 字重 400

**通知橫幅**
- 全寬條，通常為藍 60 或灰 100 背景
- 白色文字，14px
- 關閉/消除圖示靠右對齊

## 5. 版面配置原則

### 間距系統
- 基礎單位：8px（Carbon 2x 網格）
- 元件間距比例：2px、4px、8px、12px、16px、24px、32px、40px、48px
- 版面間距比例：16px、24px、32px、48px、64px、80px、96px、160px
- 最小單位：8px（最小可用間距）
- 元件內邊距：通常為 16px
- 卡片/磁磚之間間距：1px（髮絲線）或 16px（標準）

### 網格與容器
- 16 欄網格（Carbon 的 2x 網格系統）
- 最大內容寬度：1584px（最大斷點）
- 欄間距：32px（行動裝置 16px）
- 邊距：16px（行動裝置）、32px（平板及以上）
- 內容通常跨越 8-12 欄以保持可讀行長
- 全出血區域與受限內容交替出現

### 留白哲學
- **功能性密度**：Carbon 偏向生產型密度而非寬鬆留白。與消費類設計系統相比，各區塊排列更為緊湊——這反映了 IBM 的企業基因。
- **背景色區域劃分**：IBM 透過交替背景色（白 → 灰 10 → 白）而非大量內邊距來分隔區塊，以最小垂直空間實現視覺分離。
- **一致的 48px 節律**：主要區塊過渡使用 48px 垂直間距。英雄區可能使用 80px–96px。

### 圓角規模
- **0px**：主要按鈕、輸入框、磁磚、卡片——主導性處理。Carbon 從根本上是矩形的。
- **2px**：偶爾用於小型互動元素（標籤）
- **24px**：標籤（膠囊形——唯一的圓角例外）
- **50%**：頭像圓形、圖示容器

## 6. 深度與層次

| 層級 | 處理方式 | 用途 |
|-------|-----------|-----|
| 平面（0 級） | 無陰影，`#ffffff` 背景 | 預設頁面表面 |
| 圖層 01 | 無陰影，`#f4f4f4` 背景 | 卡片、磁磚、交替區塊 |
| 圖層 02 | 無陰影，`#e0e0e0` 背景 | 圖層 01 內的提升面板 |
| 懸浮 | `0 2px 6px rgba(0,0,0,0.3)` | 下拉選單、工具提示、溢出選單 |
| 覆蓋層 | `0 2px 6px rgba(0,0,0,0.3)` + 深色遮罩 | 模態對話框、側面板 |
| 焦點 | `2px solid #0f62fe` 內嵌 + `1px solid #ffffff` | 鍵盤焦點環 |
| 底邊框 | 底邊 `2px solid #161616` | 啟用輸入框、啟用標籤指示器 |

**陰影哲學**：Carbon 刻意迴避陰影。IBM 主要透過背景色分層來實現深度——將顏色值逐漸加深的表面疊加，而非添加投影。這創造了一種扁平的、受印刷啟發的美學，層次透過色值而非模擬光源來傳達。陰影僅保留給真正懸浮在內容之上的元素（下拉選單、工具提示、模態框）。這種克制賦予了少數陰影有意義的視覺衝擊——在 Carbon 中，當某物懸浮時，它才是真正有意義的。

## 7. 應做與避免

### 應做
- 在展示尺寸（42px 以上）使用 IBM Plex Sans 細體（300）——這種輕盈是刻意為之
- 在 14px 正文文字上應用 0.16px 字間距，12px 說明文字應用 0.32px
- 按鈕、輸入框、卡片和磁磚使用 0px 圓角——矩形才是系統的語言
- 實作時引用 `--cds-*` token 名（如 `--cds-button-primary`、`--cds-text-primary`）
- 使用背景色分層（白 → 灰 10 → 灰 20）實現深度，而非陰影
- 輸入框欄位指示器使用下邊框（非盒狀）
- 保持 48px 預設按鈕高度及為圖示適配的不對稱內邊距
- 將藍 60（`#0f62fe`）作為唯一強調色——一藍統天下

### 避免
- 不要給按鈕圓角——0px 圓角是 Carbon 的標誌
- 不要在卡片或磁磚上使用陰影——扁平才是重點
- 不要引入額外強調色——IBM 系統是單色 + 藍色
- 不要使用 700 字重（粗體）——規範到 600（半粗體）為止
- 不要在展示尺寸文字上添加字間距——字距追蹤僅用於 14px 及以下
- 不要用完整邊框框住輸入框——Carbon 輸入框僅使用下邊框
- 不要使用漸層背景——IBM 表面為扁平實色
- 不要偏離 8px 間距網格——每個值應能被 8 整除（2px 和 4px 用於微調）

## 8. 響應式行為

### 斷點
| 名稱 | 寬度 | 關鍵變化 |
|------|-------|-------------|
| Small (sm) | 320px | 單欄，漢堡導覽，16px 邊距 |
| Medium (md) | 672px | 開始兩欄網格，展開內容 |
| Large (lg) | 1056px | 全導覽可見，3-4 欄網格 |
| X-Large (xlg) | 1312px | 最大內容密度，寬版面 |
| Max | 1584px | 最大內容寬度，置中帶邊距 |

### 觸控目標
- 按鈕高度：48px 預設，最小 40px（緊湊）
- 導覽連結：48px 列高，適合觸控
- 輸入框高度：40px 預設，48px 大型
- 圖示按鈕：48px 正方形觸控目標
- 行動裝置選單項目：全寬 48px 列

### 折疊策略
- 英雄區：60px 展示 → 42px → 32px 標題，隨視埠縮小
- 導覽：全水平頂欄 → 漢堡選單配滑出面板
- 網格：4 欄 → 2 欄 → 單欄
- 磁磚/卡片：水平網格 → 垂直堆疊
- 圖片：保持寬高比，max-width 100%
- 頁尾：多欄連結組 → 堆疊單欄
- 區塊內邊距：48px → 32px → 16px

### 圖片行為
- 響應式圖片，`max-width: 100%`
- 產品插畫按比例縮放
- 英雄區圖片可能從並排變為下方堆疊
- 資料視覺化在行動裝置上保持寬高比，水平捲動

## 9. 代理提示指南

### 快速顏色參考
- 主要行動呼籲：IBM 藍 60（`#0f62fe`）
- 背景：白色（`#ffffff`）
- 標題文字：灰 100（`#161616`）
- 正文文字：灰 100（`#161616`）
- 次要文字：灰 70（`#525252`）
- 表面/卡片：灰 10（`#f4f4f4`）
- 邊框：灰 30（`#c6c6c6`）
- 連結：藍 60（`#0f62fe`）
- 連結懸停：藍 70（`#0043ce`）
- 焦點環：藍 60（`#0f62fe`）
- 錯誤：紅 60（`#da1e28`）
- 成功：綠 50（`#24a148`）

### 範例元件提示
- "在白色背景上建立英雄區。標題 60px IBM Plex Sans 細體 300，行高 1.17，顏色 #161616。副標題 16px 字重 400，行高 1.50，顏色 #525252，最大寬度 640px。藍色行動呼籲按鈕（#0f62fe 背景，#ffffff 文字，0px 圓角，48px 高度，14px 63px 14px 15px 內邊距）。"
- "設計卡片磁磚：#f4f4f4 背景，0px 圓角，16px 內邊距。標題 20px IBM Plex Sans 字重 600，行高 1.40，顏色 #161616。正文 14px 字重 400，字間距 0.16px，行高 1.29，顏色 #525252。懸停：背景切換至 #e8e8e8。"
- "構建表單欄位：#f4f4f4 背景，0px 圓角，40px 高度，16px 水平內邊距。上方標籤 12px 字重 400，字間距 0.32px，顏色 #525252。底邊框：預設 2px solid transparent，焦點時 2px solid #0f62fe。佔位文字：#6f6f6f。"
- "建立深色導覽列：#161616 背景，48px 高度。IBM 標誌白色靠左對齊。連結 14px IBM Plex Sans 字重 400，顏色 #c6c6c6。懸停：#ffffff 文字。啟用：#ffffff 配 2px 底邊框。"
- "構建標籤元件：藍 10（#edf5ff）背景，藍 60（#0f62fe）文字，4px 8px 內邊距，24px 圓角，12px IBM Plex Sans 字重 400。"

### 迭代指南
1. 按鈕、輸入框和卡片始終使用 0px 圓角——這在 Carbon 中不可商量
2. 字間距僅用於小尺寸：14px 時 0.16px，12px 時 0.32px——展示文字絕不添加
3. 三種字重：300（展示）、400（正文）、600（強調）——無粗體
4. 藍 60 是唯一強調色——不引入次要強調色調
5. 深度來自背景色分層（白 → `#f4f4f4` → `#e0e0e0`），而非陰影
6. 輸入框僅有下邊框，絕不全框
7. 使用 `--cds-` 前綴命名 token，保持 Carbon 相容性
8. 48px 是通用互動元素高度