ui-craft-editorial

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

UI Craft — Editorial

UI Craft — 编辑类风格

Pre-committed editorial style: magazine, long-form, content-first. Typography carries the hierarchy; layout serves the reading experience.

预设编辑类风格：杂志风、长文优先、内容至上。排版构建层级结构；布局服务于阅读体验。

Knobs (locked)

锁定参数

CRAFT_LEVEL = 9 — editorial typography only works at high refinement; Polish Pass mandatory.
MOTION_INTENSITY = 4 — reading-aware: fade on reveal, link hovers, no entrance stagger.
VISUAL_DENSITY = 3 — wide reading column, generous vertical rhythm, 1 item per row for features.

Do not re-ask these in Discovery. Confirm accent + serif/sans pairing only.

CRAFT_LEVEL = 9 — 编辑类排版仅在高精细度下生效；必须进行打磨优化。
MOTION_INTENSITY = 4 — 适配阅读需求：仅在内容显示时淡入、链接悬停效果，无入场 stagger 动画。
VISUAL_DENSITY = 3 — 宽阅读栏、宽松垂直间距，功能区每行仅展示1个元素。

在需求调研阶段无需询问上述参数，仅需确认强调色及衬线/无衬线字体搭配即可。

Style anchors

风格锚点

Serif display for headings + humanist body sans/serif for reading.
Baseline grid feel.
```
leading-relaxed
```
(1.7) on body.
Wide reading column
```
max-w-[65ch]
```
. Generous vertical rhythm.
Accent used for emphasis — pull quotes, drop caps, link underlines — not decoration.
OpenType features ON: small caps, ligatures, stylistic sets, tabular figures where relevant.
Asymmetric, text-heavy heroes. Featured image large.
Motion respects reading: fades only, never pulls the eye away.
Black text, warm/ivory canvas, one accent. Color is a voice, not a decoration.

标题采用Serif显示字体，正文采用人文主义sans/serif字体以适配阅读。
遵循基线网格（baseline grid）。正文使用
```
leading-relaxed
```
（行高1.7）。
宽阅读栏设置为
```
max-w-[65ch]
```
。垂直间距宽松。
强调色仅用于突出重点——如引用块、首字下沉、链接下划线——而非装饰。
开启OpenType特性：小型大写字母、连字、样式集、表格数字（按需启用）。
非对称、文本主导的首屏区域。特色图片尺寸较大。
动效适配阅读：仅使用淡入效果，避免分散读者注意力。
黑色文本、暖调/米白色背景、一种强调色。色彩是表达工具，而非装饰。

Base rules (inherited)

基础规则（继承）

All rules in

../ui-craft/SKILL.md

apply. This file overrides knob defaults and adds style-specific guidance below. The anti-slop and craft tests still apply in full.

../ui-craft/SKILL.md

中的所有规则均适用。本文件覆盖默认参数值，并添加以下风格专属指引。严格遵守防草率规则及精细度测试要求。

Style-specific overrides

风格专属覆盖规则

Typography (the whole point)

Display: Playfair Display, Fraunces, Lora, or Source Serif 4 for headings and pull quotes.
Body: Alegreya, Source Sans 3, ITC Charter, or a humanist pairing. Do NOT use Inter as primary body — it reads as product UI, not editorial.
Max two families: one display + one body.
Headings:
```
text-wrap: balance
```
,
```
font-optical-sizing: auto
```
, tracking near 0 or slightly negative on large sizes.

Body:

text-wrap: pretty

line-height: 1.7

font-feature-settings: "liga", "kern"

Drop caps via

p:first-of-type::first-letter { float: left; font-size: 4.5em; line-height: 0.85; padding: 6px 10px 0 0; font-family: <display>; }

Small caps via
```
font-variant-caps: small-caps
```
for section labels, bylines.
Opt-in OpenType:
```
font-feature-settings: "ss01", "cv11"
```
when the chosen font supports them.
Pull quotes: serif, large (1.75-2.25em), one accent color, short rule above.

Color

Canvas: ivory or warm white —
```
oklch(98% 0.01 85)
```
— not pure
```
#fff
```
.
Text:
```
oklch(18% 0.01 40)
```
warm near-black.
Restricted palette: black, ivory/warm white, ONE accent. That's it.
Accent applied to: drop cap, pull quote, inline link underline, section rule. Not buttons that don't need it.

Spacing & layout

Reading column:
```
max-w-[65ch]
```
for body; hero and featured image can break out to
```
max-w-5xl
```
.
Vertical rhythm on body: paragraph spacing = line-height × 0.6 minimum.
Asymmetric heroes: left-aligned display headline + byline + featured image below or offset.
Section breaks: centered ornament or a short rule, not a full-width divider.

Motion

Fade on scroll reveal for hero/featured image only, 300-400ms ease-out.
Inline link hover: underline-offset grows 1px, color shifts to accent, 120ms.
No entrance stagger, no parallax, no page transitions that fight the reading flow.
Honor
```
prefers-reduced-motion
```
— cut all reveals.

Content components

Byline: small caps, tracking-wide, secondary text color.
Dateline + read time: tabular-nums, separated by a bullet
```
·
```
.
Inline images: full-width or breakout beyond column, with italic serif caption underneath.
Blockquote: left border in accent, serif italic,
```
max-w-[55ch]
```
.

排版（核心要点）

显示字体：标题及引用块使用Playfair Display、Fraunces、Lora或Source Serif 4。
正文字体：Alegreya、Source Sans 3、ITC Charter或人文主义搭配字体。请勿将Inter作为主要正文字体——它更偏向产品UI风格，而非编辑类风格。
最多使用两种字体：一种显示字体+一种正文字体。
标题：设置
```
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"
```
。
引用块：使用Serif字体、大尺寸（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，缓出曲线。
内联链接悬停效果：下划线偏移增加1px、颜色切换为强调色，时长120ms。
无入场 stagger 动画、无视差效果、无干扰阅读流程的页面过渡动画。
遵循
```
prefers-reduced-motion
```
设置——禁用所有淡入效果。

内容组件

署名：小型大写字母、宽字距、次要文本颜色。
日期+阅读时长：使用表格数字，以圆点
```
·
```
分隔。
内联图片：全宽或突破栏宽，下方搭配斜体Serif说明文字。
块引用：左侧添加强调色边框、Serif斜体、
```
max-w-[55ch]
```
。

Reference files to read first

需优先阅读的参考文件

Load these from

../ui-craft/references/

```
typography.md
```
— the primary reference for this style
```
layout.md
```
— reading column, rhythm, hierarchy
```
color.md
```
— warm palette, accent discipline
```
copy.md
```
— editorial voice, headings, empty states

Skip

dashboard.md

performance.md

(standard web perf is fine),

sound.md

unless relevant.

从

../ui-craft/references/

加载以下文件：

```
typography.md
```
— 本风格的核心参考文件
```
layout.md
```
— 阅读栏、间距、层级结构
```
color.md
```
— 暖调调色板、强调色规范
```
copy.md
```
— 编辑类语气、标题、空状态

无需阅读

dashboard.md

、

performance.md

（标准Web性能即可）、

sound.md

，除非相关。

Anti-patterns for THIS style

本风格的反模式

Inter, Geist, DM Sans as primary body. They signal product UI, not editorial.
Three font families. Always one display + one body.
Pure
```
#fff
```
canvas. Warm it.
Tight
```
leading-tight
```
on body copy. Reading needs 1.6-1.8.
Colored pull quote backgrounds, gradient text on headlines, emoji in section rules.
Scroll-triggered stagger or parallax — breaks reading flow.
Card grids for articles — use stacked list with thumbnail + dek.
Sans-serif display headlines by default. If you need sans display, the user probably wants minimal variant.
Uppercase headlines. Sentence case, always (small caps for bylines is the exception).
CTAs with heavy pill backgrounds — prefer inline underlined links in the serif voice.

将Inter、Geist、DM Sans作为主要正文字体。它们偏向产品UI风格，而非编辑类。
使用三种字体。始终保持一种显示字体+一种正文字体。
使用纯
```
#fff
```
背景。需调整为暖调。
正文使用紧凑行高（
```
leading-tight
```
）。阅读需1.6-1.8的行高。
引用块使用彩色背景、标题使用渐变文字、章节分隔线使用表情符号。
滚动触发的stagger或视差动画——会打断阅读流程。
使用卡片网格展示文章——改用缩略图+摘要的堆叠列表。
默认使用无衬线（sans-serif）标题字体。若需使用无衬线标题，用户可能更倾向于极简变体。
标题使用全大写。始终采用句首大写（署名使用小型大写字母除外）。
按钮使用厚重胶囊形背景——优先采用Serif风格的内联下划线链接。