Spacing
Ruler
Live DS 未自訂 spacing token，沿用 Tailwind v4 預設（0.25rem × N）。 下表只列出 component implementation 真實出現過的階梯。
0
0px
0.5
2px
1
4px
1.5
6px
2
8px
3
12px
4
16px
5
20px
6
24px
7
28px
8
32px
12
48px
Gap Usage
按 component implementation 出現次數排序。
GAP TOKENS — IMPLEMENTATION COUNT
| Token | 次數 | 場景 |
|---|---|---|
| gap-2 | 12 | icon + text、button group |
| gap-1 | 11 | row 內部 micro spacing |
| gap-3 | 6 | 小區塊內部 |
| gap-4 | 3 | — |
| gap-7 | 1 | outlier |
| gap-0.5 | 1 | outlier |
VISUAL — GAP-1 / -2 / -3 / -4
gap-1
gap-2
gap-3
gap-4
Padding Usage
Implementation 出現 20+ 種 padding 組合，下表為前 20 名。
| Token | 次數 | 場景 |
|---|---|---|
| p-1 | 13 | icon-only button、small chip |
| py-2 | 5 | — |
| px-2 | 5 | — |
| pr-1 | 5 | — |
| pl-5 | 5 | — |
| pl-3 | 5 | — |
| px-5 | 4 | — |
| px-3 | 4 | — |
| pr-5 | 4 | — |
| pr-3 | 4 | — |
| pl-2 | 4 | — |
| pl-1 | 4 | — |
| p-4 | 4 | card / modal body |
| px-4 | 3 | — |
| pb-1 | 3 | — |
| p-3 | 3 | — |
| py-3 | 2 | — |
| py-1 | 2 | — |
| p-5 | 2 | — |
| p-2 | 2 | — |
Margin Usage
主要用於 stories 內部排版，implementation 真實使用較少。下表為前 5 名。
| Token | 次數 |
|---|---|
| mb-2 | 34 |
| mt-2 | 17 |
| mt-4 | 7 |
| mb-4 | 7 |
| ml-4 | 4 |
Implementation Notes
Observation only — no migration planned
本區僅記錄 audit 觀察，不對應任何 active rule 或重構計畫。
OBSERVATION
- Gap 自然收斂為 gap-1 / -2 / -3 / -4 四階；gap-7、gap-0.5 各 1 次為 outlier。
- Padding 出現 20+ 種組合，最常見
p-1（13×，icon-only button）。pl/pr 大量非對稱（pl-3+pr-5、pl-5+pr-3 各 4–5 次），暗示 input 內部 icon padding 規格但未抽成 token。 - Margin 集中在 stories 排版用，implementation 真實用量小。
ANOMALIES
以下高度值在 Tailwind v4 雖然可解析（dynamic spacing），但跳脫常見階梯，行為靠 runtime 推導：
Table/index.tsx:449
h-45
DatePicker/TimePickerSection.tsx:38
h-60
Filter/index.tsx:203
max-h-90
FUTURE DIRECTION (NOT PLANNED)
若未來治理：padding 不適合抽 token，比較適合鎖在 component-level spec（每個元件的 padding 由元件 contract 定義）。gap 已自然收斂，無需動作。 現階段不執行。