情境化色彩 Token

輸入

產品情境、品牌色、主要操作、狀態種類、亮／暗主題和文字層級。不要只提供「藍色科技感」這類形容詞。

輸出

:root {
  --surface-page: 248 250 252;
  --surface-card: 255 255 255;
  --text-primary: 15 23 42;
  --text-secondary: 71 85 105;
  --action-primary: 37 99 235;
  --status-danger: 220 38 38;
}

為每個角色附上使用限制，例如 status-danger 不能用作大面積背景，也不能成為唯一的錯誤訊號。

審查

檢查一般文字、較大文字、按鈕文字、focus ring 和 disabled 狀態在實際背景上的對比；再檢查模擬色覺差異時是否仍能辨識狀態。