語意設計令牌架構：全域、語意和元件令牌

三層

Material Design 描述了三類令牌：引用、系統和元件。許多團隊將它們稱為全局的、語義的和組件的。名稱不同，但想法是相同的：將原始值與其使用方式的決策分開。

• Global（參考）：系統中的每個原始值，例如blue-600、space-4、font-size-16、spring-gentle。
• 語意（系統）：值的用途，例如 color.text.primary、color.action.primary、motion.enter。
• 元件：一個元件如何使用系統，例如button.background或dialog.motion.open。

為什麼語意標記很重要

如果按鈕直接使用blue-600，則每次主題變更都表示編輯每個元件。如果它使用 color.action.primary、深色模式、高對比度或新品牌，則只會更改 color.action.primary 指向的內容。 Material 指出，令牌使得應用高對比度調色板或以這種方式更改系統範圍內的字體比例成為可能。

主題和多個品牌

對於多品牌或白標產品，每個品牌保留一組語義和組件標記以及一個全局調色板。每個主題都是從語義標記到全域值的對應。 W3C 設計令牌規範 (2025.10) 的第一個穩定版本於 2025 年 10 月發布，增加了主題和多品牌支援、現代色彩空間（例如 Display P3 和 OKLCH）以及別名和組件級引用。

運動令牌也屬於這裡

持續時間、緩和曲線和彈簧遵循相同的等級。全域代幣可能因其剛度和阻尼而具有彈性；語義標記motion.enter指向它；組件令牌sheet.motion.open指向motion.enter。新增減少運動主題，將運動標記重新映射為短淡入淡出。

將代幣運送到每個平台

將令牌作為 DTCG JSON 保存在儲存庫中，這是單一事實來源。 Style Dictionary 等建置工具將它們轉換為 CSS 變數、Swift、Kotlin、Flutter 或其他格式。讀取相同格式的設計工具可以保持同步，AI編碼工具可以直接讀取JSON。

• 事實來源：Git 中的 DTCG JSON，像程式碼一樣進行審查
• 建構：在每次更改時轉換到每個平台
• 設計工具同步：匯入或插件，絕不手動複製值
• Linting：禁止元件中的原始值