在以 Tailwind CSS 建構網站或設計系統時，色彩往往是最容易失控的部分。不同頁面使用不同色碼、語意色不一致、修改品牌色需要大量手動替換……這些問題都指向同一個核心：缺乏清晰的色彩 Token 架構。

現代設計系統通常建構在三層色彩 Token 上：

• Primitives（基礎色票）
• Semantic Tokens（語意色）
• Component Tokens（元件色）

這三層之間維持明確的責任分工，使得整個系統能保持一致性、彈性與可維護性。以下從系統架構的角度整理三層 Token 的角色與差異，以及它們與 Tailwind CSS 的關係。

一、Primitives：系統色彩的基礎層

Primitives 是整個色彩系統的底層，由「真實顏色」組成，不帶語意，不描述用途。其命名方式通常依照色相或顏色，例如：

--color-red-50
--color-red-100
--color-green-600
--color-blue-700

Tailwind 預設的色票（例如 text-red-500、bg-blue-50）本質上即屬於 Primitives。這一層的責任是定義顏色本體，由 50–900 的階層組成，作為整個系統的色彩來源。

二、Semantic Tokens：以語意為核心的色彩層

Semantic Tokens 用來表示「用途」，而不是「顏色」。語意名稱如：

• success（成功）
• warning（警告）
• error（錯誤）
• info（資訊）

例如：

--success-bg
--success-border
--success-text

語意 token 的特徵是：名稱中永遠不應包含顏色名稱（如 red、green）。因為語意不等於顏色。成功訊息通常使用綠色，但設計系統不應限制成功色永遠就是綠色；錯誤訊息常用紅色，但在品牌調性不同的情境下也可能改用紫色或粉色。

因此語意 token 必須與顏色分離，而是引用 Primitives：

--success-bg: var(--color-green-50);
--warning-bg: var(--color-yellow-50);
--error-bg: var(--color-red-50);
--info-bg: var(--color-blue-50);

這種「語意 → 顏色」的映射使得系統在品牌調整、主題切換時更具彈性。

三、Component Tokens：對應元件需求的應用層

Component Tokens 是最靠近 UI 的一層，負責描述元件自身的風格，例如按鈕、輸入框、提示訊息、卡片等。

Component Tokens 通常不會直接引用 Primitives，而是基於 Semantic Tokens 建構較高層級的特性，例如：

--alert-success-bg: var(--success-bg);
--alert-error-text: var(--error-text);
--button-primary-bg: var(--brand-primary);

透過此方式，元件設計可以保持一致與語意連動。當語意色變動時，使用該語意的所有元件也能自然更新。

四、語意色引用何種色票的兩種架構

設計系統在實作時經常出現一個問題：語意色到底應該引用「顏色色票（red / green / blue）」還是「語意色票（error / success / warning）」？這對應兩種不同的設計哲學。

（1）流派 A：顏色 Primitives → 語意 Tokens

這是最常見、最直覺，也最符合 Tailwind 結構的方式。

--color-red-50
--color-green-50
--color-blue-50

--error-bg: var(--color-red-50);
--success-bg: var(--color-green-50);

這種方式清楚、可讀性高，也是一般網站與產品最推薦的作法。

（2）流派 B：語意 Primitives → 語意 Tokens

多見於大型企業級設計系統，如 Salesforce 或 Adobe Spectrum。

--color-error-50
--color-success-50

--error-bg: var(--color-error-50);

此方法將「語意」視為最上位概念，使顏色能與語意完全脫鉤，例如 error 不一定要紅色。兩種流派並無對錯，而是不同的系統哲學，但若以 Tailwind 的工作流來看，流派 A 通常更自然、更容易維護。

五、Tailwind 與 Token 系統的整合方式

Tailwind 的角色不是定義語意色，而是提供色票與 utility class。搭配 Token 系統時，可以透過 CSS Variables 引用：

<class="bg-[var(--success-bg)] text-[var(--error-text)]>
<input class="border-[var(--input-border)]>

Tailwind 不需理解 token 的結構，但能作為渲染層，使色彩系統以一致且可維護的方式呈現。

六、結語

透過「Primitives → Semantic Tokens → Component Tokens」的三層架構，Tailwind 的色彩系統能獲得：

• 一致的視覺體驗
• 更容易維護的色彩來源
• 更靈活的品牌調整能力
• 更容易擴展的主題（如 Dark Mode）
• 跨頁語意一致性

色彩管理是高度系統化的工作，而 Tailwind CSS 的架構已成為業界常見且成熟的標準。在產品的早期階段先把色彩系統規劃完善，不僅能讓設計與開發有共同語言，也能在日後擴充、調整或跨團隊協作時減少大量溝通成本，讓整體流程更加順暢高效。

本文由 AI 協助撰寫，我本人審稿