DATAVIZ DESIGN SYSTEM

Chart Studio 圖表工作室

正經的資料視覺化配色系統 — 淺色分析底，色盲安全驗證的分類色盤，給報告、簡報、儀表板用。

An analytical light-mode dataviz system — colorblind-validated categorical palette for charts that must be understood, not just admired.

分類色盤 Categorical Palette — 8 slots, fixed order

Chart Blue

#2a78d6

Teal Pulse

#1baf7a

Amber Flag

#eda100

Forest Green

#008300

Violet Deep

#4a3aa7

Coral Red

#e34948

Rose Pink

#e87ba4

Burnt Orange

#eb6834

漸序色階 Sequential — magnitude, blue 100→700

100 · 近零400 · 中量級700 · 最高量級

發散色階 Diverging — polarity, blue ↔ red

負向極中性中點 · 無變化正向極

狀態色 Status — fixed, icon+label always

✅ Good 良好

⚠️ Warning 警示

🔶 Serious 嚴重

🛑 Critical 危急

字體 Typography

HERO FIGURE — IBM Plex Mono · 700 · ≥48px

$4.2M

H1 — Inter · 700 · 2.4rem

季度營收儀表板 Quarterly Revenue Dashboard

Body — Inter · 16px · line-height 1.6

內文用 Inter 保持中性可讀；數字一律用 IBM Plex Mono 等寬字體對齊，讓表格與座標軸刻度垂直排列不跳動。

示範圖表 Demo Charts

季度營收 Quarterly Revenue

單位：百萬 USD

2.1

2.8

3.4

4.2

流量來源占比 Traffic Share

單位：百分比

自然搜尋 42%

社群媒體 24%

直接流量 16%

其他 18%

每週活躍使用者 Weekly Active Users

兩系列比較 — 桌面版 vs 行動版

桌面版 Desktop

行動版 Mobile

KPI 數字磚 KPI Tiles

月經常性收入 MRR

$128.4K

▲ 4.2% vs 上月

流失率 Churn Rate

2.1%

▼ 0.4% vs 上月

平均處理時間

3.4m

▲ 12s vs 上月

Tooltip 示範

色彩對照表 Color Reference

色彩 Color	Hex	角色 Role
Chart Blue	#2a78d6	Primary — 系列一、預設強調色
Teal Pulse	#1baf7a	系列二
Amber Flag	#eda100	系列三（需搭配標籤）
Forest Green	#008300	系列四
Violet Deep	#4a3aa7	系列五
Coral Red	#e34948	系列六
Chart Surface	#fcfcfb	圖表面底色
Primary Ink	#0b0b0b	標題、KPI 數值