顏色使用順位

寫任何介面時,顏色依照以下順位選用。順位越前面越優先,跳過前面直接用後面的,就是違反規範。

順位 1:語意色

狀態與操作類的顏色,一律使用五個語意色(見色彩規範):

• 主要操作、連結、選中狀態 → primary
• 成功、已完成 → success
• 警告、待處理 → warning
• 錯誤、危險操作、刪除 → danger
• 中性提示 → info

順位 2:中性色映射

文字、邊框、背景一律使用映射好的中性色 class:

要做什麼	✅ 用這個	❌ 不要用
標題文字	text-main	text-gray-900
內文	text-regular	text-gray-600
次要說明	text-secondary	text-gray-400
分隔線/邊框	border-lighter	border-gray-200
頁面底色	bg-page	bg-gray-50
卡片底色	bg-base	bg-white

為什麼禁用 gray-* 和 bg-white? 它們和 Element Plus 元件的灰有色差,而且深色模式不會自動切換,頁面會壞掉。

順位 3:擴充色盤(受限使用)

只有非語意的視覺需求才允許使用擴充色,例如:

• 📊 圖表系列色
• 🏷️ 分類標籤色、彩色卡片(類別本身沒有狀態含義)
• 🎯 行銷活動、Banner 裝飾色

限制:

1. 只能從擴充色盤的精選 10 色挑,不可自行去 Tailwind 全色庫翻色
2. 卡片/標籤固定用配色公式(底 50、框 200、字 700 + 深色模式變體);實色(圖表、圓點)固定用 500 階
3. 同一產品內的分類配色需固定下來寫進該產品的規範頁

絕對禁止

用 Tailwind 原生色模仿語意色 —— 例如用 bg-blue-500 做主要按鈕、text-red-500 顯示錯誤。 語意色永遠走順位 1,不然改品牌色時這些漏網之魚不會跟著變。

快速自我檢查

寫完一個畫面後,問自己三個問題:

1. 頁面上有沒有 gray-*、bg-white、text-black?→ 換成中性色映射
2. 有沒有 blue-* 被拿來當主色用?→ 換成 primary
3. 切到深色模式看一眼,有沒有哪塊「亮得突兀」?→ 那塊八成用了原生色