People's Platform 模板设计系统解析：基于 frontend-slides 打造 WPA 海报风幻灯片

本指南以 bold-template-pack/templates/peoples-platform/design.md 为主体，系统拆解这套"WPA 海报 × 政治竞选"风格的前端幻灯片设计系统：从五色三角色配色、四字体三声部排版、1920×1080 固定舞台，到标志性的"红色堆叠阴影 + 纸张颗粒纹理"，再到完整的中文（CJK）适配方案与迭代规范。读完本文，你将掌握如何在 frontend-slides 技能下，从零实现一套充满抗议海报能量、可稳定缩放、可中英混排的幻灯片设计系统。

1. 系统定位：抗议海报的图形语言

People's Platform 是一套 WPA（Works Progress Administration，罗斯福新政时期联邦艺术项目）海报 × 政治竞选风格的幻灯片系统。它的视觉语言属于"公开演讲的图形登记簿"——那种本应出现在抗议标语牌、工会通讯或竞选巴士上的视觉：响亮、自信、民粹。

系统在 frontend-slides 技能中的定位是"Bold Template Pack"中的激进选项之一。selection-index.json 给出了它的选择元数据：

• Mood（氛围）：activist（行动主义）、loud（响亮）、graphic（图形化）、honest（诚实）
• Tone（语调）：punchy（有力）、direct（直接）、expressive（表现力强）、warm-bold（热烈而大胆）
• Formality（正式度）：medium-low；Density（密度）：medium-high；Scheme（色系）：light
• Best for（适合场景）：文化评论、宣言、公民与社区演讲、设计讲座、竞选 pitch，以及任何想要"抗议海报能量而非企业抛光感"的场景——包括创始人愿景时刻、使命陈述
• Avoid for（避免场景）：需要制度性克制的场合——这种高饱和的政治海报调色板会坚定地投入表现力

1.1 画布：比白色更暖的纸张

画布底色是暖色纸张 paper（#F5F2EA），比纯白 #fff 略暖、不刺眼。每一张幻灯片都通过一个 CSS 伪元素叠加颗粒纹理，让整套幻灯片读起来是"丝网印刷的产物"而非"数字渲染的结果"。这一点在整个系统中是结构性的：颗粒纹理不是装饰，而是所有其他内容"印刷其上"的表面。

1.2 三个声部的字体系统

系统的字体栈是一套三分类的"声部体系"，每种字体占据完全不重叠的语域：

字体	角色	语域	使用规则
Alfa Slab One	主声部（喊话的）	压缩粗壮 slab 衬线、纯大写	极大体量承担所有重活，28px 邮戳到 540px 巨型数字
Caveat Brush	人性打断（低语的）	手写体、小写、轻微旋转	64–96px、永远小写、永远旋转 2–5 度，每页最多一次
DM Mono	账房记录员（记账的）	等宽、加宽字距大写、恒定 24px	顶栏、页脚、标注、元数据、来源引用、丝带文字
Archivo Narrow	正文声部	压缩无衬线	只做正文与引语，永不用于展示字号，字重 400/500

1.3 五色三角色的调色板

调色板名义上有五个颜色，但承担三个功能角色：

• Blue（#2C2CDC，电光钴蓝）——结构性主色：高强调表面的背景、内容分隔边框、非蓝背景上的文字颜色
• Orange（#F2A03A，暖琥珀）——能量色：统计数字、列序号、蓝底上的强调文字
• Red（#E83A2A，火红）——深度色：绝不出现在表面填充中，只作为叠层文字阴影/盒阴影的第一层

1.4 标志性的堆叠偏移阴影

系统最可辨识的特征是堆叠偏移文字阴影（stacked offset text-shadow）：橙色文字投出 6–12px 的红色阴影，红色阴影再投出 12–24px 的红色深阴影，形成三层准 3D 凸版印刷效果。交互元素的盒阴影镜像同样处理：6px 6px 0 {colors.red}。

2. 颜色系统：完整色板与功能角色

2.1 主调色板

颜色 Token	色值	功能角色
{colors.blue}	#2C2CDC	电光钴蓝。高强调幻灯片与结构元素的主表面色：整页背景、列填充、顶栏背景、纸张表面上的文字、头像填充、对比面板深色侧
{colors.blue-deep}	#1B1BB0	更深的蓝。仅用于堆叠文字阴影的最外层。永不做表面填充
{colors.orange}	#F2A03A	暖琥珀。能量强调色：超大统计数字、列序号、CTA 按钮填充、丝带背景、蓝底上的强调文字
{colors.orange-deep}	#E89321	更深的琥珀。保留给橙色元素最深的阴影层，不做表面填充
{colors.red}	#E83A2A	火红。深度色：文字阴影与盒阴影的第一偏移层。永不作背景或主文字色
{colors.red-deep}	#B7281C	深红。最大展示元素上双重文字阴影的最外层。永不作表面填充

2.2 表面色板

颜色 Token	色值	用途
{colors.cream}	#F4E9D6	暖奶油。蓝底反白模式下的文字/边框色、内嵌边框、奶油色幻灯片整页背景
{colors.paper}	#F5F2EA	带暖色调的米白。默认幻灯片背景——比 #fff 更暖更柔和，大多数内容页使用
{colors.ink}	#0E0E14	带极轻微蓝调的近黑。所有结构边框、正文、列分隔线、时间轴轨道、KPI 卡片边框

2.3 颜色角色速记

• 蓝色表面 = 高强调、结论性、权威时刻
• 纸张/奶油表面 = 内容优先、可读、从属时刻
• 橙色 = 数字、能量、当前页面最重要的事物
• 红色 = 你永远不会直接看到的颜色——只是一种你"感觉到"的阴影

design.md 中组件配置（components 节）将这套颜色以占位符语法（如 "{colors.cream}"）注入到边框、背景与阴影定义中，例如 inset-frame 组件定义为 border: "6px solid {colors.cream}"; inset: 48px。这意味着在实现时，应将颜色抽为设计 Token/CSS 变量，统一替换生成。

3. 排版系统：四种字体、三套尺标

3.1 字体家族详解

Alfa Slab One —— 主声部。压缩、厚重的 slab 衬线，竖线强烈、衬线块状。全部以字重 400（也是唯一可用字重，本身即粗）应用于 28px 邮戳到 540px 巨型数字之间的每一个展示时刻，且严格大写。压缩的字形意味着即使巨号字号也不显宽——而是显高、显柱状。轻微正字距（0.005em）防止大字号下字形互相接触。

Caveat Brush —— 人性声部。粗糙手写体，只在大字号（64–96px）出现，永远小写、永远带小角度旋转（-2 到 -5 度）。出现在温暖、过渡或非正式的瞬间——作为僵化结构布局中的一处手写注释。永不做正文或标签。

DM Mono —— 记账声部。等宽、24px、宽字距（0.18–0.22em）、大写。出现在顶栏、页脚、kicker 标签、元数据行、来源引用和丝带文字中。永远是支撑元素——海报底部印刷的技术规格，而非标题。

Archivo Narrow —— 正文声部。压缩无衬线，用于所有运行正文：支柱描述、列表段落、对比列表项、统计注释。大多数字体文本用 500 字重，较小说明文字用 400。永不在展示字号使用。

3.2 展示尺标（Display Scale）

Token	字号	字族	字重	用途
{typography.display-jumbo}	540px	Alfa Slab One	400	出血式超大统计数字
{typography.display-hero}	260px	Alfa Slab One	400	主导性收尾或开场标题
{typography.display-title}	240px	Alfa Slab One	400	主演示标题
{typography.display-xl}	180px	Alfa Slab One	400	大号列序号数字
{typography.display-lg}	140px	Alfa Slab One	400	主区块标题
{typography.display-md}	120px	Alfa Slab One	400	次级区块标题
{typography.display-sm}	108px	Alfa Slab One	400	紧邻正文的宣言标题
{typography.stat-unit}	130px	Alfa Slab One	400	统计数字旁的上标单位符号
{typography.quote-mark}	300px	Alfa Slab One	400	装饰性超大引号
{typography.quote-body}	78px	Alfa Slab One	400	引用正文
{typography.kpi-value}	88px	Alfa Slab One	400	KPI/指标卡数值
{typography.subtitle}	72px	Alfa Slab One	400	主标题旁的副标题
{typography.card-title}	54px	Alfa Slab One	400	卡片或列标题
{typography.section-num}	54px	Alfa Slab One	400	区块或条目序号
{typography.cta}	48px	Alfa Slab One	400	CTA 按钮文字
{typography.url}	46px	Alfa Slab One	400	URL 或联系地址
{typography.item-title}	38px	Alfa Slab One	400	列表项或节点标题
{typography.toc-entry}	36px	Alfa Slab One	400	目录条目标题
{typography.item-title-sm}	30px	Alfa Slab One	400	密集列表项标题
{typography.stamp}	28px	Alfa Slab One	400	邮戳或徽章文字

3.3 手写尺标（Script Scale）

Token	字号	用途
{typography.script-lg}	96px	显著手写强调——过渡词、情感开场
{typography.script-md}	64px	较小手写注释——副标题标注、子标签

两个手写 token 永远小写，永远施加 -2deg 到 -5deg 的旋转。绝不在无旋转情况下使用 Caveat Brush。

3.4 正文与标签尺标（Body and Label Scale）

Token	字号	字族	字重	用途
{typography.body-lg}	30px	Archivo Narrow	500	统计注释、主要正文段落
{typography.body-md}	28px	Archivo Narrow	500	列正文、导语段落、对比列表
{typography.body-sm}	26px	Archivo Narrow	500	支撑性正文段落
{typography.body-xs}	24px	Archivo Narrow	400	密集列表项、说明文字
{typography.label}	24px	DM Mono	400	标准元数据标签（0.18em 字距）
{typography.label-wide}	24px	DM Mono	400	底线与丝带文字（0.22em 字距）
{typography.label-accent}	32px	DM Mono	600	高亮元数据（如区块计数）
{typography.signoff}	26px	DM Mono	400	页脚签署块（0.20em 字距）

3.5 排版原则

• Alfa Slab One 永远大写——绝不用句首大小写或小写。展示字号的行高要紧凑：大标题 0.82–0.88，只有多行正文相邻处可能发生行碰撞时用 1.04。0.005em 字距几乎不可见，但防止 100px+ 字号下字形碰撞。
• 堆叠文字阴影是展示文字的内联规则：橙色展示字体总是以 {colors.red} 为第一层阴影。200px 以上字号增加第二层 {colors.red-deep}，偏移量加倍。100px 以下字号单层 3–6px 偏移红色即可。
• DM Mono 标签永远 24px，无论上下文。字距因位置而异：顶栏/页脚 0.18em，丝带与底线 0.22em，分栏面板侧标签 0.16em。绝不在 DM Mono 上收窄字距——24px 无字距会从编辑风退化为工具风。
• Archivo Narrow 永远 400 或 500 字重，永不用在展示字号——它是支撑声部，不是标题声部。

4. 布局系统：画布、间距与通用 Chrome

4.1 画布系统

每一张幻灯片都是 1920×1080px。deck-stage 自定义元素负责缩放（详见第 9 节）。所有内容绝对定位或使用 CSS grid——无滚动。

4.2 间距系统（Gutter System）

• Slide gutter（90px 左右）：大多数内容区块的标准边缘留白
• Content gutter（120px 左右）：已有结构标题的幻灯片内的正文内容——为阅读文字提供额外呼吸空间
• Topbar height（90px）：固定在幻灯片顶部的蓝色顶栏带高度
• Frame inset（48px）：幻灯片边缘到装饰性内嵌框架边框的距离（用于蓝底幻灯片）

间距 Token 在 design.md 的 spacing 节中完整给出：slide-gutter: 90px、content-gutter: 120px、topbar-height: 90px、section-border: 6px、inner-border: 3px、grid-gap-lg: 90px、grid-gap-md: 30px、frame-inset: 48px。

4.3 通用 Chrome：两种模式

系统不在每张幻灯片上强制统一顶栏，存在两种装饰模式，可单独使用也可同页共存：

顶栏模式（Topbar pattern）——全宽 90px 蓝色条，position:absolute; top:0; left:0; right:0。内含 DM Mono 24px 标签文字、0.18em 字距、6px 奶油色底边框。用于高强调蓝底幻灯片。

区块分隔模式（Section-divider pattern）——头部区块与下方内容区之间的一条 6px 实心 ink 色水平线。头部区块用 90px 左右内边距，下方内容也用 90px 内边距。无顶栏——分隔线本身即分割元素。

5. 深度与层次：堆叠阴影三部曲

5.1 堆叠文字阴影（核心技术）

系统的签名技术。展示文字在相同方向（右下）投射分层偏移阴影，形成准 3D 凸版印刷效果。按元素尺寸分三个层级：

层级	偏移层 1	偏移层 2	适用
小	3px 3px 0 {colors.red}	—	72px 以下元素
中	5px–6px 5px–6px 0 {colors.red}	—	72px–140px 展示文字
大	10px 10px 0 {colors.red}, 20px 20px 0 {colors.red-deep}		140px–260px 展示文字
巨型	12px 12px 0 {colors.red}, 24px 24px 0 {colors.red-deep}		260px+ 统计数字

可以这样理解：橙色展示文字是"脸"层，红色是"身体"层，red-deep 是"脚"层——整个效果让人相信字形的物理厚度。

5.2 盒阴影（辅助技术）

交互与装饰元素（邮戳、头像、CTA 按钮、KPI 卡片）在盒阴影形式下使用同样的偏移逻辑：6px 6px 0 {colors.red} 或 8px 8px 0 {colors.red}。这统一了整个系统的深度：所有元素以相同光线角度、相同方向投出阴影。

5.3 颗粒纹理（氛围深度）

每一张幻灯片都携带 .grain::before 伪元素：两组重叠的径向渐变点阵（3px 与 5px 间距），mix-blend-mode: multiply，50% 不透明度。它模拟丝网印刷的半调纹理，给扁平的数位表面一种物理印刷质感。这不是立体感，而是氛围——整套演示读起来是"制作的"，而非"渲染的"。

5.4 扁平元素

DM Mono 标签、ink 色区块规则、正文与网格线完全扁平。结构分隔线上没有任何阴影。

6. 形状与装饰词汇

6.1 圆角尺标

值	用途
999px（胶囊形）	顶栏/头部区域的元数据标签胶囊
50%（圆形）	头像、时间轴里程碑圆点、圆形邮戳
4px	菱形项目符号伪元素（旋转 45 度成菱形）
0px	所有结构元素：列、卡片、顶栏、框架、丝带、KPI 卡片、邮戳

系统几乎完全是方形的。唯一柔化形状是胶囊（元数据块）、圆形（头像、圆点、收尾邮戳）和菱形项目符号。结构元素的方正强化了印刷/建造美学。

6.2 边框重量

• 6px 实线 {colors.ink}——主要结构边框：区块分隔线、列分隔线、顶栏底边、内嵌框架、KPI 卡片边框、CTA 按钮边框
• 6px 实线 {colors.cream}——蓝底上的反白结构边框：内嵌框架、奶油反蓝模式的顶栏分隔线
• 5px 实线——次级结构边框：引文邮戳、对比列表项处理
• 4px 实线——三级分隔线：对比面板侧标签、引语左侧边框
• 3px 实线 {colors.ink}——精细结构线：目录行分隔符、列标签、统计来源分隔线、时间轴内线

6.3 装饰元素清单

内嵌框架（Inset frame）——蓝底幻灯片上，inset: 48px 处一条 6px 奶油色实线边框构成第二个内矩形。强化海报/标语牌美学——"设计中的设计"。

橙色丝带（Orange ribbon）——60px 高的底部锚定条，{colors.orange} 底色、6px ink 顶边框、0.22em 字距的重复 DM Mono 文字。作为数据幻灯片的跑马灯页脚。

菱形项目符号（Diamond bullet）——列表项标记，用 ::before 伪元素：24px×24px、background: {colors.red}、border-radius: 4px、transform: rotate(45deg)。蓝底列表改用 {colors.orange}。形状相对文本左侧 48px（绝对定位）。

圆形邮戳（Circular stamp）——200px 圆形，旋转 -9deg，6px 橙色边框、8px 红色盒阴影。作为公章——官僚文档上现实世界的批准印记。

旋转矩形邮戳（Rotated rectangular stamp）——旋转 -3deg 的矩形块，5px 奶油色边框、6px 红色盒阴影。内含 Alfa Slab One 28px 文字、0.04em 字距。旋转角度比圆形邮戳小——像轻微倾斜放置的地址标签。

手写注释（Script annotation）——Caveat Brush 64–96px、小写、旋转 2–5 度。总是紧邻其修饰或打断的 Alfa Slab One 标题出现——从不单独出现。

列序号（Column ordinal）——180px Alfa Slab One 橙色数字、5px 红色文字阴影，下方跟一个 3px ink 顶边框的 DM Mono 标签。这种配对（大橙色数字 + 小等宽标签）是系统标注列或区块的标准方式。

下划线规则（Underline rule）——14px 高的实心 ink 矩形，宽为其容器的 30%，用作宣言标题后的句号。比发丝线更重——更接近涂黑条。

颗粒覆盖（Grain overlay）——.grain 类为每张幻灯片添加 ::before 伪元素纹理。在系统中不能从幻灯片上移除——它对美学是结构性的。

7. 规范：Do's and Don'ts

7.1 应该做（Do）

• 给每张幻灯片施加颗粒覆盖（.grain::before）。它不是装饰——是所有其他内容印刷于其上的表面
• 在所有橙色与奶油色展示文字上使用堆叠文字阴影。无阴影的 Alfa Slab One 会显得扁平、失去凸版印刷特质
• 阴影偏移按字号成比例缩放：小字号小偏移，巨型字号巨型偏移
• 让红色专属于阴影颜色。红色一旦作为文字颜色或背景填充出现，深度系统即刻崩溃
• Caveat Brush 只在大字号（64px+）使用，永远小写、永远轻微旋转，永不用作正文
• DM Mono 标签固定在 24px、字距至少 0.16em。等宽字在正文字号配正常字距会读起来像代码而非编辑排版
• 主要结构分隔用 6px 边框重量。更细像 SaaS；更粗看起来像设计事故
• 蓝底幻灯片使用内嵌框架——把蓝底幻灯片区分为"被框住的"而非"单纯填满的"
• 在蓝色表面上用 {colors.orange} 作为数字、数值与强调文字。蓝底橙字或奶底蓝字是深色表面上仅有的另外两种允许文字组合

7.2 不该做（Don't）

• 不要把红色用作背景或主文字色。它是阴影材料，不是表面材料
• 不要把小字号或无旋转的 Caveat Brush 用于正文。扁平、小的手写体读起来是潦草，而非有意为之
• 不要在 Alfa Slab One 上混用大小写。大写锁定对 slab 的权威感至关重要
• 不要软化边框重量。结构元素上的 1px/2px 边框会破坏印刷品美学
• 不要圆化卡片或容器角。内嵌框架与 KPI 卡片严格为方形
• 不要用 Archivo Narrow 做标题。它只是正文与导语字体——缺乏展示用途所需的视觉重量
• 不要把 blue-deep 或 red-deep 用作表面颜色。它们只属于阴影——职责是深度，不是填充
• 不要省略列表项上的菱形旋转。旋转 45 度的正方形是菱形；正立的正方形是盒子——形状传达手工感而非普通感
• 不要改变 DM Mono 字号。24px 是所有等宽标签文字的唯一定值——为了强调而加大会破坏系统；唯一的例外是 {typography.label-accent}（32px、字重 600）

8. 迭代指南：新增元素时的八条硬规则

1. 堆叠阴影是硬性不变量——任何新的橙色或奶油色展示元素都必须携带它。偏移量约等于字号除以 20 得到第一层阴影距离，第二层加倍
2. 任何新蓝底幻灯片都要有内嵌框架（6px 奶油色、inset: 48px）；若有头部栏，用带 6px 奶油色底边框的顶栏模式
3. 新列或并排面板遵循 6px ink 分隔线约定。非对称布局（如 60/40 分栏）只要分隔边框保持 6px 即可
4. 新 KPI 或数据卡片使用 {components.kpi-card} 模式：5px ink 边框、纸张背景、可选蓝色 alt 变体。内部数字用 Alfa Slab One 加标准文字阴影
5. 新列表项永远用菱形项目符号（24px×24px、4px 圆角、旋转 45 度）。ink 背景项用红色，蓝底项用橙色
6. 如需新的装饰邮戳或徽章，用 Alfa Slab One + letter-spacing: 0.04em + 6px 6px 0 {colors.red} 盒阴影 + 轻微旋转（-3 到 -9 度）。圆形邮戳 50% 圆角，矩形邮戳保持方形
7. 颗粒覆盖是 section 元素上的 CSS 伪元素——每个新幻灯片都必须通过 .grain 类携带它
8. 手写（Caveat Brush）文字是打断，不是默认。每页最多一次，且只在 64px+

9. 固定舞台与响应式行为

9.1 Fixed-Stage 策略（设计文档的第一优先级）

People's Platform 的 design.md 开篇即以 "Frontend Slides Fixed-Stage Policy" 声明：当该设计系统被 frontend-slides 技能使用时，最终演示必须生成在固定 1920×1080 舞台上，整体均匀缩放到浏览器视口。演示必须在任何屏幕（包括手机）上保持 16:9 画布——允许信箱式或立柱式留白，但不允许为移动端重排幻灯片内容。

该策略优先级高于本文档后文中任何源码模板的响应式行为描述。如果原始模板原本用 100vw、100vh、vw、vh 或 clamp() 等视口流式 CSS 实现，应将这些值视为设计比例，转换为 1920×1080 舞台坐标，而不是在生成演示中保留为实时响应式规则。

9.2 deck-stage.js：舞台缩放的实现

design.md 要求使用 deck-stage.js 或等效的内联舞台缩放器输出。从源码看，该自定义元素的核心机制是：

• 默认设计尺寸常量为 1920×1080（DESIGN_W_DEFAULT / DESIGN_H_DEFAULT）
• _fit() 方法（deck-stage.js#L527-L540）计算缩放因子 s = Math.min(vw / 1920, vh / 1080)，通过 transform: scale(s) 整体缩放画布，实现等比适配与信箱式留白
• 幻灯片是隐藏而非卸载：非活动页保持 visibility: hidden + opacity: 0，状态（视频、iframe、表单、React 树）在导航间保留
• 导航支持键盘（←/→、PgUp/PgDn、空格、Home/End、数字键、R 重置）、点击与移动端点击区三分（左/中/右），并派发 slidechange CustomEvent（含 index、previousIndex、total、reason 等 detail）
• noscale 属性可渲染为作者尺寸 1:1（PPTX 导出器使用，保证 DOM 捕获拿到未缩放几何）
• 打印时通过注入文档 <head> 的 @page 规则按设计尺寸一页一张幻灯片输出

9.3 无响应式断点

这套模板专为 1920×1080 演示显示设计，无悬停状态、无交互表单元素、无响应式断点。幻灯片通过键盘或演示翻页器推进。

9.4 打印与 PDF 导出注意

在 96dpi 下，1920×1080 画布映射为 20×11.25 英寸的页面。颗粒覆盖使用 mix-blend-mode: multiply——PDF 导出中混合模式可能被扁平化，打印前应测试输出，并考虑为印刷格式禁用颗粒。这一提示在 viewport-base.css 的打印媒体规则中也有呼应：打印时 .deck-stage 取消 transform、幻灯片按 1920×1080 在文档流中逐页分页。

10. CJK 与国际化内容：中文适配方案

10.1 推荐中文字体配对

角色	拉丁字体	中文字体	字重
展示/标题/引文（Alfa Slab One 大写）	Alfa Slab One	Noto Serif SC（思源宋体）	900
手写打断（Caveat Brush 小写旋转）	Caveat Brush	—（无合适对应，见美学注释）	—
正文（Archivo Narrow 500）	Archivo Narrow	Noto Sans SC（思源黑体）	500
标签/等宽（DM Mono 大写加宽字距）	DM Mono	Noto Sans SC	400（不要强制 CJK 等宽）

10.2 混合内容策略

策略 A——在 fontFamily 的拉丁字体后追加中文字体：Alfa Slab 的 token 变为 "Alfa Slab One, Noto Serif SC, serif"；Archivo Narrow 变为 "Archivo Narrow, Noto Sans SC, sans-serif"；DM Mono 变为 "DM Mono, Noto Sans SC, monospace"。拉丁字形仍以原字体渲染，CJK 自动回落到 SC 回退字体。

10.3 字体加载

<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=Alfa+Slab+One&family=Caveat+Brush&family=Archivo+Narrow:wght@400;500;600;700&family=DM+Mono:wght@300;400;500&family=Noto+Serif+SC:wght@400;500;700;900&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">

10.4 通用 CJK 调整

• 行高：正文 1.75–1.85，展示 1.15–1.25
• 字距：CJK 上为 0
• 文本变换：CJK 上不做大写
• 全角标点（，。：；！？「」（））
• 展示标题不加句号（中文排版惯例）
• 盘古之白：CJK 与拉丁之间留空格（使用 Claude 而非 使用Claude）
• 一个句子只使用一种字体

10.5 美学注释：三种声部的中文转移

People's Platform 是建立在三种承重字体上的 WPA 海报系统，而三种字体都没有干净的中文转移：

• Alfa Slab One（最高 540px 大写的压缩 slab 衬线）在 CDN 上没有同重量、同权威感的中文 slab 衬线。Noto Serif SC 900 字重是最接近的匹配——具有 slab 般的厚重与结构权威——但它更读作"文学纪念碑"而非"抗议标语牌"。接受这种语域转移：这个系统的中文版本更接近遗产时代公共告示板（想想大字报或博物馆标识），而非 1930 年代 WPA 海报。堆叠红色文字阴影仍然适用，仍承载系统的凸版深度签名。
• Caveat Brush 的"人性打断"声部无法转移到中文。中文书法体（如马善政）带有文化与传统重量——读作仪式化、正式，甚至官僚化，而非拉丁 Caveat 的随意人声。推荐做法：纯 CJK 幻灯片上干脆省去手写打断时刻。备选：即使在中文内容中也用简短拉丁词作为打断（如中文标题旁一处手写 yes! 注释）——保留随意打断的能量，同时规避中文书法传统。
• DM Mono 大写加宽字距标签不转移给 CJK。中文元数据用 Noto Sans SC 400、字距归零、无大写。纯拉丁标签（URL、日期、版本号）保留 DM Mono。
• Archivo Narrow 是 500 字重的压缩字体。Noto Sans SC 没有压缩变体。用 Noto Sans SC 500 维持原字号，接受中文正体会比拉丁正文稍宽。单色纸张画布与颗粒覆盖吸收了宽度差异。

10.6 中文版幸存者

堆叠文字阴影（橙色 → 红色 → red-deep）能完美转移给中文——把它施加到每一个橙色中文展示标题上，凸版深度会跨脚本存活。蓝橙红调色板完全脚本无关。菱形项目符号、旋转橡胶邮戳、奶油内嵌框架、6px ink 边框——全部在中文中不受影响地工作。

10.7 已知 CJK 缺口

Caveat Brush 没有可接受的中文对应。"人性打断"声部在纯 CJK 的 People's Platform 演示中结构性缺席。两种变通方案（完全省去打断；中文内容中使用拉丁手写词）都是可见的美学妥协——被迫进入纯中文时，这个民粹海报系统会失去三个声部中的一个。混合内容演示（英文主导加中文点缀，或反之）是该模板最强的适用场景。

11. 已知局限（Known Gaps）

• deck-stage.js 是外部脚本依赖，未在本文档内文档化。幻灯片导航与缩放完全由它处理
• 数据页的橙色丝带用静态重复文字实现——没有 JavaScript 跑马灯动画。1920px 宽度下文字自然换行；更长字符串需手动复制文字
• 颗粒覆盖用 mix-blend-mode: multiply，需要半透明背景或可见填充的父级才能产生纹理效果——纯白或纯黑表面上效果可能不可见
• 演讲者备注以 <script type="application/json"> 块内嵌在模板中——这是展示性数据，不属于设计系统，未收录在这些 token 中
• Archivo Narrow 是网页字体。它有宽系统回退（system-ui, sans-serif），但系统字体栈回退的压缩宽度与 Archivo Narrow 差异显著，在紧凑网格配置下可能破坏布局
• 引文文字上的 text-wrap: pretty 属性是现代 CSS 特性，浏览器支持有限——在较旧的导出环境中可能不生效

12. 在 frontend-slides 生成流程中的使用方式

People's Platform 遵循 Bold Template Pack 的渐进式信息披露契约（见 bold-template-pack/README.md）：

1. 选择阶段：读取 bold-template-pack/selection-index.json 的紧凑元数据，依据 mood、tone、best_for、avoid_for、formality、density、scheme 字段初筛候选；标题预览只读该候选的 preview.md
2. 确定阶段：用户选定模板后，才读取本文档 design.md 作为设计配方——preview.md 只是轻量风格卡片，design.md 是完整设计系统参考，应作为风格配方而非照抄内容
3. 生成阶段：按 SKILL.md 的固定舞台规则输出——单文件自包含 HTML、完整包含 viewport-base.css、1920×1080 固定舞台、保留模板字体/调色板/装饰词汇/间距节奏/组件语法、用户实际内容优先

生成后需在浏览器渲染截图中同时校验文字溢出与面板重叠——scrollHeight 检查不够，因为网格面板可能互相遮挡（该提示同时出现在 bold-template-pack/README.md 与 SKILL.md）。最终交付时，预览幻灯片必须是用户演示的真实首页，不得渲染模板名、slug、路径或任何内部流程文字。

13. 总结

People's Platform 是一套"少即是多、大声即是态度"的设计系统：九色 Token 收敛为三色功能角色，四种字体各守一域的声部，红色永远只是阴影而非表面，堆叠偏移阴影与纸张颗粒让数字界面获得印刷物般的物理质感，而固定 1920×1080 舞台与 deck-stage 缩放机制保证了它在任何屏幕上都保持完整构图。对于中文场景，系统给出了完整的字体配对、混合策略与诚实的声部缺口说明——它最适合中英混排的宣言式内容。无论是文化评论、使命陈述还是创始人愿景演示，这套系统都能让幻灯片拥有标语牌的能量，而非企业抛光的平庸。