替貓老闆做官網 · 第 02 章
先把視覺規格抽成變數
把主色、間距、圓角這些數值先抽成變數，全站引用同一組。視覺秩序靠的不是品味，是「改一個地方、全站跟著變」的設計變數（design token）。
貓老闆的簡報
店面是暖木色配奶白，陶碗是硃紅色，網站要比照。另外——不要給我那種藍紫色的網站，我們不是那種店。
——貓掌櫃的老闆「掌櫃」下需求時的原話
這章做什麼
產出一組 design tokens：三個顏色、四級字階、三級間距、一個圓角，全部寫成 CSS 變數。
動手做
- 從品牌實物取色：陶碗的硃紅當強調色，紙白當底色，墨色當文字色，總共三色。
- 定字階四級：主標、區塊標、內文、輔助說明。超過四級，使用者會開始迷路。
- 定間距三級（8／16／24px）與圓角一種（10px）。
- 全部寫成 CSS 變數，並且立一條規矩：之後任何樣式不得出現裸的色碼與神奇的像素值。
親手試試
貓掌櫃 · 每月玩具盒
顏色決定訪客的第一印象——同一份內容，換一組色就換一種個性。
看看本月盒子
同一份內容，換一組色就換一種個性——這就是為什麼顏色要在開工前定成變數。
這樣對 AI 說
中文就可以
為「貓掌櫃」官網建立 design tokens，輸出成 :root 的 CSS 變數。主色墨色 #262014、強調色硃紅 #b23a2a（取自陶碗）、底色紙白 #f8f3e7。字階四級：34／22／16.5／14px。間距三級：8／16／24px。圓角統一 10px。變數命名用 --color-、--text-、--space- 開頭。輸出後附三行說明，強調之後所有樣式必須引用這些變數，不得出現清單以外的色碼。
驗收清單
視覺規格都變成變數之後，檢查有沒有「變數以外的顏色和裝飾」偷跑進來。
- 全站色碼只從 tokens 取；搜尋 CSS，沒有裸的十六進位色碼。
- 畫面上沒有藍紫漸層、發光圓球或霓虹邊框。
- 圖示不是用 Emoji 拼的；真的沒有適合的圖示就留白。
- 把任一變數改一個值，整站跟著變，沒有漏掉的地方。
這章的相關詞條
詞條頁都有可以動的示範——卡住的時候，去把名詞弄清楚，回來繼續做。
進度只存在這台瀏覽器，不上傳、不追蹤。