Hallmark T3 组件原型Single Huge Quote——用一句巨型引言撑起整块版面的排版设计指南【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark导读T3Single huge quote巨型单引文是 Hallmark 组件体系skills/hallmark/references/component-cookbook.md中 4 个证明 / 口碑Testimonials / proof类组件之一核心形态是一段引文以超大字号居中排布独自占据整整一个 section——没有辅助说明文字、没有卡片式引用框出处仅以一行小号小型大写字母small caps收尾。本指南面向使用 Hallmarkskills/hallmark/SKILL.md构建落地页或改版的开发者与 AI 编码助手讲解 T3 的适用时机、DOM 结构、排版约束、变体旋钮variation knobs、响应式折叠行为以及与 T1、H3、T4 等相邻组件的辨析。读完你将掌握如何用一段足够好到配得上整块版面的引文构建有说服力的口碑区块同时避开 Hallmark 的 AI-slop 红线。一、T3 是什么一句引文独享一个版面T3 的原始定义来自 t3-single-huge-quote.mdOne 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.Dont 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 的每个组件文件都强制附一行 Dont confuse with用于防止模型拿错原型组件形态版面位置一句话区别T3 Single huge quote超大居中引文页面中部proof 区块独占整节引文是主角占据整个房间T1 Pull quote with marginalia宽栏引文 窄边栏出处文章中段引文是侧座side mate配边栏注解偏 Tufte 式编辑排版见 t1-pull-quote-with-marginalia.mdH3 Quote-Led引文做 hero页面首屏 hero 槽位借来的可信度是标题见 h3-quote-led.mdT4 Numbered stat strip3–5 个数字统计横排页面中部多个互补指标协同发力不是单句引文见 t4-numbered-stat-strip.mdH4 Stat-led hero一个巨号数字做 hero首屏一个焦点数字而非多段口碑见 h4-stat-led.md组件目录中 T3 的原文辨析是Dont confuse with:T1 Margin pull-quote (which is thesidemate, not theroom)而 H3 原型文件反过来标注Dont confuse with:T3 Single huge quote (which lives mid-page, not in the hero slot)。两者互为参照H3 管首屏T3 管中段。二、何时该用、何时不该用适用时机你手头有一条真实的、足够有分量的引文——来自真实客户、真实用户、创始人的一句话且这条引文本身经得起整版只放它的考验。页面已经进入证明 / 口碑叙事段需要一处节奏上的停顿与高点前后都是信息密集区中间用一整节只说一句话让读者缓一口气。需要呼应 Quote-Led、Letter、Manifesto、Long Document 这类以话语为主导的宏观结构macrostructureT3 是最自然的口碑落点。硬性禁区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 metricsFix.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.mdAvoid for new products without real testimonials. Fake quotes destroy trust on inspection.三、结构骨架与标记语言T3 的原型文件给出了最简 DOM 结构section classproof-room blockquote classdisplay-italic…/blockquote p classattributionspan classcaps— Name, Company/span/p /section要点拆解section classproof-room—— 语义化区块容器命名强调引文独享一整个房间。section 而非 div保证文档大纲可读。blockquote classdisplay-italic—— 引文本体使用display字族的斜体档。Hallmark 的字体体系typography.md将斜体 display 视为编辑感的默认音色Fraunces 的深具表现力的斜体deeply expressive italic正是 T3 的首选字面。p classattribution包一层span classcaps—— 出处信息是普通段落里的一行小型大写字母与 quote 形成超大斜体 vs. 迷你 small caps的极端对比。注意没有头像、没有 logo、没有公司徽标——原型文件明确说 No supporting text, no attribution boxes出处回归纯粹的排版。Quote-Led 宏观结构macrostructures/09-quote-led.md为同类引文结构补充了在 hero 场景下的扩展形态可作对照参考section classquote-hero blockquote classdisplay-italic…/blockquote p classattribution— Name, Title, Company/p a classlinkRead the case →/a /section区别在于H3 hero 场景可以在出处下方追加一个Read the case study →排版化链接而 T3 作为中段口碑区块默认不追加任何链接与佐证保持纯粹的陈述。四、排版纪律T3 的字体、字号与 tokenT3 之所以成立靠的是排版上的两个极端超大斜体 display 引文对撞迷你 small caps 出处。这套纪律来自 Hallmark 的排版与 token 规范。4.1 21 字体规则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.mdT3 区块内部只应该出现两档——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 标点纪律引文中的引号必须是印刷引号…破折号用—U2014省略号用…U2026。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 italicroman display 更冷静italic mono 适合技术向、terminal 风格页面Width栏宽full-bleed · 60ch · 40chfull-bleed 最霸气60ch 贴合正文行长上限40ch 最克制Attribution position出处位置same line · separate band默认紧随引文下方同一行式也可单独成带separate band上方加发丝线分隔使用规则每个输出只取每个旋钮的一个值并在 macrostructure 戳记stamp注释中写明所取值例如/* Hallmark · macrostructure: Quote-Led · T3 knobs: faceserif-italic, width60ch, attributionseparate-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-LedThe 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 Documentmacrostructures/02-long-document.md——长篇叙事中段T3 提供整版停顿的节奏支点Manifestomacrostructures/07-manifesto.md——宣言页本身以句子为建筑材料T3 可将一句核心宣言单独放大Lettermacrostructures/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)、折叠页禁用滚动驱动动画、首屏元素不得loadinglazySKILL.md § Disciplines · Mobile responsiveness。八、完整可运行示例综合以上全部纪律一个规范的 T3 区块含 token 引用与响应式降档如下section classproof-room aria-labelCustomer quote blockquote classdisplay-italicHallmark made the generated page finally look emmade/em, not generated./blockquote p classattributionspan classcaps— 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.2display 紧行高 */ 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-labelCustomer 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 就能在页面中段制造出整篇设计最安静、也最有重量的一拍。相关仓库资源索引原型定义skills/hallmark/references/components/t3-single-huge-quote.md组件目录与变体旋钮、响应式折叠表skills/hallmark/references/component-cookbook.md相邻组件T1 边栏引文 t1-pull-quote-with-marginalia.md · H3 引文 hero h3-quote-led.md · T2 logo 墙 t2-logo-wall-hairline.md · T4 数字统计条 t4-numbered-stat-strip.md宏观结构skills/hallmark/references/macrostructures/09-quote-led.md排版规范skills/hallmark/references/typography.md · 反模式清单skills/hallmark/references/anti-patterns.mdToken 参考site/css/tokens.css · 技能总览skills/hallmark/SKILL.md仓库中的实现对照site/_tests/04-meridian-manifesto/style.cssQuote-Led 宏观结构戳记与 0.12em 标签字距实践【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考