設計系統

全站的視覺在這裡定義一次，所有頁面自動吃。 這是 zenbu site 跟一般網頁編輯器最大的差別——改主色不需要一頁一頁去改。

可以定義什麼

分類	內容
顏色	主色 Primary、次色 Secondary、背景 Background、文字 Foreground
字體	中文字型、英文字型、基準字級
圓角	全站的圓角半徑（小 / 中 / 大）
運算模式	用「設計 token」統一算出深淺階、還是各自指定

為什麼要走設計系統？

頁面內容取色時不要寫死 #1A1A1A，而是用變數。這樣：

• 改主色 → 按鈕、連結、標籤、focus 外框一起變
• 換季／改版 → 動一次設定，不用重做頁面
• 深色模式 → 同一組變數自動對應深色值

寫死顏色的頁面不會跟著變

如果某一頁是直接貼進來的 HTML、裡面寫死了色碼，那一頁不會受設計系統影響。改版時它會變成唯一一個沒跟上的頁面——所以建立頁面時就用變數。

問題：改了會不會影響已經發布的內容？

會，而且是立即生效——這正是它的用意。改之前建議先在非尖峰時段做，改完把首頁、文章頁、商品頁各開一張確認。

使用情境：換季改版只花十分鐘

保養品牌「素研」冬季想把整站從米白換成暖棕。做法是：到設計系統把主色從 #8A6F4E 調成 #6B4F3A、背景從 #F6F2EA 調成 #F2EBE1，儲存。

首頁、8 個商品頁、9 篇文章、電子報樣板全部跟著換。唯一要另外處理的是首頁那張手工做的活動 banner 圖。