frontend-slides Cobalt Grid 设计系统全解：双色趋势报告幻灯片模板的字体、网格、装饰与固定舞台规范

• AI 技能
• AI 插件
• 前端

本篇技术指南以 bold-template-pack/templates/cobalt-grid/design.md 为骨架，系统讲解 frontend-slides 仓库中 Cobalt Grid 这一「双色 risograph 趋势报告」模板的完整设计体系：从奶油纸面 + 电光钴蓝的严格双色规则、Newsreader / Hanken Grotesk / DM Mono 三字体协作、永久图表纸网格与像素故障列装饰，到 1920×1080 固定舞台的生成规范与中文排版适配。读完本文，你将掌握该模板的全部配色 Token、字号阶梯、构图语法与源码级实现细节，可直接用于生成高完成度的编辑型幻灯片。

设计定位与适用场景

Cobalt Grid 在 selection-index.json 中的元数据将其定位为editorial / design-research / studious / modernist风格的模板，tagline 是"Electric cobalt serifs on a graph-paper canvas, anchored by stair-stepped pixel-glitch decorations and slim hairline rules"。它最适合营造"安静严肃的设计 / 研究简报、艺术出版物、策展趋势报告"的气质，适用于工作室年报、agency 能力展示、设计研究出版物、建筑 / 艺术 / 学术类演示，以及任何需要"单一强调色 + 打印账本式沉稳感"而非企业抛光感的 deck。

反向适用边界同样明确：需要温暖感、多色能量或休闲俏皮语气的 deck 应避免该模板——严格的钴蓝 + 奶油 + 网格调色板是刻意克制的。配套的 preview.md 也强调其 cultural reference 是 WIRED Japan、Shift 杂志与以双色 risograph（奶油 + 一色钴蓝）印刷的建筑趋势报告。

固定舞台政策：设计文档的最优先规则

design.md 开篇即声明Frontend Slides Fixed-Stage Policy，这是高于文档其余部分响应式描述的最高优先级约束：

• 当该设计系统被frontend-slides技能使用时，最终 deck 必须生成为固定 1920×1080 舞台，并整体等比缩放到浏览器视口；
• deck 在任何屏幕（包括手机）上都保持 16:9 画布，允许 letterbox 或 pillarbox，绝不为移动端重排内容；
• 即便源模板原本使用100vw、100vh、vw、vh、clamp()等视口流式 CSS，也一律将其视为设计比例，翻译为 1920×1080 舞台坐标，而不是保留为生成 deck 中的实时响应规则；
• 最终输出应使用 deck-stage.js 或等价的内联舞台缩放器：每张幻灯片按 1920×1080 渲染，用一次transform缩放整个舞台，并在渲染截图中同时验证文本溢出与面板重叠。

这一点与 frontend-slides 技能核心的 SKILL.md 完全一致：Fixed 16:9 Stage (NON-NEGOTIABLE)。从 deck-stage.js 源码可以看到默认设计尺寸即为1920×1080，其_fit()方法（第 527-540 行）用Math.min(vw / designWidth, vh / designHeight)计算统一缩放比，且为 PPTX 导出保留noscale属性路径。而 viewport-base.css 则提供了生成 deck 必须整体包含的.deck-stage、.slide.active/visible与打印单页布局等基础样式，其中幻灯片切换必须用visibility+opacity+pointer-events，不能用display: none。

三根基：纸、墨与永不关闭的网格

Cobalt Grid 是一个双色趋势报告编辑系统，建立在三个不可动摇的根基上：

1. 暖奶油纸画布（{colors.paper}，#F0EBDE）——所有幻灯片的统一背景；
2. 电光钴蓝墨色（{colors.ink}，#1F2BE0）——系统中唯一墨水颜色，同时服务标题、正文、边框、页码、图表纸网格、像素故障装饰与 QR 补丁；
3. 永久的图表纸网格——通过每个.stage上的::before伪元素渲染，不可关闭。

网格不是可选的装饰：它存在于每张幻灯片背后，使整套 deck 呈现出建筑描图纸或日式趋势报告的质感。{colors.grid}的取值是rgba(31, 43, 224, 0.10)，即 10% 透明度钴蓝，网格单元尺寸由backgroundSize设为clamp(28px, 2.2vw, 44px)正方形，位于 z-index 1。

颜色系统：严格双色，绝无第三色

design.md 的colors段定义了六个颜色 Token，其中四个"实色"、两个"透明度变体"：

色彩别名将rule映射到ink、bg映射到paper，说明结构规则与背景都走同一双色来源。设计文档明确声明系统不存在通俗意义上的强调色：加入红色标注、绿色统计或黄色高亮都会破坏 risograph 双色身份。需要强调时，正确手段是放大字号、把 Hanken 换成 Newsreader、加 mono 增减箭头，或用透明度变暗——而不是引入新颜色。

所有默认值也围绕这一定律展开：默认幻灯片表面为 paper，默认标题 / 正文 / 标签 / mono / 结构边框颜色均为 ink（1.5px solid），密集列表内的行分隔线用 ink-faint（1px solid），图表开状态数据色为 ink、关状态为 grid。

字体排印：三字体对话与完整字号阶梯

系统的排版身份由三种字体的分工对话构成，没有任何第四种字体：

• Newsreader（serif，weight 400，另有 300/400/500 的 italic 轴）——承载所有 display 时刻、节标题、统计数字。层次靠字号而非字重；400 是唯一正规用法，600/700 不使用。
• Hanken Grotesk（sans，400–700）——承载所有正文、大写字标签、微文本。正文用 400，标签用 600。
• DM Mono（monospace，400–500）——承载所有 chrome 元素：页码、mono 标签、坐标刻度、竖向堆叠标签、表格中的增减箭头。

design.md 的typography段定义了完整的字号 Token 阶梯，下表将其参数化呈现（clamp(min, preferred, max)）：

文档还给出了明确的选型建议：不确定时使用headline（46–92px）作为主节标题，而不是display-chapter（仅限章节开篇时刻）。

签名式处理（非可选约束）

只要对应元素类型出现，以下规则就是强制的：

• 每个 Newsreader 元素字重 400、颜色 ink；
• 每个 Hanken 标签 / kicker / lab-tag / micro 都是大写，字重 600，字距 ≥ 0.16em（不加字距的 Hanken 大写读起来像未处理过的文本）；
• 每个 DM Mono 元素颜色 ink，字距 0.04–0.08em（更紧的 mono 字距会读起来像代码而非编辑排版）；
• 每个 display 元素都带负字距：display-hero -0.008em、vbig-numeral -0.015em、chapter / closing / manifesto / quote -0.005em；
• 图表纸网格在每张幻灯片上永久存在，.stage::before不可按页覆盖；
• 上下 hairline 框架每页必有，.hairlines::before/after默认应用；
• 页码必须位于底部 hairline 上方留出清晰间距：hairline 锚定bottom: clamp(20px, 2vh, 32px)，页码锚定bottom: clamp(48px, 4.8vh, 76px)，二者不得相撞。

行高在顶部塌缩：display-hero / vbig-numeral 0.92、display-chapter 1.0、body 1.5。紧凑 display + 开阔 body 的对比正是趋势报告的节奏来源。

布局系统：画布、间距与四件式 chrome 框架

画布与舞台结构

画布为100vw × 100vh（全视口、溢出隐藏）。每个.slide绝对定位填满视口，同一时刻只有一个携带.active（opacity 1、pointer-events auto），切换为 280ms 透明度淡入。.stage包裹在.deck内部（position: fixed; inset: 0），提供奶油背景与永久的::before图表纸网格。该结构对应 frontend-slides 标准体系中的.deck-viewport > .deck-stage > .slide，参见 viewport-base.css 与 html-template.md 中的SlidePresentation控制器。

边距与间距阶梯

通用 chrome 框架

每张幻灯片自动携带四件套框架：

1. 顶部 hairline——1.5px solid 钴蓝，距顶部约 2.6vh，左右按edge内收；
2. 底部 hairline——1.5px solid 钴蓝，距底部约 2vh，同样按edge内收；
3. 页码——DM Mono 钴蓝，锚定右下，距底部约 4.8vh（位于底部 hairline 之上）；
4. 导航提示——DM Mono 钴蓝、40% 透明度，锚定左下，与页码同一垂直高度。

框架由.hairlines、.pagenum、.nav-hint规则自动渲染，每张新幻灯片自动继承，无需逐页手动编写。在 index、data、table、chapter 版式上，内部还有一个嵌套的.frame内容矩形，绝对定位inset: {pad-top} {edge} {pad-bottom}，充当真正的内容容器。

构图模式

在 chrome 框架内，内容通常遵循以下构图动作（描述性而非规定性）：

• topbar块：左 Newsreader 标题 + 右 mono lab-tag，下方 1.5px 钴蓝规则，作为通用节标题模式；
• 像素故障列锚定内容区右缘（后记页有时锚左缘）；
• QR 补丁作为小标点（通常在右上角）；
• 竖向堆叠 mono 标签列锚定某一边缘；
• 密集账本或索引：等 flex 行，以微弱的钴蓝分隔线隔开。

深度与层次：扁平 + 结构规则

Cobalt Grid没有任何投影、抬升卡片、圆角面或渐变，所有元素都处于单一平面。深度信号全部来自结构：

• 1.5px 钴蓝规则（上下 hairline、topbar 规则、署名规则）；
• 1px 微弱钴蓝分隔线（索引列表、表格、账本内的行分隔）；
• 图表纸网格（10% 透明度钴蓝背景营造量测平面感）；
• 像素故障装饰（竖扫描线列增加视觉肌理但不产生 z 轴抬升）；
• QR 补丁块（纸色填充 + 1.5px 纸色 outset 阴影使其在网格 + 故障背景下仍可辨读）。

其中 QR 补丁的 1.5px 纸色 outset 是全系统唯一一个类阴影效果，其功能是"反阴影"——把网格推离 QR 马赛克以保证可读性，而非制造抬升。系统没有 z 轴深度。

形状与装饰语法：零圆角与五个签名装饰

边框权重

• 1.5px solid ink：主结构规则（上下 hairline、topbar 底规则、表头行底边框、图表基线规则）；
• 1px solid ink：引言署名上规则、宣言署名顶边框；
• 1px solid ink-faint（18%）：密集列表 / 表格 / 账本行分隔；
• 1px solid grid（10%）：永久图表纸网格；
• 1.5px paper 色 box-shadow：QR 补丁可读性 outset（功能性，非装饰性）。

系统零圆角：每个形状都是严格矩形，无圆形元素——这是编辑系统里罕见的刻意选择，属于趋势报告身份的一部分。

签名装饰元素

像素故障列（pixel-glitch）——台阶式竖扫描线列，以内联 SVG 渲染。每一阶是一个矩形，内含均匀分布的钴蓝竖线（奶油底上）。台阶宽度随列下行递减（或反之），形成"故障"像素化效果。绝对定位锚定某边缘（通常右侧），z-index 3，pointer-events 禁用，纯装饰。尺寸范围从紧凑的 16vw × 全高（次级装饰）到 32vw × 全高（签名封面装饰）；不透明度 0.6–1.0，作背景时降低、作主装饰时全开。

QR 补丁块（QR-block）——8×8 网格单元（部分.on= solid 钴蓝，默认 = paper），构成类 QR 马赛克。位于纸色填充背景之上，4px 内边距与 1.5px 纸色 outset；典型尺寸 58–100px 见方。用作构图标点，通常在右上角。

竖向堆叠标签列——一列 DM Mono 标签，writing-mode: vertical-rl+text-orientation: mixed，把拉丁文本顺时针旋转 90°。锚定右缘、垂直居中、均匀分布，读作沿边缘堆叠的目录式元数据。

像素堆叠柱状图（pixel-stack bar chart）——一行 8 根"堆栈"，每根是flex column-reverse的小水平单元（默认 10% 钴蓝关、.onsolid 钴蓝开），单元数量表示数值。1.5px 钴蓝顶边框 + mono 刻度标签位于柱体下方作为坐标轴。数据渲染为"由网格单元构成的像素化柱体"，直接呼应像素故障装饰。

账本表格（ledger-row）——密集行的 flex 列，每行是 5 列网格76px 0.6fr 1.4fr 0.7fr 0.5fr（num-tag / name / description / mood-tag / delta-tag），以 1px 微弱钴蓝底边框分隔。表头行用 1.5px solid 钴蓝。delta 标签通过::before前缀↑（delta-up）、↓（delta-down，变暗 40%）、—（delta-flat，变暗 40%）。

其他版式组件——index list（2×3 等 flex 行网格，每行 56px num-tag 列 + Newsreader row-headline + Hanken 正文的列，1px 微弱钴蓝底边框）；manifesto（居中 display-manifesto 声明，内嵌斜体<em>正文含.roman非斜体强调，下方 1px 钴蓝顶边框 + 左 Hanken who-tag 右 mono meta-tag）；quote（Hanken kicker + display-quote 引言，下方 1px 钴蓝署名行，右缘配紧凑像素故障列）；colophon（右对齐收尾版式，display-closing 大标题 + kicker，像素故障列锚左缘镜像封面，页脚 3–4 列段落署名网格）。

Do's and Don'ts：保持身份的十条纪律

Do：

• 所有 Newsreader 用 400 字重 ink 色；字重层级靠字号而非加粗；
• 所有标签 / kicker / micro 用 Hanken 600 大写 + 0.16em+ 字距 + ink；
• 所有 chrome（页码、mono 标签、刻度、竖向堆叠）用 DM Mono、0.04–0.08em 字距、ink；
• 每张幻灯片保留永久图表纸网格；网格就是系统本身；
• 每张幻灯片保留上下 1.5px 钴蓝 hairline，页码与导航提示位于底部 hairline 之上；
• 声明式幻灯片（封面、章节、引言、后记）用像素故障列作为主装饰，与 QR 补丁搭配作为离散图形锚点；
• index / data / table 版式用topbar + 1.5px 规则作为标准节标题处理；
• 密集列表 / 表格 / 账本行之间用 1px 微弱钴蓝分隔线；
• 图表一律渲染为网格单元像素堆叠（钴蓝开 / 钴蓝 10% 关）。

Don't：

• 不引入第二种墨水色（严格双色是 risograph 身份）；
• 不把 Newsreader 标题做成 600/700；
• 不关闭或隐藏图表纸网格；
• 不抑制上下 hairline；
• 不圆任何角（系统零圆形元素）；
• 不加投影、抬升卡片或渐变填充（深度是结构性的，不是 z 轴的）；
• 不使用不加 0.16em+ 字距的 Hanken 大写；
• 不把页码直接放在底部 hairline 上（须保持bottom: clamp(48px, 4.8vh, 76px)的留白）；
• 不渲染没有纸色填充 + 1.5px paper outset 的 QR 补丁；
• 不塞满宣言 / 引言 / 后记版式——它们刻意留空让网格呼吸。

密度哲学：由版式类型决定疏密

Cobalt Grid 是中等到密集、由网格组织的编辑密度系统。一张构图正确的幻灯片通常是一个大号 Newsreader 标题 + 多行结构化信息（六条趋势的索引、八条条目的账本、八根像素堆叠柱的图表）。图表纸下方主动"想要被填满"；过于稀疏的幻灯片会露出过多网格、读起来像线框。例外是宣言、引言、后记版式——它们刻意留出空间让图表纸呼吸。选择规则：chapter / manifesto / quote / colophon 稀疏；index / data / table 密集。

响应式、演示器行为与导出

源模板的响应式本质是 viewport-fluid：display-hero 在最小视口约 100px 到最大约 200px 间缩放；正文刻意保持 14–15px 窄区间；图表纸网格单元 28px–44px 缩放，维持整页约 50–80 格；边距 36–80px；1.5px hairline 与 1px 行分隔线固定不缩放。但在 frontend-slides 生成模型中，这些 clamp 值一律被翻译为 1920×1080 舞台坐标，不保留为实时重排规则。

演示器行为：幻灯片以 280ms 透明度交叉淡化，导航由 JS 驱动（.deck/.slide.active模式），典型的方向键 / 空格约定可用，左下导航提示以 40% 透明度的 mono 钴蓝显示交互指引。这与 deck-stage.js 的键盘导航实现（←/→、PgUp/PgDn、Space、Home/End、数字键、R 重置）一致，该组件还会派发slidechangeCustomEvent，供演讲者备注等宿主消费。

打印 / 导出：design.md 指出导出未显式处理，每张幻灯片是 100vw × 100vh 块，导出工作流应逐页快照 1920×1080；网格与 hairline 叠加层在 PDF 捕获中应正确渲染（无 blend 模式或滤镜）。仓库配套的 scripts/export-pdf.sh 正是这样的工作流：以 1920×1080（或--compact时的 1280×720）视口截图每张.slide，再合并为 PDF；而 deck-stage.js 的@media print分支则让浏览器原生"打印 → 存为 PDF"也能做到一页一张。

CJK 与国际化内容：中文排版适配指南

推荐中文配对

混排策略

使用策略 A——单一字体栈带回退：在同一个font-family栈中把 Noto Serif SC 声明在拉丁字体之后，拉丁字形由 Newsreader / Hanken Grotesk 渲染，CJK 字形自动回退到 NSC。mono chrome 保持纯拉丁 / 数字——页码、刻度、竖向堆叠标签不需要 CJK 回退（DM Mono 按设计就不含 CJK 字形）。

字体加载代码

<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400..500;1,6..72,400..500&family=Hanken+Grotesk:wght@400..700&family=DM+Mono:wght@400..500&family=Noto+Serif+SC:wght@400;700&display=swap" rel="stylesheet">

:root { --font-display: "Newsreader", "Noto Serif SC", Georgia, serif; --font-body: "Hanken Grotesk", "Noto Serif SC", sans-serif; --font-mono: "DM Mono", ui-monospace, monospace; } /* Headlines use Noto Serif SC 700; body uses Noto Serif SC 400. */

通用 CJK 调整清单

• 行高：CJK 正文行高提到约 1.7（原 1.5），汉字比拉丁小写需要更多垂直呼吸；
• 字距：汉字串上把letter-spacing归零（0.16em+ 的 Hanken 大写追踪会打散汉字节奏），紧字距只保留给拉丁片段；
• text-transform：内容为汉字时，去掉 micro / label / kicker 上的text-transform: uppercase——中文无大小写，强制 uppercase 不仅无效，还会破坏混排拉丁缩写词的渲染；
• 标点：中文句用全角（，。：；「」），拉丁句用半角（,.:;""），绝不在中文句中混入半角标点；
• 标题无句号：中文标题惯例省略句末。，展示字符串中须去掉；
• Pangu 间距：在相邻汉字与拉丁 / 数字之间插入细空格或普通空格（如2026 年、AI 产品），改善混排可读性；
• 一语句一字体：不要在句中途切换 CJK 字族，一个文本串只选单一字重的 Noto Serif SC。

美学与已知缺口

思源宋体是 Newsreader 自然的汉字搭档——同为安静文学衬线、粗细调制在大尺寸（最高 18vh / 240px 的 vbig-numeral）依然成立；钴蓝 + 奶油双色规则在中文场景无需谈判，因为只有一个墨水色可分配。NSC 700 承载本应 Newsreader 400 承担的大尺寸 display，NSC 400 承载正文与标签。DM Mono chrome 层刻意保持拉丁 / 数字——编号 001中数字由 DM Mono 渲染、汉字前缀走 Hanken/NSC，保留 mono chrome 的"技术规格"声线。图表纸网格、像素故障列与 QR 补丁内容无关，任何语言下读取一致。竖向堆叠标签用writing-mode: vertical-rl同样适用于汉字（中文本就是最原始的竖排文字），但同一条竖列中混排拉丁与汉字时，汉字会转回正立而拉丁保持 90° 旋转，因此应按语言隔离运行。

已知缺口：Noto Serif SC 无斜体轴（中文历史上没有斜体），所以宣言版式的"斜体 Newsreader +.roman翻转强调"在纯汉字内容下失效，需改用字重对比（NSC 700 vs 400）或微弱钴蓝调（ink-faint）恢复强调层级；Newsreader 的 optical-size 轴（6..72）没有 NSC 等价物，但 NSC 的品质下通常几乎不可察觉。

迭代指南与已知缺口

每张新幻灯片的创作检查单（design.md 的 Iteration Guide）：

1. 自动继承永久图表纸网格、上下 1.5px hairline、右下页码、左下导航提示——这些住在.stage和.hairlines上，不要逐页编写；
2. 新标题一律 Newsreader 400 ink——不加粗、不着色；
3. 新标签一律 Hanken 600 大写 + 0.16em+ 字距 + ink；
4. 新 chrome 一律 DM Mono ink + 0.04–0.08em 字距；
5. 新 index / data / table 内容页用 topbar（左 Newsreader 标题 + 右 Hanken lab-tag）+ 1.5px 钴蓝底规则；
6. 新图表页用像素堆叠处理——钴蓝开 / 钴蓝 10% 关的 column-reverse 堆栈，不引入单实色块填充柱状图；
7. 新声明式页（封面、章节、引言、后记）用像素故障列为主装饰，需要离散图形锚点时配 QR 补丁；
8. 密集列表的新行分隔用 1px solid ink-faint（18%），全强度钴蓝只留给主要结构规则；
9. 新组件继承零圆角、无阴影、无渐变的扁平性，任何违反者先重构再加入；
10. 系统只有一个墨水色（ink）和一个表面（paper），新构图永不引入第三色或第三表面调（paper-2 可用但很少需要）。

实现层面的已知缺口（源码事实，引用自 design.md 的 Known Gaps 段）：

• 像素故障列是逐次手写的内联 SVG，没有生成式组件——调整台阶模式需直接编辑 SVG 标记；
• QR 补丁的 8×8 单元模式逐次手写，每个实例手动放置.on单元，没有 QR 码生成逻辑；
• 像素堆叠柱状图的单元数量在标记中硬编码，没有把数值翻译为 on 单元数的数据绑定层；
• 竖向堆叠标签列依赖writing-mode: vertical-rl，现代浏览器可用，但拉丁 / CJK 混排在此方向的渲染在不同渲染引擎下可能有差异；
• 宣言版式的斜体 +.roman翻转模式是典型的反转强调（斜体正文内含内联非斜体强调），规则只在宣言专用 CSS 中，未泛化；
• QR 补丁的 1.5px 纸色 outset 是全系统唯一box-shadow，用作反阴影，不应挪作抬升用途；
• 后记的像素故障列锚左缘（镜像封面），其他页锚右缘——方向性逐页决定，创作新声明版式时要考虑；
• 图表纸网格单元 28–44px 的 clamp 缩放，在极端宽高比下整页网格数量可能显得不均；
• 系统加载三个 Google Fonts 家族（Newsreader、Hanken Grotesk、DM Mono）多字重——首屏渲染需要字体加载成功，否则 Georgia/Helvetica 回退会偏移视觉节奏。

小结

Cobalt Grid 是 frontend-slides Bold Template Pack 中一套纪律极其严明的双色编辑系统：奶油纸 + 钴蓝墨的严格二色律、Newsreader 400 / Hanken 600 大写 / DM Mono 三字体分工、永不开闭的图表纸网格与 1.5px hairline 框架、像素故障列与 QR 补丁签名装饰，再加上面向中文的完整思源宋体适配方案。在实际使用中，先在 selection-index.json 读取其元数据完成风格短名单，经 preview.md 生成标题页预览，确认选中后再读取完整 design.md 作为设计配方，最后按固定 1920×1080 舞台模型、结合 viewport-base.css、deck-stage.js 与 html-template.md 的舞台架构生成整副 deck，即可复现这一"两色 risograph 专著"式的编辑视觉。

• AI 技能
• AI 插件
• 前端