# Design System: Storytelling 章節敘事

> Direction from TypeUI's Storytelling design skill（typeui.sh）；本實作與配色細節為原創撰寫。

---

## 1. Visual Theme & Atmosphere

**Design Philosophy:** 介面即故事。每個頁面都有起承轉合——Hero 是開場的第一句話，內容區塊是鋪陳與建立信任，CTA 是收束的行動呼籲。這個節奏套用在整頁、單一區塊，甚至單張卡片上。系統靠兩個字型的巨大反差製造「翻頁」的瞬間：Inter 是敘事者中性的旁白聲音，Abril Fatface 是每個章節開場的標題字——高對比襯線、粗細筆畫戲劇性切換，像維多利亞時代的海報字。藍紫色調刻意保持安靜，只負責指路，真正的情緒張力交給字體與節奏。

**Atmosphere Keywords:** 敘事、章節感、戲劇性字體反差、節奏留白、情緒引導、旁白與標題、三幕結構

**Visual Anchors:**
- Inter 正文（旁白）→ Abril Fatface 標題（章節標題）的巨大字體反差，是系統最強的識別特徵
- 純白書頁底色，藍紫色只作敘事路徑標記，不鋪滿版面
- 4px 基準間距系統製造「段落內緊湊、段落間留白」的閱讀呼吸感
- 每個頁面/區塊遵循開場（Hero）→ 鋪陳（Content）→ 收束（CTA）三幕結構
- Pull quote 與強調時刻用紫色標記重要節拍，藍色標記行動路徑

**Mood Board References:**
- 品牌敘事型 Landing Page 與募資頁的情緒起伏設計
- 電子書翻頁瞬間：旁白轉章節標題的視覺斷點
- 維多利亞時期海報字（Didone 高對比襯線）與現代無襯線 UI 字的並置

---

## 2. Color Palette & Roles

### Core Palette

| Swatch | 中文名 | English Name | Hex | Role |
|--------|--------|--------------|-----|------|
| 🔵 | 敘事藍 | Narrative Blue | `#3B82F6` | Primary — 行動、連結、active 狀態，「故事的下一步」 |
| 🟣 | 敘事紫 | Narrative Violet | `#8B5CF6` | Secondary — 強調重要節拍、pull quote、featured 內容 |
| ⬜ | 書頁白 | Page White | `#FFFFFF` | Surface — 全頁背景，如同書本的空白頁 |
| ⬛ | 墨色文字 | Ink Text | `#111827` | 正文、標題、標籤的預設文字色 |
| 🩵 | 淡藍鋪底 | Blue Tint | `#EFF6FF` | 章節轉場底色、hover 背景（衍生自 Primary） |
| 🟪 | 淡紫鋪底 | Violet Tint | `#F5F3FF` | Pull quote／強調區塊底色（衍生自 Secondary） |
| ⚪ | 邊界灰 | Border Gray | `#E5E7EB` | 分隔線、卡片邊框、輸入框邊界 |

### Semantic Colors

| Role | Hex | Note |
|------|-----|------|
| Success 成功 | `#16A34A` | 故事已解決、目標達成 |
| Warning 警告 | `#D97706` | 劇情張力、待處理狀態 |
| Danger 危險 | `#DC2626` | 錯誤、衝突狀態、破壞性操作 |
| Info | `#3B82F6` | 沿用 Primary |

**Rule:** 色彩刻意節制——敘事力量來自字體反差與版面節奏，不是色彩本身。藍色只標記路徑（連結、按鈕、active 狀態），紫色只標記節拍（強調、精選、pull quote），兩者不互換角色。

---

## 3. Typography Rules

### Font Families

| Token | Stack | Use |
|-------|-------|-----|
| `--font-body` | 'Inter', sans-serif | 正文、UI 標籤、導覽、metadata——敘事者的旁白聲音 |
| `--font-display` | 'Abril Fatface', serif | 標題、Hero 語句、章節開場——高對比 Didone 顯示字 |
| `--font-mono` | 'JetBrains Mono', monospace | 程式碼、表格數據 |

**Pairing logic:** Inter 中性、可長時間閱讀，負責不搶戲的敘事推進；Abril Fatface 只用在標題與 Hero 語句，粗細對比強烈，每次出現都像「翻到新的一章」。兩者絕不混用角色——內文絕不用 Abril Fatface（細筆畫在小字級難以閱讀），標題也避免用 Inter（會失去章節感）。

### Type Scale

| Size | Element | Font | Weight |
|------|---------|------|--------|
| 40px | Hero 語句、開場標題 | Abril Fatface | 400 |
| 32px | 頁面 / 章節標題 | Abril Fatface | 400 |
| 24px | 卡片標題、小節導言 | Abril Fatface | 400 |
| 18px | 正文（長文閱讀） | Inter | 400 |
| 16px | 次要 UI 文字、標籤、導覽 | Inter | 400–500 |
| 14px | Caption、metadata、footnote | Inter | 400 |

**Rule:** Abril Fatface 不用於低於 24px 的尺寸——細筆畫在小字級會犧牲可讀性。所有需要長時間閱讀的內容一律 Inter。

---

## 4. Component Stylings

### Chapter Marker（招牌元件）

- 大號章節編號（Abril Fatface，紫色）+ 章節標題（Abril Fatface，墨色）
- 用於標記三幕結構的轉折點：Beginning / Middle / End
- 上下留白 32px+，與相鄰內容明顯區隔，製造「翻頁」的儀式感

### Buttons

- Primary：敘事藍實心底 + 白字，Inter 16px medium，圓角 10px
- Secondary：透明底 + Border Gray 邊框，墨色文字
- Hover：Primary 加深藍色；Secondary 邊框轉藍
- Focus-visible：3px 藍色外框 + 2px offset
- 所有互動控制高度 ≥ 44px

### Links

- 敘事藍 + 底線，hover 加深顏色
- 標籤具體："Continue the story" 而非 "More"

### Pull Quote / Emphasis Block

- 32px Abril Fatface，淡紫鋪底 + 左側 3px 紫色邊
- 用於標記敘事中的關鍵節拍，不宜過度使用打斷閱讀流

### Cards

- 白底 + Border Gray 1px 邊框，圓角 12px
- 標題用 Abril Fatface 24px，內文 Inter 16px，metadata 14px
- Featured 卡片可用淡紫鋪底標示「精選章節」

### Tags / Badges

- 敘事藍或敘事紫文字 + 對應淡色底，圓角膠囊，Inter 12–13px medium

### Forms

- Label 永遠可見，Inter 16px
- Input：白底 + Border Gray 邊框，圓角 10px，高度 ≥ 44px
- Focus：3px 藍色外框
- 錯誤訊息用 danger 色 + 文字說明，與欄位程式化關聯

### Navigation

- Inter 文字，active 狀態用敘事藍 + 底線雙重標示
- 不做純圖示導覽，保持標籤清晰

---

## 5. Layout Principles

- **三幕頁面結構**：Hero（開場鉤子）→ Content（鋪陳與建立信任）→ CTA（收束行動）
- **4px 間距節奏**：段落內 8–12px 緊湊，章節間 32px+ 留白，模擬敘事的呼吸
- **字體反差製造斷點**：每次從 Inter 正文切到 Abril Fatface 標題，就是一次「翻頁」時刻
- **內容為主角**：版面服務文字與圖像，色彩只引導視線不搶戲
- **CTA 明確收束**：每個敘事段落結尾提供清楚的下一步行動，不留模糊結尾

---

## 6. Depth & Elevation

**極簡陰影，深度來自字體與留白對比：**

1. 畫布層：純白書頁 `#FFFFFF`
2. 章節轉場：淡藍或淡紫鋪底區塊，標記敘事節拍轉換
3. 卡片：1px Border Gray 邊框 + 極輕陰影（如需要，`0 4px 12px rgba(17,24,39,0.06)`）
4. Modal / Overlay：白底面板，聚焦式呈現，trap focus，關閉後歸還焦點

Motion 克制：短暫 hover 過渡、accordion 展開、modal 進場皆可，但不對內文做動畫；尊重 `prefers-reduced-motion`，長文閱讀中禁用視差捲動。

---

## 7. Do's and Don'ts

### Do's ✅

- 標題一律 Abril Fatface（≥24px），正文一律 Inter（16–18px）——兩者角色絕不互換
- 頁面與區塊都遵循開場→鋪陳→收束的三幕節奏
- 用 4px 倍數的間距系統製造段落內緊湊、段落間留白的節奏感
- 藍色標記路徑（連結/按鈕/active），紫色標記節拍（強調/精選）
- 每個互動元件具備 default / hover / focus-visible / active / disabled / loading / error 狀態

### Don'ts ❌

- ❌ Abril Fatface 用於內文或小於 24px 的文字——可讀性會崩壞
- ❌ 藍紫色鋪滿整頁背景——色彩只做路徑與節拍標記
- ❌ 純色彩表示狀態，不搭配文字或圖示
- ❌ 厚重陰影、玻璃擬態、霓虹光暈
- ❌ 內文中穿插動畫效果，干擾閱讀
- ❌ 頁面缺少明確的 CTA 收束，留下敘事斷點

---

## 8. Responsive Behavior

| Breakpoint | Behavior |
|-----------|----------|
| ≥1024px | Hero 40px，內容欄 max-width 720px，卡片牆 2–3 欄 |
| 641–1023px | Hero 降至 32px，卡片牆 2 欄，間距維持 4px 節奏 |
| ≤640px | 卡片牆 → 1 欄，Hero 降至 28px，導覽收合為漢堡選單，按鈕維持 44px 高 |
| 高對比模式 | 保留 Border Gray 邊框與 focus 外框，狀態不單靠顏色表示 |

---

## 9. Agent Prompt Guide

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

```
Create a page in the "Storytelling" narrative style:

- Structure every page/section as a three-act arc: Hero (hook/beginning),
  Content (build trust/middle), CTA (resolve/end)
- Typography contrast is the core identity: 'Inter' for ALL body text,
  UI labels, navigation, metadata (16-18px) — 'Abril Fatface' for ALL
  headings and display moments ONLY at 24px or larger (never smaller,
  readability breaks down at small sizes)
- Canvas: pure white #FFFFFF page background
- Color is restrained: narrative blue #3B82F6 marks the path forward
  (links, buttons, active states); narrative violet #8B5CF6 marks
  key beats (pull quotes, featured content, emphasis) — never swap
  their roles, never fill large areas with either color
- Spacing: 4px base scale (4/8/12/16/24/32) — tight within a section
  for reading flow, wide (32px+) between sections for narrative pacing
- Chapter Marker component: large Abril Fatface number in violet +
  Abril Fatface title in ink, used to mark act transitions
- Pull quotes: 32px Abril Fatface on a light violet tint background
  with a 3px violet left border
- Minimal shadows — depth comes from tint blocks, borders, and
  typography contrast, not drop shadows or glassmorphism
- Every interactive element needs default/hover/focus-visible/active/
  disabled/loading/error states; focus-visible = 3px blue outline
- JetBrains Mono reserved for code and tabular data only
```

---

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