---
use_cases: [motion, social, slides]
required_inputs: 目標影片畫面比例(16:9/9:16/1:1)、講者姓名或標題文字內容、可選的品牌強調色
pairs_with: Anton + Inter；需要疊放在真實影片素材/畫面截圖上驗證可讀性
---

# Design System: Title Card 動態字卡

> 廣播級動態字卡系統 — 為影片標題卡、下三分之一(lower-third)、字幕條設計：粗體易讀、高對比字板、安全區意識，確保文字在任何影片背景上都清晰可讀。給 HyperFrames / Motion Canvas / CapCut / 剪映做影片字卡用。

---

## 1. Visual Theme & Atmosphere

**Design Philosophy:** Text that survives any background. Broadcast graphics don't get to choose their backdrop — a lower-third might sit over a bright sky shot or a dark interview room in the same edit. This system solves that with opaque text plates, oversized weight, and a restrained two-accent palette that reads instantly at a glance, even paused on a single frame.

**Atmosphere Keywords:** Bold, High-contrast, Broadcast-grade, Legible, Confident, Snappy, Utilitarian, Signal-first

**Visual Anchors:**
- 不透明字板（text plate）永遠墊在文字之後 — 從不讓文字直接疊在影片畫面上
- 單一機關槍式強調色條（accent bar）標記說話者/單元類別
- 超粗字重（900 weight / Black）搭配緊縮字距
- 硬切入場、硬切退場 — 沒有柔和淡入淡出，動作要「有種」
- Safe-area 邊界感 — 所有文字物件退讓於畫面邊緣

**Mood Board References:**
- 新聞台下三分之一與計分板字卡
- 體育轉播即時比分疊層
- YouTube 教學影片的粗體標題卡
- 廣播包裝(broadcast package)的 lower-third 動態模板

---

## 2. Color Palette & Roles

| Swatch | Name | Hex | Role |
|--------|------|-----|------|
| ⬛ | Ink Black 極墨黑 | `#0A0E14` | Plate base — 字板背景，永遠帶 92% 不透明度 |
| ⬜ | Signal White 訊號白 | `#FAFAFA` | Primary text — 主要文字色，最高對比 |
| 🟠 | Electric Amber 電光琥珀 | `#FFB020` | Primary accent — 強調條、關鍵字底線、CTA |
| 🩵 | Broadcast Cyan 廣播青 | `#00D9FF` | Secondary accent — 次要單元標記、進度指示 |
| 🔴 | Alert Coral 警示珊瑚 | `#FF5C5C` | Tertiary accent — LIVE/警示標記、倒數 |
| ⬛ | Plate Charcoal 字板炭灰 | `#1C222C` | Surface — 字板實際背景色（比 Ink Black 略淺，區分層次） |
| ⚪ | Safe Gray 安全灰 | `#8A93A3` | Muted — safe-area 參考線、時間碼、次要 UI |

**Rule:** 每張字卡只用一個強調色（Amber 或 Cyan 或 Coral 三選一），不同色代表不同語意（Amber=一般標題、Cyan=單元/章節、Coral=直播/緊急），絕不同卡混用多個強調色。

### Text-on-Video Contrast Rule

文字永遠不直接疊在影片畫面上。規則優先序：
1. 字板（Plate Charcoal 92% opacity）+ Signal White 文字 — 預設做法
2. 若不用字板（純浮字），文字必須加 `text-shadow: 0 2px 8px rgba(0,0,0,0.9)` 且字重 ≥ 800
3. 絕不在無字板情況下使用中低對比色（Cyan/Amber）當大面積文字色 — 只能當字板上的細節強調

---

## 3. Typography Rules

### Font Families

| Token | Stack | Use |
|-------|-------|-----|
| `--font-display` | 'Anton', 'Noto Sans TC', sans-serif | 大標題字卡 — 超緊縮超粗字重，畫面遠看也清楚 |
| `--font-ui` | 'Inter', 'Noto Sans TC', sans-serif | Lower-third 姓名/職稱、字幕、UI 標籤 — 900 weight |
| `--font-mono` | 'JetBrains Mono', monospace | 時間碼、進度數字、技術標籤 |

**Pairing logic:** Anton 提供「電視轉播級」的視覺重量，字幅窄所以長標題也不會爆版；Inter Black (900) 撐住需要中文共存的姓名/職稱行，中西文對齊基線一致。絕不使用 400/500 這種常規字重 — 影片字永遠要夠粗夠大。

### Scale

| Element | Size | Font | Weight | Note |
|---------|------|------|--------|------|
| Title Card H1 | clamp(3rem, 8vw, 6rem) | display | 400（Anton 本身即最粗） | letter-spacing -0.01em，行高 1.05 |
| Lower-third Name 姓名 | 1.75rem | ui | 900 | letter-spacing -0.01em |
| Lower-third Title 職稱 | 1.1rem | ui | 700 | 搭配 accent 色小字 |
| Subtitle 字幕 | 1.5rem（safe：最小 1.25rem） | ui | 800 | 單行最長 42 字元，超過強制斷行 |
| Timecode/Label | 0.85rem | mono | 600 | letter-spacing 0.05em, uppercase |

### Readability Floor（不可退讓的下限）

- 字幕最小字重 700，最小字級為畫面高度的 4.5%（1080p 下約 48px）
- 任何文字物件與畫面邊緣至少留 90px（1080p 基準，見第 5 章 safe-area）
- 描邊/陰影二選一但至少一項：`-webkit-text-stroke: 1px rgba(0,0,0,0.4)` 或 `text-shadow: 0 2px 6px rgba(0,0,0,0.85)`

---

## 4. Component Stylings

### Text Plate（字板 — 系統核心 token）

```css
--plate-bg: rgba(28, 34, 44, 0.92);
--plate-radius: 6px;
--plate-padding: 0.5em 0.9em;
--plate-accent-bar-width: 6px;
```

字板永遠是矩形帶小圓角，左側或底部有 6px 實色強調條標記語意色。字板本身不用陰影 — 對比靠不透明度，不靠模糊。

### Lower-Third（下三分之一）

- 結構：左側 6px 強調色條 → 姓名（Inter 900）→ 職稱（Inter 700，Safe Gray 或強調色）
- 進場：從畫面左側 -40px 硬切滑入（120ms，見第 6 章），字板先到、文字接著 stagger 20ms
- 位置：畫面下方 12% 高度處，左邊界留 safe-area
- 停留：最少 3 秒（給觀眾讀完姓名+職稱的時間下限）

### Subtitle Bar（字幕條）

- 字板寬度依文字自適應，最大寬度 84% 畫面寬，置中對齊，位於畫面下方 8% 處
- 雙行字幕：兩行等高排列，字板高度自動延伸包住兩行
- 進出場只用 opacity（不做位移，避免字幕跳動干擾閱讀）

### Title Card（標題卡 — 全畫面/大字卡）

- 置中或左下角兩種版位，Anton 大字 + 一行 Inter 副標
- 可選裝飾：底部強調色條（畫面寬 30%，4px 高，置左）
- 用於片頭、章節轉場，非疊在持續內容之上

### Progress Indicator（進度指示）

- 章節進度：頂部細線（2px），已完成段落用強調色填滿，剩餘段落用 Safe Gray 20% opacity
- 倒數/計時：Mono 字型大數字 + Coral 強調色，用於直播/懸念段落

### Callout Arrow（標註箭頭）

- 純幾何三角箭頭（非手繪），實色填滿強調色，指向畫面重點區域
- 尾端可接短標籤字板（同 Text Plate token，較小 padding）
- 用於指出畫面中特定物件/UI 區域

---

## 5. Layout Principles

### Safe-Area 安全區（不可退讓）

| 比例 | Action-safe（文字禁入邊界） | Title-safe（重要文字建議邊界） |
|------|---------------------------|------------------------------|
| 16:9（1920×1080） | 邊緣 5%（96px） | 邊緣 10%（192px） |
| 9:16（1080×1920，直式） | 邊緣 5%（左右 54px，上下 96px） | 邊緣 8%（左右 86px，上下 154px） |
| 1:1（1080×1080） | 邊緣 6%（65px） | 邊緣 10%（108px） |

所有 lower-third、字幕、標題卡文字必須落在 title-safe 邊界內。平台 UI 疊層（讚/留言/分享按鈕）通常佔據畫面右側與底部 15-20% — 直式影片的 lower-third 建議放在畫面上方 1/3，避開平台 UI。

### Composition

- **Lower-third 位置**：左下，起點 x=safe-area-left，y=76%（16:9）或 62%（9:16，避開底部 UI）
- **字幕位置**：水平置中，底部 8-12% 處，永遠在 lower-third 之上不重疊
- **標題卡置中版**：畫面正中，用於片頭 0-2 秒或段落轉場
- **一次只疊一種文字物件**：lower-third 出現時字幕靜默，避免視覺過載

---

## 6. Motion & Timing

**Motion Philosophy:** Snap in, hold, snap out. 廣播圖像不玩緩動的優雅入場 — 進場要快且有力（150ms 內完成主要動作），停留時間服務閱讀，退場比進場更快更乾脆。這是整個系統與其他「柔和」設計系統最大的區別。

### Easing Tokens

```css
--tc-ease-in:    cubic-bezier(0.16, 1, 0.3, 1);    /* 進場：快速抵達，尾段輕微 overshoot 感但不彈跳 */
--tc-ease-out:    cubic-bezier(0.7, 0, 0.84, 0);    /* 退場：加速甩出，乾脆俐落 */
--tc-ease-hold:   linear;                            /* 停留期間任何微動畫（如進度條）用線性 */
--tc-duration-in:  180ms;
--tc-duration-out: 120ms;
--tc-duration-hold-min: 3000ms;  /* 最短停留，見第 3 章 readability floor */
```

### Choreography（Lower-third 範例，總長依內容延伸）

| Phase | Timing | Motion |
|-------|--------|--------|
| Plate slide-in | 0–180ms | 字板從 x:-40px 滑入至定位，`--tc-ease-in` |
| Text stagger | 60–220ms | 姓名先浮現（opacity 0→1, translateX 8px→0），職稱慢 40ms 跟上 |
| Accent bar pulse | 180–380ms | 強調色條短暫放大 1.0→1.15→1.0，標記「新資訊出現」 |
| Hold | 380ms–(hold-min) | 靜止，無動畫 |
| Plate slide-out | 最後 120ms | 字板加速滑出 x:0→-40px + opacity 1→0，`--tc-ease-out` |

### Subtitle Choreography（字幕 — 更輕量，避免閱讀干擾）

| Phase | Timing | Motion |
|-------|--------|--------|
| Fade in | 0–100ms | opacity 0→1，無位移 |
| Hold | 依字數計算（最少 1.5 秒/行） | 靜止 |
| Fade out | 最後 80ms | opacity 1→0 |

**應用原則:** 進場永遠比退場慢（讓觀眾看清楚新資訊出現），但兩者都在 200ms 內完成 — 這不是電影字卡，是資訊圖層，速度感是可信度的一部分。所有動畫只做 `transform` 與 `opacity`，不對 `width`/`height` 做動畫（避免版面跳動）。

---

## 7. Do's and Don'ts

### Do's ✅

- 文字永遠有字板或強一致的陰影/描邊撐住對比
- 一張字卡只用一個強調色，色即語意
- 進出場硬切、快速 — 停留時間留給閱讀，不留給動畫
- 標題用 Anton 極粗字重，姓名/字幕用 Inter 900
- 所有文字落在 title-safe 邊界內，直式影片避開底部平台 UI 區

### Don'ts ❌

- ❌ 文字直接疊在影片畫面上且無字板無陰影 — 這是本系統唯一不可違反的規則
- ❌ 柔和淡入淡出超過 300ms — 廣播圖像不拖泥帶水
- ❌ 一張字卡混用兩個以上強調色
- ❌ 常規字重（400/500）用於任何影片疊層文字
- ❌ 對 width/height 做動畫造成版面跳動
- ❌ lower-third 停留時間低於 3 秒（觀眾讀不完）

---

## 8. Responsive Behavior

| 影片比例 | Behavior |
|---------|----------|
| 16:9（橫式，1920×1080） | Lower-third 左下，字級用 clamp 基準值；標題卡置中滿版 |
| 9:16（直式，1080×1920） | Lower-third 上移至畫面上 1/3（避開底部平台 UI），字板寬度收窄至 70% 畫面寬 |
| 1:1（方形，1080×1080） | Lower-third 置左下但 safe-area 加大至 6-10%；字幕最大寬度收至 80% |
| 極短片段（<2 秒） | 跳過 hold 階段，slide-in 與 slide-out 直接銜接，duration 各減至 100ms |

---

## 9. Agent Prompt Guide

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

```
Create a video title card / lower-third in the "Title Card" broadcast style:

- Every text element sits on an opaque plate: rgba(28,34,44,0.92) background,
  6px border-radius, with a 6px solid accent bar on the left edge
- Pick ONE accent color per card: amber #FFB020 (general), cyan #00D9FF
  (chapter/section), or coral #FF5C5C (live/urgent) — never mix accents on one card
- Fonts: 'Anton' for large title cards (already maximum weight),
  'Inter' at font-weight 900 for names/subtitles/lower-thirds,
  'JetBrains Mono' for timecodes — never use weight below 700 on video text
- Text color: #FAFAFA (Signal White) on the dark plate for max contrast
- Motion: snap in over 180ms with cubic-bezier(0.16,1,0.3,1), hold minimum
  3000ms, snap out over 120ms with cubic-bezier(0.7,0,0.84,0) — animate only
  transform and opacity, never width/height
- Respect safe-area: keep all text within 10% of frame edges (16:9) or 8%
  (9:16 vertical, and bias lower-thirds toward the upper third of the frame
  to avoid platform UI overlays at the bottom)
- No soft fades, no blur shadows, no gradients on the plate — flat opaque
  color is the entire depth language
```

---

*Original design system authored 2026-07-14 for the Designs Hub — motion/video graphics gap-fill, pairs with HyperFrames / Motion Canvas / CapCut / 剪映 title card workflows.*