間距與圓角

間距：4px 基準

所有間距都是 4px 的倍數。理由不是美學，是可預測—— 當所有人都用同一組數字，版面自然對齊，不必逐處微調。

Token	值	典型用途
0.5 / 1	2px / 4px	圖示與文字之間
1.5 / 2	6px / 8px	元素之間、密集表格內距
2.5 / 3	10px / 12px	卡片內部區塊間距
4 / 6	16px / 24px	卡片內距、區塊間距
8 / 12	32px / 48px	頁面區段之間

間距階

0.25rem

0.5rem

0.75rem

1rem

1.5rem

2rem

圓角：一個變數控制全站

--radius: 0.5rem;              /* 基準 */
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);

改 --radius 一個值，整站從方到圓。這是最常被要求的品牌調整， 所以刻意做成單一開關。

圓角階

sm

md

lg

full

控制項尺寸

Token	值	用在哪
control-sm	32px	密集表格內的控制項
control	36px	預設輸入框／欄位高度
control-lg	40px	主要按鈕
tap-target	44px	粗指標裝置的最小觸控目標

Input、Select、EditableField 全部是 36px。這不是巧合—— 把三種控制項排在同一列時，任何 1–2px 的差異都會被看見。

觸控目標 44px 只在 @media (pointer: coarse) 生效：手機平板放大，桌機維持精簡。 詳見無障礙。