Data Viz

圖表裡有一類東西不屬於 UI 表面，也不屬於極性色：中性、只表達資料本身的填色與線條。Live DS 為這一類定義了一組 Tier 2 role，全部指向 neutral 色階；唯一帶色的是 data-fill-focus。

角色一覽

色票隨目前的 dark / light 模式即時解析。dark / light 兩欄是 style.css 裡指向的色階。

Token	角色	誰會用	Dark	Light
`data-fill`	中性資料填色 · 預設	分佈柱、volume profile 柱的底板、區間帶、圖例色塊	neutral-800	neutral-200
`data-fill-strong`	中性資料填色 · 強調	value area、選中區段	neutral-700	neutral-300
`data-fill-accent`	整張圖只有一個的中性標記	單點標記（目前沒有組件引用）	neutral-200	neutral-600
`data-fill-focus`	最重要的那一個記號	modal 區間、POC 列	brand-600	brand-600
`data-grid`	結構線	格線、軸線、rail	neutral-700	neutral-200
`data-reference`	標註線 · 一個位置	spot、today、VWAP 參考虛線	neutral-500	neutral-500
`data-band-edge`	標註線 · 一塊區域的邊	區間帶的虛線外框與其圖例	neutral-600	neutral-600
`data-point`	序列節點	資料點、timeline 事件圓點	neutral-400	neutral-600
`data-ink`	半色調網點 · 預設	柱身網點	neutral-400	neutral-600
`data-ink-strong`	半色調網點 · 強調	value area 的網點	neutral-200	neutral-800

下圖是示意，不是組件：用來看每個 role 在一張圖裡擔任什麼。顏色全部直接吃 token，切換 dark / light 會一起換。

這一組永遠是中性的。漲跌走 trend-up / trend-down，YES / NO 走 outcome-*，陣營走 team-*；資料填色不得表達極性，否則同一根柱子會有兩套互相矛盾的顏色語言。
整張圖「最重要的那一個記號」可以上 brand，走 data-fill-focus——不是 bg-brand-solid，那是按鈕與表面的 role。DistributionChart 給機率最高的區間，VolumeProfileChart 給 POC 那一列。
brand 在這裡的意思是「這就是答案」，是強調，不是好消息。機率分佈與成交量都沒有方向，所以這兩張圖全面禁止 outcome 與 trend 顏色。
時間序列上的事件節點用 data-point，不用 brand：brand 圓點在 production 的 VerticalTimeline 代表「這一步已完成」，事件流沒有進度可言。

data-reference 與 data-band-edge 都是虛線：前者標「某個位置」（spot、VWAP，一條線），後者標「某塊區域的邊」（區間帶外框）。同一張圖會同時出現，差一階讓讀者分得出線與區域。
data-fill 系是「一塊底板」，對網點這種細碎筆畫太暗，所以網點另有 data-ink / data-ink-strong。

已採用：DistributionChart（柱高 + 網點）、VolumeProfileChart（柱長 + 網點）。

圖表上的數字用 Manrope + tabular-nums（並標 data-kind="numeric"），依 T4 規則是 tier-2 PASS。它們讀起來是卡片行文的一部分，不是需要等寬對齊的數字欄。
例外：MetricReadout 的數值與 dashboard headline 的跳動大數字用 Space Mono（font-number）——前者一欄由上往下比對，後者用比例字體會左右抖動。
order book、trade panel、market header、market card 等交易 UI 仍然用 font-number，不在這條規則的範圍內。

下列組件在原始碼裡實際引用了 --color-data-*。每頁有自己的 Interactive Demo 與 State Matrix。