sechskies/developer-rules/rules/color-tokens.md

description, alwaysApply

description	alwaysApply
全站 CSS color token 一覽與使用規範。	true

【顏色 Token 規範】全站 CSS 變數一覽

所有顏色必須透過以下 token 引用，禁止在 CSS / HTML inline style 硬寫 hex 值（rgba() 中的透明度變化除外）。

Token 總表（定義於 assets/css/style.css :root）

品牌色

Token	值	用途
--color-brand	#ffcc00	主要強調色：按鈕、邊框、標題裝飾線
--color-brand-light	#fceea7	淡黃底色、hover 背景
--color-brand-dark	#4e492b	深棕黃文字、引言色

背景色

Token	值	用途
--color-bg	#0a0a0a	全站頁面底色
--color-bg-raised	#1a1a1a	導覽列、頁尾、深色卡片
--color-bg-alt	#fcfaf2	淺色替代底（不常用）

表面色（淺色內容區）

Token	值	用途
--color-surface	#fffdf7	section 底色
--color-surface-soft	#fff9e8	卡片、暖白底

文字色

Token	值	用途
--color-text	#333333	一般內文
--color-text-dark	#1a1a1a	強調、標題文字
--color-text-muted	#4d4d4d	次要說明文字
--color-text-inverse	#f4f4f4	深色背景上的淺色文字

廢除名稱（禁止再使用）

以下為舊命名，已全數替換，不得復用：

--primary --accent --yellow --light-yellow --dark-yellow --black --card-bg --deep-black --bg-alt --surface --surface-soft --text-color --text-main --text --text-muted --gray

例外：rgba() 透明度變化

token 無法直接放入 rgba() 的色版參數，此情況保留 hex 硬寫：

/* ✅ 允許 */
border: 1px solid rgba(255, 204, 0, 0.28);

/* ✅ 允許 */
background: var(--color-brand);

/* ❌ 禁止 */
background-color: #ffcc00;

頁面 / 套件 scope token

以下為特定頁面內部使用的 scope token，不屬於全站規範，不可在其他頁面引用：

• --lyrics-*（歌詞頁）
• --njtw-*（NJTW5 節目頁）
• --access-*（演唱會票務狀態）