---
use_cases: [infographic, doc, social, slides]
required_inputs: 已審核的臨床資訊／數據／參考來源文字內容（步驟、統計數字、注意事項需醫師核實）
pairs_with: Manrope + Noto Sans TC；需要簡潔線性醫療 icon（聽診器、藥丸、時鐘等）與可信的統計數字素材
---

# Design System: Clinical Clarity 臨床清晰

> 專業醫療資訊圖系統 — 為 IG 4:5 衛教圖與嚴肅健康主題設計。冷靜臨床藍綠打底，警示琥珀與安全綠語意色分工明確，資料階層優先於裝飾，讓一張圖在滑動 0.5 秒內傳達「這是可信的醫療資訊」。

---

## 1. Visual Theme & Atmosphere

**Design Philosophy:** 這個系統把「醫院衛教海報」的可信感搬進社群版位。每個決策都服務資訊優先原則——色彩用來分類資訊（正常/警示/危險），不是用來裝飾；留白用來讓眼睛在密集數據間休息，不是用來留空。乾淨到近乎冷靜，但不冷漠：一抹琥珀警示與安全綠，讓畫面在專業之餘仍有溫度指引。

**Atmosphere Keywords:** Clinical, Trustworthy, Calm, Precise, Data-first, Legible, Systematic, Unembellished

**Visual Anchors:**
- 冷白／淺霧灰畫布，避免醫療場域常見的慘白螢光感
- 臨床青為主色貫穿標題與資料強調，深石板藍收斂重點文字
- 語意色嚴格分工：琥珀＝警示、綠＝安全/正常、紅＝危險，三色不互相借用
- 統計數字用超大字重直接呈現，數字即視覺焦點
- 直線與直角為主，圓角克制（8–12px），拒絕花俏裝飾線條
- 圖示採單色線性風格，粗細一致，像醫院導視系統

**Mood Board References:**
- 醫院候診區的樓層/科別導視系統
- WHO／CDC 官方衛教圖表排版邏輯
- 藥品仿單的資訊分級（用法、警語、副作用三層次）
- 臨床檢驗報告的數據卡片呈現

---

## 2. Color Palette & Roles

### Core Palette

| Swatch | 中文名 | 英文名 | Hex | Role |
|--------|--------|--------|-----|------|
| 🟦 | 臨床青 | Clinical Teal | `#0E7C86` | Primary — 標題強調、連結、資料重點、icon 主色 |
| 🔷 | 石板藍 | Slate Navy | `#1E3A5F` | Secondary — 深色標題、頁首、品牌落款 |
| ⬜ | 冷霧灰 | Mist Gray | `#EEF2F5` | Canvas — 頁面/卡片底色 |
| ⬛ | 墨石灰 | Ink Slate | `#1F2937` | Ink — 主要文字、框線 |
| ⚪ | 中性灰 | Neutral Gray | `#64748B` | Muted — 次要文字、說明文字、分隔線 |
| ⚪ | 表層白 | Surface White | `#FFFFFF` | Surface — 卡片、資料框底色 |

### Semantic Colors（語意色 — 系統的分類語言）

| Swatch | 中文名 | 英文名 | Hex | Role |
|--------|--------|--------|-----|------|
| 🟠 | 警示琥珀 | Amber Alert | `#D97706` | Warning — 注意事項、需留意的數值範圍 |
| 🟢 | 安全綠 | Safe Green | `#15803D` | Success — 正常範圍、建議做法、安全清單 |
| 🔴 | 臨界紅 | Critical Red | `#DC2626` | Danger — 危險徵兆、禁忌、緊急就醫指標 |
| 🔵 | 資訊藍 | Info Blue | `#0E7C86` | Info — 同 Primary，一般提示 |

**Rule:** 語意色三色（琥珀/綠/紅）只用於「分級資訊」——警語框、統計數字、狀態標籤。裝飾性用途一律回到 Primary/Secondary，避免病患誤讀色彩優先序。

### Text Colors

| Role | Hex | Use |
|------|-----|-----|
| Text 主文 | `#1F2937` | 標題、本文 |
| Text Muted 次要 | `#64748B` | 說明文字、來源標註、圖說 |
| Text Inverse 反白 | `#FFFFFF` | 深色底上的文字（Secondary 色塊） |

### Surface & Depth

| Layer | Background | Border | Use |
|-------|-----------|--------|-----|
| Canvas | `#EEF2F5` | — | 頁面/貼文底色 |
| Surface | `#FFFFFF` | `1px solid #E2E8F0` | 資料卡、步驟卡 |
| Elevated | `#FFFFFF` | `1px solid #E2E8F0` + `0 4px 12px rgba(30,58,95,0.08)` | 統計強調卡、hover 卡片 |
| Emphasis | `#1E3A5F` | — | 頁首/頁尾深色區塊、反白文字 |

---

## 3. Typography Rules

### Font Families

| Token | Stack | Use |
|-------|-------|-----|
| `--font-head` | 'Manrope', 'Noto Sans TC', sans-serif | 標題、統計數字、標籤 — 幾何無襯線，理性直接 |
| `--font-body` | 'Noto Sans TC', 'Manrope', sans-serif | 正文、說明文字 — 中文可讀性優先 |
| `--font-mono` | 'IBM Plex Mono', monospace | 數據單位、劑量、時間戳、參考編號 |

**Pairing logic:** Manrope 的幾何字幹傳達「這是設計過的官方資訊」，中文標題直接沿用 Noto Sans TC 700 字重維持同一份理性；本文全面用 Noto Sans TC 保證長句可讀，數字/單位切換等寬字體讓劑量與時間不會被誤讀。

### Scale

| Element | Size | Font | Weight | Note |
|---------|------|------|--------|------|
| h1 | clamp(2rem, 5vw, 2.75rem) | head | 800 | line-height 1.25，letter-spacing -0.01em |
| h2 | 1.75rem | head | 700 | margin-top 2.5rem |
| h3 | 1.25rem | head | 700 | |
| Stat Number 統計強調 | clamp(2.5rem, 8vw, 4rem) | head | 800 | line-height 1，數字即主角 |
| Body | 17px（mobile 16px） | body | 400 | line-height 1.7 |
| Caption / label | 0.8–0.9rem | body | 600 | letter-spacing 0.02em |

### Link Style

- 連結色 `#0E7C86`，底線 `1.5px solid`，offset 3px（永久顯示，不是 hover 才出現——醫療資訊的連結需要一眼可辨識）
- Hover: 色轉 `#0A5D64`，底線加粗至 2px

---

## 4. Component Stylings

### 資料卡 Data Card

- 白底 + `1px solid #E2E8F0` + `border-radius: 10px`，padding 1.25–1.5rem
- 左上角小型 icon 標籤（24px，Clinical Teal）+ 標題 + 內文
- Hover/焦點：`box-shadow: 0 4px 12px rgba(30,58,95,0.08)` + `translateY(-1px)`，無旋轉、無誇張動效

### 步驟流程 Step Flow

- 橫向或縱向皆可：圓形數字徽章（36px，Clinical Teal 底、白字 Manrope 800）+ 連接線（2px `#CBD5E1`）
- 每步驟一張迷你卡：徽章 + 短標題 + 一行說明，禁止超過 2 行文字
- IG 直式版位建議縱向排列，步驟間留白至少 16px 避免视覺擁擠

### 統計數字強調 Stat Emphasis

- 超大數字（Stat Number scale）+ 小字單位（0.9rem，Neutral Gray，緊貼數字右下）
- 數字色依語意：一般數據用 Slate Navy，正向指標用 Safe Green，風險指標用 Critical Red
- 可選：數字下方 4px 色條（同語意色）作為視覺錨點，取代圖表時的簡化表現

### 警語框 Alert Box

| Box | Style |
|-----|-------|
| 警示框（.box-warning） | `#FEF3E2` 底 + 左邊條 4px `#D97706` + ⚠️ 前綴標籤 |
| 危險框（.box-danger） | `#FEE2E2` 底 + 左邊條 4px `#DC2626` + 🚫 前綴標籤，文字加粗 |
| 安全框（.box-safe） | `#DCFCE7` 底 + 左邊條 4px `#15803D` + ✅ 前綴標籤 |
| 資訊框（.box-info） | `#E0F2F4` 底 + 左邊條 4px `#0E7C86` + ℹ️ 前綴標籤 |

四種框統一結構：`border-radius: 0 8px 8px 0`，padding 1rem 1.25rem，標籤用 Caption scale 置頂。

### Icon 標籤 Icon Tag

- 圓形或圓角方形容器（40px），底色為對應語意色的 10% 透明度，icon 用該語意色實色
- 搭配文字時固定 icon 在左、文字在右，垂直置中對齊
- 純線性 icon（stroke 1.5–2px），禁止填色 icon 或插畫風 icon——保持醫療導視的一致筆觸

---

## 5. Layout Principles

- **資訊階層優先**：版面永遠先決定「哪個是這張圖唯一要記住的訊息」，該元素獲得 Stat Emphasis 或最大 h1，其餘服務於它
- **IG 4:5 直式建議（1080×1350px）**：上 15% 標題區（Secondary 深底+白字或 Canvas 底+深字）、中 60% 內容區（資料卡/步驟流程堆疊，單欄）、下 15% 來源/品牌落款區（Neutral Gray 小字 + logo）、四邊留白至少 64px 避免 IG 裁切
- **單欄優先**：手機閱讀為主，資訊卡一律縱向堆疊，避免多欄造成掃視混亂；文件/簡報版位才開放 2 欄 grid
- **對齊網格**：8px baseline grid，所有 padding/margin 為 8 的倍數，維持數據排版的秩序感
- **留白即階層**：段落間距 24–32px，卡片間距 16px——留白差異本身就是分類線索，不需額外分隔線
- **來源標註強制可見**：任何統計數字下方需附引用來源（Caption scale, Neutral Gray），不得省略——這是專業可信度的底線

---

## 6. Depth & Elevation

深度語言是「臨床儀器面板」的克制層次，不是紙感也不是玻璃感：

1. 平放（預設）：`1px solid #E2E8F0` 細邊框，無陰影
2. 抬升（hover/強調卡）：`0 4px 12px rgba(30,58,95,0.08)` 柔和陰影 + `translateY(-1px)`，無旋轉
3. 深色區塊（頁首/頁尾）：`#1E3A5F` 實色塊，靠色彩對比而非陰影建立層次

Motion 極簡：`transform`/`box-shadow` 0.15s ease-out，禁止彈跳、旋轉、縮放誇張效果——醫療資訊的動效只服務「引導注意力」，不服務「有趣」。

---

## 7. Do's and Don'ts

### Do's ✅

- 語意色（琥珀/綠/紅）只用在分級資訊，且三色不可互換用途
- 統計數字永遠是畫面視覺重量最大的元素
- 每張衛教圖只傳達一個核心訊息，其餘資訊降階為輔助
- icon 一律線性、單色、粗細一致
- 引用來源、製作單位、免責聲明放在頁尾小字區，永不省略

### Don'ts ❌

- ❌ 漸層背景、玻璃擬態、陰影模糊過度 — 破壞臨床冷靜感
- ❌ 用紅色做裝飾性強調（非危險語意）— 會稀釋「紅＝危險」的辨識度
- ❌ 插畫風/手繪風 icon — 與資訊圖的精確感衝突（該用途請改選 doodle-notebook 系統）
- ❌ 一張圖塞超過 3 個統計數字 — 超過即拆成系列圖
- ❌ 圓角超過 16px — 過圓會軟化專業感
- ❌ 純黑 `#000` 或純白刺眼底色 — 文字用 `#1F2937`，畫布用 `#EEF2F5`

---

## 8. Responsive Behavior

| Breakpoint | Behavior |
|-----------|----------|
| ≥1080px（文件/簡報版位） | 資料卡可 2–3 欄 grid，步驟流程可橫向排列 |
| ≤768px（IG/手機） | 一律單欄堆疊；Stat Number 縮至 clamp 下限 2.5rem；卡片 padding 收至 1rem |
| ≤480px | h1 縮至 2rem；icon 標籤縮至 32px；警語框 padding 收至 0.85rem |
| Print/PDF 衛教單 | 移除陰影，邊框改 `1px solid #1F2937` 確保黑白列印可辨識層次 |

---

## 9. Agent Prompt Guide

給 AI agent 重現此風格的最小提示（用於網頁/HTML 資訊圖）：

```
Create a page in the "Clinical Clarity" style — a professional medical
infographic system:

- Canvas: cool mist gray #EEF2F5; cards: white #FFFFFF with
  1px solid #E2E8F0 border, border-radius 10px, minimal shadow
- Primary color: clinical teal #0E7C86 for headings, links, icon accents
- Secondary: slate navy #1E3A5F for dark header/footer blocks with
  white inverse text
- Semantic colors used ONLY for classified info: amber #D97706 = warning,
  green #15803D = safe/normal, red #DC2626 = danger — never decorative
- Fonts: 'Manrope' 800 for headings and stat numbers, 'Noto Sans TC' for
  body text (17px, line-height 1.7), 'IBM Plex Mono' for units/dosages
- Stat numbers are the largest visual element on the page — clamp(2.5rem,8vw,4rem)
- Icons: linear/outline only, 1.5-2px stroke, single color matching
  semantic role — no filled icons, no illustration style
- Alert boxes: colored left border 4px + tinted background + emoji prefix
  (⚠️ warning / 🚫 danger / ✅ safe / ℹ️ info)
- Layout: single column on mobile, 8px baseline grid, generous 24-32px
  section spacing, source citation always visible in small muted text
- No gradients, no glassmorphism, no illustration icons, no decorative rotation
```

### 專用 gpt-image 衛教圖 Prompt Block（IG 4:5 直式）

```
A clean, professional medical infographic for Instagram (1080x1350px,
4:5 portrait). Clinical and trustworthy visual style: cool mist-gray
background (#EEF2F5), white content cards with thin light-gray borders
and subtle rounded corners. Deep slate-navy (#1E3A5F) header band at
top with the topic title in bold white sans-serif. Clinical teal
(#0E7C86) used for primary accents, icons, and section labels. One
oversized statistic number as the visual focal point, rendered in
heavy geometric sans-serif. Simple single-color line icons (stroke
style, no fill, no illustration) representing medical/health concepts.
Amber (#D97706) highlight for a caution note, green (#15803D) for a
safe/recommended tip — used sparingly and only for these classified
callouts. Generous white space, 8px-aligned grid, single-column
vertical flow suitable for mobile scrolling. Small muted gray footer
text area reserved for source citation and clinic branding. No
gradients, no glass effects, no hand-drawn or cartoon elements —
the overall feel should read as "hospital patient-education poster",
calm and precise, not playful.
```

---

*Original design system created 2026-07-13 for Design Lab — 補足醫療衛教 infographic 場景的專業/嚴肅風格缺口。*