Hallmark Custom Theme 协议全解：为单个品牌手工构建 OKLCH 调色板与免费字体配对-二趣网

Hallmark Custom Theme 协议全解：为单个品牌手工构建 OKLCH 调色板与免费字体配对

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

本篇指南完整讲解 Anti-AI-slop 设计技能 Hallmark 中的custom theme（自定义主题）路由——一条仅在 brief 携带明确创作意图信号时才激活的定制分支。文章以 custom-theme.md 协议为骨架，结合 SKILL.md 中的 Design flow 调度逻辑与 site/_tests/custom/ 下三个已渲染的真实案例（Coffeebox / Loop / Mossroot）源码，让你掌握：何时触发 catalog 与 custom 的分叉、如何按固定顺序推导一整套符合规则的 OKLCH 色板、如何在七个字体 tone 之间跨组混搭显示与正文字体、如何声明三条多元化轴并写入 Stamp 与.hallmark/log.json。读完你既能照着协议手写一个定制主题，也能理解 Hallmark 为什么把"自由"限定在组合层而非规则层。

两条路线：catalog 与 custom

Hallmark 默认的 Design flow 总是会选择一个主题。按 SKILL.md 的 Step 2.6 调度，主题路由有三条：studied-DNA（来自study诊断）、catalog（22 个具名主题目录）与custom（本协议的主题）。其中 catalog 是默认，custom 是安静的旁支：

catalog（目录主题）——22 个具名主题（Specimen、Atelier、Brutal、Salon、Newsprint、Linen、Studio、Manifesto、Terminal、Midnight、Almanac、Garden、Quiet、Riso、Sport、Bloom、Coral、Violet、Aurora、Halo、Plume、Editorial），每个都是 paper 色带、display 风格、accent 色相三者的固定组合。轮换规则保证连续两次输出不雷同。这是默认路线，绝大多数 brief 走它。
custom（定制主题）——为某一个特定 brief 一次性构建的完整 OKLCH 色板 + 免费字体配对。技能负责推演 OKLCH 值、挑选字体并写入页面:root，但不会向目录里新增一个主题。

核心句是："自由的只是组合，不是规则。"（The freedom is the combination, not the rules.）color.md 的 OKLCH 色板规则、typography.md 的字体配对规则、anti-patterns.md 的反模式清单，以及 65 道 slop-test 门，全部照常生效。Step 5 预览块会在任何代码落地之前以纯文本形式呈现色板与配对，让用户有机会提前改道。

何时触发 custom 分叉：Step 1 的四个信号

Hallmark 明确要求不要在每次 prompt 都给出 catalog-vs-custom 的选择——那是摩擦，不是纪律。只有当 brief 携带以下四类信号之一时，才浮现分叉：

显式请求——用户输入 "custom"、"custom theme"、"tailored to our brand"、"make it ours"、"something unique"、"play around with the colors and fonts"、"I want my own palette"。
具名品牌色——用户给出一个具体锚色，如 hex / OKLCH / 品牌名："use our terracotta"、"the brand red is hex #c0392b"、"anchor on sea-blue"。
目录装不下的多属性美学——三个或以上 vibe 词指向某个目录外的具体感觉，例如 "moss, lichen, soft pink, herbal" / "sun-drenched, market-day, carbon-black" / "late-night, neon, brutalist deli"。先拿它与 22 个目录主题逐一比对，若没有任何单一主题在一步轴距内接近该 vibe，才触发分叉。单个形容词（"warm"、"technical"、"playful"）不构成信号——那只是 tone，目录已经承载了它。
附带了品牌情绪参考——用户贴上色卡、moodboard、Pantone 色片。（若附的是页面截图，则改走study：custom 处理品牌色/情绪，study 处理设计 DNA。）

任一信号触发后，先问一个短问题（见下节），等待用户回答。回答 custom → 进入 §A 协议；回答 catalog → 丢弃分叉回到目录路线。默认仍是 catalog——沉默即路由到 catalog，而不是 custom。若四个信号一个都不满足，就完全不要提及分叉，安静地走 catalog 流程。

在 site/_tests/custom/README.md 中可以看到三个案例对应的信号落地：Coffeebox 最接近目录主题Atelier但更暖、更以赤陶土为主导；Loop 最接近Midnight但全 mono 且是海蓝而非荧光青；Mossroot 在目录里没有任何匹配（苔藓调 paper + 灰粉 accent 不在目录中）。没有 custom，三个品牌都要在品牌声音上妥协。

§A · 唯一的一次追问

用户选定 custom 之后，只在一屏消息里问一件事：

"Custom needs one input — describe the brand's vibe in 4–8 words. Examples: 'archival warmth, hand-set, no varnish' · 'industrial precision, cool, technical' · 'moss, lichen, soft pink, herbal' · 'sun-drenched, market-day, carbon black' · 'late-night, neon, brutalist deli'.
Optional second input: an anchor colour — hex, OKLCH, or a name like 'terracotta', 'sea-blue', 'forest-green', 'dusty-pink'. If you skip it, I'll pick one from the vibe."

除此之外不要再问任何东西。Audience / use / tone（Step 1 已收集）加上品牌 vibe 已经是足够的信号。模型没有资格让用户来指定 paper 明度或字重——那是模型的活。

用户只给两三个词（"sun-drenched"）→ 直接继续，配方足以抽取。
用户给了一大段 → 接受，但压缩成 4–8 个词用于 Stamp。

§B · 调色板构建：七步固定顺序

按以下顺序构建色板，每一步只需应用对应规则，不要复述规则。七个 token 层对应 site/_tests/custom/01-coffeebox/style.css 中:root的完整实现。

B.1 · 先定锚色 accent

把用户给出的具名/hex 锚色转换为 OKLCH。
按 color.md 的 "Accent — the discipline"，把 chroma 钳制在0.12–0.20。
用户跳过锚色 → 从 vibe 推导色相：warmth→ 30–60° ·technical/industrial→ 220–250° ·botanical/moss→ 130–160° ·late-night/neon→ 280–320° ·sun-drenched/market→ 60–80° 琥珀。chroma 保持 0.12–0.16（中饱和；饱和度来自与中性色的对比，不来自 chroma）。

B.2 · Paper（纸面底色）

从 vibe 推导 paper 的明度 L：

bright/airy/breakfast/hand-set →L 95–98 %（暖色偏染）
archival/editorial/restrained →L 92–95 %（暖色偏染）
technical/clinical/spec-sheet →L 98–100 % 近白（冷色偏染；可以等于 #fff，但下游中性色要有偏染）
dark/restless/late-night/manifesto →L 12–18 %（锚色偏染）

永远向锚色偏染 paper，chroma 0.005–0.020（对应 color.md 的 "Neutral tinting"）。纯白 #fff 只有在 ink + accent + 灰色阶已经承担了 chroma 时才允许；paper 自身绝不能在两个方向上都携带 chroma 0。

Paper-2（一级抬升）：从 paper 步进 ±2–4 % L。
Paper-3（可选二级抬升）：步进 ±5–7 % L。极简色板可跳过。

B.3 · Ink（正文墨色）

若 paper L < 50：ink L88–96 %。
若 paper L ≥ 50：ink L16–24 %。
ink 的 chroma 0.005–0.014 向锚色偏染（更深的 shade / 更浅的 tint，永不中性）。
Ink-2（次级文本）：从 ink 向 paper 方向步进 4–8 % L，同一色相族。

B.4 · 支撑灰色阶

在 paper 与 ink 之间按 ~6–10 % L 步进，全部向锚色偏染 chroma 0.005–0.018：

--color-rule——分隔线 · 浅纸面 L ~70–82 %，深纸面 L ~26–34 %。
--color-rule-2——次级分隔线 · 比 rule 更靠近 paper 4–6 % L。
--color-muted——弱化文本 · L ~38–56 %。
--color-neutral——中灰等价 · L ~30–56 %。

这些不是随意取的。L 步进给了色板排版深度，而无需依赖 accent。

B.5 · Focus（焦点环）

与 accent 同色相，chroma 略高（0.18–0.22）以保证可见。
L 与 accent 相同 ±5 %。
仅用于:focus-visible——按 microinteractions.md 的 "Focus is a first-class state"，必须即时显现。

B.6 · Accent-ink（accent 填充上的文字色）

accent L > 50 → 用 ink（深字压在浅色 accent 填充上）。
accent L ≤ 50 → 用 paper（浅字压在深色 accent 填充上）。
按 color.md 验证APCA 对比度：正文 ≥ 7:1，大文本 ≥ 3:1。

B.7 · 验证（对应 slop-test 门）

Gate 8（禁止纯 #000/#fff 基色）：paper 与 ink 的 chroma 均 > 0。通过。
Gate 24（禁止零 chroma 中性色）：每个灰色 chroma ≥ 0.005。通过。
Gate 25（accent 足迹 ≤ 5 %）：预先规划 accent 在页面上的角色（激活态、一个 wordmark 圆点、一个 CTA 填充）。不要把整个 section 铺满 accent。

三个案例的 token 块可以直接对照：Coffeebox 的--color-paper: oklch(94% 0.020 65)、Loop 的--color-paper: oklch(13% 0.012 220)（暗色）、Mossroot 的--color-paper: oklch(96% 0.018 145)（苔藓偏染），全部满足色带与偏染规则。

§C · 字体配对：七个 tone 中的自由与纪律

Custom 从 typography.md 的七个 tone 配对中取材——Editorial、Technical、Brutalist、Soft、Luxury、Playful、Austere（及 Workshop）。每个 tone 都有免费基线与付费升级两行。

C.1 · 自由：跨 tone 混搭

目录主题的规则是 display 与 body 同取 tone-X。Custom 可以跨 tone 混搭——这正是它的意义：

Editorial display + Technical body（Fraunces 斜体 wordmark + Geist body）——适合学术气质 SaaS。
Brutalist display + Editorial body（Anton + Newsreader 斜体）——适合左翼宣言杂志。
Playful display + Austere body（Bricolage Grotesque + Inter Tight）——适合创作者工具品牌。
Luxury display + Technical body（Cormorant Garamond + JetBrains Mono）——适合手工质感的开发工具。

从任一 tone 的列中挑选一个 display face + 一个 body face。若页面含代码或表格数据，可选用一个 mono。

C.2 · 纪律

只用免费基线，除非用户确认了付费授权。按 typography.md § "The discipline"："Never name a paid font in code without confirming the user is licensed."
禁用默认字体依旧禁用。Inter / Roboto / Open Sans / Poppins / Lato / Work Sans / DM Sans / Montserrat / system-ui 作为 display 全部违反 Gate 1。
优先可变字体（Fraunces、Bricolage Grotesque、Newsreader、Geist、EB Garamond、Inter Tight）——支持 optical-size 与 weight 轴，排版控制更精细。

C.3 · 配对必须能读

选定 display + body 后，在脑中渲染整页：

display face 是否有足够的字重对比（200/400 紧挨 700/900）？对应 typography.md § "Commit to extremes"。
body face 在所选正文字号（≥ 14 px 下限，默认 1rem）与栏宽（45–75 ch）下是否可读？
若 display 是 mono 且 body 也是 mono——仅当页面本身就是设计时才允许（Terminal 美学、真正的单字体 specimen），依据 typography.md 第 7 行。

任一答案为否则改道——换 body face 或调整 display 字重。

§D · 自定义轴计算：三条多元化轴

custom 主题必须显式声明其三条 diversification-rule 轴值，让 SKILL.md § "Theme-diversification rule" 以与目录主题完全相同的方式触发。

D.1 · Paper band（纸面色带）

dark—— paper L < 30 %
mid—— paper L 30–85 %
light—— paper L > 85 %

D.2 · Display style（显示风格）

依据所选 display face 归类：

italic-serif—— Fraunces italic, Newsreader italic, EB Garamond italic, Cormorant italic
roman-serif—— Source Serif 4, Newsreader, Crimson Pro, Bitter, Cardo
geometric-sans—— Geist, Bricolage Grotesque, Inter Tight, Manrope, Sora
mono—— Geist Mono, JetBrains Mono, IBM Plex Mono, Space Mono
display-condensed-italic—— Migra italic, Tobias italic
display-condensed-bold—— Anton, Bebas Neue, Oswald, Barlow Condensed
display-heavy—— Inter Tight 900, Bricolage 800, Druk 类
slab-serif—— Roboto Slab, Bitter heavy, Zilla Slab
system-native—— system-ui, Inter Tight 400（austere）
risograph-bold—— 手工质感的粗体无衬线
handwritten—— Caveat, Sacramento, Patrick Hand（罕见；仅当品牌明确要求）

D.3 · Accent hue band（accent 色相带）

warm—— hue 10–60°（红、橙、琥珀）
cool—— hue 200–300°（蓝、靛、青）
neutral—— 无彩色 accent（austere；chroma < 0.05）
chromatic-other—— warm/cool/neutral 之外的任何色相。附加具体锚色子标签：chromatic-green ~145°·chromatic-sage ~120°·chromatic-phosphor ~150°·chromatic-terracotta ~30°·chromatic-dusty-pink ~350°·chromatic-moss ~140°·chromatic-amber ~75°。

D.4 · 三条轴写入何处

把三条轴写进 macrostructure Stamp（§E）与.hallmark/log.json条目（§F）。它们是持久记录，下一次运行会读取。

§E · Stamp 格式：产出样式表的持久记录

按 SKILL.md Step 6 § "Stamp the output"，生成样式表顶部的 CSS 注释使用多行格式：

/* Hallmark · macrostructure: <name> · <hero archetype + knobs> * theme: custom · vibe: "<4–8 words>" · paper: oklch(<L>% <C> <H>) · accent: oklch(<L>% <C> <H>) * display: <font name> · body: <font name> · axes: <paper-band> / <display-style> / <accent-hue> * studied: no · context: <user-provided | inferred> · v0.6.x */

具体实例（来自 site/_tests/custom/01-coffeebox/style.css 第 1–5 行）：

/* Hallmark · macrostructure: Long Document · H5 hero knobs: salutation=time-stamp, body=2 paragraphs, signoff=initials * theme: custom · vibe: "archival warmth, hand-set, no varnish" · paper: oklch(94% 0.020 65) · accent: oklch(58% 0.16 35) * display: Fraunces italic · body: Source Serif 4 · axes: light / italic-serif / chromatic-terracotta * studied: no · context: explicit · v0.8.0 */

Stamp 是持久记录：audit读它、下一次运行读它、用户读它。

§F ·`.hallmark/log.json`条目形态

custom 运行在既有 schema 上扩展theme_axes字段与可选的vibe字段：

{ "date": "2026-05-01", "macrostructure": "Stat-Led", "theme": "custom", "theme_axes": "light / italic-serif / chromatic-terracotta", "vibe": "archival warmth, hand-set, no varnish", "enrichment": "none", "brief": "Coffeebox · subscription" }

目录条目继续记录theme: <name>并跳过theme_axes（目录轴的取值从 site/css/tokens.css 中查询）。Step 2.5 的多元化检查对两者使用同一逻辑：目录条目从 tokens.css 读轴，custom 条目从条目自身读轴。

轮换规则与主题路由无关（theme-route-blind）：

custom 运行后接另一条 custom 运行 → 与上一条 custom 至少有一个轴不同（与 catalog-vs-catalog 规则一致）。
custom 运行后接 catalog 运行 → 必须与 catalog 的轴至少有一项不同。

§G · 三个完整实战案例

以下三个案例在 site/_tests/custom/ 中均有已渲染的 HTML 与真实 CSS 源码，可直接对照协议验证。

G.1 · 档案感咖啡馆 —— "Coffeebox"

Brief："Build me a landing page for Coffeebox — a small-batch coffee subscription. Roast on Sunday, ship on Monday, drink Tuesday. Audience: people who already buy good coffee and want fewer trips to the shop. Tone: warm, hand-set, editorial — like a small café's chalkboard. Theme route: custom."

Vibe 回答："archival warmth, hand-set, no varnish."锚色："terracotta."

Palette（见 site/_tests/custom/01-coffeebox/style.css:root）：

paperoklch(94% 0.020 65)——暖奶油色，hue 65（琥珀暖）
paper-2oklch(91% 0.022 65)——一级抬升
inkoklch(22% 0.014 60)——暖深棕黑
ink-2oklch(40% 0.014 60)——暖次级
ruleoklch(78% 0.018 65)——暖发丝线
mutedoklch(54% 0.014 60)——暖灰
accentoklch(58% 0.16 35)——赤陶土（hue 35, chroma 0.16）
accent-inkoklch(96% 0.014 65)——accent 上的纸色文字
focusoklch(56% 0.20 35)——更高 chroma 的 accent

**Pair：**displayFraunces italic（Editorial, free）· bodySource Serif 4（Editorial, free）· monoJetBrains Mono（Technical, free）。

Axes：light / italic-serif / chromatic-terracotta。

G.2 · 工业风金融科技 —— "Loop"

Brief："Loop is a real-time payment-rail observability platform for fintechs. Audience: platform engineers. Use case: try it / contact sales. Tone: industrial, cool, technical. Theme route: custom."

Vibe 回答："industrial precision, cool, technical."锚色："sea-blue."

Palette（见 site/_tests/custom/02-loop/style.css:root）：

paperoklch(13% 0.012 220)——暗冷
paper-2oklch(17% 0.014 220)——一级抬升
paper-3oklch(22% 0.014 220)——二级抬升（面板）
inkoklch(94% 0.010 220)——冷浅
ink-2oklch(72% 0.010 220)
ruleoklch(30% 0.012 220)
mutedoklch(58% 0.012 220)
accentoklch(72% 0.16 220)——海蓝（cool）
focusoklch(78% 0.20 220)

**Pair：**displayGeist Mono 500（Technical, free）· bodyGeist（Technical, free）· monoGeist Mono（Technical, free）。

注意：这确实是一个单族页面（Geist + Geist Mono 是同族不同字宽）。typography.md 第 7 行允许它："single-font pages are allowed only when the single font IS the design choice." 对工业精密的金融科技，这就是设计选择。

Axes：dark / mono / cool。

G.3 · 植物药房 —— "Mossroot"

Brief："Mossroot is a small herbal apothecary in Porto. We make tinctures, salves, and tea blends. Audience: locals + visitors. Use: see what we make + visit. Tone: quiet, herbal, hand-poured. Theme route: custom."

Vibe 回答："moss, lichen, soft pink, herbal."锚色：（跳过——从 vibe 推导）。

vibe 命名了两个色相：moss（绿调 ~140°）与soft pink（暖调 ~350°）。选择soft pink 作为 accent（custom 严格单 accent），把 moss 绿用作paper 偏染（chroma 0.018 偏向 145°）。这样双 vibe 都承载了，而不拆分 accent。

Palette（见 site/_tests/custom/03-mossroot/style.css:root）：

paperoklch(96% 0.018 145)——苔藓偏染近白
paper-2oklch(93% 0.020 145)
inkoklch(22% 0.014 140)——苔藓偏染深色
ink-2oklch(42% 0.014 140)
ruleoklch(82% 0.018 145)
mutedoklch(56% 0.014 140)
accentoklch(72% 0.13 350)——灰粉（chromatic-other）
focusoklch(70% 0.18 350)

**Pair：**displayCormorant Garamond（Luxury, free）· bodyEB Garamond（Luxury, free）· monoGeist Mono（该页罕见；仅用于成分清单）。

Axes：light / roman-serif / chromatic-other (dusty-pink)。

Custom 的边界：五件它不会做的事

协议用一整节重申边界，防止"过度发明"：

不会发明无视规则的主题。每一档 paper L、accent chroma 上限、中性色偏染要求、字体禁用清单与 slop-test 门全部继承。自由的是组合，不是规则。
不会保存主题以供复用。custom 是一次性输出。技能不会回写 site/css/tokens.css。若用户想要一个永久主题，需要自己把 custom 色板粘进 tokens.css 并命名。
不会连环追问。一次 vibe 回答（+ 可选锚色）足矣。Step 1 的 audience/use/tone 加上 brief 加上 macrostructure 选择，已经给了模型 80 % 的信号。
不会放松多元化规则。custom 条目与目录条目一样声明三条轴；轮换规则对两者都触发，主题路由无关。
不会绕过 Step 5 预览。custom 色板与配对在任何代码落地之前以纯文本呈现，用户可提前改道。

这五条中任何一条被弯曲，custom 输出就是过度发明——对它执行 audit，然后改道。这也正是 site/_tests/custom/README.md 中"guards prevent over-invention"一节列出的五项防护：opt-in 才是 opt-in、只问一个问题、每条既有规则照常生效、Step 5 预览先于代码、多元化与路由无关。

延伸阅读：完整协议见 custom-theme.md；调度逻辑见 SKILL.md（Step 1 信号检测与 Step 2.6 分发）；色板规则见 color.md；字体配对与禁用清单见 typography.md；反模式与 slop-test 门见 anti-patterns.md；三个案例的渲染源码与说明见 site/_tests/custom/。

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

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

企业官网建设流程全解析