設計規範是把視覺原則轉成可重複執行的值、元件、版面與狀態。 它比品牌手冊更靠近實作：設計師、開發者、行銷與印刷端應能用同一套名稱與規則完成工作。
一、品牌手冊和設計規範的分工
| 文件 | 回答 | 例子 |
|---|---|---|
| 品牌手冊 | 品牌為何如此表達、核心識別如何使用？ | Logo、語氣、影像方向與代表性應用。 |
| 設計規範 | 實際畫面與檔案要用哪些值、元件和狀態？ | 色彩角色、間距、網格、按鈕、卡片、模板與輸出規格。 |
二、第一層：建立有語意的基礎值
不要只把顏色命名為「藍 1、藍 2」。應區分原始色值與用途角色，例如品牌主色、文字、背景、邊框、成功、警示與停用；間距、圓角、陰影與字級也採一致命名。若團隊使用 design tokens，可參考 W3C Design Tokens Community Group 的公開工作，但實際格式仍應配合現有工具與開發環境。
三、第二層：定義元件的所有狀態
- 按鈕：預設、滑入、焦點、按下、停用、載入與錯誤。
- 表單：標籤、提示、必填、驗證、成功與錯誤訊息。
- 內容：標題、內文、連結、清單、表格、圖片與引言。
- 品牌元件：Logo 區、品牌色帶、圖示、作者與來源標示。
- 印刷模板：成品、出血、安全區、可變資料與版本欄位。
只畫理想狀態會在實作時留下大量臨時決策；應用真實長文、缺圖、錯誤與多語言測試。
四、第三層：跨媒介規則
| 媒介 | 必要規則 |
|---|---|
| 網站／產品 | 響應式斷點、內容寬度、互動狀態、鍵盤焦點、對比與圖像替代文字。 |
| 社群／廣告 | 安全區、標題長度、字幕、平台裁切與模板可變欄位。 |
| 簡報／文件 | 頁面比例、母片、圖表、表格、替代字體與匯出方式。 |
| 印刷／包裝 | 承印廠刀模、出血、色彩流程、特別色、材質、加工與校稿。 |
印刷數值依供應商、設備與成品而變，不應把某一廠商規格當成所有媒介的通則。
五、建立與治理流程
- 盤點現有畫面與素材，找出重複值和不一致元件。
- 先統一高頻基礎值，再處理高頻元件，不必一次涵蓋全部。
- 設計、開發與內容人員共同命名，避免各自維護一套詞彙。
- 以真實頁面和印刷品驗證，再發布第一個可用版本。
- 每次變更附原因、影響範圍、遷移方式與版本號。
- 停用項目保留期限與替代方案，避免無限累積。
六、驗收清單
- 設計檔、程式與文件中的名稱是否對得上？
- 色彩和字體是依用途命名，還是只記外觀？
- 元件是否涵蓋互動、錯誤、載入、停用與長內容？
- 是否記錄字體、圖示、圖片與程式資產授權？
- 實際使用者能否找到元件、判斷用法並提出變更？
- 版本、負責人、變更紀錄與淘汰政策是否存在？
七、FAQ
小網站需要設計系統嗎？
不一定需要龐大系統，但至少應統一色彩角色、字體層級、間距、高頻元件與檔案來源。
設計 token 是必要格式嗎？
不是。它是跨工具傳遞設計值的方法之一；是否採用要看團隊規模、技術環境與維護能力。
規範完成後可以鎖死嗎？
不宜。核心規則應穩定，但應透過提案、審核、版本與遷移機制持續修訂。
八、延伸閱讀
資料查核日期：2026-08-19。W3C Design Tokens 工作仍可能更新；實作請以採用工具與正式規格的當前版本為準。
