website-enchun-mgr/docs/design-tokens.md

# Design Tokens - 恩群數位行銷 (Enchun Digital Marketing)

**提取日期:** 2026-01-31
**來源:** Webflow CMS CSS (`enchun.webflow.shared.557e15b5a.css`)
**用途:** Payload CMS + Astro 遷移專案

---

## 🎨 Color Palette (色彩系統)

### Primary Colors (主要色)

| Token | Hex | Usage | Tailwind Class |
|-------|-----|-------|--------------|
| `--color-primary` | **#3898EC** | Primary blue (主要按鈕、連結) | `bg-[#3898EC]` |
| `--color-primary-dark` | **#0082F3** | Primary blue dark (深藍色) | `bg-[#0082F3]` |
| `--color-primary-light` | **#67AEE1** | Primary blue light (淡藍色) | `bg-[#67AEE1]` |
| `--color-primary-hover` | **#2895F7** | Primary blue hover | `bg-[#2895F7]` |

### Secondary Colors (次要色)

| Token | Hex | Usage | Tailwind Class |
|-------|-----|-------|--------------|
| `--color-secondary` | **#F39C12** | Secondary orange (次要橙) | `bg-[#F39C12]` |
| `--color-accent` | **#D84038** | Accent orange (強調橙) | `bg-[#D84038]` |
| `--color-accent-light` | **#F6C456** | Accent light (粉紅) | `bg-[#F6C456]` |
| `--color-accent-dark` | **#EA384C** | Accent dark (深紅) | `bg-[#EA384C]` |
| `--color-red` | **#CF0606** | Alert red (警告紅) | `bg-[#CF0606]` |
| `--color-pink` | **#BB8282** | Pink (粉紅) | `bg-[#BB8282]` |
| `--color-rose` | **#C48383** | Rose (玫瑰) | `bg-[#C48383]` |

### Neutral Colors (中性色)

| Token | Hex | Usage | Tailwind Class |
|-------|-----|-------|--------------|
| `--color-white` | **#FFFFFF** | White (白色背景) | `bg-[#FFFFFF]` |
| `--color-black` | **#000000** | Black (黑色) | `bg-[#000000]` |
| `--color-gray-50` | **#FAFAFA** | Light gray (淺灰背景) | `bg-[#FAFAFA]` |
| `--color-gray-100` | **#F5F5F5** | Light gray 1 | `bg-[#F5F5F5]` |
| `--color-gray-200` | **#F3F3F3** | Light gray 2 | `bg-[#F3F3F3]` |
| `--color-gray-300` | **#EEEEEE** | Light gray 3 | `bg-[#EEEEEE]` |
| `--color-gray-400` | **#DDDDDD** | Light gray 4 | `bg-[#DDDDDD]` |
| `--color-gray-500` | **#C8C8C8** | Mid gray (中灰) | `bg-[#C8C8C8]` |
| `--color-gray-600` | **#999999** | Medium gray | `text-[#999999]` |
| `--color-gray-700` | **#828282** | Dark gray 1 | `text-[#828282]` |
| `--color-gray-800` | **#758696** | Dark gray 2 | `text-[#758696]` |
| `--color-gray-900` | **#5D6C7B** | Dark gray 3 | `text-[#5D6C7B]` |
| `--color-gray-950` | **#4F4F4F** | Dark gray 4 (深灰) | `text-[#4F4F4F]` |

### Text Colors (文字顏色)

| Token | Hex | Usage | Tailwind Class |
|-------|-----|-------|--------------|
| `--color-text-primary` | **#333333** | Primary text (主要文字) | `text-[#333333]` |
| `--color-text-secondary` | **#222222** | Secondary text (次要文字) | `text-[#222222]` |
| `color-text-muted` | **#999999** | Muted text (弱化文字) | `text-[#999999]` |
| `--color-text-light` | **#758696** | Light text (淺色文字) | `text-[#758696]` |
| `--color-text-inverse` | **#FFFFFF** | Inverse text (反白文字) | `text-[#FFFFFF]` |

### Dark Mode Colors (深色模式)

| Token | Hex | Usage |
|-------|-----|-------|
| `--color-dark-bg` | **#2226** | Dark background |
| `--color-dark-surface` | **#1A1A1A** | Dark surface |

### Special Colors (特殊色)

| Token | Hex | Usage | Tailwind Class |
|-------|-----|-------|--------------|
| `--color-link` | **#3083BF** | Link color (連結色) | `text-[#3083BF]` |
| `--color-link-hover` | **#23608C** | Link hover | `text-[#23608C]` |
| `--color-border` | **#E2E8F0** | Border (邊框) | `border-[#E2E8F0]` |
| `--color-divider` | **#DDDDDD` | Divider (分隔線) | `border-[#DDDDDD]` |

---

## 🔤 Typography (字體系統)

### Font Families (字體家族)

| Token | Value | Usage | Notes |
|-------|-------|-------|-------|
| `--font-family-sans` | **'Noto Sans TC', 'Quicksand', Arial, sans-serif** | Primary sans (主要無襯線) |繁體中文主要 |
| `--font-family-heading` | **'Noto Sans TC', 'Quicksand', Arial, sans-serif** | Headings (標題) | Noto Sans TC 優先 |
| `--font-family-accent` | **'Quicksand', 'Noto Sans TC', sans-serif** | Accent (強調) | 英文使用 Quicksand |

### Font Sizes (字體大小)

| Token | Value | Usage | Tailwind Class |
|-------|-------|-------|--------------|
| `--font-size-xs` | **0.75rem** | Extra small | `text-xs` |
| `--font-size-sm` | **0.875rem** | Small | `text-sm` |
| `--font-size-base` | **1rem** | Base (16px @ desktop) | `text-base` |
| `--font-size-lg` | **1.125rem** | Large | `text-lg` |
| `--font-size-xl` | **1.25rem** | Extra large | `text-xl` |
| `font-size-2xl` | **1.5rem** | 2X large | `text-2xl` |
| `font-size-3xl` | **1.875rem** | 3X large | `text-3xl` |
| `font-size-4xl` | **2.25rem** | 4X large | `text-4xl` |
| `font-size-5xl` | **3rem** | 5X large | `text-5xl` |

### Font Weights (字體粗細)

| Token | Value | Usage | Tailwind Class |
|-------|-------|-------|--------------|
| `--font-weight-light` | **300** | Light | `font-light` |
| `--font-weight-normal` | **400** | Normal | `font-normal` |
| `--font-weight-medium` | **500** | Medium | `font-medium` |
| `--font-weight-semibold` | **600** | Semibold | `font-semibold` |
| `--font-weight-bold` | **700** | Bold | `font-bold` |

### Line Heights (行高)

| Token | Value | Usage | Tailwind Class |
|-------|-------|-------|--------------|
| `--line-height-tight` | **1.25** | Tight | `leading-tight` |
| `--line-height-snug` | **1.375** | Snug | `leading-snug` |
| `--line-height-normal` | **1.5** | Normal | `leading-normal` |
| `line-height-relaxed` | **1.625** | Relaxed | `leading-relaxed` |
| `--line-height-loose` | **2** | Loose | `leading-loose` |

---

## 📏 Spacing (間距系統)

### Scale (Tailwind 間頭)

| Token | Rem | Px (@16px) | Usage | Tailwind Class |
|-------|-----|-------------|-------|--------------|
| `--spacing-0` | 0 | 0px | None | `p-0`, `m-0` |
| `--spacing-px` | 1px | 1px | Pixel | `p-px` |
| `--spacing-0.5` | 0.125rem | 2px | `p-0.5` |
| `--spacing-1` | 0.25rem | 4px | `p-1` |
| `--spacing-2` | 0.5rem | 8px | `p-2` |
| `--spacing-3` | 0.75rem | 12px | `p-3` |
| `--spacing-4` | 1rem | 16px | `p-4` |
| `--spacing-5` | 1.25rem | 20px | `p-5` |
| `--spacing-6` | 1.5rem | 24px | `p-6` |
| `--spacing-8` | 2rem | 32px | `p-8` |
| `spacing-10` | 2.5rem | 40px | `p-10` |
| `--spacing-12` | 3rem | 48px | `p-12` |
| `--spacing-16` | 4rem | 64px | `p-16` |
| `spacing-20` | 5rem | 80px | `p-20` |
| `spacing-24` | 6rem | 96px | `p-24` |

### Container Widths (容器寬度)

| Token | Value | Usage |
|-------|-------|-------|
| `--container-sm` | 640px | Small container |
| `--container-md` | 768px | Medium container |
| `--container-lg` | 1024px | Large container |
| `--container-xl` | 1280px | XL container |
| `--container-2xl` | 1536px | 2XL container |

---

## 📱 Breakpoints (斷點系統)

### Responsive Breakpoints (Webflow 原始值)

| Breakpoint | Max Width | Device | Font Size | Tailwind Config |
|-----------|-----------|--------|-----------|----------------|
| `--breakpoint-desktop` | None | Desktop (default) | 19px base | `lg` (1024px+) |
| `--breakpoint-tablet` | **991px** | Tablet | 19px base | `md` (768px+) |
| `--breakpoint-mobile` | **767px** | Mobile | 16px base | `sm` (640px+) |
| `--breakpoint-mobile-small` | **479px** | Small mobile | 13px base | `xs` (480px+) |

**Tailwind CSS v4 配置:**

```javascript
// tailwind.config.mjs
export default {
  theme: {
    extend: {
      screens: {
        'xs': '480px',   // Small mobile (< 479px)
        'sm': '640px',   // Mobile landscape (480px - 767px)
        'md': '768px',   // Tablet (768px - 991px)
        'lg': '1024px',  // Desktop (992px+)
        'xl': '1280px',  // Large desktop
        '2xl': '1536px',  // Extra large
      }
    }
  }
}
```

**Webflow HTML 響體大小調整:**
```css
@media (max-width: 991px) { html { font-size: 19px; } }
@media (max-width: 767px) { html { font-size: 16px; } }
@media (max-width: 479px) { html { font-size: 13px; } }
```

---

## 🔲 Border Radius (圓角)

| Token | Value | Usage | Tailwind Class |
|-------|-------|-------|--------------|
| `--radius-none` | 0 | No radius | `rounded-none` |
| `--radius-sm` | 0.125rem | 2px | `rounded-sm` |
| `--radius` | 0.25rem | 4px | `rounded` |
| `--radius-md` | 0.375rem | 6px | `rounded-md` |
| `--radius-lg` | 0.5rem | 8px | `rounded-lg` |
| `--radius-xl` | 0.75rem | 12px | `rounded-xl` |
| `radius-2xl` | 1rem | 16px | `rounded-2xl` |
| `radius-3xl` | 1.5rem | 24px | `rounded-3xl` |
| `radius-full` | 9999px | Full circle | `rounded-full` |

---

## 💫 Shadows (陰影)

| Token | Value | Usage | Tailwind Class |
|-------|-------|-------|--------------|
| `--shadow-sm` | 0 1px 2px rgb(0 0 0 / 0.05) | Small shadow | `shadow-sm` |
| `--shadow` | 0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px rgb(0 0 0 / 0.06) | Default | `shadow` |
| `--shadow-md` | 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) | Medium | `shadow-md` |
| `shadow-lg` | 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) | Large | `shadow-lg` |
| `shadow-xl` | 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) | XL | `shadow-xl` |
| `shadow-2xl` | 0 25px 50px -12px rgb(0 0 0 / 0.25) | 2XL | `shadow-2xl` |

---

## ⏱ Transitions (過渡效果)

| Token | Value | Usage |
|-------|-------|-------|
| `--transition-fast` | 150ms ease-in-out | Fast transitions |
| `--transition-base` | 200ms ease-in-out | Base transitions |
| `transition-normal` | 250ms ease-in-out | Normal transitions |
| `transition-slow` | 350ms ease-in-out | Slow transitions |

---

## 🎯 Z-Index Scale (層級)

| Token | Value | Usage |
|-------|-------|-------|
| `--z-dropdown` | 1000 | Dropdown menus |
| `--z-sticky` | 1020 | Sticky header |
| `z-modal` | 1040 | Modals |
| `z-popover` | 1060 | Popovers |
| `z-tooltip` | 1080 | Tooltips |

---

## 📐 Layout (佈局)

### Container (容器)

| Token | Value | Usage |
|-------|-------|-------|
| `--container-max-width` | 1200px | Max content width |
| `--container-padding` | 1.5rem | Side padding (mobile) |
| `--container-padding-lg` | 2rem | Side padding (desktop) |

### Grid (網格)

| Token | Value | Usage |
|-------|-------|-------|
| `--grid-columns` | 12 | Grid column count (Webflow) |
| `--grid-gutter` | 20px | Grid gap (Webflow default) |

---

## 🔗 Button Styles (按鈕樣式)

| Button Type | Background | Text | Border Radius | Padding |
|-------------|-----------|------|--------------|--------|
| Primary | `#3898EC` | White | 8px | 12px 24px |
| Secondary | `#F39C12` | White | 8px | 12px 24px |
| Accent | `#D84038` | White | 8px | 12px 24px |
| Outline | Transparent | `#3898EC` | 2px | 12px 24px |

**Hover States:**
- Primary hover: `#2895F7`
- Secondary hover: `#E08E0B`
- Accent hover: `#EA384C`

---

## 🎨 Category Colors (分類顏色 - 來自 Webflow)

| Category | Token | Hex | Badge Color |
|----------|-------|-----|------------|
| Google小學堂 | `--color-category-google` | **#67AEE1** (Light blue) | bg-[#67AEE1] |
| Meta小學堂 | `--color-category-meta` | **#8974DE** (Purple) | bg-[#8974DE] |
| 行銷時事最前線 | `--color-category-news` | **#3083BF** (Blue) | bg-[#3083BF] |
| 恩群數位最新公告 | `--color-category-enchun` | **#3898EC** (Primary blue) | bg-[#3898EC] |

**Badge Labels:**
- Hot (行銷方案): `#EA384C` (red)
- New (行銷放大鏡): `#67AEE1` (light blue)

---

## 📝 Usage Notes (使用說明)

### CSS Variables (CSS 變數)

All tokens are available as CSS custom properties. Use like:

```css
color: var(--color-primary);
background-color: var(--color-gray-50);
font-family: var(--font-family-sans);
padding: var(--spacing-4);
```

### Tailwind CSS Configuration

These tokens map to Tailwind CSS utility classes. Configure in `tailwind.config.mjs`:

```javascript
theme: {
  extend: {
    colors: {
      primary: '#3898EC',
      secondary: '#F39C12',
      // ... map all tokens
    },
    fontFamily: {
      sans: ['Noto Sans TC', 'Quicksand', 'Arial', 'sans-serif'],
    },
    spacing: {
      // inherits from Tailwind default
    }
  }
}
```

### Google Fonts Import

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;600;700&family=Quicksand:wght@400;500;600;700&display=swap" rel="stylesheet">
```

---

**Change Log:**

| Date | Version | Description | Author |
|------|--------|-------------|--------|
| 2026-01-31 | 1.0 | Initial extraction from Webflow CSS | PM Agent via Design Token Extraction |