工具卡片
用於目錄項目、指標、功能摘要與輕量預覽。
設計權杖
色彩、間距、圓角與動態效果
設計權杖是視覺基礎元素唯一允許的單一來源。新頁面應取用它們，而不是重新定義。
背景
表面
強調色
圓角
6 / 10 / 16
僅使用 `sm`、`md`、`lg`。
間距
8-32
大多數 UI 都能落在核心間距範圍內。
動態
150-220ms
轉場應保持細膩且快速。
字體排印
具備可讀層級與緊湊密度
頁面 H1：主要頁面識別
區段 H2：主要內容區塊
卡片群組 H3：次要分組
卡片 H4：標準卡片標題
引導文字用於簡短頁面簡介與說明性短文。
內文是說明文字、工具描述與結果解釋的預設層級。
說明文字用於中繼資料、計數器、欄位註記與次要輔助資訊。
卡片
標準化內容容器
清單卡片
用於結果列、相關工具、跳轉清單或最近歷史區塊。
控制項
按鈕、欄位、膠囊標籤與狀態文案
模式
可重複使用的頁面組合
!
主要提示
使用提示區塊來呈現說明文字、隱私訊息或工具限制。
| 圖層 | 使用案例 |
|---|---|
| Token | 色彩、字體、間距、動態 |
| 基礎 | 字體排印與版面基礎元件 |
| 元件 | 按鈕、卡片、表單控制項 |