記號壓在棉紙上。這套系統最後長成一個印章。蓋下去就代表查證過了。
01
/06
THE SITUATION
當時的處境
LifeOS 是一套個人作業系統，管十三個領域的事，像錢、健康、育兒、日文、房子。它不會改版，它會陪著人變老。客戶給我們的題目只有一句：這個記號要能用三十年。
我們去看了印章。日本人一天會遇到很多顆：區役所受付窗口的角印、神社的御朱印、宅配單上的認印。它們長得都不一樣，但做的是同一件事，在一份文件上留下一個「這裡查過了」的痕跡。而且同一顆印會被蓋上幾千次，每一次都要一樣。
這正好是 LifeOS 的形狀。所以記號的外框取自印章的圓角方框，裡面放一個 L。
朱色不是憑印象挑的。顏料罐裡的朱，跟蓋在紙上的朱，不是同一個顏色。日本傳統色名的「朱色」偏橙；印章真正蓋出來的色相登記在 JIS 的印章用朱肉，Munsell 7.5R 5/14，兩者差了 ΔE 22.4。印刷用的特色定 PANTONE 7417 C 而不是更沉的 173 C，理由一樣務實：非塗工紙會再吃掉一階明度。選色要把紙算進去，不能只比螢幕上的數字。
當時的限制記號要能縮到 16 px 還認得出來。它會出現在瀏覽器分頁上系統每天在跑，既有的畫面不能停下來等改版客戶端沒有設計人力：任何需要開會才能執行的規則都不算數領域還會再長。第十四個出現時，規則必須自己成立
02
/06
THE CALL
判斷
印章的意義不在形狀，在蓋下去的那一刻有人查證過。
當時為什麼這樣做
右下角那一行是它的代價。
01把規範寫進會擋人的程式色票、圖標來源、字體宣告、對比度，全部做成自動檢查。違規的東西進不了版本控制。寫得再好的文件，執行的人還是人；而人會累。代價：每一條規則都要先寫成程式判得出來的形式。寫不出來的，就不准當規則。02圖標的品質交給檢查器原本是我們自己看。看到某一天才發現，線寬差 0.25 這種事眼睛根本看不出來。改成逐檔比對之後，庫裡有一批圖標當場變成不合格。那批是我們自己畫的。代價：檢查器上線那天，我們先被自己擋了一次。03換了底色，顏色要重算一次中性階本來是為深色介面調的。搬到淺色紙上之後，六個顏色當文字全部不及格，最低的那個只有 2.17，門檻是 4.5。印出來看完全正常。只有算過才知道。代價：一套色票變成兩套實算結果，每一份文件都要標明用在哪一種底色。04同一個對齊問題，改到第三輪才對記號嵌在標題裡要跟中文字對齊。第一輪用基線對齊、第二輪照規範上寫的比例重算框線，兩輪都被退回。第三輪去量資產本身才發現：規範上那個比例本來就是錯的，而且用 CSS 重建出來的框永遠只是近似。近似比明顯不同更糟：只差 1.25px 的時候，眼睛不會覺得它是個記號，只會覺得它沒對齊。代價：前兩輪都在調參數，第三輪才換掉做法。標記從此一律嵌資產，不准用 CSS 近似。
淨空以筆畫寬為單位。換尺寸的時候固定值會失效，比例不會。
形體是推導出來的，不是畫出來的
左：形體由一個 12 單位的方格推導。右：三個只有這個記號才有的決定，45° 斜切、內形與外框永遠留 6、圓角外 R16 內 R7。
03
/06
THE ARTEFACTS
這套系統的樣子
先看東西。下面每一樣都是一條規則長出來的結果。
章有六種態，顏色本身就是判定
章只蓋在被驗證過的事實上。所以它必須有辦法說「這件事還沒有結論」與「這件事被駁回了」，而那兩件事不能跟「通過」共用同一個朱。
態色語意可逆性送達朱端到端走完並送達—通過朱閘門全數通過—晉升朱台帳上前進一階—未送達緋走完了，但沒有送達可重試駁回緋已登記退場，號碼永不重用終局待驗霧尚未取得判定—
緋有兩個占用者，分界是可逆性：未送達可以重試，駁回是終局。而待驗是唯一不宣告結果的一態，所以它用霧不用朱 —— 不必讀文字，一公尺外就分得出這件事有沒有結論。
交出去的是規則，不是圖檔
四個家族、二十七個色票：朱四階（標誌／暗底／互動／底色）、中性六階、語意四階、十三和色。每一階都附對紙與對墨的實算對比，而最後一格是配額。朱在任何畫面上不得超過 10%。
色票在紙上的對比度 · WCAG · 門檻 4.5比值PAPER1.00WARN2.17OK2.63MIST3.01SHU4.20DANGER4.97INK15.66VOID17.16
上：整套字面。下：同一組席位換底色，字級與行距一格都沒動。
四個席位，一席一張，各自是它在產品裡真正的樣子。同一個家族的三個地區版本，字面寬度一致，所以換語言不必重排版面。
一千一百零二枚，同一組工藝參數
十三個領域各有一個常駐代理，徽紋就是它的臉。代號取自那個領域的職務：所以第十四個領域長出來時，徽紋、和色、代號是同一次決定。
一個框、一個主形、一個次形、一個色相。所以第十四個領域長出來時不必重想。
事實與推估，不准共用同一種填充
這套系統的產出是決策，而決策的載體是圖表。所以圖表跟標誌同級：它也有文法。
怎麼畫什麼算這一類事實墨・實心・實線・實點指得回輸入資料某一列的推估霧・45° 斜紋・永不實心由既有數據算出來的，必附來源與計算日期待驗霧・只有框線・蓋「待驗」灰章前提還沒有被驗證過的
這條規則真正的用處，是讓人沒辦法把推估畫得跟事實一樣。一份混了兩者而且分不出來的報表，比沒有報表更糟。
先問問題，再挑圖
圖表類型從問句推出來，沒有一份清單可以挑。九個家族各對應一種提問。
A 構成這一塊怎麼分？五類以內用 100% 堆疊條；有層級用樹狀矩形B 比較誰比較大？名稱長就橫條排名；兩個時點用啞鈴或斜率圖C 分布分布長怎樣？樣本多用直方圖；少於 60 筆用蜂群D 時序怎麼隨時間變？單序列折線或面積；構成變化用堆疊面積E 流量錢怎麼流的？有加有減用瀑布；多對多用桑基F 關聯兩者有關係嗎？兩指標散布；三指標泡泡；多對多相關矩陣G 風險最壞會怎樣？歷史用水下回撤；模擬用蒙地卡羅扇形H 進度離目標多遠？有目標值用子彈圖；逐領域比較用領域刻度尺I 稽核這些數字可信嗎？單一事件用印譜台帳；多條自動化用狀態矩陣
所以挑圖不必開會：問句決定家族，家族決定畫法。
04
/06
THE WORK
怎麼做的
我們接這件案子的方式，跟接任何一個委託案一樣：先找一個文化上站得住的出發點，再把它推導成可以量的規則。
我們怎麼操刀
01從一個具體的物件出發，不從形容詞出發客戶說「可信」「耐久」的時候，那還不是設計。我們去找一個現實世界裡已經在做這件事的東西（印章），再從它的物理特性推導形狀。02形體用推導的，不用挑的圓角試過 8、16、24，筆畫試過 6、9、12。每一組都放到 16 px 去看還認不認得出來。留下來的那一組，是唯一通過那道題目的。03規則寫到客戶自己執行得動為止客戶端沒有設計人力。所以交出去的不能是一本要人記住的書，得是一組會自己動的檢查。這也是下面那一段的由來。
一步一步
階段做了什麼產出這一階成立的條件01 田野把手上摸得到的印章逐個看過：形狀各不相同，做的事完全一樣靈感來源與形體方向出發點站得住02 定義收斂成一組 token，並且決定每一個的使用角色design token（CSS 變數與 JSON）有唯一真實來源03 護欄把規則寫成會擋人的檢查器，掛進版本控制八支自動化驗證器違規進不來04 遷移既有畫面逐批換過去，紅燈當工作清單用遷移紀錄與例外台帳舊債可見05 成書把理由寫成規範全書，條文引用變數而不是數值規範全書後面的人看得懂為什麼
裁決面板：系統擬稿，人裁決
三則面板各用一種語言。第三個出口「我自己改」永遠存在：系統可以擬稿，永遠不能代裁。
顯示語彙三則。全部取自規範全書登記過的元件，不是通用 UI kit。
05
/06
THE SYSTEM
最後交付的不是一本規範
規範全書還是寫了，但它不是交付物的主體。它是那套機制的說明書。真正交出去的是一組每天會自己跑的檢查。
人訂規則，機器每天執行
設計決定全部是人做的。顏色、字級、圓角、要不要有這條規則，沒有一項交給模型。AI 進來的位置在後面一段：把已經拍板的規則，翻成一支會在提交當下擋人的程式。
人01訂規則朱色只負責「這裡要被看見」・對比不得低於 4.5・圖標形狀一律取自刻印庫判斷。沒有一條規則是模型提的AI02翻成程式把「不得低於 4.5」寫成一支會讀渲染後像素、算 WCAG、然後回報哪一個檔案哪一行的檢查器翻譯。規則是人給的，寫法交給它機器03每天執行1,102 枚圖標逐檔比對・77 條畫面路由 × 2 個寬度・每一次提交都跑一遍規模。這一段人做不到人04看紅燈裁決紅的那一條是要改畫面，還是那條規則本來就訂錯了判斷。循環回到第一棒
1,102 枚圖標，沒有人逐檔看得完。線寬差 0.25 這種事，我們自己畫的那批當初也沒看出來。靠自律維持的部分，人做得到的是訂規則；做不到的是每天不漏掉地執行一千次。那一千次交給機器。
左邊是那本規範，右邊是它擋下來的樣子
兩邊都交出去了。只有右邊那個每天會自己醒過來。
II 核心資產色彩系統07對比度任何文字對它實際渲染出來的背景，量到的對比不得低於 3.0:1。判準是渲染後的結果，不是宣告的色票。≥ 4.5 : 1通過WCAG AA 內文標準3.0 – 4.5提示低於 AA，但大字與次要資訊可能是刻意的< 3.0 : 1阻擋渲染之後那個節點在畫面上是消失的$ git commit -m 「feat(P-008): 今天首頁的排序」› lifeos pre-commit · 4 checks · budget 3000msPASSpalette-var-reachability18 files41msPASSicon-purity1,102 icons260msPASSfont-declarations9 files12msPASSraw-hex-in-docs584 notes96ms› lifeos pre-push · 4 checks · budget 30000msFAILrendered-contrast77 routes21,480mssrc/web/src/app/v3/m/03-parent/page.tsx:214section.d > i 「①」fg rgb(77,77,80) · bg rgb(20,20,23) · ratio 2.17:1threshold 4.5:1 · shortfall 2.332 nodes are invisible after render · commit refusedexit 1
關卡的順序是算過的
三道關卡不是隨便排的。判準只有一條：愈便宜的檢查排愈前面，愈晚被擋代價愈高。
CHEAPEST FIRST · COSTLIEST LASTEDIT編集 · 編輯PRE-COMMITコミット前提交當下約 1 秒四項都是讀檔案就能判的，不必開瀏覽器Palette var reachabilityIcon purityFont declarationsRaw hex in docs違規進不了版本控制PRE-PUSHプッシュ前送出之前約 25 秒要真的渲染才判得出來，所以貴。放在提交關會讓人開始用 --no-verify 繞過Rendered contrast2.17 < 4.5 — BLOCKEDSVG text distortionCSS tokensFull test suite本機過了不算，整個分支要過DAILY SWEEP毎日の巡回每天 04:30約 2.5 分最貴，而且沒有人在等它。所以讓它自己跑77 routes × 2 widthsLayout healthBaseline ratchet沒有人按按鈕也會被發現FIX & RERUN — BACK TO EDIT
第二關的 25 秒曾經掛在第一關。客戶的原話是「超過三秒的檢查放在那裡，遲早被繞過」。所以它被搬走了。關卡要的是不會被繞過，嚴格只是手段。
這三件事每天都在跑：索引重建、逐檔比對、狀態上牆。它們不是文件裡的規定，是會回你一個退出碼的程式。
所以這套東西的壽命不靠有沒有人記得。半年後加第十四個領域的時候，它會用一模一樣的標準擋住那個人，包括我們自己。
06
/06
THE OUTCOME
交付與結果
同一套識別，四種距離：手上、桌上、桌前、牆上。其中兩張是螢幕的特寫 —— 放到那個尺度，色票與字級仍然一格都沒有換。
交出去的東西
設計 tokenCSS 變數與 JSON 兩份，同一個來源產生。文件引用變數不引用色碼圖標庫與純度檢查器1,102 枚，同一組工藝參數。線寬端點轉角逐檔比對對比度實算表每一個色票在紙上與墨上的實算值，不及格的不准當文字字體席位與自架字體管線四個席位、三種語言，woff2 子集自架。換字重重跑一次八支自動化驗證器掛在提交、送出與每天清晨三個時刻，違規的東西進不了版本控制。另有 18 條併進客戶系統既有的整合驗證器裡規範全書條文寫的是理由，數值引用變數。所以它不會過期
成果每天還在用。每一次提交都會跑過那八支檢查器，而它們平均每週擋我們一次。規範變成了基礎建設的一部分。仍在努力舊畫面還沒遷移完。護欄擋得住新的違規，擋不住既有的債。路是鋪好了，只是還沒走完。
文件會過期。會報錯的程式不會。
交出去的東西，長在真的東西上
領域刻度印在棉紙上，以及貼紙、手拭巾、刺繡布章、文具、索引貼籤。六件東西、五種材質，沒有一件需要重新決定顏色。
Credits
Design & BuildMuzi Studio客戶自有專案（非委託案）年份2026解決方案品牌識別，策略・識別・設計系統・工程護欄交付物設計 token ・ 圖標庫與純度檢查器 ・ 對比度實算表 ・ 字體席位與自架字體管線 ・ 八支自動化驗證器 ・ 規範全書