---
use_cases: [dataviz, doc, slides, ui]
required_inputs: 實際數據與指標（數列名稱、數值、時間範圍或分類軸；避免用佔位假資料上線）
pairs_with: Inter（介面／標籤）+ IBM Plex Mono（數字／座標軸刻度）；需要真實資料集或試算表匯出來套入圖表
---

# Design System: Chart Studio 圖表工作室

> 正經的資料視覺化配色系統 — 淺色分析底，8 色分類色盤通過色盲安全驗證（相鄰 ΔE ≥ 12 目標值全數達標，最差對比 24.2），外加一組漸序（sequential）與一組發散（diverging）色階。給報告、簡報、儀表板裡「看得懂的圖表」用，不是給裝飾用的漸層色卡。

---

## 1. Visual Theme & Atmosphere

**Design Philosophy:** A chart is read by people and executed by rules, not by taste. Chart Studio treats color as computation — every hue is assigned a job (identity / magnitude / polarity) and validated, never eyeballed. The visual language is quiet on purpose: near-white analysis surfaces, hairline gridlines, thin marks. The only thing allowed to be loud is the data itself.

**Atmosphere Keywords:** Analytical, Precise, Trustworthy, Editorial, Restrained, Legible, Systematic, Calm

**Visual Anchors:**
- 近白分析底（`#fcfcfb` 圖表面 / `#f9f9f7` 頁面），從不用純白 `#ffffff` — 太刺眼會吃掉資料對比
- 8 色分類色盤，固定順序、固定角色，never cycled
- 髮絲級格線（1px hairline，實線不虛線）與軸線，永遠退居資料之後
- 圖表元件之間用 2px 留白分隔，不用邊框描邊
- 數字用等寬字體對齊，內文與標籤用人文無襯線字體
- 每個色板都附「色盲安全」驗證數字，不是裝飾性宣稱

**Mood Board References:**
- 金融時報／經濟學人的資料新聞圖表版式
- Observable Plot、Vega-Lite 預設美學
- 顧問報告（McKinsey/BCG）的精簡長條圖與折線圖
- Stripe / Linear 儀表板的克制配色

---

## 2. Color Palette & Roles

### Categorical Palette（分類色 — 8 色固定順序）

已通過 CVD（色盲）驗證：相鄰配對最差 ΔE 24.2（protan），遠高於 ≥12 目標值。**順序即安全機制，套用時勿打亂或跳號**——第 9 個系列不再生成新色，收進「其他」或改用小倍圖。

| Slot | Swatch | Name | Hex | Role |
|------|--------|------|-----|------|
| 1 | 🔵 | Chart Blue 圖表藍 | `#2a78d6` | Primary — 系列一、預設強調色、主要 CTA |
| 2 | 🟢 | Teal Pulse 青碧 | `#1baf7a` | 系列二 |
| 3 | 🟡 | Amber Flag 琥珀 | `#eda100` | 系列三（淺色，需搭配可見標籤或表格視圖） |
| 4 | 🟩 | Forest Green 森綠 | `#008300` | 系列四 |
| 5 | 🟣 | Violet Deep 深紫 | `#4a3aa7` | 系列五 |
| 6 | 🔴 | Coral Red 珊瑚紅 | `#e34948` | 系列六 |
| 7 | 🩷 | Rose Pink 玫瑰粉 | `#e87ba4` | 系列七（淺色，需搭配可見標籤或表格視圖） |
| 8 | 🟠 | Burnt Orange 燒橙 | `#eb6834` | 系列八 |

**Contrast 提醒：** Teal Pulse (2.74:1)、Amber Flag (2.11:1)、Rose Pink (2.62:1) 在淺色底上低於 3:1 — 這三色出現時**必須**搭配可見的直接標籤或表格視圖，不能只靠色塊。

### Sequential Scale（漸序 — 單色量級，藍色 100→700）

用於熱圖、choropleth、單一量級的漸層資料。淺→深，越深代表數值越大。

| Step | Hex | Step | Hex | Step | Hex | Step | Hex |
|------|-----|------|-----|------|-----|------|-----|
| 100 | `#cde2fb` | 250 | `#86b6ef` | 400 | `#3987e5` | 550 | `#1c5cab` |
| 150 | `#b7d3f6` | 300 | `#6da7ec` | 450 | `#2a78d6` | 600 | `#184f95` |
| 200 | `#9ec5f4` | 350 | `#5598e7` | 500 | `#256abf` | 650 | `#104281` |
| | | | | | | 700 | `#0d366b` |

**Ordinal 用途**（漏斗階段、分級 S/M/L 這類「順序本身有意義」的離散資料）：最淺步驟不可低於 step 250（`#86b6ef`，對比 2.06:1），確保最淡的一階仍可辨識。

### Diverging Scale（發散 — 藍↔紅雙極，中性灰中點）

用於「相對於基準的正負」資料：YoY 變化、淨推薦分數、盈虧。

| 負向極（藍） | 中點 | 正向極（紅） |
|---|---|---|
| `#0d366b` → `#2a78d6` → `#86b6ef` | `#f0efec`（中性灰，代表「無變化」） | `#e87ba4` → `#e34948` → `#7a1918`* |

*正向極沿用 Coral Red 家族向深延伸；兩臂步數需對稱。中點永遠是灰，不可用任何有色相的顏色代替「零」。

### Status Palette（狀態色 — 固定語意，不可挪用）

| Role | Hex | 淺底對比 | 用途 |
|------|-----|---------|------|
| Good 良好 | `#0ca30c` | 3.27:1 | 達標、正向 delta |
| Warning 警示 | `#fab219` | 1.79:1 | 接近閾值（需搭配 icon + label） |
| Serious 嚴重 | `#ec835a` | 2.57:1 | 偏離目標（需搭配 icon + label） |
| Critical 危急 | `#d03b3b` | 4.68:1 | 超出容忍範圍 |

狀態色與分類色盤刻意不同色階——狀態色永遠不能冒充「系列四」，反之亦然。Warning／Serious 淺底對比不足 3:1，**一律搭配 icon + 文字標籤**，不能只靠色塊傳達語意。

### Chart Chrome & Ink（圖表骨架）

| Role | Hex | Use |
|------|-----|-----|
| Chart Surface 圖表面 | `#fcfcfb` | 圖表卡片底色 |
| Page Plane 頁面底 | `#f9f9f7` | 整頁背景 |
| Primary Ink 主文字 | `#0b0b0b` | 標題、數值 |
| Secondary Ink 次文字 | `#52514e` | 說明、caption |
| Muted 靜音（軸線標籤） | `#898781` | 座標軸刻度文字 |
| Gridline 格線 | `#e1e0d9` | 髮絲格線 |
| Baseline / Axis 基線 | `#c3c2b7` | X/Y 軸實線 |
| Border 邊框 | `rgba(11,11,11,0.10)` | 卡片描邊 |

---

## 3. Typography Rules

### Font Families

| Token | Stack | Use |
|-------|-------|-----|
| `--font-sans` | 'Inter', system-ui, -apple-system, sans-serif | 標題、內文、標籤、圖例、tooltip |
| `--font-mono` | 'IBM Plex Mono', 'JetBrains Mono', monospace | KPI 數值、座標軸刻度、表格數字欄 |

**Pairing logic：** Inter 是資料新聞與儀表板的業界預設，中性、無風格干擾；IBM Plex Mono 給數字等寬對齊，讓表格與座標軸刻度垂直對齊不跳動。全系統不用襯線字體或手寫字體 — 那會讓資料看起來不可信。

### Scale

| Element | Size | Font | Weight | Note |
|---------|------|------|--------|------|
| Hero Figure 頭條數字 | ≥48px | mono (proportional) | 700 | 一頁只能有一個；大數字用 proportional figures，不用 tabular-nums |
| h1 | 2.4rem | sans | 700 | line-height 1.2 |
| h2 / 圖表標題 | 1.5rem | sans | 600 | |
| h3 / 子圖標題 | 1.1rem | sans | 600 | |
| Body 內文 | 16px | sans | 400 | line-height 1.6 |
| Axis / Legend 座標軸與圖例 | 12px | sans | 500 | 全大寫可選，muted 色 |
| KPI Tile 數值 | 2rem–3rem | mono | 700 | `font-variant-numeric: tabular-nums` 僅用於欄位對齊，大數字用預設比例數字 |
| Table 表格數字 | 14px | mono | 400–600 | `tabular-nums` 強制開啟 |

### Numeric Formatting Rules

- 大數字自動精簡：1,284 → 顯示為 `1,284`；12,900 → `12.9K`；4,200,000 → `$4.2M`
- 千分位逗號永遠開啟於表格與座標軸刻度
- Delta（漲跌）一律帶正負號，色彩 = 方向 × 「漲是不是好事」由脈絡決定，不是固定紅漲綠跌

---

## 4. Component Stylings

### Chart Marks（圖表標記 — 固定規格，全系統統一）

| Mark | Spec |
|------|------|
| 長條 / 柱狀 | 寬度 ≤24px，永不填滿欄位間距；4px 圓角資料端，貼齊基線的一端為直角 |
| 折線 | 2px 線寬，圓端圓角轉折 |
| 端點標記 | ≥8px（半徑 ≥4px），填充系列色，外圈 2px 圖表面色描邊環（避免與線重疊時消失） |
| 面積填色 | 系列色 ~10% 透明度（一層薄霧，絕不用飽和色塊） |
| 圓餅 / 甜甜圈 | 內徑 60%（甜甜圈為主，避免面積誤判），扇形間 2px 圖表面色間隙分隔 |

### Axes & Gridlines（軸線與格線）

- 格線：1px 髮絲線，`#e1e0d9`，永遠實線不虛線，永遠退居資料之後
- 軸線：`#c3c2b7`，只畫基線（X 軸），Y 軸通常省略只留刻度文字
- 刻度文字：12px muted `#898781`，數字取整（0 / 1,000 / 2,000）
- **禁止雙 Y 軸**：兩種不同量級的量測值，永遠拆成兩張圖、小倍圖，或轉換成同基準指數

### Legend（圖例）

- 兩個以上系列 → 圖例必須出現，色塊 + 文字，永不只靠顏色配對
- 單一系列 → 不需圖例框，標題已經說明了在畫什麼
- 圖例色塊：10px 圓角方塊 + 系列色，文字用 secondary ink（文字永不套系列色本身）

### Tooltip

- 白底卡片，`rgba(11,11,11,0.10)` 邊框 + 輕微陰影（`0 4px 12px rgba(11,11,11,0.08)`）
- 內容：系列色點 + 系列名 + 數值（mono 等寬），多系列時依 hover 位置堆疊列出
- 折線 / 面積圖：十字準星（crosshair）+ tooltip 跟隨游標；長條 / 點圖：per-mark hover
- Hit target 大於視覺標記本身，方便游標命中

### Data Labels（資料標籤）

- 選擇性標註，絕不每個點都貼數字 — 只標端點、極值，或故事主角系列
- 標籤放不下就移到圖表外側或收進 tooltip，絕不 `overflow: hidden` 硬切文字
- 長條 → 數值貼在端點；折線 → 數值貼在線末端

### KPI Tile（數字磚）

- 白卡 + 淺邊框，內容：label（無冒號）→ value（mono 粗體）→ delta（可選，帶方向色）→ trend（可選，12 點 sparkline）
- Sparkline 用 muted 色描繪歷史，當期用強調色標出

### Table View（表格視圖）

- 每張圖表都需能切換成表格視圖 — 這是低對比色系（Amber、Rose）與 CVD 使用者的救援通道
- 表格數字一律 `tabular-nums` 等寬對齊，右對齊

---

## 5. Layout Principles

- **圖表卡片化**：每張圖表獨立卡片，`#fcfcfb` 底 + 輕邊框 + 12px 圓角，卡片間 24px 間距
- **儀表板網格**：12 欄 grid，KPI tile 佔 3 欄，主圖表佔 6–12 欄，依重要性排列
- **單一頭條數字**：每個頁面/視圖最多一個 Hero Figure，其餘走 KPI tile
- **留白先於裝飾**：圖表內部 padding ≥24px，圖表之間的留白比圖表內的留白更重要
- **篩選列**：日期範圍與維度篩選器固定在圖表區塊上方單一列，不分散在各圖表內

---

## 6. Depth & Elevation

淺色分析系統的深度語言是「紙張與陰影」而非玻璃擬態：

1. 圖表卡片：`rgba(11,11,11,0.10)` 髮絲邊框，無陰影（平面圖表面）
2. Hover 卡片：`box-shadow: 0 4px 12px rgba(11,11,11,0.08)`，微微浮起
3. Tooltip：`box-shadow: 0 4px 12px rgba(11,11,11,0.12)`，最上層
4. Modal / 篩選面板：`rgba(11,11,11,0.4)` overlay 底

**禁止**漸層陰影堆疊或彩色光暈 — 資料圖表的深度必須克制，讓數字本身保持最高視覺權重。

---

## 7. Do's and Don'ts

### Do's ✅

- 分類色永遠按固定順序 1→8 指派，缺色就跳號不重排
- 每次改動色盤後重跑 `validate_palette.js`，不用肉眼判斷色盲安全
- 低對比色（Amber、Rose、Teal）出現時必附可見標籤或表格視圖
- 序列/發散資料只用單一色相的漸層，never rainbow
- 圖例在兩系列以上永遠出現；單系列不需圖例框
- 格線永遠是 hairline 實線，退居資料之後

### Don'ts ❌

- ❌ 雙 Y 軸圖表 — 資料視覺化最常見的錯誤，永遠拆成兩張圖或小倍圖
- ❌ 彩虹漸層當作 sequential/diverging scale
- ❌ 發散色階的中點用有色相顏色（永遠用中性灰）
- ❌ 文字套用系列色本身（文字永遠是 ink 色，色彩只在色塊/標記上）
- ❌ 每個資料點都貼數字標籤
- ❌ 分類色盤超過 8 色後生成新色相 — 收進「其他」或改用小倍圖
- ❌ 用純白 `#ffffff` 當圖表底 — 用 `#fcfcfb`，避免與白色資料標記混淆

---

## 8. Responsive Behavior

| Breakpoint | Behavior |
|-----------|----------|
| ≥1200px | 12 欄儀表板網格，KPI tile 一排 4 個 |
| 768–1199px | 網格降為 8 欄，KPI tile 一排 2 個，長條圖維持橫向 |
| ≤767px | 單欄堆疊，圖例移至圖表下方，長條圖轉為橫向排列避免標籤擠壓，篩選列收進下拉選單 |
| Print | 隱藏 tooltip 與 hover 互動層，強制顯示所有直接標籤，圖表邊框改用實線黑 |

---

## 9. Agent Prompt Guide

給 AI agent 重現此風格的最小提示：

```
Create a data visualization page in the "Chart Studio" style — an analytical,
editorial dashboard system:

- Canvas: near-white analysis surfaces — chart surface #fcfcfb, page plane #f9f9f7.
  Never pure white #ffffff.
- Categorical palette (8 hues, FIXED order, never cycled, CVD-validated
  adjacent ΔE >= 12):
  1 #2a78d6 (blue) 2 #1baf7a (teal) 3 #eda100 (amber) 4 #008300 (green)
  5 #4a3aa7 (violet) 6 #e34948 (red) 7 #e87ba4 (rose) 8 #eb6834 (orange)
  Amber/Teal/Rose are sub-3:1 on this surface — always pair with visible
  labels or a table view.
- Sequential (magnitude): single blue hue, light->dark, steps 100(#cde2fb)
  through 700(#0d366b).
- Diverging (polarity): blue (#0d366b->#2a78d6->#86b6ef) <-> neutral gray
  midpoint (#f0efec) <-> red (#e87ba4->#e34948), equal steps per arm.
- Status (fixed, reserved, always icon+label): good #0ca30c, warning #fab219,
  serious #ec835a, critical #d03b3b.
- Marks: bars <=24px thick with 4px rounded data-end; 2px lines; markers
  >=8px with a 2px surface-color ring; area fills at ~10% opacity.
- Gridlines: 1px hairline #e1e0d9, solid never dashed, recessive. Axis line
  #c3c2b7. Never a dual y-axis — split into two charts or small multiples.
- Legend always present for >=2 series (none for a single series); text
  labels always use ink tokens (#0b0b0b / #52514e), never the series color
  itself.
- Typography: 'Inter' for headings/body/labels, 'IBM Plex Mono' for KPI
  values, table numbers, and axis ticks (tabular-nums only in aligned
  columns, not on hero figures).
- Cards: hairline border rgba(11,11,11,0.10), no shadow at rest, subtle
  lift shadow 0 4px 12px rgba(11,11,11,0.08) on hover.
- Every chart needs a table-view fallback for accessibility.
```

---

*Original design system created 2026-07-14 for Design Lab — 補足 dataviz 場景缺口的淺色分析系統。分類色盤驗證方式與數值見 `dataviz` skill 之 `scripts/validate_palette.js`。*