TigerAI Cloud Design System
深色玻璃擬態（glassmorphism）設計語言，以 Inter 為字體、indigo 為品牌主色、emerald 為行動色。所有規範皆以 CSS 變數定義於 tokens.css。點擊任一色票即可複製數值。
總覽
設計系統由「設計 token」驅動。Token 分兩層：primitive（原始色票/數值）與 semantic（帶語意的別名）。UI 只引用 semantic 層，未來改色只需改一處。
主要來源檔
tokens.css
tokens.json
index.html
核心風格
Glassmorphism
Dark mode
Inter
色彩 Colors
語意色（建議 UI 使用）對應到下方原始色階。點色票複製其數值。
語意色 Semantic
品牌主色 Indigo
行動 / 成功 Emerald
狀態 Red / Amber
中性灰階 Gray
字體 Typography
字型 Inter；等寬資料（IP、ID）使用系統 mono。
字重 Weights
間距 Spacing
以 4px 為基準的間距尺度，用於 padding、margin 與 gap。
圓角 Radius
md 用於輸入框、lg 用於按鈕、xl 用於卡片與 modal。
陰影 Shadows
含品牌色光暈陰影，用於主要按鈕與浮層。
shadow-lg
shadow-2xl
glow-action
glow-accent
元件 Components
由 token 組合而成的核心 UI 元件，對應參考專案的實際樣式。
按鈕 Buttons
輸入框 Input
狀態標籤 Badges
Active
Inactive
Pending
提示訊息 Alerts
驗證失敗，請重試
⚠ 未偵測到裝置 ID，請確認網址包含 ?id= 參數
導覽項目 Nav item
玻璃卡片 Glass card
歡迎使用 TigerAI
您的裝置已成功綁定
公司名稱Tiger AI
裝置 IP192.168.1.100
表格 Table
資料列表。標頭為大寫小字、列 hover 高亮；ID 用等寬、command 用主色等寬、狀態用 badge、操作列用 icon 按鈕（編輯／刪除）。
| ID | Name | Command | Priority | Author | Status | Actions |
|---|---|---|---|---|---|---|
| security-remediati… | security-remediation 漏洞程式碼安全重構 | security-remediation | 0 | Teddy Wu | Active | |
| 6b416706-01ff… | SBIR 經費編列與合理性檢查 | sbir-budget | 0 | Teddy Wu | Active | |
| 309e41ec-03ec… | UX-介面邏輯體檢 | ux-review | 0 | TigerAI 虎智科技 | Inactive |
分頁 Pagination
共 42 筆
1 / 3
表單 Form
於 modal 中呈現。標籤為次要色，必填以紅色 * 標示；欄位採實心 gray-800，focus 顯示 indigo 外框；可用兩欄網格並排，底部右側為「取消／儲存」。