設計指南
AppFuse Web 的視覺設計建立在 DaisyUI 語意化 與 Tailwind CSS 原子化 的雙層架構上。開發者透過語意化 class（如 btn-primary、bg-base-200）描述「意圖」，由主題系統決定實際的色彩與樣式，確保所有元件在不同主題下自動適配。
技術棧
| 層級 | 技術 | 職責 |
|---|---|---|
| 設計語意 | DaisyUI 5 | 語意化 class、主題色彩、元件樣式 |
| 原子樣式 | Tailwind CSS 4 | 間距、排版、響應式、自訂擴展 |
| 色彩空間 | OKLch | 感知均勻的色彩定義 |
| 樣式合併 | tailwind-merge + clsx | 條件式 class 合併與去重 |
指南索引
| 文件 | 說明 | 優先級 |
|---|---|---|
| 色彩系統 | 語意化色彩層級、Content 配對、文字透明度、WCAG 對比度 | P0 |
| 密度系統 | 三級密度規範、組件映射、觸控目標 | P0 |
| 文字排版 | 字型堆疊、文字大小、字重、Floating Label | P1 |
| 間距系統 | 間距基準、圓角、邊框寬度 | P1 |
| 層次與深度 | 背景色層級、--depth 變數、陰影規範 | P2 |
| 動態效果 | 動畫時長、轉場慣例、Easing | P2 |
與主題系統的關係
本設計指南是規範導向的參考文件，定義「應該怎麼做」；主題系統是操作導向的指南，說明「如何切換和自訂主題」。兩者互補：