# Design System: Gradient 光譜流動

> Direction from TypeUI's Gradient design skill（typeui.sh）；本實作與配色細節為原創撰寫。深電紫到熱粉的色彩過渡即是這套系統的語言本身——按鈕填色會流動、標題文字會透出光譜、進度條會隨填充穿越整段色相。這不是偶爾點綴的漸層，是系統唯一的視覺主詞。

---

## 1. Visual Theme & Atmosphere

**Design Philosophy:** Gradient 把「色彩過渡」當成和邊框、陰影、字級一樣的一級設計元素。多數系統用漸層當偶爾的裝飾點綴，這裡反過來——任何夠大的表面都該有一道過渡：hero 背景、按鈕填色、卡片邊框、標題文字填色、進度指示器。深電紫 `#990FFA` 到熱粉 `#E60076` 這組色軸經過精心挑選：兩者之間會自然穿越洋紅，讓兩個 token 產生三色的視覺經驗。純色只在漸層不實用的小面積（細邊框、行內文字色、小徽章）出現，作為系統的備援語言而非預設。8pt 網格提供結構紀律，是流動色彩不會失控成迷幻塗鴉的唯一穩定器。

**Atmosphere Keywords:** Vibrant, Kinetic, Flow-driven, Energetic, Spectral, Bold, Memorable, Systematic

**Visual Anchors:**
- 紫→粉雙 token 漸層軸，經過洋紅中界色，出現在一切「夠大」的表面
- Hero 標題用 Space Grotesk + 漸層文字填色（`background-clip: text`）
- 按鈕 hover 時漸層方向或色相位移，給互動一個「活著」的回饋
- 進度條隨填充比例穿越整段光譜，而非單色漸滿
- Montserrat 負責可讀內容，Space Grotesk 負責展示標題與漸層文字的舞台
- 8pt 網格嚴格對齊，是色彩狂放與版面秩序之間的平衡點

**Mood Board References:**
- 音樂串流平台與夜生活活動頁面的高能量視覺
- 創意代理商作品集的漸層 hero 區塊
- Synthwave 色軸但更飽和、更數位原生（不是 80 年代懷舊）
- 新創產品行銷頁的漸層 CTA 按鈕語言

---

## 2. Color Palette & Roles

### Core Palette

| Swatch | 中文名 | English Name | Hex | Role |
|--------|--------|--------------|-----|------|
| 🟣 | 電紫 | Primary | `#990FFA` | 漸層起點、主要動作、連結 |
| 🩷 | 熱粉 | Secondary | `#E60076` | 漸層終點、次要強調、hover 狀態 |
| 🌸 | 中界洋紅 | Magenta Midpoint | `#BF07B8` | 漸層中段色，行內文字/小面積場合的過渡代表色 |
| ⬜ | 皓白 | Surface | `#FFFFFF` | 背景、卡片、容器 |
| ⬛ | 墨黑 | Text | `#111827` | 內文、標題、標籤 |
| 🟢 | 成功綠 | Success | `#16A34A` | 確認、正向回饋 |
| 🔴 | 危險紅 | Danger | `#DC2626` | 錯誤、破壞性動作 |

**Rule:** 純電紫或純熱粉只用在漸層不實用的小面積（細邊框、行內連結、小徽章）；任何面積大到能展現過渡的表面——按鈕、hero 背景、卡片邊框、進度條——一律上漸層，不用純色當預設。

### Signature Gradient Tokens

```css
--gradient-primary: linear-gradient(135deg, #990FFA 0%, #BF07B8 50%, #E60076 100%);
--gradient-text: linear-gradient(90deg, #990FFA, #E60076);
--gradient-soft: linear-gradient(135deg, rgba(153,15,250,0.08), rgba(230,0,118,0.08));
```

三個 token 涵蓋系統的所有漸層需求：`--gradient-primary` 用於按鈕/CTA/hero，`--gradient-text` 用於漸層文字填色，`--gradient-soft` 用於卡片底色與 hover 背景的低飽和版本。

---

## 3. Typography Rules

### Font Families

| Token | Stack | Use |
|-------|-------|-----|
| `--font-display` | 'Space Grotesk', 'Noto Sans TC', sans-serif | 展示標題、hero 文字、漸層文字填色的畫布 |
| `--font-body` | 'Montserrat', 'Noto Sans TC', sans-serif | 內文、表單、導覽、一切需要快速讀懂的內容 |
| `--font-mono` | 'JetBrains Mono', monospace | 程式碼、技術性資料 |

**Pairing logic:** Space Grotesk 的 ink trap 與獨特字形終端給漸層文字效果一個「精心設計」而非「濾鏡套用」的質感，只用於展示標題；Montserrat 的幾何開放字形讓正文快速可讀，退居漸層元素的背景。兩者形成「表現性」與「可讀性」的節奏交替。

### Scale（七階，較一般系統多兩階以支援漸層文字的精細層級控制）

| Element | Size | Font | Weight | Note |
|---------|------|------|--------|------|
| Hero h1 | 36px | display | 700 | 漸層文字填色，line-height 1.2 |
| h2 | 30px | display | 700 | 可選漸層填色 |
| h3 | 24px | display | 600 | 卡片/section 標題 |
| Lead | 18px | body | 500 | 導言、次標題 |
| Body | 16px | body | 400 | line-height 1.6 |
| Caption | 14px | body | 500 | 輔助文字、標籤 |
| Fine print | 12px | body | 400 | 頁尾、metadata |

### Gradient Text

```css
.gradient-text {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
```

**Accessibility guard：** 漸層文字僅用於展示性標題（≥24px），絕不用於長段內文或唯一的資訊載體——所有漸層傳達的意義必須有文字或圖示作為補充說明，螢幕閱讀器讀不到漸層方向。

---

## 4. Component Stylings

### Spectrum Progress Bar（招牌元件）

進度條隨填充比例穿越整段光譜，而不是單一顏色漸滿到底——這是本系統在 typeui.sh 原文中被明確點名的三個代表性用法之一：

```css
.spectrum-track { background: #F3E8FF; border-radius: 999px; height: 10px; overflow: hidden; }
.spectrum-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #990FFA, #BF07B8, #E60076);
  background-size: 200% 100%;
  transition: width 0.4s ease;
}
```

`background-size: 200%` + 固定漸層讓填充寬度變化時，可見的色相區段也跟著位移，模擬「穿越光譜」而非「單色拉長」的視覺效果。

### Buttons

- Primary：`--gradient-primary` 底、白字、`border-radius: 12px`，padding 12px 28px，Space Grotesk 600
- Hover：漸層角度從 135deg 轉 115deg 或疊加 8% 白色，給出「色相位移」的活躍回饋
- Secondary：白底 + 2px 漸層邊框（`border-image` 或雙層 div 技巧）+ 漸層文字
- Disabled：opacity 0.35，漸層降為純灰

### Cards

- 白底 + `--gradient-soft` 極淺底色，`border-radius: 16px`
- 邊框：1px 實色淺灰，hover 轉為 2px 漸層邊框
- 卡片標題可選漸層文字（Space Grotesk h3）

### Tags / Badges

- 小面積 → 用純色（電紫或熱粉），不用漸層，維持系統定義的「純色是備援」原則
- 膠囊形，Montserrat 12px 大寫字距

### Progress / Loading

- Spinner：`conic-gradient` 版本的紫→粉旋轉圈
- Skeleton：`--gradient-soft` 的呼吸動畫（opacity 0.5 ↔ 1）

---

## 5. Layout Principles

- **8pt 網格**：所有 margin/padding/gap 為 8 的倍數，是漸層色彩不失控的結構穩定器
- **容器寬度**：max-width 1200px
- **Hero 區塊**：全寬 `--gradient-primary` 背景或 `--gradient-soft` 淺底 + 漸層文字標題
- **卡片牆**：`repeat(auto-fill, minmax(280px, 1fr))` grid，gap 24px（3 個 8pt 單位）
- **CTA 密度**：每個 section 最多一個漸層填色的主要按鈕，避免多個漸層元素互相搶戲

---

## 6. Depth & Elevation

深度語言結合陰影與漸層邊框兩層：

1. 平面（預設）：1px 淺灰邊框，無陰影
2. 抬升（hover）：邊框轉 2px 漸層 + `box-shadow: 0 8px 24px rgba(153,15,250,0.15)`（陰影色取自 Primary，帶一點色彩而非純黑灰陰影）
3. 浮層（dropdown/modal）：`0 16px 40px rgba(153,15,250,0.2)` + 半透明黑 overlay

Motion：漸層角度/位置變化用 `transition: background-position 0.3s ease` 或 `filter` 位移，按鈕與卡片 hover 統一 0.2–0.3s ease。

---

## 7. Do's and Don'ts

### Do's ✅

- 任何面積夠大的表面（按鈕、hero、卡片邊框、進度條）預設上漸層
- 漸層文字只用於展示性標題（≥24px），且提供文字本身作為完整語意載體
- 小面積場合（細邊框、行內連結、小徽章）用純色電紫或熱粉，不勉強塞漸層
- 8pt 網格嚴格對齊，讓漸層的視覺能量落在可預期的節奏裡
- 進度/載入類元件優先用 spectrum 漸層而非單色，展現系統的招牌語言

### Don'ts ❌

- ❌ 用漸層方向或色彩位置本身傳達意義（例如「粉色端=結束」）而不提供文字/圖示補充
- ❌ 一個畫面塞超過 2-3 個漸層填色的主要元素 — 會從「有活力」變成「迷幻」
- ❌ 漸層文字用於長段內文或 12px 以下小字 — 可讀性崩壞
- ❌ 純黑陰影 — 陰影色帶一點 Primary 色調（`rgba(153,15,250,...)`），呼應系統色軸
- ❌ 緊湊無網格對齊的隨性排版 — 8pt 網格是漸層系統能維持秩序的唯一原因
- ❌ 漸層當背景卻疊低對比文字 — 漸層背景上的文字在整段過渡都必須通過 AA 對比

---

## 8. Responsive Behavior

| Breakpoint | Behavior |
|-----------|----------|
| ≥1200px | 容器滿版，卡片牆多欄 auto-fill |
| 768–1199px | 容器 padding 收至 32px，卡片牆降為 2 欄 |
| ≤767px | 卡片牆 1 欄，hero 字級降至 clamp 下限，按鈕滿寬，漸層角度改為縱向（180deg）配合直式版面 |
| 觸控目標 | 所有互動元件最小 44×44px |

---

## 9. Agent Prompt Guide

給 AI agent 重現此風格的最小提示：

```
Create a page in the "Gradient 光譜流動" style — gradients as the
primary design language, not decoration:

- Color axis: deep purple #990FFA → magenta #BF07B8 (midpoint) →
  hot pink #E60076. Use this gradient on every surface large enough
  to show it: buttons, hero backgrounds, card borders, progress bars.
  Solid purple/pink only for small surfaces (thin borders, inline
  links, small badges) — solid is the fallback, not the default.
- Signature component: a progress bar whose fill sweeps through the
  full purple→magenta→pink spectrum as it fills (not a single flat
  color), via `background-size: 200%` on a fixed 3-stop gradient.
- Fonts: 'Space Grotesk' 600-700 for display headings (24-36px),
  often with gradient text fill (`background-clip: text`); 'Montserrat'
  400-500 for body/UI text; 'JetBrains Mono' for code.
- Gradient text only on headings ≥24px — never long body copy, and
  always paired with the text itself as the semantic content (gradient
  position/direction must never be the only carrier of meaning).
- Grid: strict 8pt spacing rhythm — this is what keeps a gradient-heavy
  layout feeling designed instead of psychedelic.
- Shadows carry a hint of the primary purple
  (rgba(153,15,250,0.15-0.2)), never flat black/gray.
- Limit: no more than 2-3 large gradient-filled elements visible at
  once per screen.
```

---

*Direction from TypeUI's Gradient design skill（typeui.sh）；本實作與配色細節為原創撰寫。2026-07-13.*