本站的視覺一致性 — 從首頁到部落格到資源頁 — 完全靠一套約 30 個 CSS variables 撐起來。沒有 Sass、沒有 Tailwind、沒有 design system 套件。這篇拆解這套 token 系統的設計邏輯。
什麼是 design tokens
Design tokens 是「視覺決定的最小單位」 — 一個顏色、一個陰影、一個圓角值。每個 token 有名字（如 --accent-blue），其他 CSS 都引用名字而不是直接寫值。
好處：改一個 token，全站視覺一致變動。
本站的 token 樹
:root {
/* 1. 顏色 — 中性 */
--bg: #F4F4F7;
--bg-soft: #FBFBFD;
--surface: #FFFFFF;
--text: #0F0F1E;
--text-2: #4A4A5E;
--text-3:#6B6B80;
--border: rgba(15,15,30,0.06);
/* 2. 顏色 — accent */
--accent-blue: #4A7BF5;
--accent-violet: #8E7CF0;
--grad-accent: linear-gradient(135deg, #4A7BF5, #8E7CF0);
/* 3. 圓角 */
--radius-sm: 12px;
--radius-md: 20px;
--radius-lg: 28px;
--radius-pill: 9999px;
/* 4. 陰影 */
--shadow-sm: 0 1px 2px rgba(15,15,30,0.03), 0 4px 12px rgba(15,15,30,0.04);
--shadow-md: 0 4px 12px rgba(15,15,30,0.05), 0 12px 32px rgba(15,15,30,0.06);
/* 5. 字型 */
--font-sans: 'Plus Jakarta Sans', 'Noto Sans TC', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
/* 6. 動畫 */
--ease: cubic-bezier(0.22, 1, 0.36, 1);
}
命名邏輯
| 命名規則 | 例子 |
|---|---|
| 用途優先（不是顏色名） | --text 比 --dark-blue 好 |
| 數字後綴表階層 | --text-2 是次強調，--text-3 更弱 |
| 類別前綴 | --shadow-sm, --shadow-md 配對好搜尋 |
| 避免機器命名 | --blue-500 雖然有規律但無語意 |
為什麼三層文字色
本站用 --text（標題）、--text-2（內文）、--text-3（meta、breadcrumb）。三層的層次感讓畫面有節奏：
- 看標題：第一眼定位
- 看內文：漸柔，不刺眼
- 看 meta：模糊化處理，但需要時找得到
用 rgba() 而不是 hex
邊框與陰影刻意用 rgba(15,15,30,0.06) 這種 alpha < 1 的色值。原因：
- 跟下層顏色自動融合
- 淺色背景下變淺、深色背景下變深
- 不需要為每個情境準備不同 token
不用 Tailwind 的理由
Tailwind 在大型團隊很好。但對個人專案：
- 多一層 build step，違背 zero-build 哲學
- HTML class 字串爆炸（30+ class 在一個 div 上）
- Token 命名綁死 Tailwind 規範，不適合做有個性的視覺
跟設計師的協作
如果有設計師在 Figma 用同一套 token 系統，前後端一致性大增。Figma 的 Variables 功能跟 CSS variables 概念對應：
| Figma | CSS |
|---|---|
| color/text/primary | --text |
| color/accent/blue | --accent-blue |
| radius/medium | --radius-md |
暗黑模式的 token 切換
本站目前是 light only，但可以擴充：
:root { --bg: #F4F4F7; --text: #0F0F1E; }
[data-theme="dark"] { --bg: #0A0A14; --text: #E8E8F0; }
所有用 var(--bg) 的地方自動切換。1 個 attribute 切換整站。
結語
CSS variables 是被低估的瀏覽器原生工具。30 個 token 配上一些命名紀律，足以撐起一個有個性的工作室網站。重點不是工具多進階，是 token 系統的克制與一致。
本站完整 CSS 約 200 行，token 區塊只佔 30 行，但這 30 行決定了整站的視覺感。