# 风格体系

## 概述

知识卡片的风格体系基于 panda-article-illustrator 的风格基础，增加了卡片专属风格。由于卡片以文字为核心内容，风格的侧重点在于 **排版美感** 和 **信息可读性**。

---

## 核心风格

| 风格 | 描述 | 适用场景 |
|------|------|----------|
| `notion`（极简手绘） | Notion 风格简笔画，黑白为主 + 一个强调色 | 知识分享、效率工具、SaaS |
| `study-notes`（手写笔记） | 仿真手写，蓝笔 + 红批注 + 黄荧光笔 | 学习笔记、考试重点、课堂笔记 |
| `chalkboard`（粉笔画） | 黑板绿背景 + 白/彩色粉笔笔触 | 教学、讲解、课堂知识 |
| `cute`（可爱） | 圆润线条、柔和粉彩、甜美装饰 | 生活分享、轻松内容、入门科普 |
| `bold`（醒目） | 大色块、粗边框、强对比、大字体 | 避坑指南、重要提醒、紧急通知 |
| `warm`（温暖） | 柔和暖色、圆润图标、友好氛围 | 个人成长、心理、教育 |
| `vector-illustration`（矢量插画） | 扁平矢量、几何形状、粗黑轮廓 | 技术教程、概念解释 |
| `minimal`（极简） | 大量留白、极少装饰、纯文字为主 | 金句、哲学、核心观点 |
| `screen-print`（丝网印刷） | 海报艺术、半色调、有限色彩 | 观点文章、文化评论、封面 |

---

## 风格详细规范

### notion（极简手绘）

```
背景：白色或极浅灰(#FAFAFA)
线条：黑色(#1A1A1A)手绘线条，轻微不规则
图标：简笔画风格，单色
文字：无衬线字体，清晰
强调色：一个柔和的强调色（如蓝色 #3B82F6 或绿色 #10B981）
装饰：手绘下划线、简笔画小图标、虚线分隔
```

### study-notes（手写笔记）

```
背景：白色横线/方格纸纹理
主色：蓝色墨水(#2563EB)手写体
批注色：红色(#DC2626)用于重点标注和批注
荧光笔：黄色(#FDE68A)半透明高亮
装饰：便签贴、箭头标注、圈重点、星号
文字：仿真手写体，倾斜
额外元素：纸张边缘阴影、文具（笔、尺子）
```

### chalkboard（粉笔画）

```
背景：黑板绿(#2D5016)或深灰黑板
线条：白色粉笔质感，粗糙边缘
彩色粉笔：黄(#FCD34D)、粉(#FDA4AF)、蓝(#93C5FD)、绿(#86EFAC)
文字：粉笔手写体，略带晃动感
装饰：粉笔灰尘效果、擦除痕迹、粉笔画图标
板书效果：划线强调、圈重点、箭头
```

### cute（可爱）

```
背景：柔和渐变（粉→白、紫→蓝）
线条：圆润粗线条
配色：粉色(#FCA5A5)、薄荷绿(#A7F3D0)、浅紫(#C4B5FD)、浅黄(#FDE68A)
文字：圆体字，友好可爱
装饰：星星✨、爱心💕、云朵☁️、闪闪发光效果
气泡：圆角对话气泡、标签贴纸
```

### bold（醒目）

```
背景：纯色大色块或强对比分割
主配色方案A：黑色背景 + 黄色(#FCD34D)文字
主配色方案B：白色背景 + 红色(#EF4444)强调
线条：粗黑边框，高对比
文字：超粗体，巨大标题，字号差异极大
装饰：警示标识⚠️、感叹号❗、粗箭头、大号编号
信息层级：极端分明，核心信息占据 60% 以上面积
```

### warm（温暖）

```
背景：米色(#FEF3C7)或浅杏色(#FFF7ED)
配色：珊瑚(#FCA5A5)、橄榄绿(#A3E635)、暖橙(#FB923C)、奶茶色(#D4A76A)
线条：圆润、柔和阴影
文字：友好的无衬线字体
装饰：圆润图标、柔和阴影、自然纹理
氛围：亲切、温馨、家的感觉
```

---

## 卡片类型 × 风格 推荐

| 内容特征 | 推荐风格 | 理由 |
|----------|----------|------|
| 技术干货 | notion, vector | 清晰、专业 |
| 学习笔记 | study-notes, chalkboard | 学习氛围 |
| 生活科普 | cute, warm | 亲切易读 |
| 避坑/警告 | bold | 醒目引起重视 |
| 金句/观点 | minimal, screen-print | 视觉冲击力 |
| 步骤教程 | notion, chalkboard | 结构清晰 |
| 概念对比 | vector, notion | 信息对称 |

---

## 系列风格一致性

同一卡片系列中的所有卡片必须使用相同风格，包括：

1. **配色方案**：完全一致
2. **装饰元素**：同类型装饰
3. **字体/文字风格**：统一
4. **边距/间距**：保持一致
5. **角色渲染方式**：随风格统一调整