設計系統（Design System）¶
本檔角色：UI 設計系統的細化 —— 視覺原則、色票、字級、間距、元件規則、3D 主視覺準則。 設計定位 / 美術資源總覽見 美術資源.md；前端實作（token CSS 架構 / 主題機制 / 元件庫）見 ui-frontend.md。對應
src/styles/。
1. 設計定位與視覺原則¶
Open4WD 的 UI 定位是「專業迷你四驅車調校工坊」，不是汽車維修系統，也不是一般 SaaS dashboard。核心畫面優先展示「四驅車模型 / 賽道 / 比賽狀態」；設定、治理與識別資訊才使用工具型密度。
- 3D 車輛 / 場地 / 比賽畫面是主視覺，不放小預覽框。
- 工具面板深色、低噪音、可掃描的資訊層級。
- 狀態回饋同時用顏色 + 圖示 + 文字 + 形狀，不只靠紅綠。
- 卡片只用於單一作品 / 零件 / 玩家 / 設定群組；不做卡片套卡片。
- 固定格式元素（HUD / 卡片 / 按鈕 / 列高）須穩定尺寸，避免動態文字跳動。
- 視覺語言採「克制的機械競速」：石墨黑作舞台、橘色只表速度與主 CTA、青色表遙測與連線、黃色表能量與獎勵；裝飾線框不搶過 3D 主體。
- 正式介面圖示一律使用經審查的 SVG；不得以 emoji、Unicode 符號或字元圖案充當按鈕、狀態、縮圖與 HUD 圖示。
- 資訊強度分三級：Level 1（登入 ／ 設定 ／ 說明）低噪音、Level 2（車庫 ／ 工坊 ／ 賽制 ／ 房間）模型與操作並重、Level 3（比賽 ／ 觀戰 ／ 結算）沉浸與即時狀態優先。
- 行動版一律 Stage-first：先看車、賽道或賽事主體，再展開 Pit Board 與 Tool Drawer；不得讓技術資訊先於遊戲目標出現。
2. 色票（token）¶
dot 記法（
bg.canvas）＝ 語意簡寫；CSS 變數名循 ui-frontend.md §5 命名慣例（--{category}-{role}-{variant?}）。本表色值 ＝default 主題預設值的設計來源——實作權威 ＝themes/default/theme.json（主題系統.md），本表與 manifest 同步維護。
| 設計色／Token | 色值 | 用途 |
|---|---|---|
Bench Black／bg.canvas |
#0B0C0E |
3D 舞台、沉浸背景 |
Oil Graphite／bg.surface |
#15171A |
工具抽屜、低階面板 |
Tool Steel／bg.surfaceRaised、bg.elevated |
#292C31 |
Pit Board、目前選取面 |
Safety Orange／accent.speed |
#F26422 |
速度、危險邊緣、每 viewport 唯一主 CTA |
Timing Cream／text.primary |
#F0E6D2 |
高優先文字與計時板語意 |
Telemetry Blue／primary |
#3DB7E9 |
焦點、遙測、網路與可互動提示 |
border.subtle／text.secondary／text.muted |
#41454C／#C2B8A5／#8c98a8 |
分隔與文字層級；muted 仍須達可讀門檻 |
accent.energy |
#facc15 |
電量與獎勵；不得取代 Safety Orange 主 CTA |
success／warning／danger |
#22c55e／#f59e0b／#ef4444 |
狀態，必須搭配文字或圖示 |
禁止整頁只由單一色系變化構成；每個主畫面至少一個 gameplay accent（speed / energy / track）。
3. 字級與排版¶
| Token | px | 用途 |
|---|---|---|
display 32/40 · title 22/28 · section 16/22 · body 14/20 · caption 12/16 · hud 18/24 |
首屏 / 頁標 / 區塊 / 內文 / 註腳 / HUD 數字 |
- 不用 viewport-width 動態縮放字級。
- CJK = Noto Sans TC/SC/JP；拉丁與數字 = Inter；PeerId / CID 用等寬字、僅必要處顯示。
track-bracket是橘色切角框線語彙，不是另一套字型；只用在頁標、3D 舞台、結果焦點與正式空狀態，不套在長文或每張卡片外框。- 完整字型策略（self-host OFL、CJK subset、A/B/C/D 文字分類）見 ui-frontend.md §16。
4. 間距與尺寸¶
space 4 / 8 / 12 / 16 / 24 / 32px；radius.sm 4px / radius.md 8px；hit.min 44px；hud.button 64px desktop / 72px touch。Default 的機械卡片以 8px 內圓角為基準；強風格主題可透過受控 Skin token 改變面板 ／ 卡片 ／ 按鈕形狀，但不得改 hit box、造成裁切或把所有控制項做成膠囊（segmented control／chip 除外）。完整契約見 主題外觀與 RWD.md §4。
5. 元件規則¶
| 元件 | 規則 |
|---|---|
| Button | 主 CTA 用 accent.speed；工具按鈕 icon + tooltip |
| Segmented Control | 賽制模式 / 特效品質 / 語言 等互斥選項 |
| Toggle / Slider | 色盲模式·Pinning 節點（settings.md）/ 音量三軸 |
| Stat Bar | 電量 / 過熱 / 磨損 / 載入進度 |
| Card | 固定 aspect ratio，含縮圖 + 標題 + 核心 stat + 狀態 badge |
| Toast / Modal | 不阻擋操作（需下一步）/ 僅高風險確認（刪本地資料、上鏈扣費） |
| Icon | 24×24 SVG sprite，currentColor 染色；互動圖示有可翻譯 aria-label，純裝飾圖示 aria-hidden |
完整 Angular 元件庫（o4-*）見 ui-frontend.md §4。
5.1 工坊容器角色¶
| 角色 | 用途 | 禁止事項 |
|---|---|---|
| Stage | 車、賽道、比賽與冠軍的第一視覺；可含低對比網格 | 不放大量表單或 PeerId 清單 |
| Pit Board | 當前目標、數值比較、狀態與一個主操作 | 不做 Pit Board 套 Pit Board |
| Tool Drawer | PeerId、CID、OrbitDB、TURN、載入診斷、版本等技術資訊 | 不得成為完成核心流程的唯一入口 |
舞台導引紋 是迷你四驅車軌道語彙的非量測轉譯：可使用工作墊嵌槽、起跑箭頭、連續接縫或主題化曲線引導視線，但禁止數字、單位、等距刻度、比例值與尺規造型，不得暗示能量測車長、車寬或零件位置。它只放在 Stage／ 模型架邊緣，不是每張卡片都要套用的裝飾框。
空狀態統一使用 o4-empty-state 的 generic／connection／garage 語意；UGC／場地等沒有專屬資產 key 的空狀態使用 generic 插畫搭配 route-specific DOM 文案，
插畫取自目前主題的外部資產，標題、說明與 CTA 必須是可翻譯的真實 DOM 內容。正式
Angular template 除 o4-icon 外部 sprite 包裝外不得內嵌 SVG。
每個 viewport 只允許一個 Safety Orange 主 CTA；同一流程的返回、詳情、刪除、切換與技術操作使用 secondary／ghost／danger。若主 CTA 依狀態切換（例如 RoomPage 的「準備」與「取消準備」），任一時間仍只能有一個；開賽由 ReadySet 驗證完成後自動倒數，不提供房主開始按鈕。
6. 影像與 3D¶
- 車庫 / 車間 / 場地 / 展示廳 第一視覺 = 3D / 截圖資產；車間 3D canvas 不得低於桌面寬度 50%。
- 比賽畫面全螢幕 / 近全螢幕，HUD 疊加，不上下切版壓縮畫面。
- 作品卡片縮圖須是實際模型 / 自動截圖，不用抽象圖示代替。
- 正式資產尚未就緒時使用「SVG 類型圖示 + 切角框 + 明確文字」空狀態；不得偽裝成實際縮圖，也不得用 emoji 代替。
7. 動態與音訊完成度¶
- 互動回饋走 motion token：按下只做輕微位移 / 縮放，頁面與結果焦點只做短距離 opacity + transform；不得讓卡片 hover 改變尺寸或造成 reflow。
- OS
prefers-reduced-motion: reduce或玩家選擇motionPreference=reduce時，非必要動畫與轉場近乎即時；靜態／SSG 的data-motion=pending亦採相同安全值，資訊與操作結果不得依賴動畫才可辨識。 - 程式必須先完整提供 BGM / SFX 槽位與三路音量控制；default 主題允許全部音訊槽為
null，其語意是安全靜音，不得發出網路請求或 console error。正式槽位與 fallback 規則見 audio-system.md。
8. 跨模組對接¶
| 對象 | 對接 |
|---|---|
| ui-frontend.md | token CSS 架構 / 主題 / 元件庫 / 字型 / 動畫實作 |
| 賽內機制.md §2.4 | 比賽 HUD 規格 |
| 系統常數 | 動畫 / 版面 / 預設值常數 |
| 語系清單.md | UI 文字翻譯 |