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	深色背景上的文字

---

📝 字型系統

字型家族

/* 主要字型 */
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	大數字顯示

---

📐 間距系統

基礎單位

--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

---

🔲 元件規範

按鈕

<!-- 主要按鈕 -->
<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

卡片

<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

表格

<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

表單

<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)

<!-- 狀態徽章 -->
<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 卡片

結構

<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>

樣式

.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

---

🌙 深色模式 (未來)

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

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

---

🎭 動畫

過渡效果

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

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

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

載入動畫

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

---

🖼️ 圖標

使用 Font Awesome 6

<!-- 常用圖標 -->
<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