Marquee Hero 首屏声明式布局：Hallmark H1 英雄区组件的完整实现指南

导读

H1 · Marquee 是 Hallmark（面向 Claude Code / Cursor / Codex 的反 AI-slop 设计技能）组件配方库中九种英雄区（H1–H9）之首，对应 21 种页面宏结构中的 Marquee Hero。它的核心理念是：一句声明填满整个首屏，没有副标题、没有 CTA、没有图片，折叠区里只有排版。本指南将带你从组件级代码骨架出发，逐步掌握它的适用场景、与 Stat-Led 等相近原语的辨析、字号与行高的排版纪律、响应式硬性要求，以及如何通过仓库中的 token 体系与主题轴把它接入真实页面。读完你既能直接复刻这一范式，也能判断什么时候不该用它。

一、组件定义：一句话说清 H1 Marquee

h1-marquee.md 对 H1 · Marquee 的定义非常克制，原文仅两句话加一段代码：

H1 · Marquee —— 一句声明填满首屏（a single statement fills the fold）。没有副标题，视野内没有 CTA。 适用场景： 品牌或个人本身就是信息（the brand or person is the message）。 不要混淆： H4 Stat-Led —— 那是"一个数字"作英雄，不是"一句声明"。

它给出的最小实现只有两段：

<section class="hero-marquee">
  <h1 class="display-xxl">A statement.</h1>
</section>

.hero-marquee { min-height: 80dvh; display: grid; align-content: end; padding: 0 var(--page-gutter) var(--space-2xl); }
.display-xxl { font-size: clamp(4rem, 12vw, 12rem); line-height: 0.92; }

注意这段 CSS 中每一个值都不是随手写的——dvh、clamp()、var(--page-gutter)、var(--space-2xl)、0.92 分别对应 Hallmark 在响应式、排版、空间与 token 四个维度上的强制纪律，下文逐一展开。

二、宏结构视角：Marquee Hero 在整页布局中的位置

在 macrostructures.md 的 21 个命名宏结构索引中，Marquee Hero 排第三（03），其专属文件 03-marquee-hero.md 给出了更完整的页面级定义——英雄区就是首屏之上的整个页面：

英雄区即首屏之上的一切（The hero IS the page above the fold）。一句大胆的声明或视觉填满视口。折叠区内无副标题、无 CTA。折叠区之下页面变成别的东西（列表、网格、散文）。

它还规定了六个结构轴上的默认值：

结构轴	Marquee Hero 默认
Heading（标题）	display 填满折叠区——字号 8–14 vw，紧贴视口边缘
Body（正文）	折叠区之下变成作品列表或单一内容块，英雄区不延续
Divider（分隔）	英雄区与折叠区下方之间一条粗规则线，或硬性颜色切换
Button（按钮）	折叠区内无按钮；第一个 CTA 出现在折叠区之下
Image（图片）	折叠区内无图片（排版即是视觉），或一张全出血照片作为折叠区背景
Reveal（入场）	折叠区静态；折叠区之下可以水平扫入

什么时候用：品牌或个人本身就是信息——设计师/导演作品集、单一宣言式声音的独立产品、任何"This is who we are"类型的页面。

什么时候避开：产品的价值需要在几秒内解释清楚的场景。Marquee 会让用户先滚动才能理解——需要解释的产品不适合让声明把首屏占满。

该文件同时给出页面级骨架（比组件版多了一个粗规则线与下方区块）：

<section class="marquee">
  <h1 class="display-xxl">A statement.</h1>
</section>
<hr class="rule-thick" />
<section class="below-fold">…</section>

宏结构级别的规则是对组件级定义的"放大镜"：组件的 min-height: 80dvh 落实了"填满折叠区"，align-content: end 落实了"紧贴视口边缘（底部）"，而"无 CTA / 无图片"则由组件骨架中根本不存在 <a> 与 <img> 来保证。

三、与相近原语的辨析：H4 Stat-Led 与 T4 数字条

Hallmark 组件配方刻意用"不要混淆"（Don't confuse with）来避免模型（和人类开发者）在相近范式之间选错。H1 Marquee 有两个直接邻居：

H4 · Stat-Led（h4-stat-led.md） —— 英雄区是一个巨大的数字或指标，下面跟一行小字限定语：

<section class="hero-stat">
  <p class="figure tnum">99.97<span class="unit">%</span></p>
  <p class="qualifier">…</p>
</section>

.figure { font-size: clamp(6rem, 18vw, 16rem); font-variant-numeric: tabular-nums; line-height: 0.85; }

注意两者的区别是语义而非视觉：H1 Marquee 用一句声明作英雄（"A statement."，声明的是身份与立场）；H4 Stat-Led 用一个可辩护、可外部验证的数字作英雄（99.97%，限定语解释它是什么）。数字不是声明，声明不是数字——这是两条原语的分界线。此外 H4 的数字必须使用 font-variant-numeric: tabular-nums（等宽数字）以对齐数据列，而 H1 Marquee 的声明排版不需要。

T4 · Numbered stat strip（数字条） —— 横排多个统计数字，而不是单个焦点数字。T4 属于"横排多 stat"，H4 是"单焦点数字"，两者的区分写在 h4-stat-led.md 的"不要混淆"里；而 H1 Marquee 与它们都不同——它既不是数字也不是数字列表，而是完整的一句话。

选型时可以用一个快速判断：把英雄区换成"99.97%"是否成立？ 成立则往 H4/T4 走；不成立则 H1 Marquee 更合适。反过来说，如果品牌本身就是信息，任何数字都会稀释它。

四、关键样式逐项解析：每个值背后的纪律

4.1 min-height: 80dvh —— 视口单位与"折叠区占比"

组件用 min-height: 80dvh 而非 100vh。这是刻意为之：layout-and-space.md 明确禁止"min-height: 100vh 英雄区加一句居中文字"（这是 AI 指纹，对应 slop-test 门 7），hero-enrichment.md 的"英雄区空间纪律"进一步规定：

英雄区占首屏高度的 70–90%，不多不少。目标写法是 min-height: clamp(60vh, 75dvh, 88dvh)，让内容在内部自然沉降。

dvh（dynamic viewport height）替代 vh 是 responsive.md 的硬性要求："移动端浏览器工具栏伸缩时 vh 会跳动，高度交互场景一律使用 dvh / svh / lvh。"组件原型的 80dvh 正落在 70–90% 区间内，兼顾"填满"与"不冒充全屏"。

4.2 display: grid; align-content: end —— 底部锚定而非居中

声明式英雄区最常见的错误是把标题垂直居中——这会让首屏显得像一张空海报。align-content: end 把内容压向视口底部，配合不对称内边距（padding-bottom 显著大于顶部，无顶部 padding），制造"文字落在页面脚底、上方是巨大留白"的视觉。这一不对称原则在 hero-enrichment.md 中被编码为硬规则："padding-block-end ≥ 1.3× padding-block-start，英雄区要坐进页面里，对称内边距会显得漂浮"（slop-test 门 54）。

4.3 padding: 0 var(--page-gutter) var(--space-2xl) —— token 化，禁止裸值

这一行全部使用 token 而非裸像素：

• --page-gutter：视口两侧留白，在 tokens.css 的 Specimen 主题中定义为 clamp(1.25rem, 4vw, 3rem)，随视口流式变化；
• --space-2xl：4pt 间距刻度中的一步（4rem / 64px，见 layout-and-space.md 的九级间距表），底部留白用它保证与页面其他区块的间距同源。

这也是 Hallmark 四条跨动词纪律之一——锁定 token，禁止渲染中途即兴发挥："一旦选定主题，产物中每个颜色与 font-family 声明都必须引用命名 token；如果需要一个不存在的值，先把它提升为 token 再引用。"（SKILL.md 纪律 3）

4.4 clamp(4rem, 12vw, 12rem) —— 三参数流式缩放

clamp(MIN, PREFERRED, MAX) 让标题字号随视口连续变化而不是断点跳变：responsive.md 规定"连续变化的大小用 clamp()，离散变化的布局才用媒体查询"。三个参数的含义：

参数	值	作用
MIN	4rem	最小字号，约 64px，保障小屏可读
PREFERRED	12vw	视口宽度的 12%，主缩放曲线
MAX	12rem	最大字号，约 192px，防止大屏无限膨胀

这与宏结构级"display 填满折叠区——8–14 vw"的要求一致（12vw 落在区间中部），也呼应 HP2 Marquee-overflow 抛光模式（见第六节）中 clamp(4rem, 14vw, 14rem) 的写法——溢出模式上限更高、更激进。

4.5 line-height: 0.92 —— 展示字号的收紧行高

typography.md 规定行高随字号变化："展示字号收紧到 1.05–1.2，正文舒适区间 1.5–1.65。"0.92 甚至低于 1.05 下限，因为这是巨型单行声明——字体设计上超大 display 尺寸自带呼吸感，行高趋近 1 是排版界惯例。但该文件同时给出全大写展示字号的硬下限警告：全大写 display 标题的行高下限是 1.0，推荐 1.02–1.08——低于 1.0 时下一行的 cap-top 会撞上一行的基线（全大写没有 descender 缓冲），换行的"PROMPT, / DIFFERENT"会把逗号与大写 D 熔成一个字形（slop-test 门 67）。Marquee 声明通常不是全大写，0.92 可接受；若你打算用全大写声明（如 Manifesto 风格），请切换到 1.02。

4.6 两侧留白与字号上限的"红区"

tokens.css 中每个主题的 --text-display 都给出了自己的 clamp 值，例如：

主题	--text-display	纸面色带
Specimen	clamp(3.0rem, 5.5vw + 1.0rem, 5.75rem)	暖燕麦纸（light）
Studio	clamp(3.5rem, 5.5vw + 1.0rem, 6.25rem)	冷灰纸（light）
Sport	clamp(3.5rem, 6vw + 1.0rem, 6.5rem)	纯白（light）
Manifesto	clamp(4.0rem, 8vw + 1.0rem, 9rem)	黑纸（dark）
Atelier	clamp(3.75rem, 5.5vw + 1.0rem, 6.25rem)	冷奶油纸（light）

H1 Marquee 的 12vw 曲线明显比这些页面级 token 激进——它属于"英雄区专用档"，而非页面通用 display 档。不过 typography.md 同时给出全局上限：display 最大值 ≤ 5.5rem（88px），仅 Manifesto / Brutal 等 aggressive-display 主题可放宽到 6rem（96px），唯一例外是"单行、单字、≤ 12 ch 的展示（如一个数字）"可到 7rem。这意味着组件原型的 12rem 上限只应在真正的短声明（≤ 20 字符的单行）中使用，超过 50 字符的长声明必须降档——这就是下一节的标题文案纪律。

五、标题文案纪律：声明要短到配得上巨型字号

Marquee 的整个存在理由是"一句声明撑满首屏"，因此文案长度是决定成败的第一变量。typography.md 的"英雄区标题字号随文案长度分档"规则（同样约束 Marquee）：

声明长度	字号档位	备注
≤ 20 字符（如 Limitless）	满档 --text-display；单词可到 7rem	仅 display-heavy 主题
21–50 字符（默认甜区）	--text-display	若 414px 下换行超过 2 行则降到 --text-display-s
51–90 字符	封顶 --text-display-s	强烈建议拆成 eyebrow + 标题
> 90 字符	重写缩短，或封顶 --text-4xl 并收紧行距	100 字符的 display 标题是最可靠的 AI 特征

配套的硬规则："当你自己撰写标题（而非用户提供文案）时，从一开始就瞄准 ≤ 7 个词、≤ 50 个字符——祈使句或名词短语，绝不用 -ing 开头。"

03-marquee-hero.md 还给出了三句可模仿的"开场声明"范例（模仿的是具体性而非措辞）：

"Type, set with care." —— 把字体当材料对待的宣言 "A studio for what's next." —— 斜体编辑体展示，命名实践而不解释它 "Design like print: warm, off-register, intentional." —— 三个修饰语 + 句号

共同点：具体、短、主谓完整、无需解释。声明不解释自己——解释是副标题的工作，而 Marquee 里没有副标题。

六、两个扩展方向：HP2 溢出抛光与 E8 全出血照片

英雄区宏结构（含 Marquee Hero）允许叠加一个"抛光模式"（HP1–HP4）和最多一个"富化原型"（E1–E8），但两个抛光模式互斥。与 Marquee 直接相关的有两个：

6.1 HP2 · Marquee-overflow（标题溢出视口）

hero-enrichment.md 的 HP2 让 H1 故意大于视口——标题从右缘溢出去，读感是"这个声明大到页面装不下它"：

.hero--overflow { overflow-x: clip; padding: var(--space-2xl) var(--page-gutter); }
.hero__display--xxl { font-family: var(--font-display); font-weight: 800; font-size: clamp(4rem, 14vw, 14rem); line-height: 0.92; letter-spacing: -0.04em; margin: 0; white-space: nowrap; }
@media (max-width: 60rem) { .hero__display--xxl { white-space: normal; font-size: clamp(2.5rem, 10vw, 5rem); } }

适用：playful 流派（Brutal / Manifesto / Sport）且标题短（≤ 6 词）。规避：标题含必须完整可读的法定信息（隐私声明页）。关键实现细节是 overflow-x: clip 只作用在英雄区容器上，且绝不同时在 html/body 上用 overflow-x: hidden（后者会破坏后代元素的 sticky/fixed 行为，layout-and-space.md 有完整说明）。移动端必须回到 white-space: normal 并降档字号——溢出在 375px 视口上读起来像 bug。

6.2 E8 · 全出血照片背景

宏结构级的 Image 轴允许"一张全出血照片作为折叠区背景"——这是 Marquee 唯一合法的图片形态，且图片是背景、排版仍是主角。与之相对，hero-enrichment.md 的"图片需求检测"表要求先判断 brief 是否真的需要影像：默认是纯排版（typography-only）。编辑、信函、字体工坊、宣言类 brief 明确"不需要影像——展示排版本身就是设计"。SaaS、API、文档、CLI、开发工具类 brief 同样"不需要影像——纯排版，必要时用代码块"。只有当 brief 命中 e-commerce / 摄影 / 餐饮 / 旅行等"需要照片"的行时，才走 E8 并必须使用用户提供的真实照片或明确占位，严禁把编造的库存图当最终设计交付。

七、响应式硬性要求：四个宽度 + 一个根级 clip

Marquee 声明式英雄区在移动端的头号风险是横向滚动（巨型字号溢出）和点击文本换行（如果折叠区内放了 CTA）。responsive.md 把移动端达标定为不可谈判的硬地板：

• 每个产出必须在 320 / 375 / 414 / 768 px 四个宽度完美渲染；
• 无横向滚动（slop-test 门 36）：根元素 html 与 body 都带 overflow-x: clip，绝不使用 hidden（门 62）；
• display 标题用 overflow-wrap: anywhere; min-width: 0 让长词在内部折行（门 63）；
• 点击文本（按钮、导航、CTA）永不换行（门 59）——Marquee 折叠区内本无 CTA，若你违反第六节规定在折叠区加了按钮，这条立即生效；
• 高度一律 dvh，绝不用 vh；width 绝不写 100vw（含滚动条导致溢出）；
• 断点以 rem 写（尊重用户字号），内容驱动的断点优先于设备断点：@media (min-width: 40rem)（~640px）、60rem（~960px）、90rem（~1440px）。

对于 clamp(4rem, 12vw, 12rem) 这类 vw 驱动字号，320px 视口下 12vw ≈ 38px，低于 4rem（64px）下限，所以实际生效值是 64px——移动端仍然偏大，这正是"声明必须 ≤ 50 字符"的原因：短声明在 64px 下可单行或双行承载，长声明会形成灾难性的多行巨型文本块。

八、与主题系统集成：三轴多样化规则

H1 Marquee 是组件原语，实际页面中它总是以某个 Hallmark 主题落地。每个主题在 tokens.css 顶部都有注释标注其三个多样化轴值（纸面色带 / 展示字体风格 / 强调色相），SKILL.md 要求连续两次产出的主题至少在一个轴上不同：

轴	取值举例
纸面色带	深（L<30%）· 中（30–85%）· 浅（>85%），依 --color-paper 明度
展示字体风格	斜体衬线（Specimen / Studio / Atelier）· 罗马衬线（Newsprint / Salon / Linen）· 几何无衬线（Plume / Manifesto）· mono（Terminal）· display-heavy（Brutal）等
强调色相	暖（红/橙/琥珀）· 冷（蓝/靛/青）· 中性（Quiet）· 其他色相（Studio 绿 / Garden 鼠尾草 / Terminal 磷光）

例如：Marquee 声明 + Studio 主题 = Fraunces 斜体衬线 + 森林绿强调 + 冷灰纸（oklch(96.5% 0.005 200)），这是 14islands 式现代工作室口吻；Marquee 声明 + Manifesto 主题 = Anton 全大写压缩无衬线 + 红强调 + 黑纸（oklch(10% 0.005 60)），这是政治海报式的宣言能量。同一个 H1 Marquee 骨架，靠主题轴差异就能产出完全不同气质的页面——这正是 SKILL.md 强调的"结构性多样，而非视觉换皮"。

集成时注意 token 归属：组件原型里的 --page-gutter、--space-2xl 是通用 token；字号档位则建议收敛到所选主题的 --text-display / --text-display-s（各主题已按纸面色带调好），只有声明极短（≤ 20 字符）时才允许走组件级的 clamp(4rem, 12vw, 12rem) 英雄档。

九、仓库中的真实应用：site/index.html 与 tally 示例

Hallmark 仓库自身就实践了这一范式，是"文档描述"与"源码实现"互证的最佳样本：

• site/index.html 的 #hero-marquee 模板（L848–L862）实现了带 eyebrow、声明标题、lede、CTA 码块的 Marquee 变体——注意它在生产版中加入了折叠区 CTA（安装命令），说明该模板是"继承 Marquee 底对齐 + 大 display + 页脚留白"的混合变体，骨架元素（hero__main 内容块、hero__moment 装饰块）与组件原型一一对应；
• site/examples/tally/index.html L90–L92 使用 .hero__marquee / .hero__marquee__track 实现了真正的 marquee 滚动条带（aria-hidden="true" 的纯装饰滚动文本），可作为"声明之下第二层 marquee 纹理"的参考；
• tokens.css 是全部 22 个主题的 token 源头，也是主题轴多样化规则的机器可读版本。

阅读这些文件时注意一个分层：组件配方（references/components/）是"原型"，示例站点（site/）是"实例"。实例可以为了真实内容扩展原型（加 lede、加 CTA），但扩展时必须回到第五、六、七节的纪律框架内自检，否则原型想防止的 AI-slop 特征会从扩展缝里漏回来。

十、完整可运行示例（组件 → 页面级）

将组件原型、宏结构骨架与 token 纪律拼合成一个可直接落地的 Marquee Hero 页面：

<header class="hero-marquee">
  <h1 class="display-xxl">A studio for what&rsquo;s next.</h1>
</header>
<hr class="rule-thick" />
<main class="below-fold">
  <!-- 作品列表 / 网格 / 散文 —— 英雄区不延续到这里 -->
</main>

/* tokens.css 已在项目根引入 */
.hero-marquee {
  min-height: 80dvh;                 /* 折叠区占比，禁 100vh */
  display: grid;
  align-content: end;                /* 底部锚定，不居中 */
  padding: 0 var(--page-gutter) var(--space-2xl);  /* 全部 token 化 */
}
.display-xxl {
  font-family: var(--font-display);  /* 主题展示字体 */
  font-size: clamp(4rem, 12vw, 12rem);   /* ≤20 字符短声明专用 */
  line-height: 0.92;
  letter-spacing: -0.025em;          /* 收紧跟踪（theme 的 --tracking-display） */
  margin: 0;
}
.rule-thick { border: 0; border-top: var(--rule-fine) solid var(--color-rule); margin: 0; }
/* 根级防横向滚动（slop-test 门 36 / 62） */
html { overflow-x: clip; }
body { overflow-x: clip; }

/* 移动端：长标题降档 + 防内部折行溢出（门 63） */
@media (max-width: 40rem) {
  .display-xxl { font-size: var(--text-display-s); overflow-wrap: anywhere; min-width: 0; }
}

落地后按走查清单过一遍：声明是否 ≤ 50 字符且无副标题也能自明？折叠区内是否真的没有 CTA/图片？四个宽度下是否无横向滚动、标题是否 ≤ 2 行？是否已用 prefers-reduced-motion 关闭一切入场动画（Marquee 默认静态，无需额外处理）？是否以 /* Hallmark · macrostructure: Marquee Hero · ... */ 注释盖了章（SKILL.md 第 6 步）？

十一、一句话总结

H1 Marquee 的全部智慧可以压缩成一句反转的判断：声明越短，字号越敢大；品牌越自我，页面越敢空。它的代码只有五条 CSS 声明，但它要求的排版纪律（短文案、底部锚定、token 化、dvh、根级 clip）才是它区别于"AI 生成的大字居中页"的真正边界——前者是设计决策，后者是 slop 的另一种形态。