快速上手
主題
語意色彩 token（primary-*、text-*、bg-*、狀態色）與 typo-* typography utilities。
色彩 (Semantic Colors)
主題控制
切換主題，下方所有色票與元件示範同步更新。
主題預覽default
Primary10–90
10
20
30
40
50
60
70
80
90
Secondary10–90
10
20
30
40
50
60
70
80
90
Background10–90
10
20
30
40
50
60
70
80
90
Text10–90
10
20
30
40
50
60
70
80
90
Success10–90
10
20
30
40
50
60
70
80
90
Info10–90
10
20
30
40
50
60
70
80
90
Warning10–90
10
20
30
40
50
60
70
80
90
Error10–90
10
20
30
40
50
60
70
80
90
primary-{10-90}：主要操作、強調、互動焦點secondary-{10-90}：次要品牌色、輔助區塊text-{10-90}：標題、段落、輔助文字bg-{10-90}：畫布、卡片、巢狀 surfacesuccess／info／warning／error：回饋、狀態、驗證
用法例：text-primary-50、bg-success-10、border-error-60（會隨上方 preview 切換）。
Typography Utilities
字級控制
調整字級，下方所有樣式同步縮放。
字級預覽100%
Heading
typo-heading-special特殊標題
Display
typo-heading-medium大標題-M
Headline Medium
typo-heading-small大標題-S
Headline Small
Title
typo-title-large標題-L
Title Large
typo-title-medium標題-M
Title Medium
typo-title-small標題-S
Title Small
Content
typo-content-large內文-L
Body Large
typo-content-medium內文字-M
Body Medium
Caption
typo-caption-medium說明-M
Caption Medium
typo-caption-small說明-S
Caption Small