Hallmark 排版规则完全指南：2+1 字体上限与 outlier 槽位逻辑

Hallmark 排版规则完全指南：2+1 字体上限与 outlier 槽位逻辑

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

Hallmark是一个为 Claude Code、Cursor 和 Codex 打造的"反 AI 味"设计技能，它的排版规则用一句话概括就是：一个页面最多只能出现 3 种字体族（display + body + 1 个可选 outlier），outlier 只能占用不超过 2 个槽位。这套 2+1 字体上限与 outlier 槽位逻辑，正是 Hallmark 生成的页面看起来"像人做的，而不是 AI 批量生成的"的关键原因之一。

为什么需要 2+1 字体规则？

先搞清楚 Hallmark 要解决的痛点。AI 编程助手生成的页面有一个高频坏习惯：要么全页 Inter 一种字体到底（"template 味"扑面而来），要么东拼西凑堆上四五种字体族（花哨但失控）。

Hallmark 在 typography.md 中给出的立场很干脆：

一个页面是一对搭配，而不是一种字体。Display 字体 + Body 字体，这是最低配置。

但"最多 3 种"是天花板，不是目标值。原文强调：Two is canonical. Three is the ceiling, used sparingly.（两种是标准答案，三种是上限，要克制使用。）

三个角色的分工

三者在:root里以 CSS 自定义属性声明，整个页面只通过 token 引用字体，不允许绕过 token 块内联字体名：

:root { --font-display: "Fraunces", ui-serif, Georgia, serif; /* 标题、Hero */ --font-body: "Geist", ui-sans-serif, system-ui, sans; /* 正文、UI */ --font-outlier: "Geist Mono", ui-monospace, monospace; /* 仅限 wordmark + hero stat */ }

outlier 槽位逻辑：一个"口音"，不是第三种表面

这是整套规则里最有意思的部分。Hallmark 把 outlier 定义为register（语域/口音），而不是 third surface（第三表面）——它只负责给某一类特定内容"盖一个章"。

规则共四条，条条是硬约束：

1. 全页 ≤ 2 个出现位置。官方给出的标准组合是：

• wordmark（品牌字标）+ hero stat（主视觉大数字）
• 或 pull quote（大字引语）+ masthead（刊头）

原文提醒得很有画面感："If you find yourself reaching for it a third time, you don't have an outlier — you have a third body font, which is slop."（当你第三次伸手去用它时，你拥有的不是 outlier，而是第三种正文字体——那就是垃圾感。）

2. outlier 只承载一个角色。一旦确定它标记的是"品牌"，那所有品牌相关位置都用它；绝不允许"这个按钮标签用它、那个按钮不用"的随意发挥。

3. 等宽字体也算一个字体族。Fraunces 展示体 + Geist 正文 + 代码块里的 Geist Mono，就是整整三个族了——代码块就是它的 outlier 角色，此时绝不能再塞第四个进来。

4. 同族不同字重算一个族。Geist 400 + Geist 700 是一个字体；它再配上 Fraunces 才是两个；加上 Geist Mono 才到三个。

💡 时尚、编辑感主题（Editorial / Salon / Atelier / Linen）尤其应该让 wordmark 使用与正文不同的字体——把字标塌缩回正文字体族，页面会立刻失去品牌感。这也是 outlier 槽位的第二大用途来源。

实战案例：Bloom 主题的真实 2+1 配置

看真实产出比看规则更快。BananaStudio 示例页（atmospheric 风格的 Bloom 深色主题）的 tokens.css 就是标准三件套：

--font-display: "Fraunces", "Iowan Old Style", Georgia, serif; --font-body: "Geist", ui-sans-serif, system-ui, sans-serif; --font-outlier: "Geist Mono", ui-monospace, monospace;

而在它的 styles.css 中，outlier 只被用于极小的角色——比如 hero 区的 eyebrow 小标签：

.hero__eyebrow { font-family: var(--font-outlier); font-size: var(--text-xs); letter-spacing: 0.16em; text-transform: uppercase; }

展示体负责"戏剧感"，正文负责"可读性"，等宽体只在一个角落"盖个章"——三种声音，分工清晰。这套结构可以在 site/examples/bananastudio/ 完整查看，其余主题（Wayfare、Tally、Hyperlane、Najm）的字体配置都在 site/examples/ 各自的tokens.css里，也是很好的对照教材。

禁用默认字体清单：别让 Inter 暴露你的 AI 底色

Hallmark 的 typography.md 维护了一份"Banned defaults"清单——这些字体是所有 LLM 训练数据里最"顺嘴"的选项，没有刻意理由就不要碰：

• 无衬线：Inter、Roboto、Open Sans、Lato、Poppins、Montserrat、system-ui、Arial、Helvetica……
• 衬线：Merriweather、Lora、Source Serif、Playfair Display（用作正文时禁用）
• 等宽：Courier New、默认 Consolas、system mono

替代方案不是"随便换个字体"，而是走字体目录：优先 Google Fonts，其次 Fontshare（免费可商用、foundry 级品质），最后才是需用户确认授权的 foundry 字体。按语气（Editorial / Technical / Brutalist / Soft / Luxury / Playful 等）各配好了"免费基线 + 付费升级"两行推荐，例如：

配套排版细节：与 2+1 联动生效

2+1 规则不是孤立的，Hallmark 的排版规则是一套互相咬合的组合拳，理解下面几条能帮你把字体纪律落地得更完整：

• 字重要走极端：200 配 800 读起来是"刻意为之"，400 配 600 读起来是"默认设置"。
• 字号是比值不是加法：默认用 1.25（major third）比例构建字号阶梯，且单页不超过 5 个字号。
• Display 上限 5.5rem：超过后 1280–1440px 视口下标题会挤成一团；Manifesto/Brutal 主题最高也封顶 6rem。
• 正文行宽 45–75 字符：默认max-width: 65ch，行高 1.5–1.65。
• 标题字号跟文案长度走：≤20 字符可用满--text-display；21–50 字符是甜点区；>90 字符属于"最可靠的 AI 破绽"，必须改短。

如何自查：slop-test 门禁 39 与 40

规则说了不算，Hallmark 在 slop-test.md 里把字体纪律做成了两道自动检查门（所有答案必须是 "no"）：

• 门禁 39：页面是否使用了超过 3 个不同的font-family？数一数--font-display、--font-body和最多一个 outlier；发现 4 个就把其中一个降回正文或展示体。
• 门禁 40：outlier 字体是否出现在超过 2 个槽位？标准对是 wordmark + hero stat；三个槽位 = outlier 已经变成第三正文体，必须塌缩回去。

hallmark audit动词会按 anti-patterns.md 的命名病灶清单对你现有代码逐项体检并输出整改清单（只评分、不动手改）；如果你想让 AI 助手按这套规则生成新页面，直接安装技能后描述需求即可——完整设计流程、22 套主题轮换与差异化规则都写在 SKILL.md 里。

延伸阅读

• 排版规则全文：skills/hallmark/references/typography.md
• 69 道 slop-test 门禁（含字体门禁 39/40）：skills/hallmark/references/slop-test.md
• 反模式命名清单：skills/hallmark/references/anti-patterns.md
• 22 套主题的全量 token 定义：site/css/tokens.css
• 8 个完整 brief 的人工可读示例：docs/recipes.md
• DNA 提取实战案例：docs/study-examples.md

记住核心口诀：两种字体是标准，三种是天花板；outlier 只盖两个章——wordmark 与 hero stat，多一个都不行。掌握这条 2+1 纪律，你的页面就甩掉了最容易被一眼识破的 AI 痕迹。

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