ui-craft-editorial

UI Craft — Editorial

预设编辑风格：杂志、长篇、内容优先。排版承载层级；布局服务于阅读体验。

可调参数（已锁定）

• CRAFT_LEVEL = 9 — 编辑排版只有经过高度打磨才能奏效；必须进行润色阶段。
• MOTION_INTENSITY = 4 — 注重阅读体验：显现时淡入、链接悬停，不使用入场错落效果。
• VISUAL_DENSITY = 3 — 宽幅阅读栏、宽松的垂直节奏，专题内容每行 1 项。

不要在 Discovery 中重新询问这些参数。只需确认强调色和衬线体／无衬线体的搭配。

风格基准

• 标题使用展示衬线体，正文阅读使用人文主义无衬线体／衬线体。
• 营造基线网格的感觉。正文使用 leading-relaxed（1.7）。
• 宽幅阅读栏 max-w-[65ch]。垂直节奏宽松。
• 强调色用于突出重点——引文、首字下沉、链接下划线——而非装饰。
• 启用 OpenType 特性：适用时使用小型大写字母、连字、风格集、等宽数字。
• 不对称、以文字为主的主视觉区。主图尺寸较大。
• 动效尊重阅读体验：只使用淡入，绝不转移读者注意力。
• 黑色文字、暖色／象牙白画布、一种强调色。色彩是声音，而非装饰。

基础规则（继承）

../ui-craft/SKILL.md 中的所有规则均适用。本文件会覆盖可调参数的默认值，并在下方补充特定风格的指导。反劣质设计和工艺检查仍须完整执行。

特定风格覆盖项

排版（核心所在）

• 展示字体：标题和引文使用 Playfair Display、Fraunces、Lora 或 Source Serif 4。
• 正文：Alegreya、Source Sans 3、ITC Charter 或其他人文主义风格搭配。不要将 Inter 用作主要正文字体——它看起来像产品界面，而非编辑设计。
• 最多两种字体系列：一种展示字体 + 一种正文字体。
• 标题：使用 text-wrap: balance、font-optical-sizing: auto；大字号的字距接近 0 或略微为负。
• 正文：使用 text-wrap: pretty、line-height: 1.7、font-feature-settings: "liga", "kern"。
• 首字下沉使用 p:first-of-type::first-letter { float: left; font-size: 4.5em; line-height: 0.85; padding: 6px 10px 0 0; font-family: <display>; }。
• 栏目标签、署名使用 font-variant-caps: small-caps 设置小型大写字母。
• 选择性启用 OpenType：所选字体支持时使用 font-feature-settings: "ss01", "cv11"。
• 引文：衬线体、大字号（1.75-2.25em）、一种强调色，上方加短线。

颜色

• 画布：象牙白或暖白——oklch(98% 0.01 85)——不要使用纯 #fff。
• 文字：oklch(18% 0.01 40)，暖调近黑色。
• 限定配色：黑色、象牙白／暖白、一种强调色。仅此而已。
• 强调色用于：首字下沉、引文、行内链接下划线、栏目分隔线。不用于不需要强调色的按钮。

间距与布局

• 阅读栏：正文使用 max-w-[65ch]；主视觉区和主图可以扩展至 max-w-5xl。
• 正文垂直节奏：段落间距至少为行高 × 0.6。
• 不对称主视觉区：左对齐的展示标题 + 署名 + 下方或错位放置的主图。
• 栏目分隔：使用居中装饰或短线，而非全宽分隔线。

动效

• 主视觉区／主图仅在滚动显现时淡入，时长 300-400ms，使用 ease-out。
• 行内链接悬停：下划线偏移增加 1px，颜色切换为强调色，时长 120ms。
• 不使用入场错落、视差效果，或影响阅读流畅度的页面转场。
• 遵循 prefers-reduced-motion——停用所有显现动画。

内容组件

• 署名：小型大写字母、宽字距、次要文字颜色。
• 日期 + 阅读时长：使用等宽数字，并以项目符号 · 分隔。
• 行内图片：占满宽度或超出阅读栏，下方配斜体衬线体说明文字。
• 引用块：左侧使用强调色边框，衬线斜体，max-w-[55ch]。

首先阅读的参考文件

从 ../ui-craft/references/ 加载以下文件：

• typography.md — 此风格的主要参考
• layout.md — 阅读栏、节奏、层级
• color.md — 暖色调配色、强调色使用规范
• copy.md — 编辑语气、标题、空状态

除非相关，否则跳过 dashboard.md、sound.md。

此风格的反模式

• 将 Inter、Geist、DM Sans 用作正文主字体。它们给人的感觉是产品 UI，而不是编辑内容。
• 使用三个字体系列。始终只用一个展示字体和一个正文字体。
• 使用纯白 #fff 画布。让色调更温暖。
• 正文使用紧凑的 leading-tight。阅读行高需要 1.6-1.8。
• 为引文添加彩色背景、在标题上使用渐变文字、在章节分隔线中加入表情符号。
• 滚动触发的交错动画或视差效果——会打断阅读节奏。
• 用卡片网格展示文章——改用带缩略图和简介的堆叠列表。
• 默认使用无衬线展示标题。如果需要无衬线展示字体，用户可能想要的是极简变体。
• 标题全部大写。始终使用句首字母大写的格式（署名使用小型大写字母是例外）。
• 使用厚重胶囊背景的 CTA——优先采用衬线风格的行内下划线链接。