Color Semantics

兩套互斥的語意色

Market 的顏色不是「綠 = 好、紅 = 壞」這麼簡單。它有兩套語意系統，依 market 類型切換，同一個畫面不可混用。

Outcome Semantic——選項回答的是「這件事會不會發生」。YES 綠、NO 紅，是預測的極性，不是成功 / 失敗的系統狀態色，也不是 Tailwind 的 green / red。
Team Identity——選項是「哪一邊」（主隊 / 客隊 / 和局）。gold / blue / neutral 是陣營身份，跟輸贏無關；比賽結算後也維持隊伍色，不會轉成綠紅。

兩套都是 Tier 2 semantic role token。底下的 Tier 1 primitive（jungle / cherry / gold / sea / ash）刻意用去語意的名字，只存在 style.css 與 token preview 頁，component 一律不碰。

怎麼選

選項 = 會不會發生？

Outcome（yes / no）

Will BTC close above $100k？

選項 = 陣營？

Team（home / away / draw）

Lakers vs Celtics、T1 vs GenG

多選項、每個都是「會不會」？

Outcome，逐選項 yes / no

Who wins the election（每位候選人）

Resolved state：team-based 維持隊伍色、不轉綠紅；YES / NO 維持綠紅。顏色一定搭配文字（YES / NO / 隊名），不能只靠顏色分辨。

真組件示意

Outcome · 點一下看 selected

skin=outcome-yes / outcome-no（@olab/components Button）

Team · 三方盤

skin=team-home / team-draw / team-away

兩套 family 共用同一個兩階模型：靜止 = 淡底 + 有色文字；hover / selected 跳到 solid 錨點；pressed 與 selected+hover 用 brightness 做回饋。完整 state 矩陣見 /live/button。

Token 對照

Outcome Semantic

Tier 2 role（component 用這個）	Tier 1 primitive（只在 style.css）	dark 錨點	light 錨點	淡底 / 實色
`outcome-yes-*`	`jungle`	#4FBF7E（jungle-500）	#44B573（jungle-550）	`bg-outcome-yes-tint` `bg-outcome-yes-solid`
`outcome-no-*`	`cherry`	#DA6271（cherry-500）	#CD5765（cherry-550）	`bg-outcome-no-tint` `bg-outcome-no-solid`

Team Identity

Tier 2 role（component 用這個）	Tier 1 primitive（只在 style.css）	dark 錨點	light 錨點	淡底 / 實色
`team-home-*`	`gold`	#F9D224	#DBB718（借 dark -600 階）	`bg-team-home-bg` `bg-team-home-solid`
`team-away-*`	`sea`	#3391E2	#2383D8	`bg-team-away-bg` `bg-team-away-solid`
`team-draw-*`	`ash`	#8C9794	#565B5A	`bg-team-draw-bg` `bg-team-draw-solid`

每個 family 另有 -hover / -pressed 階；solid 底上的文字走依 mode 反轉的 role token（text-black）， team-home 因為黃底太亮改用 team-home-950。值以 style.css 為準，本頁不另抄一份 hex。

Trend ≠ Outcome

漲跌（price up / down）是第三組獨立的 role token：text-trend-up / text-trend-down（primitive = grass / brick）。 YES 是決策極性、Up 是價格方向，即使同為綠色也不得共用 token。

Outcome：YES / NOTrend：+4.2% / −1.8%

同理，機率分佈、成交量這類沒有方向性的資料圖，outcome 與 trend 色全面禁止；圖表只能用中性的 --color-data-*，brand 只給「最重要的那一個記號」（--color-data-fill-focus）。

對齊外部視覺只能改 anchor

當線上站、Figma 或品牌規範的顏色跟 DS 不一樣，唯一允許的修法是改 palette anchor（-500）並重算整條 scale。把 semantic mapping 改指到另一個色階當捷徑是禁止的——那會讓同一個 role 在不同地方長得不一樣。

原本就是該階的視覺問題（例如 hover 階層斷層）→ 修 mapping，不是在 patch 視覺差異。
改 anchor 會讓其他 component 一起漂移、代價太大 → 停下回報，由設計拍板，不要偷改。
深色 surface 用的 anchor-only step（例如 neutral-975 back bg-header）只在 palette 層存在，component 不可 raw 引用。

禁止事項

寫死 hex 或 raw Tailwind 色：text-red-500、bg-[#4FBF7E]。
component 直接引用 Tier 1 primitive：bg-jungle-500、text-gold-600——一律走 outcome-yes-solid、team-home-solid 這類 role token。
sports market 用 yes / no（陣營身份 ≠ 輸贏極性）。
raw scale step 用在要跟著 light / dark 切換的地方；mode-aware 一律走 semantic（例如 *-secondary = 600 light / 300 dark）。
disabled 用 family 色降不透明度——disabled 走中性色。
新增 outcome-a/b、team-a/b：這些名字已 migrate 完畢，只在歷史文件出現。