新創公司的設計系統：我如何反向建構我的設計系統

我反向建構了我的設計系統。多數建議都說「等到產品市場適配再說」。我從第一天就開始使用 CSS 自訂屬性，因為我個人網站上的一個 CLS 錯誤讓我認識到跳過代幣的代價：累積版面位移高達 0.493，花了兩次除錯才追蹤到一個不一致的間距值。修復只花了 15 分鐘，但調查花了 3 小時。設計代幣本可以完全避免這個錯誤。¹

TL;DR

設計系統解決的是協調問題。獨立開發者在單一專案中不存在人與人之間的協調問題，但存在過去的自己與未來的自己之間的協調問題。在為 blakecrosley.com 建構設計代幣系統後——10 個顏色代幣、13 個字級階層、8 個間距值——我學到正確的順序是：立即建立代幣（第一天）、當模式重複三次時提取模式、永遠不建立正式系統（對獨立專案而言）。代幣的投資在第一次因間距不一致導致版面錯誤時就能回本。

我的設計系統：只有代幣，別無其他

無色彩的配色方案

我的整個網站運作在 10 個 CSS 自訂屬性上，沒有品牌色彩：

:root {
  --color-bg-dark:        #000000;
  --color-bg-elevated:    #111111;
  --color-bg-surface:     #1a1a1a;
  --color-text-primary:   #ffffff;
  --color-text-secondary: rgba(255,255,255,0.65);
  --color-text-tertiary:  rgba(255,255,255,0.4);
  --color-border:         rgba(255,255,255,0.1);
  --color-border-subtle:  rgba(255,255,255,0.05);
  --color-accent:         #ffffff;
}

四個透明度層級（100%、65%、40%、10%）承載了整個視覺層次。每個文字層級在 #000000 背景上都通過 WCAG AAA 對比度標準。沒有漸層、沒有語意色彩、沒有深色/淺色模式切換。這個限制產生了一個元件庫也無法改善的連貫系統。²

跳過品牌色彩是一個設計決策，而非技術決策。在我的 16 個產品設計研究中，我注意到我最尊敬的產品（Linear、Vercel、Raycast）都使用克制的配色方案，讓排版來完成層次區分的工作。

8 點間距系統

每個間距值都源自 8 點基準：

:root {
  --spacing-xs:  0.5rem;  /* 8px */
  --spacing-sm:  1rem;    /* 16px */
  --spacing-md:  1.5rem;  /* 24px */
  --spacing-lg:  2rem;    /* 32px */
  --spacing-xl:  3rem;    /* 48px */
  --spacing-2xl: 4rem;    /* 64px */
  --spacing-3xl: 6rem;    /* 96px */
  --spacing-4xl: 8rem;    /* 128px */
}

沒有任意值。系統包含八個階層。如果某個版面需要系統中不存在的間距，那是設計有問題，不是系統有問題。

--spacing-2xs 錯誤

我是透過慘痛教訓學到這個規則的。我在副標題的 margin-top 使用了 --spacing-2xs。這個代幣在我的 :root 定義中並不存在。CSS 自訂屬性會靜默失敗——瀏覽器套用了零邊距而非拋出錯誤。副標題貼合到標題上，版面在載入時發生位移，我的累積版面位移分數飆升至 0.493。³

除錯路徑：Lighthouse 標記了 CLS。DevTools 識別出位移元素。檢查計算樣式後發現 margin-top: 0，而我預期的是 4px。搜尋樣式表中的 --spacing-2xs 顯示一次使用、零次定義。

修復方式：將 --spacing-2xs 改為 --spacing-xs。更廣泛的修復：嚴格遵守代幣系統，不容例外。

排版比例尺

13 個階層，從 12px 到 80px，使用系統字型：

:root {
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
                 "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --font-size-xs:      0.75rem;   /* 12px */
  --font-size-sm:      0.875rem;  /* 14px */
  --font-size-base:    1rem;      /* 16px */
  --font-size-lg:      1.125rem;  /* 18px */
  --font-size-xl:      1.3125rem; /* 21px */
  --font-size-2xl:     1.5625rem; /* 25px */
  --font-size-3xl:     1.875rem;  /* 30px */
  --font-size-4xl:     2.25rem;   /* 36px */
  --font-size-5xl:     2.7rem;    /* 43.2px */
  --font-size-6xl:     3.25rem;   /* 52px */
  --font-size-7xl:     3.875rem;  /* 62px */
  --font-size-display: 5rem;      /* 80px */
}

系統字型完全消除了字型載入延遲。沒有 FOIT（不可見文字閃爍）、沒有 FOUT（無樣式文字閃爍）、零字型網路請求。這個選擇是我達成 Lighthouse 效能滿分 100/100 的重要因素。⁴

時機問題

太早：過早抽象的陷阱

種子輪新創公司面臨產品最終走向的極大不確定性。設計系統會編碼對互動模式、元件層次和視覺語言的假設。當產品轉向時，設計系統會成為抗拒變更的負擔。⁵

一個由三位工程師和一位設計師組成的團隊，不需要一個附帶文件、版本控制和 Storybook 實例的元件庫。協調的開銷超過了協調問題本身。

但代幣不同。代幣不是抽象——它們是值。顏色代幣不會強加元件結構。間距代幣不會限制互動模式。代幣能在產品轉向中存活，因為它們運作在元件層之下。

太晚：設計債務螺旋

B 輪公司擁有 30 位工程師卻沒有共享的設計模式，面臨的是相反的問題。每個功能團隊各自發明自己的按鈕樣式、表單版面和間距值。產品感覺像是三個不同的應用程式拼接在一起。⁶

我在自己的專案中也看到相同的模式，只是規模較小。當我開始新專案卻沒有複製 :root 代幣時，第一週內就會出現不一致。代幣是防止債務螺旋的廉價保險，而這種螺旋一旦形成，解決成本極高。

漸進式投資框架

第一階段：僅建立代幣（第一天，任何團隊規模）

只定義和共享基礎值。我的實作：

共 41 個代幣。零個元件。零個文件網站。目標是在值的層級防止分歧，同時保留最大的實驗彈性。⁷

第二階段：模式提取（當模式重複 3 次時）

當相同的 UI 元素出現在三個不同的功能中時，提取該模式。我的網站已提取的模式包括： - 卡片版面（專案卡片、部落格卡片、社群卡片）：一致的內距、圓角、懸停狀態 - 導航底線（導航連結、麵包屑）：懸停時 scaleX(0) → scaleX(1) 過渡效果 - 毛玻璃頁首：backdrop-filter: blur(20px) 搭配底部邊框

每個模式的存在，都是因為我建構了同樣的東西三次後才注意到重複。我從正式上線的程式碼中提取模式，而非事先設計。正式上線的模式編碼的是真實需求。⁸

第三階段：正式系統（25 位以上工程師，獨立專案永遠不需要）

在規模化的情況下，協調問題足以合理化元件庫、Figma 同步、貢獻流程和版本化變更日誌。我在任何個人專案中都沒有達到這個階段，也不預期會達到。對獨立開發者而言，代幣加上提取的模式就能提供足夠的結構，而不需要承擔正式系統的維護開銷。

我完全跳過的部分

文件網站

公開的設計系統文件網站消耗的工程時間，對獨立專案而言不會產生任何使用者價值。我的「文件」就是 critical.css 中的 :root 區塊。任何開發者（或 AI 代理）閱讀該檔案就能立即理解整個系統。

多框架支援

我的網站使用純 CSS。沒有 React 元件、沒有 Vue 封裝、沒有 Web Components。代幣在任何框架中都能運作，因為 CSS 自訂屬性與框架無關。抽象層就是 CSS 本身。

過早的無障礙形式主義

無障礙設計很重要——我的網站在每個文字層級都達到 WCAG AAA 對比度。但我先建構對比度系統（具有已知比率的代幣），再驗證合規性。從內建無障礙的代幣開始（每個文字層級都超過 7:1 對比度），比事後審核任意的顏色選擇更有效。⁹

重點摘要

對獨立開發者而言： - 在第一天就為顏色、字級、間距和過渡動畫定義 CSS 自訂屬性；41 個代幣的投資能防止需要數小時除錯的錯誤和不一致 - 跳過元件庫、文件網站和 Storybook；對獨立專案而言，維護開銷超過協調效益 - 當相同元素出現在三個地方時，從正式上線的程式碼中提取模式；過早提取會浪費精力在可能無法存活到下一次迭代的模式上

對新創公司設計主管而言： - 在產品市場適配之前就開始建立代幣；代幣能在產品轉向中存活，因為它們運作在元件層之下 - 在 25 位以上工程師產生真正的協調問題之前，抵制建立正式系統的衝動；過早的正式化會產生拖慢迭代速度的維護開銷

參考資料