Hallmark 色彩系统完全指南OKLCH 四层调色板paper/ink/neutrals/accent新手快速上手【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmarkHallmark 是一个面向 Claude Code、Cursor 和 Codex 的反 AI 味设计技能design skill它的核心武器就是一套OKLCH 四层色彩系统Paper底色、Ink文字、Neutrals中性灰阶梯、Accent强调色。掌握这四个词你就能看懂 Hallmark 生成的每一套主题为什么看起来像人做的而不是千篇一律的紫蓝渐变。本文带你从零理解 OKLCH 调色板并附真实主题实例与文件路径。为什么 Hallmark 只认 OKLCH大多数 AI 生成的界面败在配色上默认选蓝色、用纯黑#000、拉一条紫到青的渐变、把强调色铺满 30% 的页面。Hallmark 在 references/color.md 中直接把这些列为禁止项。它的四条基本原则见 color.md 第 5–10 行只用 OKLCH——感知均匀的颜色空间明度可预测、色相在深浅变化中保持一致。hsl()和rgb()会撒谎强调色最多 1 个极限 2 个且只占视口的3% 以下禁止纯黑纯白——任何颜色都要带一点色度chroma向锚点色相倾斜灰色也要染色——锚点色相是暖橙中性灰就偏暖是冷蓝中性灰就偏冷。四层调色板逐个拆解一个完整的 Hallmark 调色板有四个层次color.md 第 12–19 行1️⃣ Paper —— 页面底色页面的纸。亮色模式取oklch(96–98% 0.005–0.015 锚点色相)深色模式取oklch(12–16% …)。注意纸永远不是纯白而是带一点点色度的米纸或炭色。2️⃣ Ink —— 主文字色承载正文的墨色。亮色模式oklch(16–22%)深色模式oklch(92–96%)。同样带锚点色相的微弱染色——所以 Hallmark 的深色主题从不用#fff。3️⃣ Neutrals —— 中性灰阶梯在 Paper 和 Ink 之间铺5 到 9 级灰色--color-rule、--color-muted、--color-neutral等每级都保留 0.005–0.015 的低色度。这套阶梯给了页面排印深度而不需要靠强调色。4️⃣ Accent —— 唯一的高饱和强调色色度被限定在0.12–0.22之间只用于激活的导航项、焦点环、悬停下划线、主 CTA 的边框或文字、标题旁的小色块。规则原话是它是荧光笔不是色块。下面这张 Slow Pour 咖啡订阅页就是典型样本暖燕麦色的 paper 底色 深棕 ink 文字 仅出现在小标签和按钮上的赤陶色 accent四层的分工一目了然。深色模式配方不是反色深色主题不是简单把颜色倒过来。color.md 第 64–71 行 的配方Paper 明度 12–18%而非#000Ink 明度 92–96%而非#fff正文字重减 50 单位400 → 350补偿浅字在深底上的视觉重量Accent 色度降 0.02–0.04明度提 5–10%更高的层级表面更亮而不是更暗每级加约 3% 明度色相绝不切换——只动明度和色度锚点色相保持不变。Hyperlane 开发者峰会页正是这套配方的产物带蓝灰调的炭色 paper、近白的 ink以及只出现在按钮和斜体字上的信号橙 accent。对比度门槛与禁用清单配色不是艺术问题是数学问题。Hallmark 优先用 APCA否则用 WCAG 2.1color.md 第 51–62 行内容最低目标正文4.5:17:1大字号≥18.66px 粗体或 24px3:14.5:1UI 组件边界3:14.5:1占位符 / 辅助文字4.5:14.5:1同时有一份硬性的Bans 清单color.md 第 73–83 行禁纯黑、禁纯白底、禁零色度灰、禁紫到青渐变、禁强调色铺大面积背景、禁三色渐变只允许两停。这些规则会由 65 道 slop-test 门槛在生成前自动检查。如何落地22 套主题 自定义主题协议所有规则最终固化成 CSS 变量。项目自带的 22 套命名主题Specimen、Midnight、Terminal、Garden、Newsprint……全部集中在 site/css/tokens.css 中每个主题占一个[data-theme...]块只写--color-paper、--color-ink、--color-accent等命名令牌——例如 Specimen 主题令牌第 14–27 行 就是暖燕麦编辑风的完整 OKLCH 四层结构。当你说出品牌色用我们的赤陶色或要求自定义主题时Hallmark 会走custom 分支只问你一个 4–8 个词的vibe然后按固定顺序构造锚点强调色 → paper → ink → 中性灰 → focus 色完整协议见 references/custom-theme.md三个真实成品案例Coffeebox / Loop / Mossroot在 site/_tests/custom/ 中可直接查看。核心文件路径速查文件作用skills/hallmark/SKILL.md技能主入口设计流程、主题轮换规则skills/hallmark/references/color.mdOKLCH 四层调色板规则 对比度 Bansskills/hallmark/references/custom-theme.md自定义主题协议与三个实例site/css/tokens.css22 套主题的完整色彩令牌定义site/_tests/custom/custom 分支的三个成品页面小结OKLCH 负责说得准paper/ink/neutrals/accent 四层负责摆得对Bans 清单负责不翻车。下次让 AI 帮你做配色时把这三句话给它你的页面就不至于看起来是 AI 做的。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
