Design System

金融產品 9 成使用冷色藍（Robinhood、Coinbase、傳統銀行 app），原因是傳達「冷靜、專業、可信」。 TrustGuard 故意反其道而行 — Week 1 訪談中，使用者對 AI 代理人的核心恐懼是「它冷冰冰地把錢搞丟」。

暖橙（oklch 0.72 0.17 50）是決策的解藥：有溫度、有生命、但飽和度夠低不刺眼。 對應原則 03「夥伴關係，不是代理」— 顏色本身就是立場宣言。

訪談顯示 Web3 使用者多在凌晨監看（時差、亞洲市場、鏈上事件），暗色介面對眼睛友善。 另一層原因是「警示色的對比強度」— 深色底讓 Panic 紅與 Warning 橘能拉出足夠視覺差異， 不會像亮色底那樣被整體色調稀釋。

Destructive（紅偏粉）給「小範圍危險動作」使用 — 刪除一筆紀錄、取消一次訂閱。 Panic（飽和正紅）保留給「整個 session 級別的撤退」— 撤銷所有授權、切斷錢包連線。

兩者故意拉開色相差距（25° vs 25° 但飽和度差 0.04），避免使用者把「刪除交易」的肌肉記憶用在「緊急制動」。 這是原則 02「Panic 色是神聖的」的色票落地。

大多數 AI 產品只顯示「高 / 中 / 低」三階。TrustGuard 故意切成四階，關鍵差異在 Critical（<30%）獨立出來 — 它的語意不是「信心很低」，而是「我建議你拒絕」。

3 階會讓 Low 同時包含「35% 需要你確認」與「15% 我不建議做」， 這兩個決策分歧很大。5 階又太細 — 使用者不會分辨 85% 和 92% 的差別。 4 階剛好對應四種不同動作：自主執行 / 執行但通知 / 暫停請示 / 拒絕。

Inter 處理拉丁文、Noto Sans TC 處理中文、Geist Mono 處理機器資料 — 三者的 x-height 與字重刻意挑過相近的，讓中英混排時同一層級視覺重量一致。

Mono 不是為了「工程師氣質」— 是因為 hash、地址、gas 這類資料需要等寬對齊掃讀，使用者比對 0x 開頭的前後 4 碼時才不會錯位。 這是原則 04「證據優先於承諾」的排版層面體現：鏈上資料用 mono，讓它看起來就是可驗證的。

基數從 10px 起跳、卡片預設 xl/2xl（14–18px），刻意比多數 fintech 圓潤。 尖角傳達「專業、嚴肅」，但對 AI 代理人來說容易過度冷漠； 圓角讓整個介面有「擬人感」，對應暖橙做的是同一件事 — 把硬體感柔化成夥伴感。

信心分數會出現在完全不同密度的畫面 — 卡片標頭只有 16px 高（用 dot）， 對話框按鈕旁需要數字但不能搶焦（用 badge），Portfolio 大圖需要視覺主角（用 ring）， 推理過程需要比較多組信心度（用 bar）。

同一筆資料用不同 variant 表達是故意的 — 原則 05「透明度要校準」： 資訊的重要性隨情境變化，元件要能隨之伸縮，而不是一種尺寸套到底。

多數 AI 產品只有一種聲音 — 中性、禮貌、略帶行銷感。TrustGuard 把 AI 的語氣拆成四種， 因為 AI 在不同情境下對使用者的「情感負擔」完全不同：

info = 不打擾的摘要； question = 主動承認不確定（對應原則 03）； alert = 該讓使用者警覺但不恐慌； success = 完成後簡潔回報，不邀功。

Alert 使用 scale + bounce 的 entrance animation，其他三種只是 fade-up — 動畫節奏本身就是語氣的一部分。

PanicButton 是「不可逆動作」的代表 — 撤銷後所有授權需重新簽署。 業界慣例是「點擊 → 跳確認框 → 點 Yes」，但在恐慌場景下這個流程有兩個問題：

1. 使用者真的恐慌時，會連續快速點擊，確認框會被肌肉記憶秒點通過。 2. 確認框從按鈕處「飛出來」的時間成本與長按相當，但失去了「給使用者一個冷靜的 1.5 秒」。

長按的設計讓使用者在按住的過程中能夠反悔 — 放手就取消。 進度條視覺化這個「還沒發生、但正在逼近」的狀態，等於給使用者一個物理層面的 undo 緩衝。

Black box 問題的標準解法是「把決策過程攤開」— 但若只是一串文字，使用者會略過。 TraceTimeline 把推理拆成 data → reasoning → decision → action 四種節點，每種節點的 icon 和可展開的 evidence 結構不同。

這個四段式對應心智模型： 「我看到什麼」→「我怎麼想」→「我決定什麼」→「我做了什麼」。 使用者可以在任一段質疑 AI — 是資料錯？推理錯？還是決策錯？ 這是原則 04「證據優先於承諾」最直接的介面落地。