---
use_cases: [dataviz, ui, web]
required_inputs: 即時或近即時的監控指標（KPI 數值、告警閾值、時間序列資料源）
pairs_with: Inter（介面）+ JetBrains Mono（數字／告警代碼）；需要深色儀表板框架與明確定義的閾值規則
---

# Design System: Signal Dark 深色訊號盤

> 深色監控台美學 — 深導藍近黑底 + 一組在暗底上會發光但不刺眼的受控資料色（相鄰 ΔE 39.3 通過驗證），KPI 數字磚為核心元件。與淺色分析系統 `chart-studio` 刻意區隔：那套服務報告與簡報，這套服務即時監控台與分析後台。

---

## 1. Visual Theme & Atmosphere

**Design Philosophy:** A control room at night — every panel is dark so the signal, not the background, does the work. Colors here are not decoration; they are calibrated to sit in the mid-lightness band that reads clearly on near-black without blowing out or turning neon-shrill. The system rewards vigilance: numbers glow just enough to pull the eye, alerts are unmistakable, and everything else recedes.

**Atmosphere Keywords:** Vigilant, Precise, Nocturnal, Technical, Focused, Calibrated, Alert-ready, Instrumented

**Visual Anchors:**
- 深導藍近黑底（`#0f1420`），不是純黑 `#000000` — 純黑會讓資料色的光暈失去層次
- 8 色分類色盤鎖在 OKLCH 中段亮度（L 0.48–0.67），飽和但不刺眼，暗底驗證通過
- KPI 數字磚：等寬數字 + 微光 text-shadow，是整個系統的視覺核心
- 卡片邊框用低透明度白線（非實色灰），營造「面板浮在暗處」的感覺
- 告警色（status）永遠比一般資料色更亮更飽和，一眼就要跳出來
- 格線比淺色系統更克制 — 暗底上格線本身就會製造視覺噪音

**Mood Board References:**
- Datadog / Grafana 深色儀表板
- 證交所交易終端機、機場航班看板
- SpaceX 發射控制台直播畫面
- Bloomberg Terminal 的深色數字流

---

## 2. Color Palette & Roles

### Categorical Palette（分類色 — 8 色固定順序，暗底驗證版）

驗證於暗底 `#0f1420`：全數落在 OKLCH L 0.48–0.67 亮度帶、色度 ≥0.10、對比全數 ≥3:1。相鄰配對最差 ΔE 39.3（protan），色盲安全度優於一般 8–12 門檻的三倍以上；唯 tritan（藍黃色盲）在 Emerald↔Amber 這一對落在 9.6（floor band），**該配對相鄰出現時需搭配直接標籤或紋理**。

| Slot | Swatch | Name | Hex | Role |
|------|--------|------|-----|------|
| 1 | 🔵 | Signal Blue 訊號藍 | `#2563eb` | Primary — 系列一、預設強調色 |
| 2 | 🩵 | Cyan Trace 青軌 | `#0891b2` | 系列二 |
| 3 | 🟡 | Amber Alert 琥珀警戒 | `#d97706` | 系列三 |
| 4 | 🟢 | Emerald Pulse 翠脈 | `#059669` | 系列四（與 Amber 相鄰時 tritan 較弱，需標籤輔助） |
| 5 | 🟣 | Violet Deep 深紫訊號 | `#7c3aed` | 系列五 |
| 6 | 🔴 | Alert Red 警示紅 | `#dc2626` | 系列六 |
| 7 | 🩷 | Magenta Ping 洋紅訊 | `#db2777` | 系列七 |
| 8 | 🟠 | Ember Orange 餘燼橙 | `#ea580c` | 系列八 |

### Sequential Scale（漸序 — Signal Blue 單色量級，暗底反向錨定）

暗底的漸序邏輯與淺底相反：**最暗的一階貼近底色代表「趨近於零」，最亮的一階代表「數值最高」且會發光**。

| Step | Hex | Meaning |
|------|-----|---------|
| 100 | `#1e3a8a` | 趨近零 — 幾乎融入底色 |
| 200 | `#1e40af` | 低量級 |
| 300 | `#1d4ed8` | 中低量級 |
| 400 | `#2563eb` | 中量級（= 分類色 Slot 1 錨點） |
| 500 | `#3b82f6` | 中高量級 |
| 600 | `#60a5fa` | 高量級 |
| 700 | `#93c5fd` | 最高量級 — 明顯發光 |

Ordinal 用途（分級／階段）：最暗一階不可低於 step 200（`#1e40af`），確保暗底上仍可辨識為「有值」而非背景。

### Diverging Scale（發散 — Signal Blue ↔ Alert Red，中性中點）

用於監控台常見的「正負偏移」資料：延遲變化、庫存增減、與基準的落差。

| 負向極（藍） | 中點 | 正向極（紅） |
|---|---|---|
| `#1e3a8a` → `#2563eb` → `#93c5fd` | `#4b5563`（暗底中性灰，代表「無偏移」） | `#fca5a5` → `#dc2626` → `#7f1d1d` |

中點在暗底上必須仍可辨識為「面板上的一根中性桿」，不可淡到消失，也不可帶任何色相。

### Status Palette（狀態色 — 固定語意，比一般資料色更亮更飽和）

| Role | Hex | 用途 |
|------|-----|------|
| Good 正常 | `#22c55e` | 指標在容忍範圍內、告警已解除 |
| Warning 警示 | `#eab308` | 接近閾值，需留意（icon + label） |
| Serious 嚴重 | `#fb923c` | 偏離目標，建議介入（icon + label） |
| Critical 危急 | `#f87171` | 超出容忍範圍，需立即處理（icon + label，可加脈動動畫） |

狀態色刻意選用比分類色盤更亮的同色系鄰近色階（如 Good 比 Emerald Pulse 更亮更綠），確保告警永遠比一般資料系列更快被注意到，且不會被誤認成「系列 4」。

### Surface & Ink（面板骨架）

| Role | Hex | Use |
|------|-----|------|
| Deep Surface 深底 | `#0f1420` | 頁面底色 |
| Panel Surface 面板底 | `#161c2c` | 卡片 / 面板底色，比頁面底淺一階 |
| Panel Border 面板邊框 | `rgba(255,255,255,0.08)` | 面板描邊，低透明度白線 |
| Primary Ink 主文字 | `#f4f6fb` | 標題、KPI 數值 |
| Secondary Ink 次文字 | `#9aa3b8` | 說明、caption |
| Muted 靜音（軸線） | `#5b6478` | 座標軸刻度、格線標籤 |
| Gridline 格線 | `#232a3d` | 髮絲格線，比面板底更淺一階 |
| Baseline / Axis 基線 | `#323a52` | X/Y 軸實線 |
| Glow Shadow 微光 | `0 0 12px rgba(37,99,235,0.35)` | KPI 數值與強調色的發光陰影（依系列色調整色相） |

---

## 3. Typography Rules

### Font Families

| Token | Stack | Use |
|-------|-------|-----|
| `--font-sans` | 'Inter', system-ui, -apple-system, sans-serif | 標題、內文、標籤、圖例 |
| `--font-mono` | 'JetBrains Mono', 'IBM Plex Mono', monospace | KPI 數值、告警代碼、座標軸刻度、時間戳 |

**Pairing logic：** Inter 負責介面文字的中性可讀性；JetBrains Mono 的等寬數字在監控台情境尤其關鍵 — 數字要能在刷新時「原地跳動」而不擠壓版面，等寬字距是唯一選擇。

### Scale

| Element | Size | Font | Weight | Note |
|---------|------|------|--------|------|
| Hero Figure 頭條數字 | ≥48px | mono (proportional) | 700 | 帶微光 text-shadow，一頁一個 |
| h1 | 2rem | sans | 700 | line-height 1.25 |
| h2 / 面板標題 | 1.25rem | sans | 600 | 全大寫可選，字距 0.02em |
| Body 內文 | 15px | sans | 400 | line-height 1.6 |
| Axis / Legend | 11px | mono | 500 | muted 色，全大寫 |
| KPI Tile 數值 | 2.25rem–3rem | mono | 700 | 帶微光陰影，`tabular-nums` 僅用於刷新時防跳動的欄位 |
| Alert Code 告警代碼 | 13px | mono | 600 | 如 `ERR-4029`，永遠搭配文字說明 |

### Glow Rule（發光規則）

任何強調用途的資料色文字（KPI 主數值、當前選中的系列）可加 `text-shadow: 0 0 12px <色相對應的 rgba>`，透明度固定 0.35，模糊半徑固定 12px — **系統唯一允許的光暈規格，不可依元件各自調整強度**，否則面板會失去一致的「發光層級」語彙。

---

## 4. Component Stylings

### Chart Marks（圖表標記 — 暗底調整版）

| Mark | Spec |
|------|------|
| 長條 / 柱狀 | 寬度 ≤24px，4px 圓角資料端；填色可選淡微光（`box-shadow` 而非模糊填色） |
| 折線 | 2px 線寬，圓端圓角轉折，當前 hover 系列加微光 |
| 端點標記 | ≥8px，填充系列色，外圈 2px 面板底色描邊環 |
| 面積填色 | 系列色 ~12% 透明度（暗底需比淺底略高一點透明度才可見） |
| 圓餅 / 甜甜圈 | 內徑 60%，扇形間 2px 面板底色間隙 |

### Axes & Gridlines

- 格線：1px 髮絲線 `#232a3d`，實線，比面板底淺一階但仍保持低存在感
- 軸線：`#323a52`，只畫基線
- 刻度文字：11px mono muted `#5b6478`
- **禁止雙 Y 軸**，規則同 chart-studio — 拆成兩張圖或小倍圖

### Legend & Tooltip

- 兩系列以上必有圖例，色塊 10px 圓角方塊 + mono 文字
- Tooltip：面板底 `#161c2c` + `rgba(255,255,255,0.08)` 邊框 + `box-shadow: 0 8px 24px rgba(0,0,0,0.5)`
- 十字準星 crosshair 用 `#323a52`，避免用資料色（會與系列混淆）

### KPI Tile（系統核心元件）

- 面板底 `#161c2c` + 低透明度白邊框，內部 padding 20–24px
- 結構：label（muted，無冒號）→ value（mono 粗體 + 微光）→ delta（帶方向箭頭與方向色）→ trend（12 點 sparkline，歷史用 muted 色，當期用強調色）
- 告警態 KPI Tile：邊框變為對應 status 色（1.5px），可選極輕微的 `@keyframes pulse` 呼吸動畫（僅限 Critical，且需可透過 `prefers-reduced-motion` 關閉）

### Meter（量表）

- 填充色代表嚴重度（Good → Warning → Serious → Critical 依比例變色）
- 未填充軌道用面板底再深一階（`#0f1420` 疊在 `#161c2c` 面板上），不用灰階去飽和資料色

### Alert Banner（告警橫幅）

- 左側 4px 實色邊條（對應 status 色）+ 面板底 + icon + 文字說明，絕不單靠背景色染色整條
- Critical 告警可加背景 `rgba(248,113,113,0.08)` 極淡染色輔助掃視，但文字仍是 ink 色不是 status 色

---

## 5. Layout Principles

- **面板網格**：12 欄 grid，暗底頁面上每個面板獨立浮起（面板底比頁面底淺一階製造層次）
- **KPI 列優先**：頁面最上方一列 KPI Tile（3–4 個），下方才是時間序列圖表與明細表
- **告警區獨立**：Alert Banner 固定在頁首或側欄，不與一般圖表混排，確保掃視時第一眼看到
- **密度優先於留白**：監控台場景資訊密度可比 chart-studio 更高，面板間距可縮至 16px（chart-studio 是 24px）
- **時間軸永遠在最下方 X 軸**，多面板共用同一時間軸時要對齊刻度，避免視覺錯位

---

## 6. Depth & Elevation

暗底系統的深度語言是「面板浮在深空中」，靠亮度分層而非陰影模糊：

1. 頁面底：`#0f1420`（最深）
2. 面板：`#161c2c` + `rgba(255,255,255,0.08)` 邊框（淺一階 + 微光邊）
3. Hover 面板：邊框提升至 `rgba(255,255,255,0.16)`，不加位移或陰影
4. Tooltip / Dropdown：`box-shadow: 0 8px 24px rgba(0,0,0,0.5)`，最上層
5. 強調文字：`text-shadow` 微光（見 Glow Rule），是暗色系統唯一的「陰影」語彙——一般陰影在暗底幾乎不可見，發光取代陰影的角色

---

## 7. Do's and Don'ts

### Do's ✅

- 分類色一律取自暗底驗證表，不用淺色系統的 hex 值直接套用（同色相在不同底色需要不同亮度）
- Emerald↔Amber 相鄰出現時附加直接標籤或紋理（tritan floor band 9.6）
- Status 色永遠比分類色盤更亮更飽和，一眼可辨識「這是告警不是資料系列」
- KPI 數值微光統一規格（0.35 透明度、12px 模糊），不個別調整
- 告警橫幅左側色條 + icon + 文字，絕不單靠底色染色
- 深色與淺色版本各自獨立驗證，不用「反轉淺色系統」取代

### Don'ts ❌

- ❌ 純黑 `#000000` 當底色 — 用 `#0f1420`，純黑會讓光暈效果扁平
- ❌ 把淺色系統（chart-studio）的分類色直接套用在暗底 — 亮度會落在錯誤的 OKLCH 帶，對比不足
- ❌ 資料色文字疊資料色光暈疊資料色底色三重飽和 — 每個元件只能有一層飽和來源
- ❌ 用純灰去飽和 status 色的未達標狀態 — 用面板底階層表達「未填充」
- ❌ 呼吸動畫用在非 Critical 等級，或不提供 `prefers-reduced-motion` 關閉
- ❌ 格線比資料標記更顯眼 — 暗底格線務必比一般淺色系統更克制

---

## 8. Responsive Behavior

| Breakpoint | Behavior |
|-----------|----------|
| ≥1200px | 12 欄面板網格，KPI 列一排 4 個，時間序列圖表跨 8–12 欄 |
| 768–1199px | 網格降為 8 欄，KPI 列一排 2 個，Alert Banner 移至頁首橫幅 |
| ≤767px | 單欄堆疊，KPI Tile 改為橫向捲動列，圖表 legend 移至圖表下方，密度回降至接近 chart-studio 水準避免擁擠 |
| Reduced Motion | 停用呼吸動畫與 sparkline 過場動畫，僅保留即時數值更新 |

---

## 9. Agent Prompt Guide

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

```
Create a dark monitoring dashboard in the "Signal Dark" style — a nocturnal
control-room aesthetic:

- Surfaces: deep page background #0f1420, panel surface #161c2c (one step
  lighter), panel border rgba(255,255,255,0.08). Never pure black #000000.
- Categorical palette (8 hues, FIXED order, dark-surface validated,
  OKLCH L 0.48-0.67, worst adjacent CVD 39.3):
  1 #2563eb (blue) 2 #0891b2 (cyan) 3 #d97706 (amber) 4 #059669 (emerald)
  5 #7c3aed (violet) 6 #dc2626 (red) 7 #db2777 (magenta) 8 #ea580c (orange)
  Emerald<->Amber adjacency is tritan-weak (ΔE 9.6) — pair with direct labels.
- Sequential (magnitude, dark-anchored): single blue hue, DARK end near
  surface = near-zero, LIGHT end = highest value and visibly glows:
  100 #1e3a8a ... 400 #2563eb (anchor) ... 700 #93c5fd.
- Diverging (polarity): blue (#1e3a8a->#2563eb->#93c5fd) <-> neutral gray
  midpoint #4b5563 <-> red (#fca5a5->#dc2626->#7f1d1d).
- Status (always brighter/more saturated than categorical, icon+label
  always): good #22c55e, warning #eab308, serious #fb923c, critical #f87171.
- Ink: primary #f4f6fb, secondary #9aa3b8, muted/axis #5b6478, gridline
  #232a3d (hairline, solid), baseline #323a52.
- Glow rule: emphasis text gets ONE fixed glow spec —
  text-shadow: 0 0 12px rgba(<series-color>, 0.35). Never vary the recipe
  per component.
- KPI Tile: panel surface + label (muted, no colon) + mono bold glowing
  value + optional signed delta + optional 12-point sparkline.
- Typography: 'Inter' for UI/labels, 'JetBrains Mono' for all numbers
  (KPI values, axis ticks, alert codes, timestamps) so digits don't jitter
  on refresh.
- Never a dual y-axis. Legend always present for >=2 series. Critical alerts
  may pulse (@keyframes, respects prefers-reduced-motion) — no other element
  animates on a loop.
```

---

*Original design system created 2026-07-14 for Design Lab — 補足 dataviz 暗色監控場景缺口，與 `chart-studio`（淺色分析系統）互補而非重疊。分類色盤驗證方式與數值見 `dataviz` skill 之 `scripts/validate_palette.js`（暗底 surface `#0f1420`）。*