---
name: 極簡奢華風 UI 實作規範 (Minimal Luxury UI)
description: 定義 Star Cloud 管理後台的「極簡奢華風」設計規範，包含 CSS Tokens、常用組件樣式、動畫效果與互動模式，確保全站 15+ 模組的視覺一致性。
---

# 極簡奢華風 UI 實作規範 (Minimal Luxury UI)

本文件定義了 Star Cloud 專案的核心視覺語言。所有新頁面與組件開發必須嚴格遵守此規範。

## 1. 核心設計令牌 (Design Tokens)

### 色彩系統 (CSS Variables)
位於 `resources/css/app.css`：
- `--color-luxury-deep`: `#0f172a` (深色背景)
- `--color-luxury-card`: `#1e293b` (卡片背景)
- `--color-accent`: `#06b6d4` (青色點綴，適用於按鈕與標示)

### 字體 (Typography)
- **內文字體**: `Plus Jakarta Sans`
- **標題/顯示字體**: `Outfit`
- **特性**: 標題需帶有 `letter-spacing: -0.02em` 以增強精密感。

## 2. 核心組件樣式

### 豪華卡片 (Luxury Card)
```html
<div class="luxury-card p-6 rounded-2xl animate-luxury-in">
    <!-- 內容 -->
</div>
```
- **特效**: 懸停時帶有 Y 軸平移與深度投影。

### 側邊導覽項 (Luxury Nav Item)
```html
<a href="#" class="luxury-nav-item active">
    <i class="lucide-icon"></i>
    <span>節點名稱</span>
</a>
```
- **啟用狀態**: 左側帶有圓角直條指示器，並輔以青色發光陰影。

### 按鈕組件 (Buttons)
- **Primary**: `.btn-luxury-primary` (青色漸層，適用於建立、儲存)
- **Secondary**: `.btn-luxury-secondary` (白色/深色背景，帶邊框，適用於編輯、篩選)
- **Ghost**: `.btn-luxury-ghost` (無背景，適用於取消、查看更多)

```html
<!-- Primary -->
<button class="btn-luxury-primary">
    <i class="lucide-plus size-4"></i>
    <span>建立新機台</span>
</button>

<!-- Ghost -->
<button class="btn-luxury-ghost">取消</button>
```

## 3. 動畫與互動

### 進場動畫
- **`.animate-luxury-in`**: 所有的主內容區域或卡片在頁面載入時，應具備由下而上的淡入效果。

### Alpine.js 互動模式 (以時間選擇器為例)
- **互動原則**: 點擊觸發下拉選單時，必須使用 `x-transition` 且帶有 `scale` 偏移。
- **樣式要求**: 選單背景需使用玻璃擬態 (Glassmorphism) 或帶透明度的深色背景。

## 4. UI 檢查清單 (AI 助手執行前必讀)
- [ ] 是否使用了正確的 `rounded-2xl` (或更圓) 的導角？
- [ ] 所有的圖示是否一致使用 `lucide-react` 風格？
- [ ] 卡片是否有適當的間距 (通常為 `p-6`)？
- [ ] 文字色階是否符合：標題 (slate-900/white)、副標 (slate-500/slate-400)？

## 5. 開發注意事項 (Important Notes)

### 技術限制備忘
- **CSS 編譯**: 複雜的 `box-shadow` 或漸層應直接寫原生 CSS 屬性，避免在 `@apply` 中使用帶空格的數值導致編譯失敗（詳見 KI: `tailwind-luxury-ui-patterns`）。
- **深色模式**: 互動式按鈕在深色模式下必須強化文字亮度（`dark:text-white`），並輔以青色發光效果。

### 即時動態呈現規範
- **格式**: `#機台編號 動作內容` (例如 `#V-001 執行出貨`)。
- **脈絡**: 必須呈現相對時間與機台位置。

---
> [!IMPORTANT]
> **開發新功能前，必須確認 `app.css` 中的 `.btn-luxury-*` 系列組件是否滿足需求。**
> 嚴禁在 Blade 中寫入大量重複的 `bg-indigo-600` 等舊式類別。

---
> [!TIP]
> 當遇到未定義的 UI 區塊時，優先參考 `admin.dashboard.blade.php` 的卡片與即時動態實作方式進行衍生。