網站 Logo 不需要更漂亮：縮放、對比與配色的機制拆解

一個常見的開場：網站上線第三天，收到一句「看起來怪怪的，但說不上來哪裡」。回頭檢查，標誌是來回改過好幾輪的定案，顏色每個單看都順眼，放在同一頁卻像兩家公司的東西；切到瀏覽器分頁，圖示縮成一個說不清楚的小色塊，跟頁首那個精緻的標誌對不上。這種結果很少是美感問題。標誌合格、顏色好看、合起來怪，指向的通常是更底下那幾層沒被檢查過的機制。

把結論放在前面：讓網站視覺顯得廉價的原因，多半不是選色選得不夠漂亮，而是四個沒被看見的機制出了狀況。縮放，決定標誌在最小顯示環境裡還剩下什麼；對比，決定文字與圖形讀不讀得下去；角色，決定每個顏色有沒有明確的工作；色票管理，決定改一個顏色時，全站會不會跟著一致地動。這四層是空的，再漂亮的顏色放上去也撐不久；這四層穩了，美感才有地方落腳。

接下來以機制為主軸逐層拆解，工具教學放一邊。先談三個常見直覺為什麼失效，再從辨識往一致性推進：像素預算、檔案格式、對比計算、色彩角色、全域色票，收在一段由小到大的檢查順序。你可以先用手上的症狀對號：標誌像貼紙浮在頁面上、顏色互相打架、按鈕不顯眼、深色頁首整塊糊掉，四種症狀各指向不同層。剛起站、已有標誌但還沒有色彩系統、網站已上線想收斂，三種起點各取所需；每節結尾都會留下判斷條件或通過標準，讓你帶著決定離開，少背一點操作步驟。

快速重點：標誌先過兩關，最小顯示尺寸的辨識，加上深淺背景的對比。配色看每個顏色有沒有明確工作，答不出來就刪。檔案依用途分向量、點陣、印刷三路保存。色碼寫進全域設定，改色之前先記下舊值。

三個直覺，讓標誌與配色同時失靈

多數人動手前的想法差不多：挑一張喜歡的圖當標誌，再配幾個看起來順眼的顏色。這句話裡藏著三個直覺。一張圖檔可以全站通用；配色等於挑顏色；向量檔存好就一勞永逸。三個直覺在單一輸出情境都成立：只看一次、只看大圖、只在螢幕上看。網站的麻煩在於，它同時是分頁裡的小圖示、頁首的標誌、社群帳號的頭像，偶爾還要送去印刷，四種渲染條件並存，任何只對其中一種成立的決定，到了其餘三種就是缺陷。

把三個直覺逐一拆開。相信「一張圖檔走天下」的人，很快會發現同一個標誌在分頁糊掉、在頁首太碎、在深色頭貼上消失，因為不同環境需要的是同一個辨識核心的不同版本；同一張圖硬撐四個場景，缺陷就從這裡長出來。相信「配色就是挑顏色」的人，會在顏色越多越亂的迴圈裡打轉，因為質感由分工與限制長出來，顏色本身給不了這件事；顏色沒有貴便宜，沒有工作的顏色才顯得廉價。相信「向量檔一勞永逸」的人，會在送印或換平台時踩到細節：向量與否由圖形內容和匯出設定決定，不是副檔名說了算。

三個直覺共享同一個假設：觀看情境只有一個。標誌與配色真正要解決的，是在多尺寸、多背景、多平台的環境裡，維持同一個辨識核心與同一套用色邏輯。辨識與一致是兩組各自的工程條件，不是一次性的美感選擇；把它們當美感問題處理，就會不斷在換顏色、換模板之間擺盪，問題原地踏步。這條線在品牌識別系統的整體架構裡有更完整的鋪陳，先建立輪廓再動手，順序會穩很多。

把條件攤開，兩組工程各自有清楚的範圍。辨識這一組處理的是「認得出來」：最小尺寸下的輪廓、不同底色上的對比、簡化版與完整版的對應關係。一致這一組處理的是「到處一樣」：色碼有沒有統一管理、每個元件引用的是不是同一套定義、改動會不會同步到每個出現的地方。兩組條件都跟美感無關，它們更接近規格：可以寫下來、可以檢查、可以交給下一個人照著驗收。規格沒寫清楚之前就討論美感，等於在沒有地基的地方挑窗簾。

這個視角也解釋了為什麼換工具救不了廉價感。從一套設計工具換到另一套，像素預算的物理限制沒有變，明度對比的計算方式沒有變，繼承與覆寫的結構也沒有變；工具影響的是產出速度與門檻，機制影響的是結果的成敗。把預算花在升級工具、捨不得花一小時檢查機制，是常見的投資錯位。

如果你已經有感覺，可以先做症狀定位，再決定從哪一層讀起：

• 標誌在版面裡格格不入。它沒有被放進網站的用色與空間結構，問題多半在角色層。
• 多個鮮豔顏色同時搶戲。明度階層接近、彩度彼此競爭，問題通常在對比層。
• 主要按鈕存在感薄弱。行動色與環境的對比不足，或顏色沒有專屬工作，檢查對比與角色兩層。
• 深色頁首上的標誌失去輪廓。缺少深底可用的對比或變體，問題橫跨縮放與對比。

三種開局也各有一條最短路徑。全新開站的人沒有歷史包袱，把四個機制一次建對，成本最低；已經有標誌、還沒有色彩系統的人，從對比與角色兩層切入，用現有標誌反推規則；網站已上線、配色已經散掉的人，先別急著換新色，收斂既有顏色的優先序高於引進新顏色。往下每一層都先講原理，再講失效邊界；工具只作為機制的載體出場，因為換一套工具，不會改變這些條件。顏色選定之後要怎麼守住，還可以對照品牌色的挑選原則。

縮到 16 像素之後，標誌發生了什麼

先答核心問題：在設計工具預覽裡清楚的標誌，縮小後認不出來，是因為可用像素變少。細節最先消失，接著輪廓塌掉，到頭來只剩明度對比承擔辨識。小尺寸的成績由筆畫粗細與明暗結構決定，跟配色好不好看關係不大。

算一下像素預算就明白。16×16 的分頁圖示只有 256 個像素，32×32 也不過 1,024 個；一個在大圖裡負責精緻感的髮絲襯線，在這個數量級裡連一行都畫不清楚。消失有順序：最細的筆畫與最小的間隙先不見，圖形輪廓跟著塌陷，剩下的就是一塊色與一個明暗關係。這也是字體編排的老規矩在小尺寸重新上演：筆畫密度越高、結構越細的標準字，縮小後越吃虧；粗細均衡、留白足夠的字形，在同樣的像素量裡存活率高得多。標準字的粗細與密度怎麼拿捏，標準字設計有完整的討論。

明度在這裡的角色值得單獨強調。人眼察覺「有東西」的最低限度靠明暗差，色相差在視野邊緣與低注意力狀態下幾乎失效，明暗差不會。分頁圖示被瞥到的那零點幾秒，讀者還沒開始看顏色，只剩明度結構在工作；這也是同一個標誌在深底與淺底經常需要不同配置的原因，識別核心相同，明度關係要重配。

大品牌的做法可以當參照：完整標誌之外，再準備一個只用於小尺寸的簡化圖形，可能是一個字母、一個符號或一個色塊。這不算偷工；先承認像素預算有限，專業分工才有起點。識別核心不變，版本因情境而異。更多這類簡化版圖示的觀察，可以看標誌設計案例與靈感的整理。

測試的方法比直覺可靠。別只在設計工具裡盯著預覽：把標誌匯出後放進瀏覽器分頁的實際環境，或在手機上開幾個分頁並排看；把螢幕截圖縮到實際尺寸再看一次也行。設計工具的預覽經過抗鋸齒與縮放運算，跟作業系統最終渲染的方式未必一致，字體在不同裝置上的筆畫表現也有差異。驗收標準很簡單：在真實環境裡、以真實尺寸，掃一眼就認得；需要盯著看才想得起來是誰，就還沒過關。

WordPress 對這件事有明確的機制。官方文件建議，站點圖示以一張至少 512×512 像素的正方形 PNG 上傳到 Site Icon 欄位，分頁、書籤與行動裝置主畫面需要的各種尺寸，都由系統自動產生。縮放交給系統之後，你要檢查的只剩一件事：縮到分頁大小之後，那個圖形還認不認得出來。系統保證的是尺寸齊全，不保證辨識度；辨識度是設計條件，不是縮放技術。

「先看小尺寸」不是審美偏好，是流量結構。依 Statista 的行動流量統計，全球網站流量近年約六成來自行動裝置；這些造訪看到的第一眼，常常是分頁與手機頁首裡的小圖，不是桌機頁首的完整標誌。手機頁首的高度與寬度限制屬於響應式設計的範圍，標誌要在那個環境裡準備可辨識的版本，別假設每個讀者都看得到大圖。

這一節的通過標準：標誌在分頁、手機頁首與深色環境都認得出來。任何一個環境不成立，先改圖形的明暗結構與筆畫粗細，配色留到機制都過了再談；順序對了，多數小尺寸問題根本動不到配色。

向量與點陣：同一個標誌的兩種命運

同一個標誌存成 SVG、PNG、PDF 三種檔案，不是浪費，是兩種渲染機制加一套印刷系統的分工。向量吃縮放，點陣吃相容，印刷又是另一個色彩與解析度的世界；沒有萬用檔，只有依用途分流的資產組合。

定稿之後，同一個標誌要依用途分流成幾份檔案，而不是找一個萬用檔：在頁首這類需要伸縮的位置用 SVG，交給社群平台或不相容向量的環境時用 PNG，送印則按印刷廠開出的規格輸出 PDF。檔案是不是向量，由設計元素與匯出設定共同決定，存成 PDF 不代表內容必然是向量；Canva 各方案能用的匯出格式也不同，下載前以帳號裡的實際選項為準。

原理可以拆開看。向量檔記錄形狀的數學描述，線條、曲線、填色都以座標與路徑表示，所以放大不失真，縮小也平滑。點陣檔記錄像素網格，每個格子一個顏色值，表現細膩的漸層與質感很強，但格子數量固定，放大等於把一個格子拉成好幾個，邊緣自然破碎。透明背景靠透明通道存在，下載時要確認通道真的被保留，透明版與底色版分開命名管理，才不會在深色頁首上出現一圈底色方塊。

印刷是另一套規則的環境。螢幕以光呈現顏色，紙以油墨呈現，色域不同，解析度的計量單位也不同；同一個色碼印出來偏暗或偏灰是常態，不是印刷廠出錯，是兩個系統的先天差異。送印前能做的檢查有兩個：把標誌轉成灰階，看明暗結構還在不在；再向印刷廠確認檔案格式、色彩模式與出血要求，照對方的規格輸出。印刷品的讀者不會縮放你的標誌，但會在單色與遠距的情境裡看到它，明度結構在印刷環境裡比在任何螢幕上都重要。

工具的方案差異，直接決定你手上會有什麼檔。Canva 免費與付費方案在可用格式與輸出功能上並不相同，出圖之前先到官方定價頁與帳號介面核對當期選項，不要用記憶裡的舊資訊預設。

邊界也要說清楚。向量不是效能保證，路徑複雜的向量檔，可能比壓縮過的點陣更大；部分舊環境與舊外掛對 SVG 的支援也不一致，遇到問題時先確認是格式支援，不是顏色或設計本身。上站之前的壓縮與格式選擇，屬於圖片 SEO與WordPress 圖片優化的範圍，方向只有一個：交給網站的每個檔案，都要在品質可接受的前提下壓到最小。

對比是算出來的，不是感覺出來的

每個顏色單看都不難看、組合起來讀起來吃力，原因幾乎都在明度。可讀性由前景與背景的相對亮度差決定，這是可以計算的量，不是觀感問題；明度階層接近的配色，彩度再協調也只是同一層的重複，層次感是對比給的，不是色彩數量給的。

明度與彩度經常被混為一談。把顏色想成兩個旋鈕：明度管深淺，彩度管鮮豔。層次與可讀性主要由明度差承擔，彩度管的是注意力與情緒。灰階預覽把彩度歸零，是個好用的觀察工具，但不能取代計算，因為眼睛對灰階的判斷會被面積與形狀誤導。真的要過關，就對照數字：WCAG 2.1 AA 規定一般文字的對比至少 4.5:1，大字與大型元件 3:1，這是條文數字，量得出來就量，不要用「看起來還好」代替。

對比的工作也不只發生在文字身上。按鈕邊框、輸入框、圖示、圖表的線條，只要承載意義，就有一組前景與背景的關係要檢查。顏色還不能是唯一的訊息通道：一部分讀者對某些色相的分辨能力有限，成功與錯誤如果只靠紅綠區分，在他們眼裡就是同一個狀態；補上圖形、文字或位置的差異，資訊才算送達。把對比當計算題的好處之一就在這裡：數字不會因為你沒想過就不存在。

計算通過還不夠，要到真實素材上複驗。以下是一個建構的檢驗情境：品牌色在純色背景上表現良好，疊到照片上卻濁掉或消失，因為照片自帶明暗與彩度，會跟你的顏色搶同一個頻道。做法很土，從免費圖庫挑幾張接近站點風格的照片，把品牌色與行動色分別疊上去看；行動色疊在照片上還要認得出來是可以點的東西，才算過關。只在純色底上好看的顏色，通用性不足，上線後遇到首圖與封面，問題就會浮出來。

色彩學的規則與心理效應，在這裡的位置是推演工具，不是鐵律。色相環上的關係幫你找候選，心理效應幫你預設讀者的反應方向，但效果依版面、產業與受眾而異，沒有一個顏色保證帶來特定感受。想把推演的根據補起來，可以看色彩學的基礎規則與色彩心理學的對照；用規則縮小範圍，用計算與實測做決定，順序不要顛倒。

讓配色變貴的，是限制不是顏色

畫面質感跟顏色數量、顏色好壞的關係，比想像中淡。質感來自兩件事：每個顏色有明確的工作，加上守住工作的使用紀律。顏色本身沒有貴便宜，沒有分工的顏色才顯得廉價；同一組色碼，在有紀律的系統裡是高級感，在沒有紀律的系統裡就是雜訊。

↔ 左右捲動檢視完整表格

角色	它的工作	通過標準
識別色	被記得：標誌與關鍵品牌元件的專屬色	縮小後仍指得到品牌，不與行動色混淆
行動色	被點擊：主要按鈕與連結的專屬色	在版面與照片上都認得出是可以點的
承載色	被閱讀：背景、文字、分隔與留白	長時間閱讀不吃力，層次靠明度差展開

識別、行動、承載，三種工作構成一個配色系統的骨架。分配的紀律只有一條：每多引進一個顏色，都要答得出它負責什麼；答不出來，刪。層次不靠新顏色做出來，靠同一個顏色的深淺變化；大面積交給低主張的承載色，注意力才有地方落。這條紀律的效果，取決於你有沒有真的執行，跟用什麼工具無關。

三種工作是用途分類，不是色值上限。狀態色（成功、警告、錯誤）、深色模式的變體、文字的色階，都會讓實際色值超過三個，這是正常狀態；要守的是一個用途對應一個顏色的關係，不是數字本身。行動色的檢驗標準是行動清晰度：讀者在掃讀狀態下，能不能一眼分出哪個東西可以點，這部分的細節在CTA 設計裡有展開。

同一個角色底下可以有自己的變體。識別色往深、往淺各推幾階，就得到深色頁首與淺色頁面都能用的明度階；行動色加上停用與懸停的狀態，就得到一組行為一致的元件色。變體是同一個工作的不同表現，不是新顏色；判斷的方法是把用途寫在色碼旁邊，寫得出來的是變體，寫不出來的，就進刪減名單。色階的間距也照明度差規劃，讓每一階都拉得出層次，避免一堆只差一點點的相近色。

大面積用色還有安靜與否的問題。承載色佔掉版面的大部分，它的任務是退到後面；一旦把高彩度的顏色放大面積使用，整個版面都在喊叫，讀者的注意力沒有落點，行動色再突出，也只是在更大的噪音裡競爭。質感常被形容成高級，攤開來看，多半就是大面積安靜、小面積有效這一件事。

工具在這裡的位置是草稿機。配色產生器如 Coolors，能從一個主色推出成套的和諧色階，加快候選的產生；但候選不等於決定，挑選權留在機制手上，由角色、對比與實際疊圖來裁決。配色工具的比較與網站配色的完整做法，各有專文，這裡不展開操作細節。

這一節的通過標準可以用一句話檢驗：遮住標誌與品牌名，只看版面，讀者仍能指出哪個東西代表這個品牌、哪個東西可以點、哪裡是內文。三個問題都答得出來，角色分工就成立；有一題指向不明，回頭檢查那個角色的專屬性與對比，加新顏色留到檢查之後再考慮。

為什麼換了主色，網站還留著舊顏色

直接回答：全域色票只會影響吃全域設定的元件。當初手動指定、寫死在內容裡、或被局部覆寫過的顏色，不跟著連動；這是繼承機制的結果，不是佈景壞掉。已上線、配色已散的網站，補救順序是先收斂、再換新，順序反了會回到原點。

把繼承想成三層：最上面是佈景的全域色票，定義整套系統的預設；中間是佈景針對特定區域的預設值；最底下是單頁、單區塊的手動覆寫。改最上層，只有引用它的元件會動；被下層覆寫過的位置，維持覆寫時指定的值。所以「一處改、全站動」不是設定面板的魔法，是所有顏色都守同一條引用鏈的結果。

改全域色票之前，先把現行的色碼完整抄下來。全域色票只連動有吃全域設定的元件，當初手動指定、寫死在內容裡或被局部覆寫過的顏色，不會跟著一起換；新色上線後若某些按鈕或區塊停留在舊色，手上的舊色碼清單就是排查的對照表，能逐塊找出漏網的地方再逐一收掉。

野色通常有三個來源：舊範本的殘留、外掛自帶的預設值、當下順手的臨時指定。收斂的流程是先盤點，把站上實際出現的色碼全部列出來，標出不在系統裡的；再分批替換，順序由風險決定，先動裝飾性元素，再動文字與按鈕，識別色等前面都穩了才動，因為識別色一改，標誌、圖示與既有認知全部連動。替換一律走全域設定，在原地再指定一個新值，等於把野色換成另一批野色。

盤點的具體做法不複雜。逐頁開啟網站，用瀏覽器的檢查工具點開按鈕、標題、連結與分隔線，把出現過的色碼抄進一張表；沒有技術背景，逐頁截圖再肉眼比對也行。表的欄位三個就夠：色碼、出現位置、屬於哪個角色。填完之後，不屬於任何角色的色碼一目了然，替換清單就是它們。

換佈景主題是另一個常見的陷阱。新佈景自帶預設色票，啟用的瞬間，全站引用全域設定的元件會一起跳到新的預設值，看起來像一夕之間換了一套配色。安全的做法是先在暫存環境套用，把你的全域色票按決策卡重建一次，再逐頁核對曾經手動覆寫過的位置；確認沒有大面積跑版，才推到正式站。多花的一個小時，比起在正式站上邊改邊猜，便宜得多。

以 WordPress 為例不是偏好，是基數問題。W3Techs 的調查裡，WordPress 在所有網站的佔有率超過四成，繼承與全域設定的行為影響的人數最多。不同佈景的全域色彩介面差異不小，Elegant Themes 的官方文件對其佈景色彩系統有完整說明，Astra 的設定流程可以對照Astra 佈景設定教學；找得到設定位置不是重點，確認每個顏色都掛在同一套全域定義上才是。

從 Canva 帶走的是決策紀錄，不只是一張圖

設計做完，真正該帶走的是兩樣東西：一組依用途分流的檔案，加上一份記錄取捨理由的決策卡。決策卡上寫色碼、字體、版本，以及「為什麼選這個」的一句話；之後任何人問起，卡片就是答案，不必憑感覺重辯一次。工具會換、帳號會到期，這兩樣東西才是你的。

檔案管理有一個最小清單：可編輯的原檔（離開工具也要留一份）、透明版與底色版分開命名、標誌用的字體與備援字體寫成清單。中英文字體要分開考量，標誌裡的英文部分有自己的個性需求，可以對照英文字體的選擇；工具本身的產能技巧，例如Canva 進階用法，是在這些資產齊了之後才開始划算的投資。

授權範圍也屬於決策紀錄的一部分。標誌裡用的字體能不能商用、圖形素材的授權涵蓋哪些用途、向量原始檔的交付與修改權歸誰，這些問題在委外時尤其要寫進合約；自製的人至少要把字體與素材的授權頁存檔留證。授權沒有記錄，之後要做周邊商品或投放廣告時，才發現當初取得的權利不夠用，重新談判的成本遠高於現在多花十分鐘。

透明背景的取得條件要按歸屬講清楚。在 Canva，透明背景下載屬於特定付費方案的功能，實際可用性以官方說明與帳號介面呈現的選項為準。不想為了單一需求升級方案，可以把圖交給 RemoveBG 這類專門的去背服務處理；各種去背工具的能力差異，另有完整的比較可以參考。

自製還是委外，用三個變數判斷：獨特性需求、預算上限、預期修改輪數。多數價差買的不是那張圖，是修改輪數與授權範圍；設計師來回改稿的能力與原始檔的交付條件，才是報價裡貴的部分。自製的隱藏成本要算進時間帳：去背、向量輸出、多版本檔案管理，每一項都吃工。行情區間可以先看Logo 設計費用的整理，再回頭估自己的預算；用AI Logo 產生器起頭收斂方向可以，直接上線前，前面每一層檢查都要再過一次。

用一個建構情境收攏（純屬示意）：一間在地咖啡烘豆工作室，標誌由店主自己在線上工具完成，過程中改了七個版本。讓後續一切順利的關鍵，在於店主把每個版本被否決的原因寫成一頁紀錄，第七版本身的漂亮只排得上小功勞：字太細、豆子圖形縮小後糊掉、深色包裝袋上對比不足。半年後要做包裝與店面招牌，這頁紀錄讓印刷廠不用從零猜品牌，也讓接手的人不必重踩一次同樣的坑。資產會舊，決策紀錄不會。

機制的邊界：單色印刷、深色模式與刻意打破

這些機制什麼時候不適用？常見的例外有三類，邊界都一樣：打破規則必須是知道規則之後的選擇，不是沒想過的結果。知道自己在打破什麼，破格才有策略價值。

• 單色與灰階印刷。這個環境只吃明度，色相全部失效；標誌要能在純黑、純白、單色之間存活，靠的是明暗結構，不是配色。
• 深色模式。不是把色票反相，而是按深底重算對比；識別色可能需要專用變體，文字色階通常要重編一套。
• 準則與極簡的例外。無障礙準則對大字與裝飾性元件有放寬；極簡取向的品牌可能只留一色一版，把一致性交給字體與留白。

還有一種例外出自媒體本身。如果標誌的主要露出場域是影片片頭或實體招牌，靜態網頁的檢查序就要重新加權，動態節奏與遠距辨識會變成優先條件。機制是死的，露出場域是活的；先問標誌大部分時候出現在哪裡，再決定哪一關提前。

怎麼分辨破格是策略還是意外？看得到取捨紀錄的，就是策略：知道小尺寸會失效、而主要場域不受影響；知道對比不足、而以其他管道補償；知道只用一色、而把識別交給字體。什麼都說不上的，多半是沒檢查過的意外。這個標準把守規則與打破規則放回同一套討論：兩者都要能被解釋，差別只在選擇的方向。

另一種合理破例出現在產品情境（同為示意）：一套 B2B 預約排程工具，行動色的占比高於一般品牌網站，因為它的核心任務是讓使用者在每一頁都完成「選時段」這個動作。這不是失控，是角色分配服務於產品目標：行動色多、識別色收斂、承載色安靜。判斷標準不在於占比數字，在於每個高占比都有對應的任務理由。一般性的視覺錯誤對照，可以再看網頁設計常見錯誤。

檢查順序：從最小的顯示環境往上驗

全部機制都要顧，順序由一個原則決定：越難救的越早發現。由最小顯示環境往上驗，哪一關過不了，退回哪一關重做，不要帶著問題往上疊。

1. 分頁小圖。把標誌縮到分頁尺寸實際看。通過標準：一眼認得出是品牌，不需要讀。
2. 頁首尺寸。在實際頁首高度與手機寬度下檢查。通過標準：輪廓完整，與導覽列不擠。
3. 文字對比。對背景計算前景色的對比數字。通過標準：一般文字達 4.5:1，大字 3:1。
4. 色彩角色與全域色票。列出站上所有色碼，對照識別、行動、承載三種工作，標出答不出工作的顏色。通過標準：每個色碼都有工作，且掛在全域設定上。
5. 備份與歸檔。舊色碼備份，可編輯原檔與決策卡歸位。通過標準：任何一個顏色被問「為什麼是它」，都查得到答案。

三種起點的下一步各一句。全新開站：按順序完整走一遍，第一次就建對，成本最低。已有標誌、還沒有色彩系統：從第三、四關切入，用現有標誌反推角色與色碼。已上線要收斂：從第四關的盤點開始，先收野色，別急著引進新顏色。

幾個事件值得觸發重跑：換了佈景或大幅改版、安裝了會輸出前端元件的外掛、調整過全域色票、新增了頁面模板。每次觸發不必五關全跑，動到哪一層，就從那一層往上複驗；動色票就從第四關起，動標誌就從第一關起。把觸發條件寫進決策卡，檢查就從想起來才做，變成有節奏的維護。

檢查不是一次性的儀式。上線之後，換裝置、換佈景、加外掛，都會讓通過過的關卡重新失效；隔一段時間在手機上複驗分頁與頁首，成本遠低於等讀者回報。回到開頭那句「看起來怪怪的」：把縮放、對比、角色、色票管理四層修完，多數的怪會自己消失；到那個階段還覺得不夠好看，再來談美感調整，判斷會準得多。