設計系統與品牌規範差在哪？先釐清 6 個名詞
品牌規範定義品牌怎麼被看見，設計系統定義品牌如何在數位產品中被重複使用。兩者要整合，關鍵是把 Logo、色彩、字體、語氣與元件規則，轉成設計、行銷與前端都能執行的共同標準。
| 名詞 | 主要目的 | 常見內容 | 誰會使用 | 是否需要工程落地 |
|---|---|---|---|---|
| 品牌規範 | 維持品牌識別一致 | Logo、色彩、字體、語氣、應用規則 | 品牌、行銷、設計、外包廠商 | 視數位使用情境而定 |
| VI 手冊 | 管理視覺識別 | 標誌、標準色、比例、留白、不適用範例 | 平面設計、品牌設計、行銷 | 通常不完整支援 |
| CIS | 整合理念、行為、視覺 | MI、BI、VI | 經營層、品牌、客服、業務、設計 | 間接影響產品規則 |
| UI Kit | 提供介面素材 | 按鈕、表單、卡片、圖示、樣式 | UIUX 設計師 | 需要前端另行對應 |
| Design System | 讓產品設計可維護、可擴充 | 元件、樣式、互動狀態、設計原則、前端規則 | 設計、產品、工程、QA | 需要 |
| Design Tokens | 把設計規則變成可同步的變數 | Color、Typography、Spacing、Radius、Shadow、Motion | 設計系統維護者、前端工程師 | 高度需要 |
一份品牌規範手冊可以先解決「品牌不能走樣」；設計系統則進一步解決「產品不能各做各的」。真正成熟的品牌規範整合，不會停在 PDF，而是讓品牌識別進入 Figma 元件庫、前端元件與驗收規則。
品牌規範是什麼？
品牌規範是品牌識別的使用標準，目的是讓不同人製作官網、簡報、社群模板、廣告素材時，都能維持一致。它通常包含 Logo 使用規範、標準色、輔助色、字體規範、留白、安全距離、最小尺寸、不適用範例與品牌語氣。
VI 手冊與 CIS 手冊差在哪？
VI 手冊聚焦視覺識別，例如標誌、色彩、字體與版面比例。CIS 企業識別系統的範圍更大，會包含 MI 理念識別、BI 行為識別與 VI 視覺識別。我的判斷是，許多企業其實不缺漂亮的 VI，而是缺少能被日常團隊使用的執行規則。
UI Kit 為什麼不等於設計系統？
UI Kit 多半是一組介面素材，設計系統則包含元件何時使用、不同狀態如何呈現、RWD 如何調整、前端如何命名、版本如何維護。只有按鈕樣式，卻沒有 disabled、hover、error、loading 等元件狀態，就很難支援真實產品。
Design Tokens 在品牌規範整合中的角色
Design Tokens 是品牌規範和前端實作之間的橋。品牌色不只寫成 HEX，而要轉成 primary-500、text-default、surface-muted 這類可被設計與工程共用的命名。這一步做不好，Figma 看起來一致，上線後仍可能變成另一套顏色。
品牌規範其實是企業的防呆系統
品牌規範的價值不只在美感，而在降低重複溝通、錯誤用色與素材重做。當每次做社群圖、簡報、Banner 都要重新問一次規則，通常表示品牌規範還沒有變成團隊可用的防呆系統。
| 常見情境 | 沒有規範時的問題 | 規範如何解決 |
|---|---|---|
| 社群圖 | 每位小編使用不同字體、色彩與標題比例 | 提供社群模板、字級層級、品牌語氣與禁用範例 |
| 簡報 | 業務簡報和官網視覺像不同品牌 | 定義封面、標題頁、圖表色與版面間距 |
| 官網 Banner | 外包設計每次都重新猜品牌風格 | 提供 Logo 安全距離、標準色、文字層級與圖片使用原則 |
| 外包廣告素材 | 色彩過度誇張，Logo 被拉伸或放錯位置 | 提供可交付給外包的品牌手冊與驗收清單 |
為什麼每次設計都重新溝通，是品牌規範不足的訊號
如果團隊每次都要問「這個藍可以嗎」、「Logo 能不能放在照片上」、「簡報標題要多大」，問題通常不是設計師不細心，而是規則沒有被文件化。好的品牌規範會把高頻問題先回答掉。
品牌規範的使用者不只有設計師
品牌規範會被行銷、業務、客服、人資、外包廠商、產品設計與前端工程使用。若文件只寫給品牌設計師看，就會忽略簡報、客服回覆、招募頁、產品介面等更常被客戶看見的接觸點。
AI 生成內容時代，品牌規範要管什麼？
AI 生成圖片與文案也需要品牌規範。至少要定義可使用的語氣、禁用詞、視覺風格邊界、Logo 是否可進入生成流程、人物與產品圖的使用限制。沒有這些規則，產出速度變快，但品牌偏差也會更快擴散。
品牌規範手冊的基本章節：SERP 共同必寫內容
一份基本品牌規範手冊至少要包含 Logo、標準色、輔助色、字體、留白、安全距離、最小尺寸、不適用範例與應用場景。這些內容是後續延伸到設計系統與數位產品前的基礎。
| 章節 | 應包含內容 | 驗收重點 |
|---|---|---|
| Logo 規範 | 主標誌、橫式、直式、單色版、反白版 | 比例不能被任意拉伸或重畫 |
| 色彩規範 | 標準色、輔助色、黑白版、反白版、HEX、RGB、CMYK | 數位與印刷色值要分開標示 |
| 字體規範 | 品牌字體、替代字體、標題與內文字級 | 要考慮網頁字體與系統字體 |
| 留白與尺寸 | 安全距離、最小尺寸、置放比例 | 小尺寸仍需清楚可辨識 |
| 不適用範例 | 變形、改色、加陰影、低對比背景、錯誤裁切 | 禁用情境要具體 |
| 應用場景 | 名片、簡報、社群、網站、產品介面 | 不要只停在印刷物 |
Logo 與標準字使用規範
Logo 規範要說明主標誌、標準字、組合版型與不同背景上的使用方式。若品牌有中英文名稱，也要定義何時使用中文、英文或雙語組合。
標準色、輔助色、黑白版與反白版
標準色代表品牌最核心的視覺記憶，輔助色用來支援版面層次。黑白版與反白版則處理低彩度、深色背景或特殊輸出情境。
字體、字級與文字使用規範
字體規範不能只寫品牌指定字體，還要說明替代字體、網頁使用字體、標題層級、內文字級與行距。延伸閱讀可參考 品牌字體選擇。
留白、安全距離與最小尺寸
安全距離會避免 Logo 被其他元素擠壓，最小尺寸則確保縮小後仍能辨識。這些規則對社群頭像、App icon、網站導覽列尤其重要。
不適用範例：哪些用法一定要禁止
不適用範例應明確列出不可拉伸、不可任意改色、不可加外框、不可放在低對比背景、不可拆解標誌元素。禁止規則寫得越具體，外包協作越少來回。
應用場景：名片、簡報、社群、網站與產品介面
品牌規範手冊若只展示名片與信紙，會不夠支援今日的品牌接觸點。網站、App、SaaS 後台、社群模板、簡報模板都應納入基本應用範圍。
Digital First 品牌規範：從 Logo 手冊到設計系統
Digital First 品牌規範會把品牌識別延伸到網站、App、後台系統、社群模板與 AI 內容。品牌規範若只管 Logo，無法管理使用者在產品中的完整體驗。
| 項目 | 傳統品牌規範 | 數位品牌規範 |
|---|---|---|
| 色彩 | 標準色與印刷色值 | 介面色、語意色、深色模式、對比規則 |
| 字體 | 品牌字體與標準字 | 網頁字體、字級階層、行距、RWD 調整 |
| 版面 | 平面比例與留白 | 網格、間距 token、斷點、內容密度 |
| 互動 | 少量或未定義 | hover、focus、error、loading、disabled |
| 內容 | 品牌標語與簡介 | 按鈕文字、空狀態、錯誤訊息、客服語氣 |
為什麼傳統 VI 手冊不夠支援網站與 App
傳統 VI 手冊擅長處理靜態視覺，但網站與 App 有互動狀態、表單錯誤、RWD、深色模式與無障礙問題。這些情境如果沒有規範，產品體驗會在細節中分裂。
數位產品需要新增哪些品牌規範
數位品牌規範要新增介面色彩、文字層級、按鈕樣式、表單狀態、提示訊息、圖示風格、動態節奏、無障礙對比與內容語氣。它也應和 8pt grid spacing 這類版面規則銜接。
社群、廣告素材與 AI 內容模板也要納入規範
社群與廣告素材的產量通常比官網高，更需要模板規則。AI 內容則要補上提示詞邊界、語氣範例、禁用視覺與審核流程，否則大量產出的內容很容易稀釋品牌一致性。
品牌規範如何轉成 Design Tokens？
品牌規範轉成 Design Tokens，就是把品牌色、字體、間距、圓角、陰影與互動狀態，改寫成設計與前端都能引用的變數。這是品牌規範整合進設計系統的核心步驟。
| 品牌規範項目 | 設計系統項目 | 工程命名範例 |
|---|---|---|
| 品牌主色 | Primary color scale | color-primary-500 |
| 輔助色 | Secondary color scale | color-secondary-400 |
| 錯誤提示色 | Semantic color | color-danger-600 |
| 標題字級 | Typography scale | font-size-heading-lg |
| 版面留白 | Spacing token | space-24 |
| 卡片圓角 | Radius token | radius-md |
| 按鈕 hover | Component state | button-primary-hover-bg |
色彩：從品牌標準色到 primary / secondary / semantic color
品牌標準色可以轉成 primary 色階，但產品介面還需要 text、surface、border、success、warning、danger 等語意色。品牌色彩心理可延伸參考 品牌色彩心理學。
字體：從指定字體到 typography scale
字體規範要轉成 heading、body、caption、label 等層級，並定義字重、行高與字距。只指定一套品牌字體，無法回答表單標籤、錯誤訊息、卡片標題該怎麼排。
間距：從版面感覺到 spacing token
「看起來舒服」不能成為可維護規則。間距應轉成固定階層，例如 4、8、12、16、24、32，讓 Figma 與前端在版面密度上有共同語言。
圓角、陰影、動態與互動狀態
圓角與陰影會影響品牌個性，動態則影響產品節奏。若品牌走專業可信路線，過大的圓角、過重的陰影、過度活潑的動畫都可能造成識別落差。
什麼項目不適合直接 token 化？
品牌理念、攝影情緒、文案語氣與複雜版面判斷，不適合全部硬轉成 token。這些項目更適合用原則、範例、禁用情境與審核標準管理。
Figma、品牌規範與前端元件要如何同步？
同步的重點是先固定品牌基礎，再把規則轉成設計變數、Figma 元件、前端命名與驗收清單。若設計端和工程端各自維護一套規則，品牌規範很快就會失效。
- 定義不可變的品牌基礎。
- 轉成設計變數與 token 命名。
- 建立 UI 元件與使用情境。
- 同步前端元件、狀態與文件。
- 用驗收清單檢查上線結果。
第一步：先定義不可變的品牌基礎
不可變基礎包含 Logo 比例、品牌主色、核心字體、品牌語氣與禁用規則。這些項目一旦頻繁改動，後面的 Figma library 與前端元件都會跟著不穩。
第二步：把品牌規範轉成設計變數
把顏色、字級、間距、圓角、陰影轉成設計變數，讓設計師不再手動輸入色碼與字級。這一步會直接影響 Figma 元件庫的品質。
第三步：建立 UI 元件與使用情境
元件不只要有外觀，還要寫清楚使用情境。例如主要按鈕用於關鍵操作，次要按鈕用於輔助動作，危險按鈕用於刪除或不可逆操作。
第四步：和前端命名、狀態、文件同步
Figma 元件名稱應盡量對齊前端元件，例如 Button、Input、Modal、Toast。狀態也要一致，包含 default、hover、focus、error、disabled、loading。
第五步：用驗收清單避免設計和上線結果分裂
驗收清單要檢查色彩 token、字級、間距、RWD、無障礙對比、元件狀態與文字語氣。沒有驗收機制，設計系統只會停在設計檔裡。
不同企業規模，品牌規範與設計系統要做到多完整？
品牌規範與設計系統不必一開始就做成大型系統。企業應依通路數量、產品複雜度、團隊規模與維護能力，選擇基礎版、進階版或設計系統版。
| 層級 | 適合對象 | 優先交付 | 不必急著做 |
|---|---|---|---|
| 基礎版 | 中小企業、剛建立品牌的新創 | Logo、色彩、字體、留白、不適用範例 | 完整前端元件庫 |
| 進階版 | 電商、多通路品牌、內容產量高的團隊 | 社群模板、簡報模板、數位色彩、文字語氣 | 複雜治理流程 |
| 設計系統版 | B2B SaaS、App、後台系統、成熟產品團隊 | Design Tokens、Figma library、前端元件、版本控管 | 過度裝飾性的品牌展示頁 |
基礎版：先確保品牌不走樣
基礎版的目標是避免 Logo 變形、色彩亂用、字體不一致。對預算有限的公司，這比先做完整設計系統更實際。
進階版：支援多通路內容產出
當品牌開始同時經營官網、社群、廣告、簡報與電子報，就需要進階版品牌規範。它的重點是讓行銷素材可以快速產出，同時不偏離品牌識別。
設計系統版：支援產品、工程與長期維護
若企業有網站會員區、App、SaaS 或後台系統，就應考慮設計系統版。它會把品牌規範延伸到元件、狀態、token、文件與前端驗收。
預算有限時，哪些項目優先做？
優先順序建議是 Logo 規範、色彩與字體、常用模板、數位介面色彩、基礎元件。我的觀察是，很多團隊不是缺更多規則，而是缺少能解決高頻錯誤的前五條規則。
品牌規範不只管視覺，也要連到理念與行為
品牌規範不能只管理視覺，還要連到品牌理念、服務行為與溝通語氣。若只管 Logo 和顏色，客服、業務、行銷與產品仍可能各說各話。
MI：品牌理念如何影響設計判斷
MI 理念識別會影響設計取捨。例如品牌若強調專業可信，介面就不宜過度使用跳動動畫與高飽和配色。理念不是寫在簡介裡就好，它要能指導實際判斷。
BI：服務行為與溝通語氣也要有規範
BI 行為識別包含客服回覆、銷售簡報、售後通知、社群留言與錯誤訊息。當品牌語氣沒有標準，使用者會在不同接觸點感受到不同人格。
VI：視覺識別如何承接理念與行為
VI 視覺識別應承接 MI 和 BI，而不是單獨存在。若品牌主張清楚、行為規則清楚，視覺規範就更容易判斷什麼能用、什麼會偏離。可延伸閱讀 品牌識別設計指南。
治理與版本控管：誰可以修改品牌規範？
品牌規範與設計系統都需要治理，否則文件會過期、元件會分裂、前端會另開規則。最小治理模型應包含 Owner、Reviewer、Contributor 和 User。
| 角色 | 責任 | 常見人選 |
|---|---|---|
| Owner | 決定規範方向、維護版本、核准重大變更 | 品牌負責人、設計系統負責人 |
| Reviewer | 審查規則是否符合品牌、產品與工程需求 | 行銷主管、UIUX lead、前端 lead |
| Contributor | 提出新增元件、模板或規則調整 | 設計師、工程師、內容負責人 |
| User | 依規範製作素材、設計介面或開發元件 | 行銷、業務、客服、外包廠商 |
品牌規範與設計系統都需要 Owner
沒有 Owner 的規範，很容易變成每個人都能改、但沒有人負責。Owner 不一定要親自製作所有內容，但必須管理方向、版本與審核節奏。
版本控管要記錄什麼？
版本紀錄應包含更新日期、修改內容、影響範圍、負責人與採用時程。若變更了品牌色或按鈕 token，也要讓設計檔與前端元件同步更新。
什麼情況需要更新品牌規範？
品牌定位調整、產品線增加、新通路上線、深色模式導入、無障礙要求提高、外包誤用頻繁，都是更新規範的訊號。更新不是重做，而是補齊新情境。
外包、行銷、工程如何共用同一份標準？
外包需要精簡可執行版，行銷需要模板與語氣範例，工程需要 token 與元件規格。共用同一份標準不代表所有人看同一份長 PDF，而是同一套規則有不同使用入口。
品牌規範與設計系統的交付清單
整合型交付應包含規範文件、設計資產、Figma 元件庫、Design Tokens、前端對照與驗收清單。交付內容要依品牌規範版、數位品牌版、設計系統版分層確認。
| 版本 | 主要交付物 | 驗收重點 |
|---|---|---|
| 品牌規範版 | 品牌手冊、Logo 檔案、色彩規範、字體規範、不適用範例 | 能否避免基本視覺誤用 |
| 數位品牌版 | 網站色彩、社群模板、簡報模板、內容語氣、介面基礎規則 | 能否支援多通路素材產出 |
| 設計系統版 | Figma library、Design Tokens、元件文件、前端命名、版本規則 | 能否支援產品設計與工程落地 |
品牌規範版交付項目
品牌規範版應交付 Logo 原始檔與常用格式、標準色、輔助色、字體規範、留白、安全距離、最小尺寸、不適用範例。更多基礎架構可參考 品牌規範手冊。
數位品牌版交付項目
數位品牌版要加入網站與社群使用規則，包含按鈕視覺方向、Banner 文字層級、社群版型、簡報模板、廣告素材限制與 AI 內容規範。
設計系統版交付項目
設計系統版應包含 Figma 元件庫、Design Tokens、基礎 UI 元件、元件狀態、RWD 原則、無障礙檢查、前端命名對照與 release note。
驗收時要檢查哪些細節？
- Logo 是否有正確格式、尺寸與禁用範例。
- 色彩是否同時支援品牌、介面與語意狀態。
- 字體與字級是否能用於網站和產品介面。
- Figma 與前端命名是否一致。
- 是否有 Owner、更新規則與驗收清單。
常見錯誤：品牌規範和設計系統整合失敗的原因
整合失敗通常不是文件不漂亮，而是文件不可用、命名不一致、責任不清或缺少維護。真正有用的品牌規範，必須能被團隊拿來做決策與驗收。
| 錯誤 | 會造成什麼問題 | 怎麼修正 |
|---|---|---|
| 只做漂亮 PDF，沒有可用元件 | 設計師仍需重畫介面 | 補上 Figma 元件與常用模板 |
| 色彩命名只看品牌名稱 | 前端不知道錯誤、成功、背景色怎麼用 | 建立 primary、semantic、surface 命名 |
| Figma 和前端各自維護 | 設計稿和上線結果長期不一致 | 建立 token 對照與同步流程 |
| 規範過細 | 團隊不敢使用，反而每次都請示 | 區分硬性規則與彈性原則 |
| 沒有 Owner | 半年後文件過期，沒有人敢改 | 指定 Owner、Reviewer 與更新節奏 |
只做漂亮 PDF，沒有可用元件
漂亮 PDF 可以建立專業感，但無法直接支援日常產出。若沒有模板、元件與檢查清單，團隊仍會回到自由發揮。
色彩命名只看品牌名稱，沒有產品語意
把顏色命名為 brand-blue 或 brand-gold 不夠。產品還需要文字色、背景色、邊框色、成功色、警示色與錯誤色，否則前端只能自行推測。
Figma 和前端各自維護一套規則
這是最常見也最昂貴的分裂。設計端改了色彩，前端沒有更新；前端新增狀態，設計端沒有文件，最後產品每頁都長得不太一樣。
規範過細，反而讓團隊不敢使用
規範不是越多越好。過度細碎的限制會讓行銷與產品團隊失去判斷能力。該硬的規則要硬，例如 Logo 不可變形；可彈性的原則要留給情境判斷。
沒有 Owner，半年後文件就過期
品牌規範和設計系統都會隨產品與通路變化。沒有 Owner，文件很快會變成歷史資料，而不是現在的標準。
導入順序：先做品牌規範，還是先做設計系統？
導入順序取決於品牌穩定度、產品複雜度、團隊協作成本與維護能力。品牌還不穩定時先做品牌規範，產品已經混亂時先整理設計系統，兩邊都要擴張時同步整合最有效。
品牌還不穩定：先做品牌規範
如果品牌色、Logo、語氣、受眾與視覺方向都還在變，就不適合先投入完整設計系統。先把品牌識別整理清楚，後續 token 與元件才有穩定來源。
產品已經混亂：先整理設計系統
若產品內已有多套按鈕、多種表單、多個色彩版本，設計系統整理應優先。此時可以同步補上品牌規範缺口，先處理會影響開發與維護成本的問題。
品牌與產品都要擴張：同步整合最有效
若企業正在重整品牌，同時也要改版官網、App 或 SaaS，品牌規範與設計系統應同步規劃。這能避免新品牌做完後，產品端又用舊規則重建一次。
結論：整合的目標不是文件更多，而是決策更少
好的設計系統與品牌規範整合，會減少團隊每天重複做的小決策。顏色怎麼用、字級怎麼排、按鈕有哪些狀態、外包素材怎麼驗收，都應該有清楚答案。品牌一致性的延伸閱讀可看 品牌形象一致性。
品牌規範和設計系統差在哪？
品牌規範管理品牌識別如何被使用，例如 Logo、色彩、字體、語氣與應用規則。設計系統管理數位產品如何被設計與開發，例如元件、Design Tokens、互動狀態、Figma library 與前端元件。兩者整合後，品牌規範會成為設計系統的上游標準。
品牌規範手冊通常包含哪些內容？
常見內容包含 Logo 使用規範、標準色、輔助色、字體規範、留白、安全距離、最小尺寸、不適用範例、應用場景與品牌語氣。若要支援數位產品，還應加入介面色彩、字級階層、元件狀態與 Design Tokens 對照。
小公司也需要品牌規範嗎？
需要，但不一定要做完整大型手冊。小公司可以先做基礎版，包含 Logo、色彩、字體、常用模板與禁用範例。只要開始委外設計、經營社群或製作簡報，品牌規範就能減少重工與溝通成本。
只有 Logo 規範，算不算品牌規範？
只能算是品牌規範的一部分。Logo 規範可以避免標誌誤用，但無法管理色彩、字體、內容語氣、社群模板、網站介面與產品元件。若品牌接觸點超過一種，就應補上更完整的品牌規範。
品牌色要怎麼轉成 Design Tokens？
先把品牌主色建立成 primary 色階，再補上 secondary、surface、text、border、success、warning、danger 等語意色。命名應讓設計與前端都看得懂，例如 color-primary-500、color-text-default、color-surface-muted。
品牌規範可以直接套進 Figma 元件庫嗎？
不能直接套用，通常需要轉換。品牌規範要先拆成設計變數、樣式、元件狀態與使用情境，再放進 Figma 元件庫。若只把 PDF 放進 Figma，設計師仍然需要手動判斷每個介面細節。
設計系統一定要工程師一起參與嗎？
如果設計系統要支援正式產品，就應該讓工程師參與。原因是 Design Tokens、前端元件、互動狀態、RWD、無障礙與版本控管都會影響實作。只有設計端參與，容易變成漂亮但難以落地的 UI Kit。
品牌規範做完後，多久需要更新一次？
沒有固定週期，但每次品牌定位調整、產品線增加、新通路上線、網站或 App 改版、外包誤用變多時，都應檢查是否需要更新。成熟團隊通常會用版本紀錄管理變更，而不是等到文件完全過期才重做。
品牌規範設計通常會交付哪些項目？
常見交付包含品牌手冊、Logo 檔案、色彩規範、字體規範、不適用範例、應用模板。若範圍包含設計系統，還會有 Figma library、Design Tokens、元件文件、前端命名對照與驗收清單。
預算有限時，應該先做品牌手冊還是設計系統？
若品牌識別還不穩定，先做品牌手冊。若產品介面已經混亂、開發重工嚴重，先整理設計系統的基礎元件與 token。預算有限時，先解決最常發生、最影響團隊效率的問題。
AI 生成圖片或文案需要遵守品牌規範嗎？
需要。AI 生成內容應遵守品牌語氣、禁用詞、色彩方向、圖片風格、Logo 使用限制與審核流程。若沒有規範，AI 會放大不一致問題，讓大量內容看起來像不同品牌產出。
品牌規範可以取代商標註冊嗎？不行，這屬於法律與商標保護範圍，不是本文主題。
不行。品牌規範處理的是品牌識別如何被使用與維護，商標註冊處理的是法律保護與權利歸屬。兩者目的不同，品牌規範不能取代商標註冊，也不應被當成法律文件使用。