editorial-illustrations

编辑型插图——论点 → 几何图形

你想要的风格（monotykamary.com、linear.app/now）不是图表库，而是一种准则：每幅图都是以几何形式呈现的单一论点，置于细线边框内，用等宽字体大写标注其含义，以灰度绘制，并且只使用一种强调色。遵循这套准则，任何形状看起来都会有“自家风格”。盲目照搬模板，只会显得粗制滥造。

不要拘泥于一套固定图表。 运用下面的方法，为这句特定的话构建所需的图形。references/worked-examples.md 中的六个示例证明了该方法具有普适性，它们不是可供挑选的菜单。

核心做法

找出这幅图必须证明的那句话，弄清这句话的结构。 将这种结构呈现出来，让读者在读到这句话之前就相信它。

先写标题注释，因为它就是论点。如果你无法用一句话说清这幅图的论点，那你还没有一幅图，只有装饰。停下来。

方法（每次都按此执行）

1. 写出论点。 用一句陈述句表达。这句话将原样成为 <figcaption>。例如：“只有当工作越过交付边界后，才能计费。”

2. 指出论点的结构。 这句话真正说的是什么？ 将它对应到一种几何图元：

   如果论点关乎……	将其呈现为……	基元（§5）
   光谱／多与少／渐变	有序单元格，填充逐渐增多	5a
   排名大小／占比／比较	水平条形，带真实坐标轴	5b
   带有转折点的序列	阶段网格 + 移动圆点	5a + rail
   相互因果关系／反馈关系	两个耦合轨道 + 桥接	5d
   分支／不确定情况下的决策	节点与分支构成的 SVG 树	5c
   某物改变形态／数据管道	阶段轨道，每个阶段一个字形	5e
   向目标累积	堆叠／填充条形	5a/5b
   边界／内部与外部	带框区域 + 一条穿越路径	组合
   分布／数据集中在哪里	点状条带或小多图	组合

   如果没有匹配项，就从 references/design-system.md §5 中的基元组合出新的基元。新颖性是意料之中且值得欢迎的；必须保持一致的是设计令牌和克制的风格。

3. 确定重点。 哪一个单独元素能证明论点？该元素使用 --accent（珊瑚色）。其他部分都保持灰度。只用一种强调色，最多两种。没有重点 → 图形就没有论点 → 回到第 1 步。

4. 按设计系统绘制。 遵循 references/design-system.md：设计令牌、排版规则（展示文字 = Inter 480–540，字距紧凑；其他文字均用等宽字体，标签小号且为全大写）、带框图形的装饰样式、宽度为 720 的 SVG viewBox、仅用细线、不加无关装饰。

5. 只有在能说明论点时才添加动效。 圆点在边界前暂停；脉冲在两个环路间穿过；信号沿分支向下移动。时长为 2–6s，使用 ease-in-out，并始终在 prefers-reduced-motion 下禁用。如果动效没有展示论证过程，就省略。静态图完全可以，而且往往更好。

6. 添加标题注释。 使用等宽字体，字号 8px，大写，放在横线上方。说明含义，而不只是数据来源。（写“……因为 X”，不要写“图 3”。）

用一句话概括这种美学

• 底色： 与宿主页面一致——深色页面使用近黑色 --ground:#080807，浅色页面使用白色／ 米白色（两套令牌均见 design-system.md）。图形置于淡色表面上；深色模式使用 backdrop-filter: blur(16px)，浅色模式使用细线 + 淡淡的阴影。
• 字体： 极少数大号展示文字使用 Inter；图形内部一律使用等宽字体， 7–11px，标签／说明文字使用大写。绝不使用第二种无衬线字体，也不使用粗体展示字。
• 颜色： 灰度阶（--ink → --quiet）+ 一种强调色 = Claude 珊瑚色 #D97757，只用于重点。（设置 --accent: var(--ink)，即可采用忠于 monotykamary 的 纯灰度配色。）
• 结构： 1px 细线、正圆节点、虚线 = 暂定／失败、不用阴影、不用渐变，唯一例外是沿轴向延伸的细线。
• 密度： 小字号、紧凑单元格、铺满边缘。克制就是这种风格。

完整规范 + 可直接复制粘贴的令牌代码块（深色和浅色）+ 基础 CSS： references/design-system.md。附带“主张→几何”推理过程的示例： references/worked-examples.md。非图表的编辑元素（指标条、状态旁注、引子 + 标记、 编号章节索引、正文排版、内联卡片）： references/elements.md。实时渲染示例（珊瑚色统一风格，可切换）： assets/gallery.html。

图形应遵循宿主页面的主题（始终如此）

图形是访客页面的客人。它必须与页面的浅色／深色模式一致，而不是强加自己的主题。把深色展板放进浅色文章里，会显得格格不入（这是我们在 2026-07-22 吃过苦头后总结的）。

• 先观察宿主页面。 浅色页面 → 浅色图形。深色页面 → 深色图形。 宿主网站可能默认使用浅色模式，并带有自己的主题切换器（例如 Charter 衬线标题 + Public Sans 正文、 蓝色强调色），会在 <html> 上设置 data-theme="light"|"dark"——此类页面上的图形必须 遵循 data-theme，并默认使用浅色模式。
• 如果宿主有明确的主题系统，深色覆盖样式应由它触发，而非媒体查询。 使用 :root[data-theme="dark"] .yourfig { … }，不要使用 @media (prefers-color-scheme: dark)。这是一个真实故障（2026-07-22）：图形使用媒体查询触发时， 因访客的操作系统为深色模式而页面为浅色模式，导致图形在浅色博客上呈现深色。页面的 data-theme 才是事实来源；只有没有主题切换器的宿主页面才使用媒体查询。对于带主题切换器的宿主页面，应匹配网站自身的深色令牌（底色 #171b22、线条 #262c36、墨色 #f1f5f9），让图形的深色面板融入网站深色模式，而非显得格格不入。
• 使用令牌构建，让图形自适应。 在图形自身的作用域中定义调色板，默认值 = 宿主的默认主题，再添加 :root[data-theme="dark"] .fig 覆盖（只有宿主没有主题切换器时，才同时添加 @media (prefers-color-scheme: dark) 覆盖）。几乎不增加成本，却能让图形适应未来变化。
• 珊瑚色在不同底色上均符合 AA 对比度标准。 白色背景上，文字／描边使用 --accent:#c15f3c（仅大号节点填充保留 #D97757）；近黑色背景上直接使用 #D97757。
• “主张→几何”方法和克制原则不受主题影响。 只有调色板令牌需要切换。灰度阶 + 一种珊瑚色强调色，在两种底色上都适用。

输出规范

• 每幅插图使用一个自包含的 <figure>：内联 <style>，作用域限定在该 figure（或共享 token :root）；内联 SVG；不发起外部请求。
• 主题 = 宿主主题（见上文）：嵌入浅色页面时默认使用浅色主题，但始终基于 token，并通过 prefers-color-scheme + :root[data-theme] 覆盖；同时必须兼容减少动态效果的设置。这两条都是本项目规范，不可省略。
• 对于 Artifact：不使用外部字体/CDN（CSP 会阻止它们）；使用内联 @font-face 数据 URI，或回退到 system-ui/ui-monospace。
• 对于自有网站上的博客文章：将 figure HTML/CSS 输出到文章正文中（markdown 会通过 build.py 原样传递原始 HTML）。博客采用浅色主题，因此应用浅色 token；保留深色覆盖以确保可移植性。使用 python3 build.py 重新构建；构建后的页面使用绝对资源路径，因此请通过本地服务器或自包含的独立副本预览，切勿直接通过 file:// 打开（这样会导致文章样式丢失）。请参阅本地自包含 HTML 预览。

验证（必做 — 这是 UI/UX 输出）

根据视觉验证规则，仅检查 DOM 并不足够。请渲染并检查。

1. 在 browser-harness 中打开 figure 并截图（evidence_shot）。
2. 对照主张检查图像：几何形状是否让句意一目了然？珊瑚色是否只出现在重点上？是否有被裁切的等宽文本、未对齐的 SVG 标签、相差一位的柱状图数值，或 ≤720px 时无法正确堆叠的布局？
3. 修复发现的问题，并重新截图以证明。浅色版本也要检查。
4. 确认启用减少动态效果设置时，动画会停止。

防劣质清单（任一项不符合，就拒绝该 figure）

• figcaption 是一句明确陈述的真实主张。
• 几何形状编码了该主张的结构（而非随意套用的通用图表）。
• 恰好只有一个强调元素（珊瑚色），且位于重点上。
• 图中的每个标签、数值和说明均使用等宽字体 + 极小字号；标签使用大写字母。
• 只使用细线；不使用阴影、渐变（柱状图坐标轴细线除外）或圆角矩形。
• 仅当图形确实呈现定量信息时才显示网格线。
• 动画（如有）能够体现主张，并在减少动态效果设置下停止。
• 深色和浅色模式下均能正确渲染，并能在移动设备上整齐堆叠。

博客插图工具包

撰写博客文章时，应先从工具包中选择，而不是自行设计新的装饰样式：references/blog-figure-kit.md（包含六种模式、截图和推文框架及注意事项）以及 assets/blog-figure-kit.html（包含实时图形和完整样式表）。正文示意图使用这些 figure；ASCII 图仅用于动态页眉。