DATAVIZ DESIGN SYSTEM · DARK
Signal Dark 深色訊號盤
深色監控台美學 — 深底 + 在暗處會發光但不刺眼的受控資料色，KPI 數字磚為核心元件。
A nocturnal control-room dataviz system — dark-surface validated categorical colors that glow without shrieking.
分類色盤 Categorical Palette — 8 slots, dark-validated
漸序色階 Sequential — dark-anchored, blue 100→700
100 · 趨近零，融入底色400 · 中量級700 · 最高量級，明顯發光
發散色階 Diverging — polarity, blue ↔ red
負向極中性中點 · 無偏移正向極
狀態色 Status — brighter than categorical, icon+label
✅ Good 正常
⚠️ Warning 警示
🔶 Serious 嚴重
🛑 Critical 危急
字體 Typography
HERO FIGURE — JetBrains Mono · 700 · ≥48px · glow
99.982%
H1 — Inter · 700 · 2rem
系統可用性監控台 System Uptime Console
Body — Inter · 15px · line-height 1.6
介面文字用 Inter 保持中性；所有數字一律用 JetBrains Mono 等寬字體，避免刷新時位數跳動擠壓版面。
示範圖表 Demo Charts
每小時請求量 Requests / Hour
單位：千次請求
錯誤來源占比 Error Source Share
單位：百分比
API 逾時 38%
驗證失敗 25%
資料庫連線 21%
其他 16%
回應延遲趨勢 Response Latency Trend
兩系列比較 — p50 vs p99
KPI 數字磚 KPI Tiles
系統可用性 Uptime
99.982%
▲ 0.004% vs 上週
平均延遲 Avg Latency
142ms
▼ 8ms vs 上週
活躍告警 Active Alerts
3
▲ 2 需立即處理
告警橫幅 Alert Banner
ERR-4029
資料庫連線池接近上限（92/100），建議擴充連線數或檢查慢查詢。
Tooltip 示範
色彩對照表 Color Reference
| 色彩 Color | Hex | 角色 Role |
|---|
| Signal Blue | #2563eb | Primary — 系列一、預設強調色 |
| Cyan Trace | #0891b2 | 系列二 |
| Amber Alert | #d97706 | 系列三（與 Emerald 相鄰需標籤） |
| Emerald Pulse | #059669 | 系列四 |
| Violet Deep | #7c3aed | 系列五 |
| Alert Red | #dc2626 | 系列六 |
| Panel Surface | #161c2c | 面板底色 |
| Primary Ink | #f4f6fb | 標題、KPI 數值 |