色彩

色彩系統

本系統的色彩以三層 design token 架構定義。所有元件透過 Component token 取色，Component token 引用 Semantic token，Semantic token 引用 Primitive token。

Primitive（原始色票）→ Semantic（語意用途）→ Component（元件客製）

主題切換只需覆寫 Semantic 層，所有元件自動生效。

Primitive 色票

原始設計數值，不直接在元件中使用。前綴 --govtw-primitive-color-。

7 個色家族各 12 階，套用統一 OKLCH 曲線：

階	L	C	用途
1-2	0.985 / 0.965	0.005 / 0.015	極淺背景
3-4	0.93 / 0.875	0.035 / 0.060	淺底、淺邊框
5-6	0.79 / 0.69	0.090 / 0.115	標準邊框
7-8	0.58 / 0.48	0.135 / 0.145（峰）	連結、按鈕 bg
9-10	0.38 / 0.30	0.135 / 0.105	深強調
11-12	0.25 / 0.21	0.085 / 0.070	接近最深

色家族 hue：blue 240、teal 170、red 25、green 145、yellow 85、purple 300、neutral 240（chroma ≈ 0.005-0.008，淡 tint 灰）。

Blue（hue 240）

Teal（hue 170）

Red（hue 25）

Green（hue 145）

Yellow（hue 85）

Purple（hue 300）

Neutral（hue 240，極低 chroma）

Semantic 色彩

以用途命名，引用 Primitive 層。主題切換（如 dark mode）覆寫的就是這一層。

切換頁面的深色模式可以看到 Semantic 色彩隨主題自動變化。

品牌色

文字色

背景色

邊框色

回饋色

連結色

Focus

使用方式

元件內部使用 Component token，一般頁面使用 Semantic token：

css

/* 一般頁面樣式 — 使用 Semantic token */
.my-element {
  color: var(--govtw-color-text-primary);
  background: var(--govtw-color-bg-surface);
  border: 1px solid var(--govtw-color-border-default);
}

客製品牌色（覆寫 Semantic token）

各機關只需覆寫 Semantic 層的品牌色，所有元件自動生效：

css

@import '@gov-tw/tokens/tokens.css';

:root {
  --govtw-color-brand-primary: #0062B1;    /* 機關品牌主色 */
  --govtw-color-brand-secondary: #00A67E;  /* 機關品牌輔色 */
}

客製特定元件（覆寫 Component token）

需要細粒度調整時，覆寫單一 Component token，影響範圍只到該元件：

css

:root {
  --govtw-button-primary-bg: #0062B1;
}

無障礙

所有文字與背景色的對比度至少符合 WCAG 2.2 AA 標準（4.5:1）
回饋色不僅依靠色彩傳達意義，需搭配圖示或文字
Focus 色 #fd0 確保鍵盤導航時的高可見度

色彩 ​

色彩系統 ​

Primitive 色票 ​

Blue（hue 240） ​

Teal（hue 170） ​

Red（hue 25） ​

Green（hue 145） ​

Yellow（hue 85） ​

Purple（hue 300） ​

Neutral（hue 240，極低 chroma） ​

Semantic 色彩 ​

品牌色 ​

文字色 ​

背景色 ​

邊框色 ​

回饋色 ​

連結色 ​

Focus ​

使用方式 ​

客製品牌色（覆寫 Semantic token） ​

客製特定元件（覆寫 Component token） ​

無障礙 ​

色彩