版式画廊 · GALLERY
目录 · CATALOG
01 / 21
A VISUAL CATALOG OF LAYOUTS
一页一种
版式
找到想要的，拷走那个 section。
open layouts-gallery.html
21 layouts loaded
封面版式（短标题版）：左文右终端，仅适合 ≤5 汉字/行 的极短标题。长 CJK 标题改用「标题全宽 + 下方 lead|终端 一行」（见 deck-16x9 的 COVER），否则会在半栏里反复折行。
好版式不是装饰，
是把注意力排好队。
标题写结论，正文写理由。
大陈述版式：一句话、大字号、一个高亮短语。标题直接陈述结论，居中留白。适合论点页。
三张编号编辑卡（非 icon-card-shadow）
01差异化填充
编号
mono 编号挂右上角，衬线标题压住，正文交代细节。
规则顺序
02统一描边
层级
三卡共用一套描边与圆角：是系统，不是模板网格。
系统克制
03底部标签
收口
mono 标签沉到底，给每张卡一个一致的落脚线。
对齐收口
编号卡版式：eyebrow + 衬线标题 + body + mono 标签。差异在内容，统一在描边。用于「分点 / 步骤 / 维度」。
3×
把一个真实大数字当视觉主语，比一句形容词
「大幅提升」有力得多。
来源：替换为你的真实出处 · 无真实数据就别用这一版式
Data Hero 版式：数字占屏宽 ~20% 当主角，配 label + 出处。强约束：必须是真实数据，否则换版式。
截图进统一浏览器框，
比裸贴专业一个量级。
同一套框 + 同一档阴影。没图就用诚实占位，绝不画假 UI。
images/01-shot.png · 1600px 宽
截图版式：左文右框。frame--browser 给假浏览器栏，frame--shadow 给深阴影。没图用 .frame__placeholder。
诚实条形图（只画真实数据）
条形图版式：纯 CSS，--v 是真实百分比。强调=accent，副系列=accent-2，参照=ink-3。绝不编数字。
流程页：让箭头和落点替你讲顺序
3–5 个节点用 .flow；更长的链路换 .evo 步骤器。竖排加 .flow--v。
流程版式：.flow 真箭头 + .fn--on 落点（自动反白）。严禁自造 div+小箭头的扁卡片行。
漏斗页：宽度收窄就是结论
漏斗版式：--w 是真实比例（按数值线性映射），最窄一层 .fu--on 落点。没有真实转化数据就不用漏斗。
四象限：位置本身就是论点
矩阵版式：markup 顺序=左上/右上/左下/右下，.mq--on 标落点象限。轴标签写量纲，别写虚词。
进度/占比：一个数也要成图
占比 · 示例需替换半环=进度感，整环=占比感，一页只用一个。
仪表版式：.gauge 半环（--v 0–100）配 .gauge__val；占比用 .donut。都必须真实数据+出处。
体系/层级：上层抽象，下层支撑
产出层内容 / 决策
知识库层长期上下文 · 落点
工具层采集 / 清洗 / 检索
原始素材层录音 / 笔记 / 截图
分层版式：--w 上窄下宽成金字塔感，承重层 .ly--on。讲「体系/架构/沉淀」用它，别用 bullet。
对比页：右侧是唯一落点
方案 A
看起来都行，但没有重心
两边等权 · 读者不知道你推荐谁
方案 B ✓
用 card--accent 指明结论
唯一的实色块 · 视线终点 · 推荐项
对比版式：左 card--soft（弱）+ 右 card--accent（强）。右侧实色块是唯一落点，替你说出推荐项。
“Less, but better.”
— Dieter Rams
金句版式：衬线大字、极简、一个署名。用 blur 入场。给节奏一个停顿。
PART 02
进入下一节
分节版式：整页强调色作呼吸点。文字翻成 accent-ink。chrome 的分段标签会跟着切。
便当版式：非均匀但守网格
主格 · col-4 row-2
大块放重点
最大的格子承载最重的信息，其余按 6 列底栅切分。
便当版式：col-4/row-2 主格 + 三个 col-2，全部吸附 6 列底栅。最后一格用 card--accent 收住视线。
03 — 论点
非对称双栏
窄栏放标号与小标签，宽栏放结论；一条 1px 竖线把两边锁进同一个版心——是瑞士纪律，不是装饰。
版式不是把内容
填进格子，是给注意力定向。
非对称双栏：5:7 偏置 + 1px hairline。窄栏=标号/eyebrow/小注，宽栏=大结论。区别于均分 grid-2——偏置本身制造张力。换边用 .asym--flip。
中性双栏：两个并列的面，不分高下
其一
把内容讲清楚
两栏等权、各表一面。和右侧 accent 落点的对比页不同——这里没有推荐项，只是把一件事的两个侧面并排陈述。
其二
把版式留出呼吸
一条 1px 细线分隔，比给两张卡片描边更克制；中性双栏适合「背景 / 现状」「定义 / 边界」这类并列陈述。
中性双栏正文：两栏等权，无 accent 落点（那是 comparison/zones 的活）。加 .two-col--rule 给 1px 竖线。用于并列陈述，不是取舍。
时间轴：让年份和连线替你讲演进
时间轴：带真实年份/里程碑的横向轴，区别于 .evo 抽象步骤器。axis 是首个子元素（静态 hairline），节点 .tl 自动错峰入场，关键节点 .tl--on。演进/路线图/复盘用它。
images/hero.jpg · 2400px 宽 · 满版裁切
满版图 HERO
让一张图占满版面，
关键文字压在安全区里。
满版图 Hero：图铺满内容区，.imghero__scrim 渐变保证叠字对比（--scrim/--on-media 中性色，禁蓝安全）。关键文字永远落在安全区下方。用 .obj-* 对准主体裁切。无图用诚实占位，不画假图。
定高图网格：多图也守同一条基线
定高图网格：cell 高度锁 cqw（不用 aspect-ratio），object-fit cover 裁切，多图对齐同一基线。.cell--wide 跨两列做主图。没图用 .frame__placeholder，不画假图。
YOUR TURN
挑一种版式，
从最难的那页开始。
cp section#7 my-deck.html
收尾版式：左文右终端，给一个具体的下一步动作——不写「Get Started」。