Token 就是一層「語意命名」：元件只說「我要主要文字色」，不說「我要 #1F2328」。這樣換主題、做深色，只改 token 的值，元件一行都不用動。當你發現自己想直接貼一個 hex、或在猶豫某個間距該抓多少時，翻這頁拿定稿單值，別自己發明。
這是什麼
顏色用語意名稱（品牌色、次要文字、成功色等）；深淺模式只換變數值，元件不寫死色碼。
什麼時候用
建立或擴充設計 token，確保換主題時整站一致更新。
bg-default、text-muted、status-success 等語意 token。#3498DB；切換 Mobbin 風格或 dark mode 時色值即時更新。這是什麼
從大型展示標題到說明小字的字級階梯；內文預設約 14px、行高 1.5 倍較易讀。
什麼時候用
統一全站標題、內文、輔助說明的字級與行距。
| Token | Size | 用途 |
|---|---|---|
| display | 36/48 | 行銷標題 |
| heading-1 | 24–32 | Page title |
| body | 14 | 預設正文 |
| caption | 12 | Helper |
這是什麼
間距以 4 像素為基礎倍數，從 4 到 64 形成固定階梯，用於內距、區塊間距、圖文間距。
什麼時候用
排版時用同一套間距 token，避免各處硬編不同像素值。
space-1 = 4px … space-8 = 64px
這是什麼
圖示尺寸從 12 到 48 像素分級；線條粗細一致；結構性圖示用 SVG，不用 emoji 代替。
什麼時候用
按鈕、選單、表格等處選擇圖示大小，並與旁邊文字協調。
currentColor）；本指南用 Untitled UI Icons。這是什麼
小圓角用於輸入框（約 4px）、中圓角用於卡片與按鈕（約 8px）、全圓角用於 pill 與頭像。
什麼時候用
統一各元件外框圓潤程度，讓介面風格一致。
radius-sm = 4px input
radius-md = 8px card, button
radius-full = 9999px pill, avatar
這是什麼
淺色模式用陰影表現層級；深色模式則提高陰影透明度或改用較亮的表面色區分高低。
什麼時候用
卡片、下拉、對話框等需要表現「浮起」層級時，深淺模式各有一套做法。
shadow-xs / sm / md / lg
這是什麼
網站外殼與示範元件使用的 CSS 變數，須與 globals.css 定義的語意 token 一致。
什麼時候用
在本指南站內實作或更新元件時，避免另起一套硬編色值。
| CSS 變數 | 用途 |
|---|---|
--sidebar-width | 左導覽 240px |
--color-brand | 品牌主色 |
--color-content | 主內容底 |
--shadow-sm 等 | 陰影階梯 |
字體：Inter；動效 --duration-fast: 150ms。
這是什麼
選語意色 token 與用途（背景／文字／邊框／status pill），產生 CSS 變數用法。
什麼時候用
套用 design token 時複製正確 var() 組合到專案。
這是什麼
display 到 caption 的字級 scale；切換 scale 或文案看預覽。
什麼時候用
需要複製 Tailwind class 組合到專案時。