為什麼設計系統要從代幣開始，不從元件開始
多數團隊做設計系統的第一步是「先做按鈕」。這篇說明為什麼這個順序會讓系統在半年內崩解，以及正確的順序是什麼。
先做元件，是設計系統最常見的起手式，也是最常見的失敗原因。
問題出在哪裡
假設你的產品現在有 11 種間距值。你決定先做卡片元件，於是要選一個內距。你選了 20px，因為看起來剛好。
這時候發生的事是：你剛剛新增了第 12 種間距值。
元件不會收斂系統，元件只會固化當下的隨意決定。而且一旦元件被使用在 30 個畫面上，這個隨意決定就變成不能改的了。
正確的順序
先定代幣。間距只有 11 個值可選，字級只有 9 級可選，色彩只有 8 個中性色 + 4 個語意色。
這件事聽起來像是限制，但它真正的作用是把「選什麼」變成「從哪一個選」。前者是無限的判斷，後者是有限的挑選。
代幣定案後，元件會做得非常快。因為每一個決定都已經有依據 — 卡片內距不是 20px，是 --s-5，因為它是「卡片內距（桌機）」這個用途的指定值。
代幣要定多少
夠用就好。我們的預設是：8 個中性色、4 個語意色、11 級間距、9 級字級、4 種圓角、2 種陰影。
這個數量在一個中型產品裡運作良好。超過這個規模的組織會需要更多層次（例如語意層代幣），但那是第二階段的問題。
一個檢查方式
打開你的樣式檔，搜尋所有的 px 數值。如果出現超過 15 種，你的系統還沒有代幣層。