間距系統
AppFuse Web 直接使用 Tailwind CSS 預設的 4px 基準間距，不額外定義 Design Token。所有間距透過 Tailwind 的間距 class（p-*、m-*、gap-*）直接表達。
間距基準
Tailwind 的間距以 4px 為基準單位：
| Class | 值 | 用途範例 |
|---|---|---|
p-1 / gap-1 | 4px | 緊密內距（icon 與文字間） |
p-2 / gap-2 | 8px | compact 表格 cell padding |
p-3 / gap-3 | 12px | Checkbox/Radio 與 label 間距 |
p-4 / gap-4 | 16px | 卡片內距、表單欄位間距 |
p-6 / gap-6 | 24px | 區段間距 |
p-8 / gap-8 | 32px | 頁面主要區塊間距 |
圓角系統
圓角透過 DaisyUI 主題 CSS 變數定義，確保全應用一致：
| CSS 變數 | 值 | 對應元素 |
|---|---|---|
--radius-box | 0.5rem (8px) | 卡片、容器 |
--radius-field | 0.5rem (8px) | 輸入框、按鈕 |
--radius-selector | 0.375rem (6px) | 下拉選單選項 |
--tab-radius | 0.5rem (8px) | 分頁標籤 |
特殊覆寫
| 元素 | 圓角 | Class | 說明 |
|---|---|---|---|
| Checkbox | 4px | rounded (Tailwind) | 覆寫為小圓角方形，區別於 Radio 的圓形 |
邊框寬度
| CSS 變數 | 值 | 對應元素 |
|---|---|---|
--border | 1px | Input、Button、Card 預設邊框 |
--tab-border | 1px | 分頁標籤邊框 |
| — | 2px | Checkbox、Radio、Switch 邊框 |
Checkbox、Radio、Switch 使用 2px 邊框（在 tailwind.css 中覆寫），提升視覺辨識度。
組件間距慣例
表單佈局
{/* 表單欄位使用 gap-4 (16px) 垂直間距 */}
<div className="flex flex-col gap-4">
<Input label="客戶名稱" />
<Input label="電話" />
<Input label="地址" />
</div>
Checkbox/Radio 群組
{/* 控件與 label 之間使用 gap-3 (12px) */}
<label className="flex items-center gap-3">
<Checkbox />
<span>選項文字</span>
</label>
Helper Text 對齊
表單元件的 helper text 使用固定的 label-text-alt text-xs 樣式，margin-left 計算為控件寬度 + gap 寬度：
| 密度 | Checkbox margin-left | 計算 |
|---|---|---|
| compact | ml-[calc(16px+12px)] | checkbox-xs 16px + gap-3 12px |
| comfortable | ml-[calc(20px+12px)] | checkbox-sm 20px + gap-3 12px |