Hallmark 组件 T1 实战Pull-quote with marginalia——用宽栏引文与窄栏边注构建编辑式证明节奏【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmarkT1 Pull-quote with marginalia 是 Hallmark 设计体系中四款证明testimonial/proof类组件原型之一其核心是把引文放进宽栏、把署名与来源链接放进窄栏从而在页面上制造出 Tufte 式的正文 边注双栏节奏。本文将以 t1-pull-quote-with-marginalia.md 为主干结合 component-cookbook.md、typography.md、structure.md 等仓库文档与site/_tests/下的真实构建实例完整讲解 T1 的适用场景、DOM 结构、变体旋钮、移动端折叠行为与质量门禁读完即可在项目中落地一个不再像 AI 生成的引文区块。组件定位四款证明原型中的侧边搭档在 Hallmark 的组件目录中证明类Testimonials / proof组件共有四个原型T1–T4T1 是其中唯一使用双栏边注形态的成员原型形态一句话说明T1 · Pull quote with marginalia宽栏引文 窄栏边注引文在宽栏署名与来源链接漂浮在窄栏本文主题T2 · Logo wall (hairline)单色 Logo 墙 发丝线分隔无卡片、无阴影T3 · Single huge quote居中大字整段引文一条好到配得上整个版面的引文T4 · Numbered stat strip3–5 个数字统计横条多个互补指标同行排列tabular 数字component-cookbook.md 中明确给出 T1 的判别准则Use when:the page already has a marginalia rhythm (Tufte-leaning, editorial).Dont confuse with:T3 Single huge quote (which is centered and dominates).也就是说T1 的适用前提是页面已经存在边注节奏——比如正文两侧已经有旁注sidenote、栏外注释或元信息列。它不适合作为孤立的第一处引文出现也不适合与 T3 混淆T3 是占领整个版面的居中大字T1 是贴在正文侧边的证明。t3-single-huge-quote.md 对二者的关系说得更直白T1 是side mate侧边伙伴T3 是the room整个版面。此外还需与 H3 Quote-Led以引文为 hero 的原型区分H3 位于首屏 hero 槽位T1 位于页面中段的证明区。h3-quote-led.md 中标注了同样的告诫Dont confuse with: T3 Single huge quote (which lives mid-page, not in the hero slot)——hero 槽位归 H3页面中部归 T1/T3。核心结构宽栏引文 窄栏边注T1 的完整结构草图来自原文档逐字继承aside classproof-margin blockquote classserif-italic…/blockquote p classattribution muted— Namebr /Role, Company/p /aside把这段结构拆开看三个类名各自承担明确职责aside classproof-margin语义上使用aside而非div表明这段内容是正文的旁注性补充proof-margin暗示其布局角色——通过 CSS Grid 放入窄栏margin column。blockquote classserif-italic引文本体。serif-italic是衬线斜体的约定类名对应下方排版纪律一节的字体选择建议。p classattribution muted署名块。muted对应调色板中的弱化色 token如--color-muted让署名低于引文的视觉权重。br /换行把姓名与职位、公司分成两行。值得注意的设计决策是署名不放在引文正下方而是与引文平行、漂在窄栏里。这正是它与 T3署名以小号大写字母跟在引文下之间的结构性差异——T3 是纵向堆叠T1 是横向双栏并置。栅格实现structure.md中的不对称双栏与边注T1 的栅格依据来自 structure.md 的Body composition轴。该文件定义了六种正文构成方式其中两种与 T1 直接相关Two-column asymmetric不对称双栏——Wide body narrow margin column for metadata, captions, marginalia即宽正文 窄边注列用于承载元信息、图注和边注Marginalia旁注——Sidenotes in a generous outer margin run alongside core text参考 Tufte CSS 与学术出版物的旁注排布。T1 正是把这两种模式合而为一引文在宽栏署名 来源链接在窄栏。实现上推荐使用 CSS Grid 的两列布局例如宽栏minmax(0, 1fr)、窄栏固定约12–16rem与正文max-width: 65ch的阅读宽度形成对比中间以留白或发丝线分隔。Hallmark 的一贯纪律是发丝线hairline而非卡片边框——T1 的边注列不需要任何 box、底色或阴影纯粹靠栅格位置制造编辑感。变体旋钮同一个 T1三种奏法component-cookbook.md 为每个原型都定义了 2–3 个变体旋钮variation knobs防止每个 T1 看起来都一样。T1 的旋钮如下旋钮可选值Quote treatment引文处理italic display · roman large · serif italicAttribution署名样式signed · stamped · timestampedMarginalia边注内容none · timeline · 1 footnoteQuote treatment斜体 display 字号戏剧化、罗马正体大号克制、衬线斜体默认对应原文档serif-italic。选择取决于引文在全页中的权重只有一条关键引文用 display 斜体多条引文保持 serif italic 统一节奏。Attribution签名式— Name、印章式小号大写或 mono如04-meridian-manifesto的做法、时间戳式注明日期/场合强化真实性。Marginalia边注列除了署名还可以放时间线或一条脚注。1 footnote的上限本身就是一个纪律——边注列是辅助信息不是第二个正文流。旋钮的意义在于多样性纪律仓库在 slop-test.md 的 gate 34 中明确要求——If I used the same archetype as a previous Hallmark output… did I pick at least one different variation knob?。连续两次输出使用同一原型时至少改变一个旋钮值并在 stamp 注释中写明差异。在页面中组合原型不是孤立组件T1 几乎从不出现在空无一物的页面上——它被编排进某个宏观结构macrostructure。依据 SKILL.md 的组件加载协议从 component-cookbook.md 的索引里按页面章节角色选原型hero 选 H1–H9章节头选 S1–S5特性块选 F1–F6CTA 选 C1–C4证明选 T1–T4页脚选 Ft1–Ft8导航选 N1–N10一次构建通常只加载5–7 个原型文件1 hero 1 章节头 1–2 特性 1 CTA 1 页脚 1 导航禁止整本 cookbook 端到端加载单页内禁止两个章节使用同一原型——一个 Bento Grid 页面可以把Bento feature block、Inline form CTA、Logo wall (hairline)组合在一起但不能再放第二处 T1跨页面还要服从导航/页脚去重与主题三轴去重规则paper band / display style / accent hue详见 SKILL.md Step 2.5 的项目记忆.hallmark/log.json。也就是说T1 的落地必须回答两个问题它出现在哪个宏观结构中macrostructures.md 中的 21 种命名宏观结构之一以及它和同页其他原型是否构成组合差异。若页面是长文、宣言或编辑向的 Quote-Led 结构T1 是天然适配的证明组件若是典型的 hero→3 特性→CTA 模板页先换宏观结构再谈 T1。证明内容纪律honest copyT1 是证明类组件因此直接命中 Hallmark 的诚实内容纪律。SKILL.md 的通用纪律第 2 条写道Honest copy — no fabricated content.If the user did not supply a metric, do not invent one… Same rule for testimonials, logos, and case-study counts.T1 里的引文、姓名、职位、公司必须是真实素材。没有真实客户证言时要么用占位符—加标注灰块 metric to confirm要么换一种宏观结构绝不虚构 47% conversion、trusted by 50,000 teams 之类的证明内容。这条纪律同时被 slop-test gate 56 与 anti-patterns.md 的 Invented metrics 条目覆盖。排版纪律衬线斜体、muted 弱化与 21 字体规则T1 的视觉质感主要由三个排版决策决定全部来自 typography.md1. 引文用衬线斜体且让字体承担差异。typography.md 的字体目录为编辑向页面给出的自由衬线 display 面包括Fraunces可变衬线、表情丰富的斜体、光学尺寸轴、Newsreader、Instrument Serif紧凑对比、带斜体适合短标题、EB Garamond与DM Serif Display。原文档中的serif-italic类名建议映射到这类字体上。同时注意禁止默认值清单Merriweather、Playfair Display作正文、Georgia 默认等都在禁用之列。2. 21 规则——全页最多三种字体族引文是 outlier 的合法槽位。typography.md 规定一个页面最多使用三种字体族——一个 display、一个 body、一个可选的outlier用于全页唯一的字体时刻wordmark、hero 数字、pull quote、报头。outlier 的纪律是在整页最多出现 2 处wordmark hero stat 或 hero stat pull quote 是规范配对承担单一角色——一旦决定它标注引文所有引文都用它mono 也算一种字体族同族不同字重只算一种。这条纪律在 slop-test.md 中落为两道门禁gate 39超过三种字体族 slop、gate 40outlier 超过两处 第三种正文字体。因此T1 引文使用独立斜体衬线 display 是合规的但前提是全页字体族总数 ≤ 3、且引文是该 outlier 仅有的两个槽位之一。3. muted 弱化与对比度。署名类的muted样式应引用色彩 token如var(--color-muted)而不是手写灰色。依据 color.md中性色必须带 anchor 色相的微量 chroma0.005–0.015向纸张色靠拢正文文本对比度不低于 4.5:1slop-test.md gate 46 会逐对校验。署名这类弱化文本同样不能跌破 4.5:1——muted 不等于不可读。另外两个排版细节直接关乎引文品质标点copy.md 要求使用弯引号Hello、word禁止直引号与--、...替代破折号/省略号尺寸引文若走 display 字号遵循 typography.md 的--text-display: clamp(2.75rem, 5vw 1rem, 5.25rem)上限≤ 88pxdisplay 行高 1.05–1.2字距letter-spacing: -0.02em至-0.04em。移动端折叠60rem 与 40rem 两级断点component-cookbook.md 的 Mobile collapse — per archetype 为每个原型规定了窄视口折叠行为。T1 的折叠行为是断点T1 行为60rem约 960px布局断点边注移动到引文下方双栏栅格坍缩为单列分隔从并置变成发丝线40rem约 640px排版断点边注进一步合并成一行display 字号下调一级翻译成实现语言桌面端是宽栏引文 | 窄栏署名的双栏并置平板以下变成引文在上、署名在下、之间一条发丝线手机端署名压缩为单行。折叠的关键约束是窄屏下仍保持原型的层级与节奏只是形态从双栏变堆叠并且始终遵守两条跨断点硬规则命中区域 ≥ 44×44pxWCAG AA、容器内边距clamp(1rem, 4vw, 1.5rem)。质量门禁T1 要过的 slop-test 门禁构建完成后输出需通过 slop-test.md 的 69 道门禁每问都必须答否。与 T1 直接相关的门禁摘录如下Gate 34与上一次输出同原型时是否改了至少一个变体旋钮Gate 35纯装饰性 SVG/div 是否带aria-label或aria-hiddentrueT1 边注列若含装饰性时间线图形必须处理无障碍命名Gate 39 / 40字体族是否超过三个、outlier 是否超过两处引文是合法 outlier 槽位但受这两个上限约束Gate 46正文/署名对比度是否低于 4.5:1Gate 66排版类左侧标签 右侧标题的悬挂标题模式被全面禁用——T1 的边注列放的是署名与来源不是章节标题因此在结构上天然避开了这条最容易误触的模板化 tell。仓库中的实践印证仓库内部提供了多个引文组件的真实构建样本可以对照 T1 理解其兄弟形态site/_tests/04-meridian-manifesto/style.css第 1–120 行是一个Quote-LedH3引文 hero 的完整实现stamp 头注明H3 hero knobs: weightdisplay-condensed-bold, attributionunder-quote引文使用 Bebas Neue 粗体 display、署名.quote__attr使用 mono 小号大写 letter-spacing: 0.1emtext-transform: uppercase muted 色视觉上就是引文为主、署名低调收尾的 H3 注脚形态——与 T1 的署名漂在边注列形成对照。site/_tests/13-alma/index.html第 506–519 行展示blockquote classhero__quotep classhero__attrib— What Alma is/p的最小引文结构其中 em 斜体dark与显示引文形成层级署名以破折号起头——这是 T1 署名排版— Name在 hero 场景的变体。site/css/components.css第 2296–2338 行的Atelier主题与第 4749–4789 行的Editorial主题展示了边注节奏在主题层的实现Atelier 使用plate-numeral marginalia版号式旁注放在章节标题旁Editorial 主题使用罗马数字旁注 发丝线 不对称栅格。这些正是 T1 所要求的页面已有边注节奏marginalia rhythm的实际落点——T1 适合与这类主题/结构搭配而不是与纯卡片式页面搭配。何时使用一张决策清单最后把 T1 的选用逻辑收敛成可直接执行的判断步骤页面是否内容驱动、编辑向portfolio、杂志、宣言、品牌故事、长文genre 为 editorial 或其变体——不是则先选宏观结构而非组件页面是否已经有边注/旁注节奏正文旁有元信息列、脚注、plate-numeral 或 Roman-numeral marginalia——是T1 成立否T1 会显得突兀改用 T3 或 T2引文是否真实素材honest copy——无真实引文则换结构或放占位符全页字体是否满足 21 上限引文是否为 outlier 合法槽位——超限则让引文退回 body 字体是否设置了移动端折叠60rem 边注下移、40rem 合并成一行——是T1 才算完整交付。T1 的最终价值不是一条漂亮的引文而是让证明信息以编辑式双栏节奏融入页面结构——引文说话署名与来源安静地待在边注里既不喧宾夺主也不沦为满屏居中大字引文的模板腔。这正符合 Hallmark 的核心主张结构上的差异而不是色彩换皮式的差异。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Hallmark 组件 T1 实战Pull-quote with marginalia——用宽栏引文与窄栏边注构建编辑式证明节奏【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmarkT1 Pull-quote with marginalia 是 Hallmark 设计体系中四款证明testimonial/proof类组件原型之一其核心是把引文放进宽栏、把署名与来源链接放进窄栏从而在页面上制造出 Tufte 式的正文 边注双栏节奏。本文将以 t1-pull-quote-with-marginalia.md 为主干结合 component-cookbook.md、typography.md、structure.md 等仓库文档与site/_tests/下的真实构建实例完整讲解 T1 的适用场景、DOM 结构、变体旋钮、移动端折叠行为与质量门禁读完即可在项目中落地一个不再像 AI 生成的引文区块。组件定位四款证明原型中的侧边搭档在 Hallmark 的组件目录中证明类Testimonials / proof组件共有四个原型T1–T4T1 是其中唯一使用双栏边注形态的成员原型形态一句话说明T1 · Pull quote with marginalia宽栏引文 窄栏边注引文在宽栏署名与来源链接漂浮在窄栏本文主题T2 · Logo wall (hairline)单色 Logo 墙 发丝线分隔无卡片、无阴影T3 · Single huge quote居中大字整段引文一条好到配得上整个版面的引文T4 · Numbered stat strip3–5 个数字统计横条多个互补指标同行排列tabular 数字component-cookbook.md 中明确给出 T1 的判别准则Use when:the page already has a marginalia rhythm (Tufte-leaning, editorial).Dont confuse with:T3 Single huge quote (which is centered and dominates).也就是说T1 的适用前提是页面已经存在边注节奏——比如正文两侧已经有旁注sidenote、栏外注释或元信息列。它不适合作为孤立的第一处引文出现也不适合与 T3 混淆T3 是占领整个版面的居中大字T1 是贴在正文侧边的证明。t3-single-huge-quote.md 对二者的关系说得更直白T1 是side mate侧边伙伴T3 是the room整个版面。此外还需与 H3 Quote-Led以引文为 hero 的原型区分H3 位于首屏 hero 槽位T1 位于页面中段的证明区。h3-quote-led.md 中标注了同样的告诫Dont confuse with: T3 Single huge quote (which lives mid-page, not in the hero slot)——hero 槽位归 H3页面中部归 T1/T3。核心结构宽栏引文 窄栏边注T1 的完整结构草图来自原文档逐字继承aside classproof-margin blockquote classserif-italic…/blockquote p classattribution muted— Namebr /Role, Company/p /aside把这段结构拆开看三个类名各自承担明确职责aside classproof-margin语义上使用aside而非div表明这段内容是正文的旁注性补充proof-margin暗示其布局角色——通过 CSS Grid 放入窄栏margin column。blockquote classserif-italic引文本体。serif-italic是衬线斜体的约定类名对应下方排版纪律一节的字体选择建议。p classattribution muted署名块。muted对应调色板中的弱化色 token如--color-muted让署名低于引文的视觉权重。br /换行把姓名与职位、公司分成两行。值得注意的设计决策是署名不放在引文正下方而是与引文平行、漂在窄栏里。这正是它与 T3署名以小号大写字母跟在引文下之间的结构性差异——T3 是纵向堆叠T1 是横向双栏并置。栅格实现structure.md中的不对称双栏与边注T1 的栅格依据来自 structure.md 的Body composition轴。该文件定义了六种正文构成方式其中两种与 T1 直接相关Two-column asymmetric不对称双栏——Wide body narrow margin column for metadata, captions, marginalia即宽正文 窄边注列用于承载元信息、图注和边注Marginalia旁注——Sidenotes in a generous outer margin run alongside core text参考 Tufte CSS 与学术出版物的旁注排布。T1 正是把这两种模式合而为一引文在宽栏署名 来源链接在窄栏。实现上推荐使用 CSS Grid 的两列布局例如宽栏minmax(0, 1fr)、窄栏固定约12–16rem与正文max-width: 65ch的阅读宽度形成对比中间以留白或发丝线分隔。Hallmark 的一贯纪律是发丝线hairline而非卡片边框——T1 的边注列不需要任何 box、底色或阴影纯粹靠栅格位置制造编辑感。变体旋钮同一个 T1三种奏法component-cookbook.md 为每个原型都定义了 2–3 个变体旋钮variation knobs防止每个 T1 看起来都一样。T1 的旋钮如下旋钮可选值Quote treatment引文处理italic display · roman large · serif italicAttribution署名样式signed · stamped · timestampedMarginalia边注内容none · timeline · 1 footnoteQuote treatment斜体 display 字号戏剧化、罗马正体大号克制、衬线斜体默认对应原文档serif-italic。选择取决于引文在全页中的权重只有一条关键引文用 display 斜体多条引文保持 serif italic 统一节奏。Attribution签名式— Name、印章式小号大写或 mono如04-meridian-manifesto的做法、时间戳式注明日期/场合强化真实性。Marginalia边注列除了署名还可以放时间线或一条脚注。1 footnote的上限本身就是一个纪律——边注列是辅助信息不是第二个正文流。旋钮的意义在于多样性纪律仓库在 slop-test.md 的 gate 34 中明确要求——If I used the same archetype as a previous Hallmark output… did I pick at least one different variation knob?。连续两次输出使用同一原型时至少改变一个旋钮值并在 stamp 注释中写明差异。在页面中组合原型不是孤立组件T1 几乎从不出现在空无一物的页面上——它被编排进某个宏观结构macrostructure。依据 SKILL.md 的组件加载协议从 component-cookbook.md 的索引里按页面章节角色选原型hero 选 H1–H9章节头选 S1–S5特性块选 F1–F6CTA 选 C1–C4证明选 T1–T4页脚选 Ft1–Ft8导航选 N1–N10一次构建通常只加载5–7 个原型文件1 hero 1 章节头 1–2 特性 1 CTA 1 页脚 1 导航禁止整本 cookbook 端到端加载单页内禁止两个章节使用同一原型——一个 Bento Grid 页面可以把Bento feature block、Inline form CTA、Logo wall (hairline)组合在一起但不能再放第二处 T1跨页面还要服从导航/页脚去重与主题三轴去重规则paper band / display style / accent hue详见 SKILL.md Step 2.5 的项目记忆.hallmark/log.json。也就是说T1 的落地必须回答两个问题它出现在哪个宏观结构中macrostructures.md 中的 21 种命名宏观结构之一以及它和同页其他原型是否构成组合差异。若页面是长文、宣言或编辑向的 Quote-Led 结构T1 是天然适配的证明组件若是典型的 hero→3 特性→CTA 模板页先换宏观结构再谈 T1。证明内容纪律honest copyT1 是证明类组件因此直接命中 Hallmark 的诚实内容纪律。SKILL.md 的通用纪律第 2 条写道Honest copy — no fabricated content.If the user did not supply a metric, do not invent one… Same rule for testimonials, logos, and case-study counts.T1 里的引文、姓名、职位、公司必须是真实素材。没有真实客户证言时要么用占位符—加标注灰块 metric to confirm要么换一种宏观结构绝不虚构 47% conversion、trusted by 50,000 teams 之类的证明内容。这条纪律同时被 slop-test gate 56 与 anti-patterns.md 的 Invented metrics 条目覆盖。排版纪律衬线斜体、muted 弱化与 21 字体规则T1 的视觉质感主要由三个排版决策决定全部来自 typography.md1. 引文用衬线斜体且让字体承担差异。typography.md 的字体目录为编辑向页面给出的自由衬线 display 面包括Fraunces可变衬线、表情丰富的斜体、光学尺寸轴、Newsreader、Instrument Serif紧凑对比、带斜体适合短标题、EB Garamond与DM Serif Display。原文档中的serif-italic类名建议映射到这类字体上。同时注意禁止默认值清单Merriweather、Playfair Display作正文、Georgia 默认等都在禁用之列。2. 21 规则——全页最多三种字体族引文是 outlier 的合法槽位。typography.md 规定一个页面最多使用三种字体族——一个 display、一个 body、一个可选的outlier用于全页唯一的字体时刻wordmark、hero 数字、pull quote、报头。outlier 的纪律是在整页最多出现 2 处wordmark hero stat 或 hero stat pull quote 是规范配对承担单一角色——一旦决定它标注引文所有引文都用它mono 也算一种字体族同族不同字重只算一种。这条纪律在 slop-test.md 中落为两道门禁gate 39超过三种字体族 slop、gate 40outlier 超过两处 第三种正文字体。因此T1 引文使用独立斜体衬线 display 是合规的但前提是全页字体族总数 ≤ 3、且引文是该 outlier 仅有的两个槽位之一。3. muted 弱化与对比度。署名类的muted样式应引用色彩 token如var(--color-muted)而不是手写灰色。依据 color.md中性色必须带 anchor 色相的微量 chroma0.005–0.015向纸张色靠拢正文文本对比度不低于 4.5:1slop-test.md gate 46 会逐对校验。署名这类弱化文本同样不能跌破 4.5:1——muted 不等于不可读。另外两个排版细节直接关乎引文品质标点copy.md 要求使用弯引号Hello、word禁止直引号与--、...替代破折号/省略号尺寸引文若走 display 字号遵循 typography.md 的--text-display: clamp(2.75rem, 5vw 1rem, 5.25rem)上限≤ 88pxdisplay 行高 1.05–1.2字距letter-spacing: -0.02em至-0.04em。移动端折叠60rem 与 40rem 两级断点component-cookbook.md 的 Mobile collapse — per archetype 为每个原型规定了窄视口折叠行为。T1 的折叠行为是断点T1 行为60rem约 960px布局断点边注移动到引文下方双栏栅格坍缩为单列分隔从并置变成发丝线40rem约 640px排版断点边注进一步合并成一行display 字号下调一级翻译成实现语言桌面端是宽栏引文 | 窄栏署名的双栏并置平板以下变成引文在上、署名在下、之间一条发丝线手机端署名压缩为单行。折叠的关键约束是窄屏下仍保持原型的层级与节奏只是形态从双栏变堆叠并且始终遵守两条跨断点硬规则命中区域 ≥ 44×44pxWCAG AA、容器内边距clamp(1rem, 4vw, 1.5rem)。质量门禁T1 要过的 slop-test 门禁构建完成后输出需通过 slop-test.md 的 69 道门禁每问都必须答否。与 T1 直接相关的门禁摘录如下Gate 34与上一次输出同原型时是否改了至少一个变体旋钮Gate 35纯装饰性 SVG/div 是否带aria-label或aria-hiddentrueT1 边注列若含装饰性时间线图形必须处理无障碍命名Gate 39 / 40字体族是否超过三个、outlier 是否超过两处引文是合法 outlier 槽位但受这两个上限约束Gate 46正文/署名对比度是否低于 4.5:1Gate 66排版类左侧标签 右侧标题的悬挂标题模式被全面禁用——T1 的边注列放的是署名与来源不是章节标题因此在结构上天然避开了这条最容易误触的模板化 tell。仓库中的实践印证仓库内部提供了多个引文组件的真实构建样本可以对照 T1 理解其兄弟形态site/_tests/04-meridian-manifesto/style.css第 1–120 行是一个Quote-LedH3引文 hero 的完整实现stamp 头注明H3 hero knobs: weightdisplay-condensed-bold, attributionunder-quote引文使用 Bebas Neue 粗体 display、署名.quote__attr使用 mono 小号大写 letter-spacing: 0.1emtext-transform: uppercase muted 色视觉上就是引文为主、署名低调收尾的 H3 注脚形态——与 T1 的署名漂在边注列形成对照。site/_tests/13-alma/index.html第 506–519 行展示blockquote classhero__quotep classhero__attrib— What Alma is/p的最小引文结构其中 em 斜体dark与显示引文形成层级署名以破折号起头——这是 T1 署名排版— Name在 hero 场景的变体。site/css/components.css第 2296–2338 行的Atelier主题与第 4749–4789 行的Editorial主题展示了边注节奏在主题层的实现Atelier 使用plate-numeral marginalia版号式旁注放在章节标题旁Editorial 主题使用罗马数字旁注 发丝线 不对称栅格。这些正是 T1 所要求的页面已有边注节奏marginalia rhythm的实际落点——T1 适合与这类主题/结构搭配而不是与纯卡片式页面搭配。何时使用一张决策清单最后把 T1 的选用逻辑收敛成可直接执行的判断步骤页面是否内容驱动、编辑向portfolio、杂志、宣言、品牌故事、长文genre 为 editorial 或其变体——不是则先选宏观结构而非组件页面是否已经有边注/旁注节奏正文旁有元信息列、脚注、plate-numeral 或 Roman-numeral marginalia——是T1 成立否T1 会显得突兀改用 T3 或 T2引文是否真实素材honest copy——无真实引文则换结构或放占位符全页字体是否满足 21 上限引文是否为 outlier 合法槽位——超限则让引文退回 body 字体是否设置了移动端折叠60rem 边注下移、40rem 合并成一行——是T1 才算完整交付。T1 的最终价值不是一条漂亮的引文而是让证明信息以编辑式双栏节奏融入页面结构——引文说话署名与来源安静地待在边注里既不喧宾夺主也不沦为满屏居中大字引文的模板腔。这正符合 Hallmark 的核心主张结构上的差异而不是色彩换皮式的差异。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
)
)
)
