小團隊的設計系統：從 Design Token 開始，而不是元件

「設計系統」聽起來像是有專門團隊和文件網站的大公司才需要的東西。但小團隊其實更需要它：兩個設計師、三個開發者，每一處不一致都要靠人手一遍遍修。訣竅是做一個小的設計系統，並按正確的順序來做。

小型設計系統到底是什麼

三層結構，起步只需要前兩層：

Token（設計令牌）——有名字的設計決策：顏色、字號、間距、圓角、陰影、動效。
元件——由這些 Token 構成的可複用部件：按鈕、輸入框、卡片。
模式和規範——元件如何組合：表單、空狀態、頁面佈局。等你發現自己在反覆解釋同樣的事情時，再把它寫下來。

大多數團隊從第二層開始，在 37 種略有差別的灰色之上做出一套漂亮的按鈕庫。請從 Token 開始。

第一步：Token

顏色

分兩級定義。基礎（primitive）Token 是色板；語義（semantic）Token 說明顏色用來做什麼：

tokens.css

:root {
  /* Primitives */
  --blue-500: #0777d2;
  --blue-600: #0563b0;
  --gray-50: #f8f9fa;
  --gray-900: #111418;
  --red-600: #d92d20;

  /* Semantic — components only use these */
  --color-bg: #ffffff;
  --color-surface: var(--gray-50);
  --color-text: var(--gray-900);
  --color-text-muted: #5b6370;
  --color-primary: var(--blue-500);
  --color-primary-hover: var(--blue-600);
  --color-danger: var(--red-600);
  --color-border: #e3e6ea;
}

[data-theme='dark'] {
  --color-bg: #0d1117;
  --color-surface: #161b22;
  --color-text: #e6edf3;
  --color-border: #30363d;
}

元件只引用語義 Token。這樣一來，深色模式、品牌升級或者給客戶做白標，都只需要改一個檔案。

順便檢查對比度：正文文字與背景的對比度至少要 4.5:1（WCAG AA），大號文字至少 3:1。

字型排版

選一到兩種字型，以及六到八級字號。使用模數比例（每一級約為上一級的 1.2–1.25 倍）能讓節奏保持一致：

css

:root {
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.75rem;
  --leading-tight: 1.15;
  --leading-normal: 1.6;
}

間距、圓角、陰影、動效

一套 4 或 8 像素的間距尺度（4, 8, 12, 16, 24, 32, 48, 64），兩三種圓角，兩三種陰影，兩三種時長加一條緩動曲線。每一個不在尺度上的值，都意味著有人要重新做一次決定。

在 Tailwind CSS 中

如果你用 Tailwind，主題配置就是你的 Token 檔案。把它指向 CSS 變數，讓同一套 Token 同時驅動兩邊：

tailwind.config.ts

export default {
  theme: {
    extend: {
      colors: {
        bg: 'var(--color-bg)',
        surface: 'var(--color-surface)',
        text: 'var(--color-text)',
        muted: 'var(--color-text-muted)',
        primary: { DEFAULT: 'var(--color-primary)', hover: 'var(--color-primary-hover)' },
        danger: 'var(--color-danger)',
        border: 'var(--color-border)',
      },
    },
  },
}

第二步：最先做的十個元件

它們覆蓋了大多數產品頁面：

按鈕——主要、次要、幽靈、危險；不同尺寸；載入和禁用狀態
文字輸入框——帶標籤、提示和錯誤資訊
下拉選擇 / 組合框
核取方塊、單選框和開關
卡片——幾乎所有東西的容器
彈窗 / 對話方塊——帶焦點鎖定，按 Esc 關閉
Toast 提示——用於確認和報錯
標籤頁（Tabs）
徽標 / 標籤
空狀態——一個圖示、一行文字、一個操作

不要從零開始做無障礙：Radix UI、React Aria 或 Headless UI 這類無樣式元件庫已經處理好了焦點、鍵盤導航和 ARIA，你只需用自己的 Token 給它們加樣式。shadcn/ui 是一個流行的起點，它把基於 Radix 的元件複製到你自己的程式碼庫中，由你完全掌控。

每個元件都需要它的狀態

演示和產品的區別就在於狀態。每個元件都要設計並實現：預設、懸停、焦點（要清晰可見！）、按下、禁用、載入、錯誤和空狀態。焦點狀態最常被遺忘——而鍵盤使用者恰恰依賴它。

第三步：讓 Figma 和程式碼保持同步

兩邊用同樣的名字。 如果 Figma 叫 color/text/muted，程式碼裡叫 --gray-500，它們遲早會分道揚鑣。在 Figma Variables 中使用與 Token 檔案相同的語義名稱。
數值只有一個來源。 小團隊可以直接約定以程式碼為準，Token 變化時更新 Figma 變數。大一些的團隊會把變數匯出為 JSON，再用 Style Dictionary 或 Tokens Studio 生成 CSS。
Figma 元件與程式碼元件的屬性一一對應。 Figma 中的變體 size=sm, variant=secondary 應該對應 <Button size="sm" variant="secondary">。

第四步：只記錄你反覆說的東西

文件不需要是一個網站。程式碼儲存庫裡的一頁說明——Token 清單、每個元件的截圖和幾條規則（「每個頁面只有一個主按鈕」、「破壞性操作需要二次確認」）——就足夠了。每當你在評審中第二次解釋同一件事，就加一條規則。

最常見的錯誤

變體太多。 五種誰也分不清的按鈕樣式。從三種開始。
硬編碼的值又偷偷回來了。 一條 lint 規則或程式碼評審清單中的一項（"tokens.css 之外不準出現十六進位制顏色值"）能讓系統保持誠實。
設計還沒有頁面需要的元件。 等到第二個頁面需要時再做元件，而不是提前做。
把設計系統當成已完成的東西。 它是一個產品，使用者是你自己的團隊。每隔幾個月回頭看看。

需要多長時間？

對於一個小型產品，第一版——Token、帶完整狀態的十個元件、Figma 變數和一頁說明——大約需要一到三週的設計加開發時間。第一次在一個下午內做完一個新頁面，或者用一天時間上線深色模式時，它就回本了。

從零開始，還沒有 logo 和品牌？先做那個——見創業公司上線時真正需要的品牌形象。