企业官网建设流程全解析

Hallmark 组件详解：S4 Inline（无断行内联标题）——让章节标题融入正文流的排版手法

【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark

在 AI 生成界面普遍“千篇一律”的今天，把每一个章节都做成“带边距数字标签 + 大标题 + 分隔线”的三段式，几乎已经成为 LLM 输出的条件反射。而 Hallmark 这个为 Claude Code、Cursor 和 Codex 设计的 anti-AI-slop 设计技能，给出了一套截然不同的思路：章节标题不一定非得单独占位、制造一次“空间断裂”，它完全可以像一个从段落中自然生长出来的小写小型大写短语，悄悄嵌进正文流里。本篇将基于仓库中 S4 Inline (no break) 组件文档，深入讲解这一“无断行内联标题”的定位、适用场景、HTML/CSS 实现细节，并结合 Hallmark 的宏结构体系、排版纪律与反模式清单，说明它为什么是长文叙事类页面的正确选择。

S4 是什么：从段落中“长出来”的标题

S4 的完整定义只有一句话：标题是一个以小型大写样式呈现的短语，它“出现”在正文流内部，不产生任何空间上的断裂（The heading is a small caps phrase that emerges inside the body flow; no spatial break）。与 Hallmark 组件库中其余四个章节头（Section head）组件不同，S4 不做分隔、不悬停、不贴边、不吸顶——它只是正文中的一句变奏。

官方给出的骨架实现如下：

<p>… <span class="head-inline">A small heading.</span> …</p>

.head-inline { font-variant-caps: all-small-caps; letter-spacing: 0.06em; font-weight: 500; }

注意两段代码各自的克制：

• HTML 层面：标题不是<h2>而是<span>，塞在<p>的段落内部。这意味着在文档语义（outline）上，它并不承担标题角色——真正的阅读层级完全由排印本身传达，而不是由标签等级传达。
• CSS 层面：只有三个属性。font-variant-caps: all-small-caps把整段短语渲染成小型大写字母（包括原本就是大写开头的字母），letter-spacing: 0.06em用轻度字距拉开“标签感”，font-weight: 500让它比正文略重一点又不至于跳成黑体标题。

这个组合的视觉效果是：读者读到一半，段落里忽然出现一行同字号的、大写字距稍开的短语，既不打断行文，又完成了一次层次切换。它更像文章里的“小标”，而不是页面上的“栏目名”。

什么时候用 S4：以文字为主的页面

文档给出了明确的适用条件：

• Use when: the page is prose-led; reading should be continuous.（页面以文字叙述为主；阅读应当保持连贯。）
• Don't confuse with: S2 Hanging（不要与 S2 悬挂式标题混淆，后者靠留白把标题与正文分开）。

“prose-led”（文字驱动的）是关键词。S4 适合的是那种读者要一口气读下去的页面——案例研究、创始人口吻的发布文、杂志式长文、产品背后的“哲学声明”。在这些页面里，如果每个段落组前都插一个占满整行的<h2>和一条分隔线，阅读就会像过减速带一样被一次次打断；S4 让层次切换发生在行文内部，页面因此读起来像“作品”，而不是“功能列表”。

Long Document（长文档）宏结构 是 S4 最典型的宿主：该宏结构把页面定义为“关于产品的一篇文学”（The page is literature about the product），其 Heading 轴明确写成inline with body — section heads emerge from the paragraph flow as small caps or bold short phrases（标题内联于正文，章节头以小型大写或加粗短语的形式从段落流中浮现），并给出了一模一样的.inline类使用示例：

<article class="prose"> <p class="lede">…</p> <p>…</p> <h2 class="inline">A small heading.</h2> <p>…</p> <blockquote>…</blockquote> <p>… <a href="">read more →</a> …</p> </article>

可以看到，即使 Long Document 采用了语义上的<h2>，它的样式依然是内联的、不占行、不换段——这与 S4 的.head-inline是同一套排版逻辑的两种写法。

与 S2 的关键区别：有没有“空间断裂”

S4 文档特意提醒不要与 S2 混淆。对比两者：

• S2 · Hanging（悬挂式标题）：标题“浮”在区块上方的负空间中，靠padding-block: var(--space-3xl) var(--space-xl)制造出大片留白。它没有边框、没有分隔线，但标题与正文之间有明确的竖向空间断裂，读者能清楚感到“这里换了一节”。
• S4 · Inline：标题就藏在段落里，前后都是正文文字，零空间断裂。读者要一直读下去，标题只是行文中被排版强调的一个词。

一句话概括：S2 用“留白”分隔，S4 用“行内变奏”切换。前者适合需要呼吸感的安静内容，后者适合必须一气呵成的连续叙述。

与 S1 / S3 / S5 的横向对比

把 S4 放回整个 Section head 组件族里看，它的性格更加清晰：

尤其值得注意的是 S1 在 Hallmark 体系里的地位：它在 structure.md 结构轴文档 中被标记为⚠️ Opt-in only — never default（仅限主动选用——绝不默认），因为“左栏标签 + 右侧标题”的两栏章节头正是 slop-test 门66点名封杀的 AI 模板特征（详见后文）。相比之下，S4 内联标题天然规避了这一陷阱——它根本没有标签栏，也就不可能犯“标签在左、标题在右”的模板错误。

S4 与 Typography 纪律：为什么这样设置字形

S4 的样式并非随手写就，它逐条对应着 Hallmark 排版规范 中关于小写小型大写与字距的规定：

• 小写小型大写（all-small-caps）：规范明确，标签/小字应用松字距——letter-spacing: 0.08em到0.14em、text-transform: uppercase，若字体支持小型大写则用font-variant-caps: all-small-caps。S4 的0.06em处于这一区间的下限附近，因为它不是页面级的“章节眉标”，而只是行文内部的一个强调短语，字距太开会破坏行文连续性。
• 字体数量上限（2+1 规则）：整个页面最多三种字体族——display、body 加一个可选的 outlier。S4 的实现只用了 body 的粗度变体（500），不引入任何新字体族，因此它不会触碰“第四个字体族即 slop”的红线。
• 小型大写需要字体支持：all-small-caps依赖字体自带的 small-caps 字形。仓库 tokens.css 中默认的 display 字体如 Fraunces、Geist 等均支持该特性；若项目字体不支持，应回退到text-transform: uppercase并配合更小的字号与更松的字距来模拟，而不是硬性合成。

从字号体系看，S4 内联标题刻意不调用--text-*尺寸令牌（token），保持与正文同号，只靠字重和字距制造区别——这正是“不出列”的排版意图所在。页面仍须遵循 4pt 间距刻度与命名空间令牌（如 tokens.css 中的--space-xl、--color-ink），但 S4 本身几乎不消耗间距，因为它的“间距”就是正文的行距本身。

S4 在结构轴中的位置：Inline with body

Hallmark 把“章节标题的放置方式”定义为结构指纹的六个轴之一，其中与 S4 对应的是Inline with body（内联于正文）这个选择：

No section break — the heading emerges from the paragraph flow. Conversational.（没有章节断裂——标题从段落流中浮现。对话式。）

该轴对它的评价是“Conversational（对话式）”，参考样例是 Medium 文章与长文随笔。在整张轴表里，这是唯一一个“不做任何空间隔离”的放置方式，与 Hanging（悬挂）、Centered display（居中展示）、Sticky / pinned（吸顶）、Numbered display（编号展示，同样被标记为仅限主动选用）形成对照。

需要强调两点结构性事实：

1. S4 属于“合法且鼓励”的类别。同表里 Left-margin（左栏标签）与 Numbered display（编号展示）都被标注为“仅限主动选用、默认禁用”，而 Inline with body 没有该限制——它是 prose-led 页面里可以放心默认使用的章节头方案之一。
2. 它服务于结构多样化的核心使命。Hallmark 的差异化规则要求：同一页面内任意两个区块不得使用相同的组件原型，连续两次输出也不得复用同一宏结构。S4 的意义正在于给“功能列表式”页面之外的叙事型页面提供一个结构上完全不同的章节头选项，避免所有页面都长成同一个模板。

在主题（theme）层面，structure.md 的主题建议指纹表中，Terminal主题的 Heading 轴就是Inline (with>prompt)——内联标题加一个>提示符，这是 S4 思路在 CLI 语境下的变体；而Aurora / Bloom / Linen等主题则分别使用 Hanging、Centered、Hanging，说明 S4 与这些“负空间驱动”的主题在结构上刻意保持距离，防止两个相邻章节头长得一样。

组合实战：在 Long Document 宏结构里落地 S4

将 S4 嵌入 Long Document 宏结构，可以得到一套完整的、可复制的叙事型页面骨架。综合宏结构文档的六轴默认值与 S4 组件文档，推荐的组合是：

落地代码可这样组织（整合 S4 与宏结构文档的示例）：

<article class="prose"> <p class="lede">凌晨六点十四分。面团在午夜就绪。</p> <p>麦芽的甜味在房间里发酵……</p> <span class="head-inline">— 关于温度</span> <p>发酵的温度决定了一切。我们把石板预热到……</p> <blockquote>“面包是时间的剖面。”</blockquote> <p>想了解我们的原料来源，<a href="">继续读下去 →</a></p> </article>

/* Hallmark · macrostructure: Long Document · S4 knobs: caps=all-small-caps, spacing=0.06em, weight=500, anchor=mid-paragraph · … */ .prose { max-width: 62ch; line-height: 1.65; } .head-inline { font-variant-caps: all-small-caps; letter-spacing: 0.06em; font-weight: 500; margin-inline: 0.25em 0.5em; /* 给前后文字各留一点呼吸，但不断行 */ }

三个容易出错的细节

1. 不要用display: block或强制换行。S4 的灵魂是“不出列”。一旦给.head-inline加上display: block或让它独占一行，它就退化成 S2 的廉价版本，失去了内联的意义。
2. 注意语义层级。S4 用<span>表示它不参与文档大纲。如果你的项目要求可访问的章节锚点，请改用 Long Document 文档中的<h2 class="inline">写法（语义是标题、样式仍内联），并确保视觉样式与.head-inline一致。
3. 字距与字体支持。0.06em是针对支持 small-caps 的字体调出的值；若实际字体回退到大写模拟，建议把字距微调到0.08em–0.1em区间以维持“标签感”。

移动端行为

在 component-cookbook.md 移动端折叠表 中，S4 这类行内组件无需专门适配：60rem（约 960px）布局断点与 40rem（约 640px）排版断点都不影响它的表现——内联标题随正文自然换行，不依赖任何网格。这正是 S4 结构上的鲁棒性：没有两栏、没有 sticky、没有绝对定位，因此也就不存在窄屏下需要“塌缩”的机制。页面容器仍应保证padding-inline ≥ clamp(1rem, 4vw, 1.5rem)与 40rem 以下 ≥44×44px 的点击目标，但这些是全局规则，与 S4 本身无关。

与反模式清单的对照：S4 规避了什么

Hallmark 的反模式文档（anti-patterns.md）里，几乎每一条“AI 模板特征”都是 S4 天然免疫的：

• 标签左、标题右的两栏章节头（Gate 66 硬禁止）。这是“最可靠、最模板化的编辑风 AI 特征”。S4 没有标签栏，从根上不可能犯此错。
• 每个区块都放眉标（eyebrow）。反模式清单要求 eyebrow 默认关闭，除非内容真正有序号语义。S4 的行内小标既不是大写等宽眉标（01 / EXAMPLES那种），也不是独立区块的序数标签——它是叙述里自然浮现的短语，不构成“眉标滥用”。
• 居中一切（Centred everything）。S4 内联标题天然与居中绝缘，它只随正文流左对齐。
• 等宽数字、大写正文等排版误用。S4 只用字重与字距变化，不引入等宽、不改大小写语法、不加渐变文字。

换句话说，选择 S4 不仅是选择了一种美观的叙事排版，更是在结构层面主动避开了 slop-test 中针对“模板化编辑风”的核心门禁（Gate 66）。配合 Hallmark 的预发布自评（pre-emit self-critique）与 69 项 slop-test 门禁，SKILL.md 中定义的默认设计流程可以确保：prose-led 页面不再落入“hero → 三个特性 → CTA → footer”的结构陷阱，而是真正长得像一篇作品。

小结：S4 的取舍判断

S4 Inline（no break）是 Hallmark 五个章节头组件中唯一“零空间断裂”的选项，其取舍逻辑非常清晰：

• 用 S4：当页面以连续阅读为核心（案例研究、创始人文、杂志式长文、使命声明），你希望读者从头读到尾而不被打断。Long Document、Letter 等叙事型宏结构是它的天然宿主。
• 不用 S4：当页面有一个明确的主导动作（下单、注册、开始试用），S4 会把 CTA 藏进行文里——Long Document 宏结构文档 明确警告“Long Document 会隐藏 CTA，这对交易型页面是错的”。
• 区分 S2：需要“呼吸感”、允许标题与正文之间有一次空间停顿，选 S2 Hanging；必须一气呵成，选 S4。

一份克制到只有三行 CSS 的组件定义，背后是整套 anti-slop 设计哲学：真正的“非模板化”不是靠更换配色和字体，而是靠结构本身的差异化。S4 让你在段落中间完成一次无声的层次切换——这正是“看起来像人做的，而不是生成的”这一 Hallmark 目标（见 SKILL.md）在章节头这个最小单元上的具体落点。

【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark