ewoooc/docs/DESIGN_SYSTEM.md

# MOMO Pro System - 設計系統

> 最後更新：2026-01-29

---

## 🎨 色彩系統

### 主要色彩

| 名稱 | 色碼 | 用途 |
|------|------|------|
| **Primary** | `#667eea` | 主要按鈕、連結、強調 |
| **Primary Gradient** | `#667eea → #764ba2` | 卡片、標題背景 |
| **Secondary** | `#6c757d` | 次要按鈕、文字 |

### 狀態色彩

| 名稱 | 色碼 | 用途 |
|------|------|------|
| **Success** | `#28a745` | 成功、降價、正面 |
| **Danger** | `#dc3545` | 錯誤、漲價、警告 |
| **Warning** | `#ffc107` | 提醒、注意 |
| **Info** | `#17a2b8` | 資訊、提示 |

### 背景色彩

| 名稱 | 色碼 | 用途 |
|------|------|------|
| **Background** | `#f8f9fa` | 頁面背景 |
| **Card** | `#ffffff` | 卡片背景 |
| **Navbar** | `#1f2937 → #374151` | 導航列 |

### 文字色彩

| 名稱 | 色碼 | 用途 |
|------|------|------|
| **Text Primary** | `#2c3e50` | 主要文字 |
| **Text Secondary** | `#6c757d` | 次要文字、說明 |
| **Text Muted** | `#9ca3af` | 淡化文字 |
| **Text White** | `#ffffff` | 深色背景上的文字 |

---

## 📝 字型系統

### 字型家族

```css
/* 主要字型 */
font-family: 'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 
             'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

/* 等寬字型 (程式碼) */
font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
```

### 字型大小

| 層級 | 大小 | 用途 |
|------|------|------|
| **Display** | 3rem (48px) | 大標題 |
| **H1** | 2.5rem (40px) | 頁面標題 |
| **H2** | 2rem (32px) | 區塊標題 |
| **H3** | 1.5rem (24px) | 卡片標題 |
| **H4** | 1.25rem (20px) | 小標題 |
| **H5** | 1rem (16px) | 強調文字 |
| **Body** | 1rem (16px) | 內文 |
| **Small** | 0.875rem (14px) | 輔助文字 |
| **XSmall** | 0.75rem (12px) | 標籤、caption |

### 字重

| 名稱 | 數值 | 用途 |
|------|------|------|
| Regular | 400 | 內文 |
| Medium | 500 | 導航、按鈕 |
| SemiBold | 600 | 標題、強調 |
| Bold | 700 | 數字、KPI |
| ExtraBold | 800 | 大數字顯示 |

---

## 📐 間距系統

### 基礎單位

```css
--spacing-unit: 0.25rem; /* 4px */
```

### 間距比例

| 名稱 | 值 | CSS 變數 |
|------|------|---------|
| **XXS** | 0.25rem (4px) | `--spacing-1` |
| **XS** | 0.5rem (8px) | `--spacing-2` |
| **SM** | 0.75rem (12px) | `--spacing-3` |
| **MD** | 1rem (16px) | `--spacing-4` |
| **LG** | 1.5rem (24px) | `--spacing-6` |
| **XL** | 2rem (32px) | `--spacing-8` |
| **XXL** | 3rem (48px) | `--spacing-12` |

---

## 🔲 元件規範

### 按鈕

```html
<!-- 主要按鈕 -->
<button class="btn btn-primary">主要操作</button>

<!-- 次要按鈕 -->
<button class="btn btn-outline-secondary">次要操作</button>

<!-- 危險操作 -->
<button class="btn btn-danger">刪除</button>

<!-- 小型按鈕 -->
<button class="btn btn-sm btn-primary">小按鈕</button>
```

**按鈕規格：**
| 類型 | 高度 | 內距 | 字體大小 |
|------|------|------|---------|
| 預設 | 38px | 0.75rem 1.5rem | 16px |
| 小型 | 31px | 0.4rem 0.8rem | 14px |
| 大型 | 48px | 1rem 2rem | 18px |

### 卡片

```html
<div class="card">
    <div class="card-body">
        <h5 class="card-title">標題</h5>
        <p class="card-text">內容</p>
    </div>
</div>
```

**卡片規格：**
| 屬性 | 值 |
|------|------|
| 圓角 | 12px |
| 陰影 | `0 2px 10px rgba(0,0,0,0.08)` |
| 內距 | 1.5rem |
| 邊框 | none |

### 表格

```html
<table class="table table-hover align-middle">
    <thead>
        <tr class="text-nowrap">
            <th>欄位</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>資料</td>
        </tr>
    </tbody>
</table>
```

**表格規格：**
| 屬性 | 值 |
|------|------|
| 表頭背景 | `#f8f9fa` |
| 行高 | 48px |
| Hover 背景 | `rgba(0,0,0,0.02)` |
| 邊框 | `1px solid #e9ecef` |

### 表單

```html
<div class="form-group mb-3">
    <label class="form-label">標籤</label>
    <input type="text" class="form-control" placeholder="請輸入...">
</div>
```

**輸入框規格：**
| 屬性 | 值 |
|------|------|
| 高度 | 38px |
| 圓角 | 6px |
| 邊框 | `1px solid #ced4da` |
| Focus 邊框 | `#667eea` |

### 徽章 (Badge)

```html
<!-- 狀態徽章 -->
<span class="badge bg-success">成功</span>
<span class="badge bg-danger">失敗</span>
<span class="badge bg-warning text-dark">待處理</span>

<!-- 分類徽章 -->
<span class="badge" style="background-color: #ffecd2;">美妝</span>
```

---

## 📊 KPI 卡片

### 結構

```html
<div class="kpi-grid">
    <div class="kpi-item increase">
        <div class="kpi-item-label">漲價</div>
        <div class="kpi-item-value">45</div>
        <div class="kpi-item-sub">件商品</div>
    </div>
</div>
```

### 樣式

```css
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.kpi-item {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.kpi-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.kpi-item.increase .kpi-item-value {
    color: #dc3545;
}

.kpi-item.decrease .kpi-item-value {
    color: #28a745;
}
```

---

## 📱 響應式斷點

| 名稱 | 最小寬度 | 類別前綴 |
|------|----------|---------|
| **XS** | 0 | - |
| **SM** | 576px | `sm-` |
| **MD** | 768px | `md-` |
| **LG** | 992px | `lg-` |
| **XL** | 1200px | `xl-` |
| **XXL** | 1400px | `xxl-` |

### 容器寬度

| 斷點 | 容器最大寬度 |
|------|-------------|
| SM | 540px |
| MD | 720px |
| LG | 960px |
| XL | 1140px |
| XXL | 1320px |

---

## 🌙 深色模式 (未來)

```css
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --text-primary: #2c3e50;
}

[data-theme="dark"] {
    --bg-primary: #1a1a2e;
    --bg-secondary: #16213e;
    --text-primary: #e8e8e8;
}
```

---

## 🎭 動畫

### 過渡效果

```css
/* 預設過渡 */
transition: all 0.2s ease;

/* 按鈕 Hover */
transition: transform 0.15s, box-shadow 0.15s;

/* 卡片 Hover */
transition: transform 0.2s, box-shadow 0.2s;
```

### 載入動畫

```css
.spinner-border {
    width: 1.5rem;
    height: 1.5rem;
    border-width: 0.2em;
}
```

---

## 🖼️ 圖標

### 使用 Font Awesome 6

```html
<!-- 常用圖標 -->
<i class="fas fa-chart-line"></i>  <!-- 圖表 -->
<i class="fas fa-sync-alt"></i>    <!-- 更新 -->
<i class="fas fa-download"></i>    <!-- 下載 -->
<i class="fas fa-cog"></i>         <!-- 設定 -->
<i class="fas fa-bell"></i>        <!-- 通知 -->
<i class="fas fa-user"></i>        <!-- 用戶 -->
```

### 圖標大小

| 類別 | 大小 |
|------|------|
| 預設 | 1em |
| `fa-lg` | 1.33em |
| `fa-2x` | 2em |
| `fa-3x` | 3em |