Design Token

tokens.json v1.18.0 · 128 顆

每個色塊與尺寸都是 build 時把 tokens.json 的 value 直接餵進 style 得到的，看到的就是現值。分組與說明來自 tokens.json 的 group／description。

說明欄只顯示第一句，完整註解看 tooltip 或 tokens.css ↗

色票：中性

14 顆

--ground

#F8F7F7

頁面底（v1.14.0 warm 併入庫預設，原 #F7F8FA）

--surface

#FFFFFF

卡片/面板底

--surface-2

#F2F1F1

次表面（2026-08-11 v1.3.0 補）：比 --surface 深一階、但不到 --ground 的底。

--text

#2E2E31

主文

--muted

#5C5C61

次要文字

--faint

#6B6E7B

弱文字/輔助說明

--disabled-fg

#B6B6B8

停用文字

--disabled-fg-2

#CBCBCC

停用附註（如「（停用）」）

--line

#E9E8E8

一般框線/分隔線

--line-strong

#C5C5C7

強框線（啟用中的卡）

--line-soft

#F1F0EF

弱分隔線（drawer header/footer）

--disabled-bg

#FAF9F9

停用卡底

--field-bg

#F6F5F4

輸入框底

--chip-bg

#F0EFEE

未選 chip 底

色票：主色

5 顆

ink，擔任 OMS navy 的角色

--ink

#1B1D22

--ink-hi

#3D404A

ink 亮階（深色面上的選中底/次階層）

--ink-tint-05

rgba(27,29,34,.05)

tablist 底/搜尋框底/統計 chip 底

--ink-tint-06

rgba(27,29,34,.06)

疊層中階（2026-08-11 起表格列 hover 改吃 --hover-bg，本值目前無使用者，保留以維持 05/06/08 疊層階梯完整）

--ink-tint-08

rgba(27,29,34,.08)

badge 底

色票：CTA 橘

6 顆

稀有色：僅 CTA 與導覽選中系，不當控件選中色

--cta

#F08200

--cta-weak

#FF9D1B

--cta-ink

#C96A00

2026-08-10 新增：橘的「可讀文字階」。

--hover-bg

#FFFAF3

全站 hover 底（側欄導覽／表格列／選項列共用；2026-08-11 起表格列併入）

--nav-sel-bg

#FCF1DE

導覽選中底

--accent2-weak

#FFEECB

橙 tint（2026-08-11 v1.3.0 補）：CTA 色的淺底，比 --nav-sel-bg 再深一階。

色票：狀態

10 顆

--amber

#E0A100

--amber-bg

#FDF3D6

--green

#1E9E62

--green-bg

#E7F5EE

--red

#D8442B

--red-bg

#FBEAE6

--slate

#565A66

--slate-bg

#F1F2F6

--req-border

#F2D0C8

必填未填卡框（--red 淡化）

--req-star

#DB8A79

必填星號

填色上的前景

4 顆

2026-08-13 v1.8.0 新增

--on-ink

#FFFFFF

--ink 底上的文字與符號

--on-cta

#FFFFFF

--cta 底（⚠️ 見上方對比說明）

--on-danger

#FFFFFF

--red 底

--on-green

#FFFFFF

--green 底（toast 成功圖示）

深底中性色階梯

6 顆

2026-08-13 v1.9.0 新增，使用者拍板 6 顆

--on-dark

rgba(255,255,255,.93)

深底主文字（品牌名、導覽選中項、帳號名）

--on-dark-2

rgba(255,255,255,.52)

深底次要文字（副標、分組標題、未選導覽項）

--on-dark-tint-06

rgba(255,255,255,.06)

最淺疊層：導覽 hover、深底上的輸入框底（實測 .06/.07 兩值，肉眼差 ΔL* 約 0.3，收成一階）

--on-dark-tint-10

rgba(255,255,255,.10)

中階疊層：計數膠囊、kbd、icon 鈕 hover

--on-dark-tint-14

rgba(255,255,255,.14)

強調面：頭像底（實測 .12/.14，收成一階取深者，頭像需要撐得住文字）

--on-dark-line

rgba(255,255,255,.08)

深底上的分隔線與內嵌邊界

白色當「材質」而非前景

3 顆

2026-08-13 v1.8.0 新增

--focus-halo

#FFFFFF

焦點環的間隙（讓 ink 環在深淺底都跳得出來）。

--switch-off

#D5D7DC

switch 關閉軌道。

--switch-thumb

#FFFFFF

switch 滑塊。

圓角階層

10 顆

大→小；同類元件一律取同級

--r-drawer
抽屜/大型浮動面板
24px
--r-menu
下拉選單容器、確認 modal
20px
--r-card
表格卡片/內容卡
18px
--r-input
輸入框、popover
14px
--r-fieldcard
欄位卡片（⚠️ 與 --r-input 同值，見上方待觀察）
14px
--r-btn
按鈕、tabs 容器、搜尋框、分頁鈕、select trigger、menu option
12px
--r-chip
pill 多選 chip、虛線加號鈕
10px
--r-tag
小標籤 tag、tab、fx/mono badge
8px
--r-check
checkbox
4px
--r-full
switch 軌、頭像、full pill
999px

間距階梯

12 顆

2026-08-10 新增

--sp-2
極貼合：tab 之間、icon 與計數
2px
--sp-4
標籤與控件、badge 內縮
4px
--sp-6
按鈕內 icon 與字、pill 內距
6px
--sp-8
控件之間的預設間距（最常用）
8px
--sp-10
卡內小區塊
10px
--sp-12
表格儲存格左右、卡片內距小號（最常用）
12px
--sp-14
按鈕左右內距
14px
--sp-16
卡片內距
16px
--sp-20
卡片內距大號、區塊之間
20px
--sp-24
抽屜/面板內距
24px
--sp-32
頁面區段之間
32px
--sp-48
空狀態內距、大留白區塊
48px

控件高度階層

11 顆

48px

h-input

42px

h-btn

38px

h-select

34px

h-tab

34px

h-icon

33px

h-seg

28px

h-chip

58px

h-row

66px

h-bar

--h-input
文字輸入
48px
48px
--h-btn
按鈕、搜尋框、分頁鈕、表格勾選命中盒
42px
42px
--h-select
select/combobox trigger、卡內小輸入、虛線加號鈕
38px
38px
--h-tab
tab（坐在 --ds-tabs-pad 的軌道裡）
34px
34px
--h-icon
icon 鈕（2026-08-11 v1.3.0 從 --h-tab 分家，見下方 coarse 段）
34px
34px
--h-seg
segmented chip
33px
33px
--h-chip
pill 多選 chip
28px
28px
--h-row
表格列/表頭
58px
58px
--h-bar
抽屜 header/footer
66px
66px
--ds-tabs-pad
tabs 軌道內距。
4px
4px
--ds-badge-h
狀態標籤膠囊高（.ds-badge。
22px
22px

命中盒

1 顆

不是視覺尺寸階

--hit-min
觸控最小命中高度（WCAG 2.5.5／2.5.8）
44px
44px

應用外殼版面常數

5 顆

2026-08-13 v1.9.0 新增

--side-w
側欄寬（桌機）
216px
216px
--side-w-framed
深色外框版面下的側欄寬
248px
248px
--side-w-drawer
≤820 抽屜寬（實測值，比桌機略寬：抽屜是唯一導覽，不必為內容讓位）
240px
240px
--aux-w
兩欄詳情版面的右側輔助欄
292px
292px
--ds-sticky-top
黏頂偏移（2026-08-14 v1.13.0）＝黏頂元素要讓開的高度＝它上方所有已 sticky 的東西。
0px
0px

字級階層

17 顆

--fs-page
2026-08-10 新增：頁標題自成一階。
永和 Aa 2026
27px
--fw-page
頁標題（內容區的 h1）
永和 Aa 2026
700
--ls-page
大字收緊（warm 起收得比之前鬆）
HHG 2026 ／ 1,480
-.008em
--fs-title
永和 Aa 2026
19px
--fw-title
modal／抽屜標題
永和 Aa 2026
700
--fs-panel
永和 Aa 2026
17.5px
--fw-panel
抽屜/面板標題
永和 Aa 2026
700
--fs-app
2026-08-12 v1.5.2 新增：app shell 這一階。
永和 Aa 2026
16px
--fw-app
app shell：側欄品牌名、導覽圖示
永和 Aa 2026
700
--fs-body
內文、輸入值
永和 Aa 2026
14px
--fs-section
永和 Aa 2026
13.5px
--fw-section
section 標題
永和 Aa 2026
600
--fs-label
永和 Aa 2026
13px
--fw-label
欄位 label、tab、按鈕
永和 Aa 2026
600
--fs-sub
小 label、pill chip
永和 Aa 2026
12px
--fs-hint
hint、badge、副說明
永和 Aa 2026
11.5px
--fs-micro
fx chip、nav 副標
永和 Aa 2026
11px

數字展示階

4 顆

2026-08-14 v1.13.0 新增，使用者拍板

--fs-num-lg
KPI 主數字
永和 Aa 2026
28px
--fs-num-md
合計列金額、單據頭金額
永和 Aa 2026
18px
--fs-num-sm
卡內 inset 統計值
永和 Aa 2026
15px
--ls-num
大號數字收緊（比 --ls-page 的 -.008em 再緊：數字字面比中文窄，同樣字距看起來會鬆； v1.14.0 warm 併入後 --ls-page 變鬆，兩者差距比之前更…
HHG 2026 ／ 1,480
-.02em

陰影

4 顆

--sh-card
內容卡
0 6px 26px rgba(27,29,34,.10)
--sh-pop
popover
0 10px 28px rgba(27,29,34,.15),0 2px 8px rgba(27,29,34,.09)
--sh-menu
下拉選單（白底靠陰影跳出）
0 14px 36px rgba(27,29,34,.17),0 3px 10px rgba(27,29,34,.10)
--backdrop
modal/drawer 遮罩
rgba(27,29,34,.48)
rgba(27,29,34,.48)

字體

2 顆

--sans
永和 Aa 2026 — The quick brown fox
-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif
--mono
永和 Aa 2026 — The quick brown fox
ui-monospace,"SF Mono",Menlo,Consolas,monospace

動效

2 顆

--t-fast
.12s ease
.12s ease
--t-med
.18s ease
.18s ease

疊層階梯

8 顆

2026-08-11 新增

--z-base
一般內容
0
--z-sticky
黏頂工具列、表頭、批次操作列
100
--z-nav
側欄、頂欄、行動版抽屜遮罩
200
--z-popover
popover、tooltip、通知面板
1000
--z-select
select 展開選單（必須蓋過 popover：它常開在 popover 內）
1500
--z-drawer
抽屜與其遮罩（遮罩 1800／本體 1900）
1800
--z-modal
modal／dialog
2000
--z-toast
第八階（2026-08-11 v1.3.0 新增）：toast 必須蓋過對話框。
2100

斷點

4 顆

2026-08-11 新增；2026-08-24 v1.15.0 由 3 階改 4 階

--bp-sm
640px
640px
--bp-md
820px
820px
--bp-lg
992px
992px
--bp-xl
1200px
1200px

觸控覆寫 pointerCoarse

7 顆

觸控目標由輸入裝置決定，不由螢幕寬度決定——@media (pointer: coarse) 下這幾顆高度 token 換值。🔴 轉 theme 時這個區塊不要漏。

token	桌機（pointer: fine）	觸控（pointer: coarse）
`--h-btn`	42px	44px
`--h-select`	38px	44px
`--h-icon`	34px	44px
`--h-tab`	34px	40px
`--ds-tabs-pad`	4px	2px
`--h-seg`	33px	40px
`--h-chip`	28px	32px

下面這顆按鈕高度綁 var(--h-btn)，用觸控裝置開會自己變高。h-btn 實高

斷點 breakpoints

4 階

🔴 @media 不吃 var()：斷點在任何轉換層（含 Tailwind v4 的 @theme inline）都必須寫字面值，否則 media query 永不成立、 build 零錯誤、responsive variant 靜靜失效。⇒ 改斷點必須重跑轉換 script。

token	值	Tailwind variant	說明
`--bp-sm`	640px	sm:	—
`--bp-md`	820px	md:	—
`--bp-lg`	992px	lg:	—
`--bp-xl`	1200px	xl:	—

控件尺寸階 controlScale

tokens.json · controlScale

情境 → 該吃哪一階的 height／radius／font token，以及哪些 class 屬於這一階。整張表由 tokens.json 的 controlScale 動態產生， token 後面括號裡的實際值是查 tokens 區塊即時解出來的。

情境	height	radius	font	members	note
form	--h-input（48px）	--r-input（14px）	--fs-body（14px）	`.ds-input.ds-field > .ds-select .ds-select-trigger`	表單欄位：一欄一列、不與按鈕並排。這是本庫的預設階，不是 lg 變體。
toolbar	--h-btn（42px）	--r-btn（12px）	--fs-label（13px）	`.ds-btn.ds-search.ds-tabs.ds-input-md.ds-select-md`	工具列／篩選列：tabs、搜尋、篩選輸入、篩選下拉、動作按鈕並排的那一列。
dense	--h-select（38px）	--r-btn（12px）	--fs-label（13px）	`.ds-input-sm.ds-select-trigger.ds-dashed-btn.ds-btn-sm.ds-ecell`	卡內密集區／可編輯表格。coarse 下與 toolbar 階同高（見上方警語）。

框架別名 frameworkAliases

sm→densemd→toolbarlg→form

不隨階變動 notScalable

--h-tab（34px）

Tailwind v4 命名空間覆蓋率

128 顆 token 有 109 顆落到 Tailwind 命名空間，其餘 19 顆寫 arbitrary value。

--h-input--h-btn--h-select--h-tab--h-icon--h-seg--h-chip--h-row--h-bar--ds-tabs-pad--ds-badge-h--hit-min--side-w--side-w-framed--side-w-drawer--aux-w--ds-sticky-top--t-fast--t-med

h-[var(--h-btn)]   w-[var(--side-w)]   duration-[var(--t-fast)]