# Design System: Doodle Notebook

> 塗鴉筆記本設計系統 — 萃取自 AI Workshop 教學站（workshop.tingyudeco.com）的手繪講義風格：稿紙底、墨線框、螢光筆標記、手寫字型，把「老師手寫的講義」搬進網頁。

---

## 1. Visual Theme & Atmosphere

**Design Philosophy:** A hand-drawn lecture handout, digitized. Every element should feel like it was sketched with a fine-liner pen on cream ruled paper, then highlighted with real fluorescent markers. The system trades polish for warmth — imperfect sketch borders, slight rotations, and wobbly underlines make dense instructional content feel approachable instead of intimidating.

**Atmosphere Keywords:** Hand-drawn, Playful, Approachable, Studious, Paper-craft, Annotated, Friendly, Low-pressure

**Visual Anchors:**
- Cream ruled-paper canvas（36px 橫線稿紙底）
- 2px solid ink borders on every container — the "pen outline" that unifies the system
- Sketch border-radius（四角不對稱，像手畫的框）
- Fluorescent highlighter accents for tags, hovers, and emphasis
- Hard offset shadows (`4px 4px 0`) instead of blurs — paper cut-out depth
- Slight rotation on hover（-0.5° ~ -2°）— elements feel hand-placed

**Mood Board References:**
- 大學課堂手寫講義與重點螢光筆
- Notion 手繪插圖風（doodle illustration）
- 文具店的方格筆記本與代針筆
- Excalidraw / tldraw 白板美學

---

## 2. Color Palette & Roles

### Core Palette

| Swatch | Name | Hex | Role |
|--------|------|-----|------|
| 🔵 | Marker Blue 麥克筆藍 | `#49B6E5` | Primary — links, prompt labels, info accents |
| 🔷 | Ink Navy 墨水藍 | `#263D5B` | Secondary — watermark, deep accents, print branding |
| ⬛ | Fine-liner Ink 代針筆墨 | `#111827` | Ink — text, borders, outlines, hard shadows |
| ⬜ | Ruled Paper 稿紙米 | `#FEFCF3` | Canvas — page background |
| ⬜ | Paper Line 稿紙線 | `#E8E4D9` | 橫線稿紙紋、table row dividers |
| ⚪ | Pencil Gray 鉛筆灰 | `#9CA3AF` | Muted — dashed underlines, dividers, secondary strokes |

### Highlighter Set（螢光筆五色 — 系統的靈魂）

| Swatch | Name | Hex | Role |
|--------|------|-----|------|
| 🟡 | Highlighter Yellow 螢光黃 | `#FDE68A` | 主要強調 — hover 背景、推薦標籤、highlight 畫線 |
| 🟢 | Highlighter Green 螢光綠 | `#BBF7D0` | 替代方案標籤、類比框背景、複製成功回饋 |
| 🩷 | Highlighter Pink 螢光粉 | `#FBCFE8` | 進階標籤、裝飾強調 |
| 🔵 | Highlighter Blue 螢光藍 | `#BAE6FD` | 提示框背景、步驟徽章 |
| 🟣 | Highlighter Purple 螢光紫 | `#DDD6FE` | 實驗性標籤、次要強調 |

**Rule:** 螢光筆色只當背景/標記用，永遠搭配 ink 色文字，絕不作為文字色。

### Text Colors

| Role | Hex | Use |
|------|-----|-----|
| Text 主文 | `#111827` | headings, body |
| Text Light 次要 | `#4B5563` | captions, descriptions, subtitles |

### Semantic Colors

| Role | Color | Hex | Note |
|------|-------|-----|------|
| Success 成功 | `#16A34A` | 綠框、pro 清單、醫療類比框 |
| Warning 警告 | `#D97706` | 警示文字 |
| Danger 危險 | `#DC2626` | 紅色虛線警告框、con 清單 |
| Info 資訊 | `#49B6E5` | 同 Primary，提示框左邊條 |

### Surface & Depth

| Layer | Background | Border / Shadow | Use |
|-------|-----------|-----------------|-----|
| Canvas | `#FEFCF3` + 36px ruled lines | — | Page base |
| Surface | `#FFFFFF` | `2px solid #111827` | Cards, prompt blocks, TOC |
| Hover lift | 同上 | `4px 4px 0 #111827` + rotate(-0.5deg) | 可點擊卡片 |
| Overlay | `rgba(17, 24, 39, 0.88)` | — | Lightbox 底 |

---

## 3. Typography Rules

### Font Families

| Token | Stack | Use |
|-------|-------|-----|
| `--font-hand` | 'Caveat', 'LXGW WenKai TC', cursive | 標題、標籤、按鈕、註記 — 手寫感 |
| `--font-body` | 'LXGW WenKai TC', 'Caveat', cursive | 正文 — 楷書字型延續手寫氛圍但保持可讀性 |
| `--font-mono` | 'JetBrains Mono', monospace | 程式碼、指令 |

**Pairing logic:** Caveat 的英文手寫體負責「這是手繪的」的第一印象；LXGW WenKai TC（霞鶩文楷）用楷書筆意讓中文正文與手寫標題同屬一個世界，又能撐起長文閱讀。

### Scale

| Element | Size | Font | Weight | Note |
|---------|------|------|--------|------|
| h1 | 2.8rem（hero: clamp(2.2rem, 6vw, 3.2rem)） | hand | 700 | line-height 1.3 |
| h2 | 2rem | hand | 700 | margin-top 3rem |
| h3 | 1.5rem | hand | 700 | |
| Body | 18px（mobile 17px） | body | 400 | line-height 1.9 — 楷書需要更大行高 |
| Caption / tag | 0.85–1rem | hand | 500–700 | |

### Link Style

- 連結色 `#49B6E5`，無底線
- **Hover: `text-decoration: underline wavy`** + `text-underline-offset: 4px` — 波浪底線是系統的招牌微互動

---

## 4. Component Stylings

### Sketch Border（系統核心 token）

```css
--doodle-border: 2px solid var(--text);
--radius-sketch: 255px 15px 225px 15px / 15px 225px 15px 255px;
--radius-blob: 30% 70% 70% 30% / 30% 30% 70% 70%;
```

四角不對稱的 border-radius 讓每個矩形看起來像手畫的框。所有卡片、按鈕、TOC 都用同一組。

### Cards

- 白底 + `--doodle-border` + `--radius-sketch`，padding 1.5rem
- Hover: `rotate(-0.5deg) translateY(-2px)` + `box-shadow: 4px 4px 0 var(--text)`
- 卡片牆用 2 欄 grid（mobile 1 欄），單卡分區自動撐滿整列

### Tags & Badges

- 螢光筆色底 + sketch radius 膠囊，hand 字型 0.85rem
- 語意分類：黃＝推薦、綠＝替代、紫＝實驗、粉＝進階
- 數字圓徽章：32px 螢光黃圓形 + hand 字型

### Buttons / Nav Links

- 透明底 + `--doodle-border` + sketch radius，hand 字型
- Primary 變體：螢光黃底
- Hover: `rotate(-1deg)` + `box-shadow: 3px 3px 0 var(--text)`

### Callout Boxes

| Box | Style |
|-----|-------|
| 類比框（.analogy） | 螢光綠底 + 4px 綠實線左邊條 + `::before` 標籤文字 |
| 提示框（.box-tip） | 螢光藍底 + 4px 藍實線左邊條 + 💡 前綴 |
| 警告框（.box-danger） | `#FFEBEE` 底 + **2px 紅色虛線框** |
| 成功框（.box-success） | `#E8F5E9` 底 + 2px 綠色虛線框 |

### Prompt Block（可複製提示詞）

- 白底 + 2px ink 框，頂部 6px 藍白相間條紋（`repeating-linear-gradient`）
- 右上角螢光黃複製按鈕（hover 放大旋轉、複製成功轉螢光綠）
- `white-space: pre-wrap` 保持提示詞排版

### Dividers

- 章節分隔：鉛筆灰虛線（`repeating-linear-gradient` 8px 段）
- 裝飾分隔：120px 手繪波浪 SVG（squiggle，data URI 內嵌）

### Highlight 畫線

```css
background: linear-gradient(transparent 60%, var(--highlighter-yellow) 60%);
```

只畫下半的螢光筆效果，用於行內強調。

### TOC（目錄框）

白底 sketch 框 + `::before` 浮動標題（背景稿紙色蓋住框線），2 欄 columns，項目用鉛筆灰虛線底線。

---

## 5. Layout Principles

- **單欄置中**：max-width 900px，padding 32px（mobile 20px）— 講義是給人讀的，不做寬版
- **稿紙底**：`background-image: linear-gradient(var(--paper-line) 1px, transparent 1px)`，`background-size: 100% 36px`
- **Sticky header**：稿紙色底 + doodle border-bottom，純 CSS checkbox 漢堡選單
- **卡片牆**：`repeat(2, 1fr)` grid，gap 1.25rem；`:only-child` 撐滿整列
- **錨點跳轉**：`section[id] { scroll-margin-top: 80px }` 預留 sticky header 高度
- **Print-first 講義**：完整 `@media print` — 隱藏導覽、每頁固定版權 footer、旋轉浮水印、`break-inside: avoid`

---

## 6. Depth & Elevation

**No blur shadows.** 這個系統的深度語言是「紙的堆疊」：

1. 平放（預設）：只有 2px 墨線框
2. 拿起來（hover）：`4px 4px 0` 硬陰影 + 微旋轉 — 像一張紙被抬起一角
3. 覆蓋（lightbox）：深墨色 88% overlay + 白框照片

Motion 全部輕量：`transform` 0.1–0.15s ease，只做 rotate / scale / translateY，無入場動畫。

---

## 7. Do's and Don'ts

### Do's ✅

- 所有容器一律 2px ink 框 — 這是系統的統一筆觸
- 螢光筆色做背景標記，ink 色做文字
- Hover 給微旋轉（-0.5° ~ -2°），讓元素「手繪感」活起來
- 標題、標籤、按鈕用手寫字型；長文用楷書
- Emoji 當圖示系統用（✏️📋💡🩺）— 免費、跨平台、符合塗鴉感

### Don'ts ❌

- ❌ 模糊陰影、漸層按鈕、玻璃擬態 — 立刻破壞紙感
- ❌ 螢光筆色當文字色（對比不足且不像真的螢光筆）
- ❌ 純黑 `#000` — 墨色是 `#111827`
- ❌ 冷白背景 — 畫布永遠是稿紙米 `#FEFCF3`
- ❌ 大角度旋轉（>3°）— 會從「手繪」變成「凌亂」
- ❌ 對稱圓角 — 用 sketch radius，對稱圓角是另一個世界的語言

---

## 8. Responsive Behavior

| Breakpoint | Behavior |
|-----------|----------|
| ≤768px | 漢堡選單展開（純 CSS checkbox）；卡片牆 → 1 欄 |
| ≤640px | body 17px、h1 2rem；TOC 1 欄；pros/cons、ethics grid → 1 欄；nav links 直排 |
| Print | 白底、12pt、隱藏互動元件、每頁版權 footer + 斜角浮水印、卡片不跨頁 |

---

## 9. Agent Prompt Guide

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

```
Create a page in the "Doodle Notebook" style — a hand-drawn lecture handout:

- Canvas: cream paper #FEFCF3 with horizontal ruled lines every 36px
  (linear-gradient #E8E4D9 1px lines)
- Every container: 2px solid #111827 border with asymmetric sketch radius
  `255px 15px 225px 15px / 15px 225px 15px 255px`
- Fonts: 'Caveat' for headings/labels/buttons, 'LXGW WenKai TC' for body
  (18px, line-height 1.9), 'JetBrains Mono' for code
- Accents: fluorescent highlighter backgrounds only —
  yellow #FDE68A, green #BBF7D0, pink #FBCFE8, blue #BAE6FD, purple #DDD6FE
- Links: #49B6E5, hover = wavy underline (text-decoration: underline wavy)
- Hover on cards/buttons: rotate(-0.5deg to -2deg) + hard offset shadow
  `4px 4px 0 #111827` — never blur shadows
- Inline emphasis: half-height highlighter stroke
  linear-gradient(transparent 60%, #FDE68A 60%)
- Dividers: dashed pencil lines (#9CA3AF) or a small wavy SVG squiggle
- Icons: emoji (✏️ 📋 💡), no icon fonts
- Layout: single column, max-width 900px, generous line-height
```

---

*Extracted 2026-07-13 from `D:\VibeCoding\ai-workshop\style.css`（AI Workshop — 醫療人員的 AI 工作坊）*