风格系统（Design Tokens）
美学定位：黑墨手绘涂鸦 + 米色纸面 + 极淡水洗色块——像资深工程师在牛皮笔记本上 用针管笔画的系统图，再用水彩淡淡罩了几块底色。风格辨识度 = 这些 token 的严格组合。
画布
| Token | 值 | 说明 |
|---|---|---|
| 纸面底色 paper | #f8f5e8 |
温暖米色，绝不用纯白 |
| 画布宽度 | 1200px |
高度随内容 |
| 墨线色 ink | #212020 |
所有描边和文字，近黑微暖；绝不用纯黑 #000 |
| 弱文字 | ink @ 65% opacity | 副标题、注释 |
| 纸纹 | feTurbulence 极淡颗粒（recipes §0） | 可选，加了更像纸 |
区块水洗色板
"区块"指版式的一级分区（横向 band、纵向层、径向扇区、对比柱都算）。 每个区块罩一种水洗色，相邻区块不同色；同一图 3~5 种即可，顺序随意但要错开冷暖。
| 色名 | 区块底 wash | 更深一档（内部强调条/横幅） | 流动圆点 dot |
|---|---|---|---|
| 鼠尾草绿 sage | #f0f1e0 |
#e8ebd5 |
#5f7a4a |
| 黄油黄 butter | #f9f3d1 |
#f4ecc0 |
#b8912a |
| 蜜桃粉 peach | #f8e9d9 |
#f3ddc8 |
#bf7350 |
| 薰衣草紫 lavender | #e9e1ea |
#ded2e0 |
#7d6a99 |
| 雾蓝 mist | #eef2f4 |
#e2e9ee |
#5b7d94 |
牛皮纸棕 #e9dac1（描边同 ink）留给"容器"类比喻：纸箱、横幅、档案盒。
- 内卡（区块里的小卡片/文档/白纸）一律纸白
#faf7eb，不用水洗色。 - 水洗色只出现在区块底和少量强调条上；图的主体观感是"墨线 + 纸色"。
点缀（少量、手写感的灵魂）
- 序号章：ink 实心圆 Ø30，内写 paper 色手写数字，贴在区块左上角。
- 火花 ✦ / 小星 ☆：4 角星小路径，散布在大标题、口号、关键区块旁，每图 3~6 个。
- 简笔小人：圆头 + 弧线身体的涂鸦小人，放在"人/agent 做事"的语义位置，一图 1~3 个。
- 中央口号：一句手写短语放版面天然留白处，两侧各一个 ✦。
- 没有彩色 mascot、没有荧光笔高亮、没有底部色条——焦点靠 ✦ 和口号，全图基本单色墨。
字体
| 角色 | 字体栈 | 用在哪 |
|---|---|---|
标题体 --font-title |
'Comic Sans MS','Kalam','LXGW WenKai Screen','Kaiti SC',cursive 700 |
大标题、中央口号、区块标题、节点内关键词 |
正文体 --font-body |
'Comic Sans MS','PatrickHand','LXGW WenKai Screen','Kaiti SC',cursive 400 |
注释、内卡标签、连线文字、副标 |
- Comic Sans MS 是 macOS/Windows 系统字体，按名引用、不捆绑（也不可捆绑，商业字体）。 拉丁字符全部落在它上面：标题/节点标题用 Bold，注释/连线文字用 Regular。
- 汉字落到捆绑的 LXGW WenKai Screen（霞鹜文楷，OFL）——原始 TTF 在
assets/fonts-cn/（25MB，永不整包内联），注入脚本自动提取 HTML 里用到的汉字 子集化成几十 KB woff2 再内联（见 recipes §0；需fonttools+brotli， 缺就pip3 install --user --break-system-packages fonttools brotli）。兜底 Kaiti SC。 - 捆绑的 Kalam/PatrickHand/Caveat/Excalifont（assets/fonts/）作无 Comic Sans 环境的 后备，也是想换味时的备选菜单。
- 代码/命令用
ui-monospace, Menlo, monospace。所有文字一律 ink 色。
字号阶梯
| 层级 | 字体/字号 | 备注 |
|---|---|---|
| 大标题 | title / 58~64px bold | 抖动下划线收尾，旁边一颗 ✦ |
| 中央口号 | title / 28~32px bold | 两侧 ✦ |
| 区块标题 | title / 24~25px bold | 区块顶部居中 |
| 区块副标 | body / 14~15px @65% | 跟在标题下方居中（可省） |
| 内卡标签 | body / 15~16px | 卡内图标下方或右侧 |
| 连线标签 | body / 13~14px | Comic Sans 偏宽，标签词要短 |
形状与描边（比常规更糙）
| 元素 | 规格 |
|---|---|
| 区块面板 | 圆角 18px，ink 2.2px，roughness 1.8；fill 水洗色 |
| 区块头部 | 左上序号章 + 顶部居中标题；标题下可画一条抖动细分隔线（1.4px） |
| 内卡 | 圆角 8px，ink 1.7px，fill #faf7eb；"一叠纸"= 背后垫 1~2 张偏移 (+4,+4) 的同款卡 |
| 文档卡 | 右上角画折角（两条短线三角），比圆角矩形更像"纸" |
| 图标 | 纯 ink 单色简笔涂鸦，2px 线宽：小人/文档/文件夹/纸箱/放大镜/笔记本电脑/月亮/齿轮/勾叉 |
| 主流程箭头 | ink 2.0px，微弯曲线（浅 Q 弧，不要笔直）+ 末端实心小三角 |
| 大回环箭头 | ink 2.2px 长弧线绕版面外侧走，气势要足；虚线弧留给弱关联（1.6px，7 6） |
| 引用/命令框 | 圆角 8px，ink 1.4px 虚线 4 4，fill 纸白 |
手绘抖动是硬要求：所有静态几何形状加 data-rough（本风格 roughness 取 1.6~2.2，
比默认糙），由捆绑的 rough.js/sketchify.js 加载时替换。参与 CSS 动画的元素除外（见 recipes）。
版面
版式原型由内容决定（见 SKILL.md 第 1 步原型表），以下通用：
- 大标题放角部（右上或左上），签名式，带下划线扫尾；不占整行。
- 区块之间间距 24px+；区块内边距 20px；节点间距 ≥ 36px。
- 区块标签 = 序号章（有流程顺序时）+ 居中标题；序号让读者自己找到阅读顺序， 所以跨区块的连线可以少画几根，版面更透气。
- 主轴方向（横排左→右等）只是默认阅读方向，不是流动的枷锁：分支、汇聚、 往返、跨区块回环、环形轨道按内容需要自由画，回环弧走主轴上下/外侧的空档； 内容整体成环时，用一根绕版面外侧的大弧箭头点题并让圆点沿它跑。 实线/虚线表达"确定/弱"的语义强弱：迭代循环是核心流程 → 实线；偶发降级/弱关联 → 虚线。
- 版面天然空隙放中央口号 + ✦，不要硬填满。
构图密度与排版
排版由内容量驱动，先数清楚要画多少东西（节点数、附件数、标注数），再倒推几何：
- 横向撑满：一行节点要铺满区块可用宽度——首节点贴左内边距、末节点贴右内边距、 间隙均分（间隙宽 = (可用宽 − Σ节点宽) / 间隙数）。不要把内容挤在中间留两侧大白边； 间隙大恰好给箭头和线上标签留了呼吸空间。
- 纵向贴内容：区块高度 = 头部（标题+副标 ~70px）+ 主轴行 + 附件行（标注框/回环弧下探深度）
- 内边距，逐项加出来；不要先定高度再填内容。整图高度同理 = 各区块自然高度之和。
- 附件（标注框、小人、一叠纸）优先塞进主轴上下的空档，它们是"补白"手段： 哪里空补哪里，而不是固定挂在某个位置。
- 每个区块至少一个非线性元素：一叠纸 / 简笔小人 / 纸箱横幅 / 标注框 / 回环弧。 只有"一排盒子加箭头"的区块是不合格的。
- 内卡里"图标 + 三两行短横线"就能表达"列表/文档内容"，多用这种速记涂鸦。
- 连线尽量挂小标签（做什么/传什么）。
- 完稿判断：眯眼看整图，墨色应该均匀分布；哪块区域一眼看过去是"一片空"， 就说明那里要么该缩小、要么缺一个附件。
动画节奏
| Token | 值 |
|---|---|
全局循环 --loop |
默认 3000ms，所有动画时长 ∈ {loop, loop/2, loop/3, loop/4}，全部 infinite（GIF 无缝的充分条件）。整体嫌快/慢时直接调这个值（2400~3600ms），所有动画等比缩放，别逐个改时长 |
| 圆点速度 | 按像素速度定时长，不是固定一圈一个 loop：目标 80~150px/s。估算路径长度 L，取 duration = loop/k 中最接近 L/110s 的档。短线（<150px）至少 loop/3，长弧用 loop 或 loop/2。一圈 3s 爬 50px 的点是死的。 |
| 圆点形态 | r=4.5，fill 区块 dot 色 + paper 色 2.5px halo；再叠一个 scale 呼吸（loop/4，1→1.35）让它"活"；多条线负延迟错开 |
| 圆点放哪 | 任何有"流动"语义的路径都放：主流程、回环、分支、跨区块长弧、环形轨道——尤其回环，圆点沿弧转回去才有"循环起来"的感觉；不放的只有纯标注连线（标注框的引出虚线）。整图流动应有"有去有回/有转向"的层次，全是同向平行线 = 不合格 |
| 微动效 | 每图 2~4 处：齿轮/月亮微转、勾描画、光标闪、✦ 脉冲缩放 |
| 缓动 | 圆点位移 linear；呼吸和微动效 ease-in-out |
判断标准：盯着成品 GIF 看 2 秒，应该能立刻感到"东西在流动"；如果要凑近找才看见点在动，速度或密度不够。