把官網首頁跟粉絲專頁的貼文並排放在同一個畫面，不少品牌主第一次這樣比對，會愣住幾秒。同一個 LOGO、同一組色票，兩邊看起來卻像兩個不同的品牌在說話，字體大小不對版、色彩深一號淺一號、輔助圖形一邊有一邊沒有，細節兜不起來的地方一抓一大把。
問題通常不在識別系統（CIS）手冊做得不夠仔細。手冊裡該有的都有，CMYK 色號、名片上的安全留白幾公分、Logo 最小印刷尺寸，規範寫得清清楚楚。真正的落差在於，手冊寫的是印刷品跟實體物件的語言，螢幕是另一套規則。這個顏色在螢幕上該用什麼值、這套字體能不能直接放上網站、輔助圖形怎麼變成社群模板可以套用的版位規則，手冊裡通通沒說。品牌識別數位延伸，講的正是這段轉譯，把色彩、字體、輔助圖形這三個核心元素，從印刷語言翻成網站與社群版位可以直接套用的規則。先從色彩系統為什麼換了場域就失效講起，再一路拆到字體、輔助圖形跟版面。
CIS 規範做完，官網跟社群版面為什麼還是兜不起來？
落差的根本原因，不是規範寫得不夠仔細，而是規範用的語言換了顯示的場域就失效。印刷品的色彩系統靠 CMYK 或指定專色，靠油墨疊加吸收光線做出顏色；螢幕靠 RGB 加色，靠螢幕本身發光疊出色彩。兩者本來就是不同的物理原理，同一組數字放到不同介質，呈色深淺、飽和度都會不一樣，這也是為什麼很多人直接把 CMYK 數值套進網頁的色碼欄，結果螢幕上的顏色跟印出來的完全對不上。W3C 的 CSS Color Module Level 4 規格，把 RGB 與十六進位色碼（HEX）訂為螢幕環境通用的顏色表示格式，網站的色彩系統本來就該從這一套語言重新定義，不是延用印刷色號。
字體也一樣。多數品牌手冊談的字體授權，只涵蓋桌面軟體排版使用，沒有一併談到網頁嵌入，這是兩件分開計費、分開約定的事。把品牌字體檔案直接丟上網站伺服器，讓瀏覽器下載後嵌入顯示，如果授權條款沒涵蓋這個用途，等於在沒有授權的狀況下對外散布字體檔案，這個技術細節很容易在做完視覺規範後被忽略，直到網站真的要上線才發現卡關。
版面規範也卡在同一個結構性問題上。手冊裡的留白比例跟版型格線，是為名片、海報這類固定尺寸設計的；網站卻要在手機、平板、桌機各種寬度下彈性伸縮，同一套留白比例套用到不同螢幕寬度，節奏感就跑掉。社群又反過來，被平台規定的固定版位尺寸卡死，沒辦法像網站一樣彈性伸縮。色彩、字體、版面，三條路都要各自重新定義一套適合數位環境的規則，這就是接下來要逐一拆解的內容。
品牌色票，怎麼變成網站看得懂的顏色？
色彩轉譯的第一步，是把印刷色值換算成螢幕看得懂的格式。CMYK 或 Pantone 專色本身是為了印刷油墨配色，直接查表轉成最接近的 HEX 色碼只是起點，轉換完成後最好實際拿到螢幕上比對。同一個品牌主色，螢幕顯示常常比印刷品更飽和、更搶眼，原因是螢幕的色域跟印刷的油墨色域本來就不對等，某些顏色印刷做不出來，螢幕卻能發得又亮又滿。與其死守換算出來的數字，不如把螢幕實際呈現的效果當成最終標準，必要時微調飽和度或明度，讓螢幕上的品牌色看起來跟印刷品同一個色系，而不是數字上一模一樣。
第二件事，是把「一色到底」的品牌主色，拆成有明確用途的色彩角色。多數品牌手冊只給一個主色跟一個輔色，套到網站上卻遠遠不夠，按鈕要有顏色、連結文字要有顏色、錯誤提示要有顏色、背景跟前景也要有顏色，如果整站到處塞同一個主色號，不但顏色用途混亂，某些場合的對比也會不合格。比較好的做法是把品牌色系拆成主色、輔色、文字色、背景色、狀態色（例如錯誤提示用的警示色）等幾個角色，每個角色各自對應網站上不同的用途。Figma 官方文件介紹的顏色變數功能，示範的正是這種依用途分類、而不是依色號命名色彩的做法，設計端定義好每個角色該用哪個顏色，網站開發端直接照角色套用，不必每次都回頭查色號對照表。
第三件事是無障礙對比，這是印刷品完全不用煩惱、螢幕卻躲不掉的問題。名片上的字，不管對比多低，讀者拿到眼前總能看清楚；網站上的文字對比不夠，在強光下的手機螢幕、或視力不好的使用者眼中，可能直接讀不出來。品牌色如果本身彩度高、明度中等，拿來當背景色或大面積裝飾通常沒問題，但若直接套用在小字級的內文上，對比不足的風險就很高，這一點下一段會再拆開來看怎麼調整。
品牌色對比不夠，網頁上怎麼調整才不失真？
品牌色本身對比不夠，最常見的處理方式是整組換掉，改用一個安全的深灰或純黑當文字色。但這樣一換，網站看起來就跟品牌手冊脫鉤，讀者感覺不到「這是同一個品牌」。更好的做法是保留同一個色相，只調整明度或彩度，讓文字色跟品牌主色維持在同一個色系，只是深淺不同。
調整前，先分清楚這個顏色的用途是裝飾還是承載文字。W3C 網頁無障礙倡議（WAI）對於對比的規範，一般內文文字要求對比至少達到 4.5:1，字級較大的標題文字（約 18 點或以上，粗體則約 14 點以上）門檻放寬到 3:1；純粹裝飾用途、不承載可讀資訊的圖形色塊，則不受這個門檻限制。也就是說，同一個品牌色，拿來當大標題或裝飾色塊可能完全過關，拿來當內文小字就會踩線，不必因為某個場合對比不足，就否定整個顏色在其他場合的可用性。
實際調整時，先把品牌色的明度往深或往淺推，直到小字級的對比達標，再拿這個微調後的版本專門給內文文字用；大標題、按鈕背景這類本來對比要求就寬鬆的地方，維持接近原色的版本即可。同一個品牌色因此會有「文字用」跟「裝飾用」兩個略有差異、但同色系的版本，而不是為了通過檢查放棄品牌色，改用一個跟識別系統完全無關的顏色。
品牌字體搬上網站，最容易踩到的是授權地雷
字體轉譯最容易被忽略的第一個技術眉角，是授權範圍。品牌字體如果是購買來的商業字型，合約當初談的多半是桌面排版軟體的使用範圍，設計師在電腦裡用這套字體做輸出稿，通常沒問題。但要把字體檔案直接放到網站伺服器上，讓瀏覽器下載後嵌入顯示，這是完全不同的使用方式，是否涵蓋在原本的授權裡，得回頭確認合約條款，不能想當然耳直接上傳了事。
如果查證後發現授權不涵蓋網頁嵌入，或者根本找不到明確的授權說明，合理的做法不是硬著頭皮上傳，而是找一套風格相近、明確授權可商用的網頁字體來代替。Google Fonts 官方的常見問答說明，平台上多數字體採用開源授權，允許商業使用與網頁嵌入，不需要額外付費或申請授權，但個別字體仍有各自的授權條款，選用前還是要核對清楚。找到風格相近的替代字體，搭配品牌原本的色彩跟版面規則，通常就能維持視覺上的一致感，不必為了堅持用某一套字體而冒授權風險。
第二個容易被忽略的技術眉角，是效能。中文字體檔案動輒收錄上萬個字，體積遠比只有一百多個字母跟符號的英文字體大上許多倍；網站如果直接載入整套中文字型，光是下載字體檔案就會拖慢頁面顯示速度，讀者要多等好幾秒才看得到文字。實務上的解法是子集化，也就是只保留網站實際會用到的字，或者更保守一點，只在首頁主視覺、大標題這類最需要品牌辨識度的區塊使用品牌字體，內文正文改用效能較好、風格相近的替代字體，兼顧品牌一致感跟載入速度。
字級階層怎麼從印刷品的版面搬到網站？
多數品牌手冊在字級這件事上，規定得相當簡單，通常只分「標題字」跟「內文字」兩層，搭配各自的字體跟字重。這在名片、海報這類單頁印刷品上完全夠用，畢竟一張名片能容納的文字階層本來就有限。
網站的文字階層卻複雜得多。一個頁面可能同時出現主標題、次標題、小標題、內文、按鈕文字、註解文字等好幾種層級，如果每一層的字級都是設計師憑感覺挑一個數字，不同頁面、不同時期做出來的字級很容易對不齊，網站看起來會有一種說不出的凌亂感。
比較穩妥的做法，是訂出一套字級的級距倍率，用一個基準字級（通常是內文的字級）當起點，往上用固定的倍率往外推，推出次標題、標題、主標題各自的字級；按鈕文字、註解文字則往下推出比內文略小的字級。整套階層一旦定出倍率規則，之後不管網站新增哪一種文字元件，都直接套進這套級距裡挑一個對應的層級，不用每次都重新決定這個地方的字該多大。
LOGO 之外的輔助圖形，要拆解才能變成網站跟社群的視覺語彙
品牌手冊裡的輔助圖形，通常只給幾張示範圖，像是一張海報範例、一張周邊商品的效果圖，用來展示這套圖形語彙大概長什麼樣子。但這幾張示範圖沒有說明，同一套語彙要怎麼拆解，才能重複用在網站的各個角落跟社群貼文的各種尺寸上。
轉譯的關鍵，是把整張輔助圖形拆解成幾個可以獨立使用的小單位，一條線條、一塊色塊、一個局部圖案，而不是把整張示範圖原封不動搬過去。拆成小單位之後，同一套語彙就能分別套進不同位置。網站上可以用線條當內容區塊之間的分隔線，用局部圖案當背景的裝飾紋理，用色塊當某個功能圖示的底色；社群貼文則可以用同一套線條或色塊做成封面的邊框、輪播卡片的邊界，讓不同版位上看到的圖形，雖然構圖各不相同，用的卻是同一套視覺語彙，一眼就能認出是同一個品牌。
要讓這套拆解真正好用，還有一個原則要顧，輔助圖形不能做成「一張不能改的完稿圖」，而是要做成可以依內容長短、版位大小伸縮或重組的規則。舉例來說，一個做手工烘焙的品牌，如果輔助圖形是一條波浪狀的裝飾線，做成規則後，不管是塞進網站頁尾的窄長版位，還是社群貼文的正方形版位，都能照著同一套邏輯重新排列組合，而不是每次遇到新版位就得重新設計一張圖。這種依用途拆解、依規則組合的思維，跟 Figma 說明文件示範的變數與元件管理概念相通，設計端把可重複使用的元素拆解定義好，不同場合直接套用組合，不必每次從頭畫。
品牌手冊的留白與版型比例，怎麼換成網站的網格與斷點？
翻開品牌手冊裡管版面的那幾頁，常見的寫法是「名片四周至少留白 0.5 公分」「海報主視覺置中，上下各留一定比例的空間」。這些數字都是針對一個固定尺寸算出來的，換到網站上完全找不到對應的「這一頁」尺寸可以套用。
比較好的做法，是把手冊裡的留白比例換算成一套間距倍率，先訂一個基準間距值當單位，再用固定的倍率往上做出幾個級距，例如小間距、中間距、大間距、超大間距各自對應基準值的幾倍。網站上不管是段落之間的距離、區塊跟區塊的距離，還是頁面邊界的留白，都從這套級距裡挑一個對應的倍率，而不是每個頁面各自憑感覺抓留白大小。
響應式網站還有一層印刷品完全不用處理的問題，同一個頁面要在手機、平板、桌機等不同螢幕寬度下都維持一致的節奏感，原本「固定留白幾個像素」的規則，在窄螢幕上會顯得太擁擠，在寬螢幕上又顯得太鬆散。解法是把留白從固定數值改成隨螢幕寬度等比例縮放的規則，螢幕越寬，留白等比放大；螢幕越窄，留白等比縮小，讓不同裝置看到的版面雖然尺寸不同，視覺節奏卻是同一套邏輯。
社群貼文剛好相反，沒有斷點的概念，每個版位的尺寸都是平台訂死的固定值。Meta 官方針對貼文、限時動態、封面等不同版位，各自訂出建議的最小圖片尺寸，設計師沒辦法像網站一樣彈性伸縮版面。但只要同一套網格比例、字級階層、色彩角色規則都套用得一致，不同尺寸的貼文排出來，還是能讓人一眼認出是同一個品牌在說話，不需要每個版位都重新設計一套版面邏輯。
網站跟社群，同一套規則要怎麼各自變通？
把前面幾條轉譯路徑收攏起來看，網站跟社群面對的限制其實完全不同，變通的方式也該不一樣。網站要顧的是多種裝置寬度，還要顧無障礙對比這類法規等級的門檻，規則本身可以寫成一條彈性的公式，留白隨螢幕寬度縮放、對比隨文字用途調整，套用時交給程式判斷，不需要人工逐一決定。社群被平台的固定尺寸卡死，大頭貼、互動按鈕的位置也是平台既有的介面元素，規則沒辦法寫成彈性公式，只能做成幾種固定尺寸各自對應的排版樣板。
同一組色彩角色、字級階層、圖形語彙，套到網站上會變成一套隨螢幕縮放的彈性版本，套到社群模板上則會變成幾種固定尺寸各自對應的版本。像是正方形貼文一套排版、直式限時動態一套排版、橫式封面又是一套排版，但用的色彩角色、字級級距、圖形拆解規則，都跟網站那套完全一致。網站要遵守 W3C 網頁無障礙倡議訂出的對比門檻，社群模板要遵守 Meta 官方公告的各版位尺寸限制，這是兩邊各自躲不掉的天花板。
真正該追求的變通方向，是「規則相同、呈現方式不同」，而不是網站設計一套、社群模板又各自重新設計一套。前者代表色彩、字體、圖形語彙背後只有一套邏輯在運作，不同版位只是這套邏輯的不同輸出；後者則等於每個版位都得從零開始討論，規則越做越分歧，最後又走回規範各管各的老問題。
怎麼讓轉譯規則變成好維護的系統，而不是又一份手冊？
前面幾節把色彩、字體、輔助圖形、版面都各自轉譯成一套規則，如果最後只是把這些規則寫成另一份 PDF 文件，換一個人接手，一樣會走樣。新來的工程師沒空細讀整份文件，小編憑印象抓色號，外包廠商拿到的又是舊版規格，同一個品牌很快又會分裂成好幾種樣子。
比較根本的做法，是把轉譯完的色彩、字級、間距值，定義成一組有語意的「變數」，而不是單純的色號或數字清單，例如把某個顏色命名為「主要按鈕色」，而不是只留一串色碼；字級命名成「內文字級」「大標題字級」，而不是「16 px」「32 px」這種只有數字沒有用途的名稱。這套做法目前已經有跨工具通用的共同格式標準，W3C 的 Design Tokens Community Group 在 2025 年發布了第一版正式穩定規格，讓設計軟體跟開發環境可以用同一份定義檔溝通，不必再靠人工對照色號表。之後要調整品牌色或字級，只要改這組變數的定義，所有套用這組變數的頁面跟模板會一併跟著更新，不需要逐頁手動修改。Figma 官方文件介紹的變數功能，示範的正是這套依語意命名、集中定義的做法。
社群模板端也能比照辦理，把常用的封面樣式、輪播卡片邊框、色塊組合做成一套可以重組的元件庫，而不是散落在硬碟各個資料夾裡的個別圖檔。小編要出一則新貼文，直接從元件庫裡挑對應的色彩、字級、圖形元件組裝，不必每次都重新翻找舊檔案東拼西湊。規則做成看得懂、可維護的系統，品牌識別數位延伸這件事才不會做一次就退化回原本各自為政的老問題。
CIS 識別元素真正跨進網站與社群，靠的不是再畫一次漂亮的規範手冊，而是把色彩、字體、輔助圖形、版面這幾條轉譯路徑，各自變成工程師、小編、外包廠商都能直接照著用的規則。色彩拆成有用途的角色，字體分清楚桌面授權跟網頁授權，圖形拆成可以重組的小單位，版面訂出一套間距與字級的級距。這些規則做成看得懂、可維護的系統之後，品牌才會在螢幕上跟在印刷品上一樣，看起來像同一個人在說話。