sessionhub-minimal-uilisted

# SessionHub Minimal UI 設計系統 這套設計語言是 SessionHub 從「傳統管理後台」重構為「專業開發者工具 / AI Agent Workspace」的成果。目標視覺參考 **Linear / Raycast / Arc / Vercel Dashboard / Notion**，而非 Discord / Jira / Azure Portal。 核心優先序（衝突時據此取捨）： > **高級感 > 華麗感 · 舒適度 > 視覺衝擊 · 長時間使用體驗 > 設計展示效果** 當你為 SessionHub 寫任何 UI，先問自己：這看起來像「一整塊安靜的畫布」，還是「一堆卡片和框線」？答案應該是前者。 ## 設計哲學（先理解，再套用） 1. **靠留白、字級、背景色差建立層級——不是靠邊框和卡片。** 傳統後台每個區塊都框起來，資訊被切碎、視覺疲勞。這裡反過來：預設無框，只有真正需要聚焦或浮起來的東西才有邊界。 2. **冷灰中性是基調，藍是點綴。** 整個畫布是極淡的冷灰漸層光暈（Linear/Vercel 調），品牌藍 `#2563EB` 只出現在互動與強調元件（primary 按鈕、active tab 底線、hover）。文字也去藍味，用冷灰。 3. **玻璃感是點綴，不是主體。** 只有浮層（modal / dropdown / floating panel / context menu）用 glassmorphism。Sidebar、card、整頁背景一律不玻璃化。 4. **動效克制。** 150–250ms `ease-out`，用於 hover / tab 切換 / 展開 / modal。不彈跳、不華麗轉場，且尊重 `prefers-reduced-motion`。 ## 硬性規範（這些是已定案的，照做以維持一致） 這些值都已定義為 CSS 變數，**永遠用變數，不要寫死顏色或數值**。完整 token 表見 `references/tokens.md`。 - **圓角統一系統**：Button `--radius-button`(10px) · Input `--radius-input`(12px) · Card `--radius-card`(16px) · Modal `--radius-modal`(20px)。不要出現 4/8/24px 混用。 - **邊框**：預設 `border: none`；需要分界時 `1px solid var(--color-border-subtle)`（極淡）。禁止粗框、高對比分隔線。 - **陰影**：一般表面 `var(--shadow-panel)`（`0 2px 12px rgba(0,0,0,0.06)`），浮層 `var(--shadow-float)`。禁止 `0 18px 40px` 這類重陰影。 - **背景**：app-shell 用 `var(--gradient-app)`（冷灰漸層畫布）。面板/浮層 header 可用 `var(--gradient-panel-header)`。避免高飽和裝飾漸層。 - **文字**：冷灰中性 token（`--color-text-primary` / `--color-text-secondary`），不要用帶藍味的舊色。 - **scrollbar**：全站已有自訂樣式（細、冷灰半透明、圓角）。新捲動區自動繼承，不要覆寫成系統預設。 ## 去卡片原則（本設計系統最容易做錯