Hallmark T3 组件原型：Single Huge Quote——用一句巨型引言撑起整块版面的排版设计指南-平芜编程栈

Hallmark T3 组件原型：Single Huge Quote——用一句巨型引言撑起整块版面的排版设计指南

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

导读

T3（Single huge quote，巨型单引文）是 Hallmark 组件体系（skills/hallmark/references/component-cookbook.md）中 4 个"证明 / 口碑"（Testimonials / proof）类组件之一，核心形态是：一段引文以超大字号居中排布，独自占据整整一个 section——没有辅助说明文字、没有卡片式引用框，出处仅以一行小号小型大写字母（small caps）收尾。本指南面向使用 Hallmark（skills/hallmark/SKILL.md）构建落地页或改版的开发者与 AI 编码助手，讲解 T3 的适用时机、DOM 结构、排版约束、变体旋钮（variation knobs）、响应式折叠行为，以及与 T1、H3、T4 等相邻组件的辨析。读完你将掌握：如何用一段"足够好到配得上整块版面"的引文构建有说服力的口碑区块，同时避开 Hallmark 的 AI-slop 红线。

一、T3 是什么：一句引文，独享一个版面

T3 的原始定义来自 t3-single-huge-quote.md：

One quote, set big, centered, taking a whole section. No supporting text, no attribution boxes — attribution is a small caps line beneath.Use when:one quote is so good it earns the room.Don't confuse with:T1 Margin pull-quote (which is thesidemate, not theroom).

翻译过来，T3 的设计哲学是用负空间的奢侈换取引文的重量：整个 section 只为一段话说事，不塞任何佐证文字、不画卡片、不做头像框，让读者在一整屏的呼吸感里只读到这句话。它适用于"这一句引文真的好到值得一整块版面"的场景——一句创始人宣言、一段客户给出的决定性评价、一句浓缩了整个项目立场的话。

组件目录对该原型的定位（component-cookbook.md § Testimonials / proof）也与此一致：

T3 · Single huge quote— One quote, set big, centered, taking a whole section. No supporting text, no attribution boxes — attribution is a small caps line beneath.

与相邻组件的辨析（易混对照）

Hallmark 的每个组件文件都强制附一行 "Don't confuse with"，用于防止模型拿错原型：

组件	形态	版面位置	一句话区别
T3 Single huge quote	超大居中引文	页面中部（proof 区块），独占整节	引文是主角，占据整个"房间"
T1 Pull quote with marginalia	宽栏引文 + 窄边栏出处	文章中段	引文是"侧座"（side mate），配边栏注解，偏 Tufte 式编辑排版，见 t1-pull-quote-with-marginalia.md
H3 Quote-Led	引文做 hero	页面首屏 hero 槽位	借来的可信度是标题，见 h3-quote-led.md
T4 Numbered stat strip	3–5 个数字统计横排	页面中部	多个互补指标协同发力，不是单句引文，见 t4-numbered-stat-strip.md
H4 Stat-led hero	一个巨号数字做 hero	首屏	一个焦点数字，而非多段口碑，见 h4-stat-led.md

组件目录中 T3 的原文辨析是："Don't confuse with:T1 Margin pull-quote (which is thesidemate, not theroom)"；而 H3 原型文件反过来标注："Don't confuse with:T3 Single huge quote (which lives mid-page, not in the hero slot)"。两者互为参照：H3 管首屏，T3 管中段。

二、何时该用、何时不该用

适用时机

你手头有一条真实的、足够有分量的引文——来自真实客户、真实用户、创始人的一句话，且这条引文本身经得起"整版只放它"的考验。
页面已经进入"证明 / 口碑"叙事段，需要一处节奏上的停顿与高点：前后都是信息密集区，中间用一整节只说一句话，让读者缓一口气。
需要呼应 Quote-Led、Letter、Manifesto、Long Document 这类"以话语为主导"的宏观结构（macrostructure），T3 是最自然的口碑落点。

硬性禁区

Hallmark 的通用纪律中有一条"诚实文案"（SKILL.md § Disciplines · Honest copy）与 T3 直接相关：

If the user did not supply a metric, do not invent one. Stat-led layouts, comparison rows, and proof bars must use real numbers… Same rule for testimonials, logos, and case-study counts.

对应到反模式清单（anti-patterns.md § Invented metrics）：

Fix.Three options, in order of preference: (1) replace the number with—and a labelled grey block ("metric to confirm" or "stat pending"); (2) ask the user for the real number and pause the run; (3) rebuild the section without the proof slot…(Slop-test gate 56.)

也就是说：伪造的客户评价和伪造的统计数字一样是 slop。没有真实引文时，要么向用户索取，要么换一种不以"人言"为载体的结构。Quote-Led 宏观结构文档也给出了同样的警示（macrostructures/09-quote-led.md）：

Avoid for new products without real testimonials. Fake quotes destroy trust on inspection.

三、结构骨架与标记语言

T3 的原型文件给出了最简 DOM 结构：

<section class="proof-room"> <blockquote class="display-italic">"…"</blockquote> <p class="attribution"><span class="caps">— Name, Company</span></p> </section>

要点拆解：

<section class="proof-room">—— 语义化区块容器，命名强调"引文独享一整个房间"。section 而非 div，保证文档大纲可读。
<blockquote class="display-italic">—— 引文本体，使用display字族的斜体档。Hallmark 的字体体系（typography.md）将斜体 display 视为"编辑感"的默认音色：Fraunces 的深具表现力的斜体（deeply expressive italic）正是 T3 的首选字面。
<p class="attribution">包一层<span class="caps">—— 出处信息是普通段落里的一行小型大写字母，与 quote 形成"超大斜体 vs. 迷你 small caps"的极端对比。注意：没有头像、没有 logo、没有公司徽标——原型文件明确说 "No supporting text, no attribution boxes"，出处回归纯粹的排版。

Quote-Led 宏观结构（macrostructures/09-quote-led.md）为同类引文结构补充了在 hero 场景下的扩展形态，可作对照参考：

<section class="quote-hero"> <blockquote class="display-italic">"…"</blockquote> <p class="attribution">— Name, Title, Company</p> <a class="link">Read the case →</a> </section>

区别在于：H3 hero 场景可以在出处下方追加一个"Read the case study →"排版化链接；而 T3 作为中段口碑区块，默认不追加任何链接与佐证，保持纯粹的陈述。

四、排版纪律：T3 的字体、字号与 token

T3 之所以成立，靠的是排版上的"两个极端"：超大斜体 display 引文对撞迷你 small caps 出处。这套纪律来自 Hallmark 的排版与 token 规范。

4.1 2+1 字体规则

typography.md 规定一个页面最多使用三种字族：display + body + 一个可选的 outlier（用于字标、hero 统计、引文这类"单个音符"）。T3 天然落在display 斜体的语境里：

:root { --font-display: "Fraunces", ui-serif, Georgia, serif; /* headings, hero */ --font-body: "Geist", ui-sans-serif, system-ui, sans; /* prose, UI */ --font-outlier: "Geist Mono", ui-monospace, monospace; /* wordmark + hero stat ONLY */ }

T3 的引文直接消费--font-display（或用主题的--font-serif），出处行消费--font-label或 body 字族加text-transform: uppercase。任何颜色、字族都必须通过具名 token 引用（var(--font-display)），不允许内联font-family: "Some Font"——这是 Hallmark 的"锁定 token"纪律（SKILL.md § Disciplines · Locked tokens），对应 slop-test gate 58。

4.2 字号与层级

引文是整节唯一的视觉主诉，字号应落在 display 档。Hallmark 的默认字号档（typography.md § Scale）从 16px body 按 1.25 主三度向上构建，display 档默认：
```
--text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);
```
site/css/tokens.css 中 Specimen 主题给出略高的档位：--text-display: clamp(3.0rem, 5.5vw + 1.0rem, 5.75rem)，可作为引文级字号的参考上限。
行高与字距：display 字号用紧行高（1.05–1.2），展示级标题字距收紧（letter-spacing: -0.02em至-0.04em）；而 small caps 出处行反而要松开字距（letter-spacing: 0.08em至0.14em，配合text-transform: uppercase）。这是"一大一小、一紧一松"的刻意反差。
每页最多五档字号（typography.md）：T3 区块内部只应该出现两档——display 引文 + small caps 出处，多的都是噪音。

4.3 出处行的 small caps 规范

组件的--tracking-labeltoken（约0.12em，见 site/css/tokens.css）正是为这类标签行准备的。仓库测试页中大量运用同类字母间距来呈现"标签感"：如 site/_tests/04-meridian-manifesto/style.css 中的letter-spacing: 0.12em系列。规范写法：

.attribution { font-family: var(--font-label, var(--font-body)); font-size: var(--text-xs); /* 0.64–0.75rem */ letter-spacing: var(--tracking-label); /* ~0.12em */ text-transform: uppercase; font-variant-caps: all-small-caps; /* 若字面支持，用真小型大写 */ }

若目标字面支持，优先font-variant-caps: all-small-caps;；不支持则退化到text-transform: uppercase。注意 typography.md 的禁令：正文不得全文大写，但 small caps 标签行是明确允许的特例。

4.4 标点纪律

引文中的引号必须是印刷引号"…"，破折号用—（U+2014），省略号用…（U+2026）。anti-patterns.md 将直引号（"Hello"）、双连字符（--）、三个句点（...）列为 Minor 级反模式——T3 整节只有一句话，标点瑕疵会被无限放大，绝不能出现。

五、变体旋钮：同一个 T3，三种排法

组件目录（component-cookbook.md § Within-archetype variation knobs）要求每个原型都携带 2–3 个变体旋钮，防止"每个 T3 长得都一样"。T3 的旋钮表：

旋钮	可选值	说明
Quote face（引文字面）	serif italic · roman display · italic mono	默认 serif italic；roman display 更冷静；italic mono 适合技术向、terminal 风格页面
Width（栏宽）	full-bleed · 60ch · 40ch	full-bleed 最霸气；60ch 贴合正文行长上限；40ch 最克制
Attribution position（出处位置）	same line · separate band	默认紧随引文下方同一行式；也可单独成带（separate band），上方加发丝线分隔

使用规则：每个输出只取每个旋钮的一个值，并在 macrostructure 戳记（stamp）注释中写明所取值，例如：

/* Hallmark · macrostructure: Quote-Led · T3 knobs: face=serif-italic, width=60ch, attribution=separate-band · ... */

反模式也写得很直白："picking the same knob values across two different outputs is the same kind of templating as picking the same archetype"——连续两个输出若旋钮取值完全一致，同样算模板化。

栏宽与行长

排版规范（typography.md）要求正文行长（measure）落在 45–75 字符之间，默认max-width: 65ch。T3 的引文是 display 级，可略放宽，但 60ch 旋钮即对齐"舒适阅读上限"；full-bleed 旋钮则属于刻意的戏剧化选择，只用于字面足够短（一句话、一行内）的场景。

六、与宏观结构的配合

T3 不是一个独立页面，它是宏观结构里的一个"证明"组件。与其最契合的宏观结构（macrostructures/09-quote-led.md）是Quote-Led：

The hero is a pull-quote with attribution. The headline is borrowed credibility… The page leads with social proof.

Quote-Led 结构的完整组成：首屏 H3 引文 hero → 后续段落继续追加 testimonial、case study 或安静的特性列表→ 引文之间用居中引号字形或 em-rule 分隔 → 出处下方接排版化链接 → 可选：出处旁放小头像或公司 logo。T3 正是该结构中"追加的 testimonial"最典型的一种实现。

其他可自然容纳 T3 的结构还包括：

Long Document（macrostructures/02-long-document.md）——长篇叙事中段，T3 提供"整版停顿"的节奏支点；
Manifesto（macrostructures/07-manifesto.md）——宣言页本身以句子为建筑材料，T3 可将一句核心宣言单独放大；
Letter（macrostructures/12-letter.md）——书信体页面里的引述，T3 的"独享版面"与书信的私人感同频。

同页内禁用同原型重复：组件目录规定 "within a single page, no two sections should use the same archetype"。一个页面若已用 T3，口碑段的其他内容应改用 T1（边栏引文）、T2（发丝线 logo 墙，见 t2-logo-wall-hairline.md）或 T4（数字统计条）。

七、响应式折叠行为

组件目录为每个原型定义了窄视口折叠规则，T3 的条目是：

视口	T3 行为
≥ 60rem（~960px）	原形态：引文 full width 居中，出处紧随
< 60rem	引文保持 full width；出处换行到引文下方
< 40rem（~640px）	引文字号下调 1.4×；出处字号同步收紧

两个关键断点的全局语义（component-cookbook.md § Mobile collapse）是：60rem 是布局断点（多栏塌为单栏），40rem 是排版断点（display 字号降一档）。T3 本身单栏，布局无需大改，核心动作就是"字号阶梯下降"。

跨切面硬性规则同样约束 T3 所在页面：触控目标 ≥ 44×44px、容器内边距padding-inline ≥ clamp(1rem, 4vw, 1.5rem)、折叠页禁用滚动驱动动画、首屏元素不得loading="lazy"（SKILL.md § Disciplines · Mobile responsiveness）。

八、完整可运行示例

综合以上全部纪律，一个规范的 T3 区块（含 token 引用与响应式降档）如下：

<section class="proof-room" aria-label="Customer quote"> <blockquote class="display-italic">"Hallmark made the generated page finally look <em>made</em>, not generated."</blockquote> <p class="attribution"><span class="caps">— Maya Okonkwo, Studio Lead</span></p> </section>

.proof-room { display: grid; place-items: center; /* 居中 = T3 的本体 */ gap: var(--space-lg); padding-block: var(--space-3xl); text-align: center; } .proof-room blockquote { max-width: 60ch; /* 栏宽旋钮：60ch */ margin-inline: auto; font-family: var(--font-display); font-style: italic; /* Quote face 旋钮：serif italic */ font-weight: var(--display-weight, 340); font-size: var(--text-display); line-height: var(--lh-tight); /* 1.02–1.2，display 紧行高 */ letter-spacing: var(--tracking-display); /* -0.02em 档 */ color: var(--color-ink); overflow-wrap: anywhere; /* 长词可断，避免横向溢出 */ min-width: 0; } .proof-room .attribution { font-family: var(--font-label, var(--font-body)); font-size: var(--text-xs); letter-spacing: var(--tracking-label); /* ~0.12em */ text-transform: uppercase; color: var(--color-muted); } /* < 40rem：字号下调 1.4×，出处处同步收紧 */ @media (max-width: 40rem) { .proof-room blockquote { font-size: calc(var(--text-display) / 1.4); } }

几个细节说明：

token 纪律：所有颜色走var(--color-*)，所有字族走var(--font-*)，空格走 4pt 语义命名（--space-*），与 site/css/tokens.css 的 token 体系对齐；
可访问性：用aria-label="Customer quote"标注区块角色；overflow-wrap: anywhere与min-width: 0呼应 SKILL.md 中"display 标题长词可换行"的移动端硬要求；
诚实文案：引文中的名字采用"贴合受众的可信占位名"（如 Maya Okonkwo），而不是 "Jane Doe" 这类反模式名（anti-patterns.md § Placeholder names）；
真实数字原则：若这是项目真实客户评价，直接填真实姓名与公司；若没有真实引文，不要为了填 T3 槽位而伪造，应改为其他结构。

九、容易踩的坑：T3 相关的反模式

把 T3 做好，等价于同时避开以下反模式（全部来自 anti-patterns.md）：

引文造假（Invented metrics 的变体，gate 56）——伪造客户评价与伪造统计同罪；
居中强迫症（Centred everything）——T3 的居中是被"独享版面"授权的刻意居中，不等于全页每节都居中；T3 之外的区块应有意打破对称（wide left margin / narrow right）；
直引号与连字符（Straight quotes / Double-hyphen dashes）——引文只有一句话，标点必须完美；
"让所有区块都像 T3"——同页内不得两个 section 共用同一原型；
过度装饰出处——头像框、logo 徽标、玻璃拟态卡片都是 T3 明确拒绝的（"No attribution boxes"）；出处回归一行 small caps。

最终交付前，T3 区块所在页面整体通过 slop-test 的 69 道门（SKILL.md § Step 7 · The slop test），并在 CSS 顶部留下 Hallmark 戳记注释（/* Hallmark · macrostructure: <name> · ... */），供下一次运行识别并执行多样化规则。

结语

T3 · Single huge quote 是 Hallmark 对"信任叙事"给出的最简答案：放弃所有佐证装置，只留一句配得上整个房间的话。它考验的不是视觉技巧，而是判断力——这句话是否真的够好，决定了这个组件是底气还是空架子。用真实的引文、display 斜体的大字、一行 small caps 出处、以及断点处 1.4× 的字号降档，T3 就能在页面中段制造出整篇设计最安静、也最有重量的一拍。