---
use_cases: [infographic, social, web]
required_inputs: 面向一般民眾的衛教文字內容（避免專業術語，需口語化改寫）、可搭配的溫暖插圖或照片素材
pairs_with: Baloo 2 + Noto Sans TC；需要圓潤親和插畫風 icon 或柔焦生活照
---

# Design System: Care Warm 暖心衛教

> 面向一般民眾的溫暖衛教設計系統 — 珊瑚色暖調 + 鼠尾草綠 + 奶油底，大圓角與圓潤 icon 降低醫療資訊的距離感，讓病患和家屬在滑手機時感受到「有人在溫柔地跟我說話」，而不是「被醫院公告轟炸」。

---

## 1. Visual Theme & Atmosphere

**Design Philosophy:** 這個系統要解決的問題是「衛教資訊常常讓人焦慮」。做法是把診間白牆換成溫暖的奶油色調，把尖銳的醫療警示語氣換成圓潤的形狀語言——所有容器大圓角、所有 icon 圓頭圓尾、色彩選用曬過太陽的珊瑚與鼠尾草綠而非診間常見的冷白冷藍。目標不是弱化資訊的重要性，而是讓民眾願意把整篇看完。

**Atmosphere Keywords:** Warm, Gentle, Approachable, Reassuring, Rounded, Human, Low-anxiety, Everyday

**Visual Anchors:**
- 奶油底畫布，取代診間冷白，降低第一眼的臨床感
- 柔珊瑚為主色做強調與 CTA，鼠尾草綠做安心/建議語意
- 大圓角（20–32px）貫穿所有容器，圓角越大越像被溫柔包住
- 圓潤 icon（粗描邊、圓頭端點），拒絕尖角與細線醫療符號
- 語意色刻意柔化：危險提示用陶土紅而非刺眼正紅，保持低焦慮語氣
- 大量留白 + 柔和陰影（無硬邊），畫面像棉花般鬆軟

**Mood Board References:**
- 兒科診所候診室的插畫牆與圓角家具
- 溫暖系親子/生活風格 IG 帳號排版
- 日系文具的柔色系與圓體字
- 家庭醫學科衛教手冊的口語化插畫

---

## 2. Color Palette & Roles

### Core Palette

| Swatch | 中文名 | 英文名 | Hex | Role |
|--------|--------|--------|-----|------|
| 🟠 | 柔珊瑚 | Soft Coral | `#F2967D` | Primary — CTA、標題強調、icon 主色 |
| 🟢 | 鼠尾草綠 | Sage Green | `#8FA98C` | Secondary — 安心語意、次要強調、標籤 |
| 🍑 | 溫柔蜜桃 | Gentle Peach | `#FBD8C5` | Accent — 卡片底色、hover 背景、標籤底 |
| 🟤 | 溫暖沙棕 | Warm Sand | `#E8C4A0` | Tertiary — 分隔裝飾、次要標籤、邊框 |
| ⬜ | 奶油底 | Cream Base | `#FFF8EF` | Canvas — 頁面底色 |
| 🟫 | 暖墨棕 | Warm Ink | `#4A3B34` | Ink — 主要文字、深色強調 |
| 🧡 | 柔陶土紅 | Muted Terracotta | `#C97B63` | Caution — 柔化版警示色，取代刺眼紅色 |

**Rule:** 危險/嚴重警示一律用柔陶土紅而非正紅——這套系統的原則是「重要但不嚇人」，若主題本身高風險緊急（如過敏性休克急救），改用 clinical-clarity 系統。

### Text Colors

| Role | Hex | Use |
|------|-----|-----|
| Text 主文 | `#4A3B34` | 標題、本文 |
| Text Muted 次要 | `#8A776C` | 說明文字、圖說、來源標註 |
| Text Inverse 反白 | `#FFF8EF` | 珊瑚/深棕底上的文字 |

### Semantic Colors（柔化版）

| Role | Color | Hex | Note |
|------|-------|-----|------|
| 建議/安心 Encourage | 鼠尾草綠 | `#8FA98C` | 「可以這樣做」的正向指引 |
| 留意 Notice | 溫暖沙棕（深） | `#B98A56` | 溫和提醒，非緊急 |
| 需注意 Caution | 柔陶土紅 | `#C97B63` | 需要留意但語氣依然溫和 |
| 資訊 Info | 柔珊瑚 | `#F2967D` | 一般提示、延伸閱讀 |

### Surface & Depth

| Layer | Background | Border / Shadow | Use |
|-------|-----------|-----------------|-----|
| Canvas | `#FFF8EF` | — | 頁面底色 |
| Surface | `#FFFFFF` | `0 6px 20px rgba(74,59,52,0.08)` | 卡片、內容框 |
| Accent Surface | `#FBD8C5` | 無邊框 | 標籤底、hover 卡片、強調區塊 |
| Emphasis | `#F2967D` | — | CTA 按鈕、深色重點色塊（配白字） |

---

## 3. Typography Rules

### Font Families

| Token | Stack | Use |
|-------|-------|-----|
| `--font-head` | 'Baloo 2', 'Noto Sans TC', sans-serif | 標題、按鈕、標籤 — 圓潤字幹傳遞親和感 |
| `--font-body` | 'Noto Sans TC', 'Baloo 2', sans-serif | 正文 — 中文可讀性優先，字重維持在 400–500 |
| `--font-accent` | 'Baloo 2', cursive | 手寫感短句、口號、emoji 標籤搭配文字 |

**Pairing logic:** Baloo 2 的圓頭字幹是整個系統「溫暖感」的骨架，用在所有需要被記住的短字（標題、按鈕、標籤）；中文標題直接沿用 Noto Sans TC 700 字重維持圓潤的視覺重量，正文全面用 Noto Sans TC 常規字重確保長句好讀不費眼。

### Scale

| Element | Size | Font | Weight | Note |
|---------|------|------|--------|------|
| h1 | clamp(2.2rem, 6vw, 3rem) | head | 700 | line-height 1.3 |
| h2 | 1.75rem | head | 700 | margin-top 2.5rem |
| h3 | 1.3rem | head | 600 | |
| Body | 17px（mobile 16.5px） | body | 400 | line-height 1.85 — 給焦慮的讀者更多呼吸空間 |
| Caption / tag | 0.85–1rem | head | 600 | |

### Link Style

- 連結色 `#F2967D`，無底線
- Hover：底色轉 `#FBD8C5` 圓角膠囊背景（padding 2px 8px），文字色不變 — 像被螢光筆溫柔框住

---

## 4. Component Stylings

### 資料卡 Info Card

- 白底 + `border-radius: 24px` + `box-shadow: 0 6px 20px rgba(74,59,52,0.08)`，padding 1.5rem
- 頂部可放 56px 圓形 icon 底（Gentle Peach 底、Soft Coral icon）
- Hover：`translateY(-3px)` + 陰影加深至 `0 10px 28px rgba(74,59,52,0.12)`，無旋轉（旋轉感太活潑，這裡要的是「穩定的溫暖」）

### 步驟流程 Step Flow

- 圓形數字徽章（40px，Soft Coral 底、白字 Baloo 2 700）+ 虛線圓點連接（非直線，呼應柔軟感）
- 每步驟卡片圓角 20px，內距寬鬆（1.25rem），步驟間距 20px 以上
- IG 直式版位建議每步驟搭配一個大 icon 或插圖佔卡片 40% 面積，文字精簡至一句話

### 統計數字強調 Stat Emphasis

- 大數字採 Baloo 2 700（非 800，避免過度剛硬），數字色用 Soft Coral 或 Warm Ink
- 數字外圈可加柔和圓形色塊（Gentle Peach，直徑略大於數字），營造「被輕輕圈起來」的視覺焦點
- 單位文字用 Caption scale，緊貼數字，語氣口語化（例如「10 位有 8 位」優先於單純百分比）

### 警語框 Gentle Alert Box

| Box | Style |
|-----|-------|
| 建議框（.box-encourage） | 鼠尾草綠 10% 透明底 + 左邊條 4px `#8FA98C`（圓角化，非直角）+ 🌿 前綴 |
| 留意框（.box-notice） | 溫暖沙棕 10% 透明底 + 左邊條 4px `#B98A56` + 🔔 前綴 |
| 需注意框（.box-caution） | 柔陶土紅 10% 透明底 + 左邊條 4px `#C97B63` + 💭 前綴（刻意不用驚嘆號圖示，降低警報感） |
| 資訊框（.box-info） | 柔珊瑚 10% 透明底 + 左邊條 4px `#F2967D` + 💡 前綴 |

所有警語框 `border-radius: 0 20px 20px 0`，左邊條與右側大圓角並存，呼應系統「一邊清楚分類、一邊保持柔軟」的個性。

### Icon 標籤 Icon Tag

- 圓形容器（48px），底色為對應語意色的 15% 透明度，icon 用該語意色實色，描邊 2.5px 圓頭端點（`stroke-linecap: round`）
- 允許 icon 帶簡單插畫細節（如笑臉、愛心點綴），與 clinical-clarity 的純線性風格明確區隔
- 文字標籤採膠囊形（`border-radius: 999px`），padding 6px 16px，底色用 Accent Surface

---

## 5. Layout Principles

- **一次一個溫柔訊息**：版面優先服務「讓讀者安心地理解一件事」，避免同時塞入多個警示或數據造成焦慮堆疊
- **IG 4:5 直式建議（1080×1350px）**：上 20% 插圖/icon 主視覺區（大面積、留白多）、中 55% 內容區（1–2 張圓角資訊卡，文字精簡到可一眼掃完）、下 25% 溫暖收尾區（一句鼓勵語 + 小 CTA + 診所落款），四邊留白至少 72px
- **單欄為主，元素間距寬鬆**：卡片間距 20–24px（比一般系統多 30%），呼應「不擁擠」的核心訴求
- **圓角遞增邏輯**：小元素（標籤、按鈕）12–16px，中型卡片 20–24px，大型主視覺區塊 32px——圓角隨元素尺寸增加，維持視覺比例協調
- **插圖優先於純文字**：可用插圖/icon 傳達的資訊，優先用視覺呈現，文字只補充關鍵字，符合「一般民眾」的閱讀耐心
- **CTA 永遠溫和收尾**：頁尾或卡片底部的行動呼籲用鼓勵語氣（「一起試試看」而非「立刻執行」）

---

## 6. Depth & Elevation

深度語言是「棉花般柔軟的堆疊」，陰影永遠柔和無硬邊：

1. 平放（預設）：`0 6px 20px rgba(74,59,52,0.08)` 柔和低陰影
2. 抬升（hover）：陰影加深 + `translateY(-3px)`，無旋轉、無硬陰影
3. 強調色塊（CTA/頁尾）：Soft Coral 或 Warm Ink 實色塊，靠飽和度建立層次而非陰影

Motion 溫和舒緩：`transform`/`box-shadow` 0.2–0.25s ease-out（比一般系統稍慢，避免任何「彈跳感」讀起來像警報）。

---

## 7. Do's and Don'ts

### Do's ✅

- 所有容器大圓角（≥20px），角越圓語氣越溫柔
- 危險/警示訊息一律柔化色彩（陶土紅而非正紅），但文字內容依然清楚明確
- icon 允許圓潤插畫細節，描邊圓頭端點
- 文案口語化、第二人稱、鼓勵語氣（「你可以」而非「應該」）
- 大量留白，寧可拆成多張圖也不要塞爆一張

### Don'ts ❌

- ❌ 尖角、直角容器 — 立刻破壞溫暖感，這是與 clinical-clarity 的核心區隔
- ❌ 正紅色 `#DC2626` 這類刺眼警示色 — 一律用柔陶土紅替代
- ❌ 純白冷底 `#FFFFFF` 當畫布 — 畫布永遠是奶油色 `#FFF8EF`
- ❌ 專業術語不加口語解釋 — 目標讀者是一般民眾，不是醫療人員
- ❌ 密集數據表格或超過 3 個統計數字同框 — 這套系統不適合資料密集場景（改用 clinical-clarity）
- ❌ 純線性、零裝飾的醫療符號 icon — 太冷會與整體語氣衝突

---

## 8. Responsive Behavior

| Breakpoint | Behavior |
|-----------|----------|
| ≥1080px（網頁版位） | 資料卡可 2 欄 grid，插圖主視覺可左右並排文字 |
| ≤768px（IG/手機，主要場景） | 一律單欄堆疊；卡片 padding 收至 1.25rem；圓角維持不縮（圓角是核心語言，不因螢幕縮小而妥協） |
| ≤480px | h1 縮至 1.8rem；icon 標籤縮至 40px；步驟徽章縮至 32px |
| 列印/紙本衛教單 | 移除陰影，改用 1.5px 柔陶土色細框維持圓角辨識度 |

---

## 9. Agent Prompt Guide

給 AI agent 重現此風格的最小提示（用於網頁/HTML 衛教頁面）：

```
Create a page in the "Care Warm" style — a gentle, patient-friendly
health education system:

- Canvas: cream background #FFF8EF (never pure white); cards: white
  #FFFFFF with border-radius 24px and soft shadow
  0 6px 20px rgba(74,59,52,0.08), no hard edges anywhere
- Primary color: soft coral #F2967D for CTAs, headings, icon accents
- Secondary: sage green #8FA98C for reassuring/positive callouts
- Caution color is muted terracotta #C97B63 — NEVER bright red;
  keep alert tone calm even when content is important
- Fonts: 'Baloo 2' 700 (rounded) for headings/buttons/labels,
  'Noto Sans TC' 400 for body text (17px, line-height 1.85 for
  breathing room)
- Icons: rounded stroke-linecap, allowed simple illustrative detail
  (smile, heart accents) — never sharp/clinical line icons
- Alert boxes: colored left border 4px + tinted 10% background +
  soft emoji prefix (🌿 encourage / 🔔 notice / 💭 caution / 💡 info),
  rounded on the right side (0 20px 20px 0)
- Corner-radius scales with element size: 12-16px small, 20-24px
  cards, 32px large hero blocks
- Layout: single column, generous 20-24px spacing between elements,
  illustration-forward (prefer icons/illustration over dense text),
  warm second-person encouraging copy tone
- No sharp corners, no pure red, no clinical/dense data tables,
  no cold white backgrounds
```

### 專用 gpt-image 衛教圖 Prompt Block（IG 4:5 直式，面向一般民眾）

```
A warm, gentle patient-education infographic for Instagram (1080x1350px,
4:5 portrait), designed for the general public, not medical professionals.
Cream-colored background (#FFF8EF), soft white content cards with very
large rounded corners (24px+) and a soft warm shadow, no sharp edges
anywhere. Soft coral (#F2967D) used for the main title and CTA accents,
sage green (#8FA98C) for a reassuring "you can do this" callout box.
Large, friendly rounded typography (bold, chunky, warm) for the headline.
Simple round-stroke illustrative icons with soft rounded ends — a gentle
character or simple friendly illustration is welcome (smiling face, warm
hands, simple household objects), avoid sharp clinical iconography.
A muted terracotta (#C97B63) tone used sparingly for a "things to watch
for" note — calm, not alarming, no bright red anywhere. Generous white
space, single clear message per image, second-person encouraging tone
in the copy. A soft peach circular accent behind any key number or
icon. Bottom area reserved for a gentle closing line and small clinic
signature. The overall feel should read as "a caring friend explaining
health in simple words", cozy and reassuring, never clinical or
alarming.
```

---

*Original design system created 2026-07-13 for Design Lab — 補足面向一般民眾、低焦慮語氣的衛教 infographic 場景缺口，與 clinical-clarity（專業/嚴肅）互補區隔。*