④段整套同步（六节 ＋ P/S/F/J ＋ 模板）＋ open-design 移到技能根
一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
· 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
· 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
· 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
横向流程图每步写清页面／功能／操作／完成判据。
· 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
· 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
· 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。
二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。
三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
This commit is contained in:
admin committed
1 parent
fa0a9026c8
commit
5afeb6b78a
4184 files changed
+326
-70
No files matched your search
@@ -0,0 +1,182 @@
|
||||
# Editorial typography hierarchy craft rules
|
||||
|
||||
Extends `typography.md` + `typography-hierarchy.md`. Defines hierarchy
|
||||
behavior for editorial surfaces: long-form articles, magazine layouts,
|
||||
digital guides, editorial landing pages, and blog posts.
|
||||
|
||||
> Opt in via `od.craft.requires: [typography, typography-hierarchy, typography-hierarchy-editorial]`.
|
||||
|
||||
---
|
||||
|
||||
## What "editorial" means here
|
||||
|
||||
Editorial hierarchy means the pacing is authored the way a print art director
|
||||
paces a spread: entry point, tension, rest, disruption, resolution. The reader
|
||||
is moved through content rather than given a uniform reading surface. SaaS
|
||||
hierarchy is additive — elements stack and each gets its turn. Editorial
|
||||
hierarchy is compositional — elements are weighted against each other and
|
||||
some are deliberately suppressed so others can breathe.
|
||||
|
||||
---
|
||||
|
||||
## Editorial hierarchy principles
|
||||
|
||||
### 1. Dramatic scale jumps
|
||||
|
||||
Editorial type scales are not gradual. The gap between display and body
|
||||
is large — often 3–5× — because the display element is not just a heading,
|
||||
it is a visual event.
|
||||
|
||||
| Level | Typical range | Notes |
|
||||
|---|---|---|
|
||||
| Display / lede | 56–96 px | (editorial override) May intentionally exceed the default `typography.md` display range |
|
||||
| Deck / standfirst | 18–24 px | Large jump down — intentional |
|
||||
| Body | 16–18 px | Close to deck is fine; they're in the same reading register |
|
||||
| Pull quote | 28–40 px | Disrupts body rhythm; treated as a visual break, not a heading |
|
||||
| Caption / label | 11–13 px | Minimal — never competes with body |
|
||||
|
||||
The gap between display and deck is the editorial signature. A small step
|
||||
here reads as SaaS, not editorial.
|
||||
|
||||
### 2. Whitespace carries hierarchy
|
||||
|
||||
Editorial hierarchy is not announced by a heavy heading. It is created by
|
||||
the space that surrounds an element. An article title in a moderate weight
|
||||
surrounded by generous whitespace outranks a bold heading crammed against
|
||||
its content.
|
||||
|
||||
Rules:
|
||||
- Above-the-fold display element: minimum 2× the line-height in space above
|
||||
and below before body begins.
|
||||
- Pull quotes: full column margin on both sides, or break the grid entirely.
|
||||
- Section breaks: use space as the default hierarchy signal. Separators (rules, dingbats,
|
||||
folios, chapter marks) are allowed only when they reinforce publication identity or
|
||||
distinguish unrelated content. For RTL layouts, mirror or adapt separators using
|
||||
logical directions (inline-start, inline-end) rather than physical (left, right).
|
||||
- Caption clusters: tighter internal spacing, larger gap from the body above.
|
||||
|
||||
### 3. Restrained bold
|
||||
|
||||
Editorial systems use weight sparingly. The display element is often set in
|
||||
a light or regular weight — hierarchy is carried by scale and space, not mass.
|
||||
|
||||
Bold in editorial context means: this word/phrase matters beyond the sentence.
|
||||
It is not used for section labels, UI chrome, or navigation. One to two bold
|
||||
phrases per 400 words of body copy is a working upper bound.
|
||||
|
||||
If everything important is bold, nothing is.
|
||||
|
||||
### 4. Display tracking
|
||||
|
||||
Negative tracking at large sizes is mandatory for Latin display. At editorial display sizes
|
||||
(56 px+), tracking should be `-0.02em` to `-0.05em` (editorial override;
|
||||
see `typography.md` §letter-spacing for the default range). Light display
|
||||
weights may go tighter within this range.
|
||||
|
||||
**Script-aware exception:** For Arabic, Persian, and Urdu (cursive-joining scripts),
|
||||
keep tracking at `0` — negative letter-spacing breaks cursive joining (see `rtl-and-bidi`).
|
||||
Hebrew uses logical spacing rules but is not cursive-joining; consult `rtl-and-bidi`
|
||||
for right-to-left baseline adjustments. Hierarchy in these scripts is carried by size,
|
||||
weight, and whitespace, not tracking.
|
||||
|
||||
---
|
||||
|
||||
### 5. Pull quotes as rhythm disruption
|
||||
|
||||
A pull quote is not a blockquote. It is a visual interrupt.
|
||||
|
||||
| Property | Behavior |
|
||||
|---|---|
|
||||
| Scale | 28–40 px — above body, below display |
|
||||
| Weight | Regular or light — never bold |
|
||||
| Tracking | Slightly negative (`-0.01em`) or zero |
|
||||
| Alignment | Break from body column — full width, or offset inline-start/inline-end |
|
||||
| Spacing | Large above and below — equal to or greater than a section break |
|
||||
| Color | May use `var(--accent)` as the only accent use on the page |
|
||||
|
||||
Pull quotes placed at regular intervals destroy their effect. One per
|
||||
long-form article is usually correct. Two is a maximum.
|
||||
|
||||
### 6. Body measure and reading rhythm
|
||||
|
||||
Long-form body copy: 60–70 ch line length. Tighter than the `typography.md`
|
||||
max because editorial reading is sustained, not scanning.
|
||||
|
||||
Line height: `1.6`–`1.7` for serif body. Slightly more generous than the
|
||||
universal rule because editorial bodies are set at a reading size, not a UI
|
||||
size.
|
||||
|
||||
Do not justify. Use `text-align: start` with a ragged inline-end edge — the
|
||||
natural setting for editorial body copy on screen.
|
||||
|
||||
### 7. Asymmetrical rhythm
|
||||
|
||||
Uniform section spacing reads as a template. Editorial pacing alternates
|
||||
between compression and expansion:
|
||||
|
||||
- Dense section → spacious section → medium section.
|
||||
- A tightly spaced image caption cluster immediately after a generous
|
||||
body paragraph creates productive tension.
|
||||
- The final section before a pull quote should tighten; after it, release.
|
||||
|
||||
---
|
||||
|
||||
## Editorial hierarchy table
|
||||
|
||||
| Element | Scale | Weight | Tracking | Leading | Spacing role |
|
||||
|---|---|---|---|---|---|
|
||||
| Display headline | 56–96 px | Light or regular | `-0.02em` to `-0.05em` | `1.0`–`1.1` | Event — generous above/below |
|
||||
| Deck / standfirst | 18–24 px | Regular | `0` | `1.4`–`1.5` | Transitional — moderate gap below |
|
||||
| Byline / dateline | 12–14 px | Regular or medium | `0.02em`–`0.04em` | `1.5` | Recedes — tight gap below |
|
||||
| Body | 16–18 px | Regular | `0` | `1.6`–`1.7` | Baseline — rhythm carrier |
|
||||
| Pull quote | 28–40 px | Regular or light | `-0.01em` (Latin only; 0 for joining scripts) | `1.2`–`1.3` | Interrupt — large above/below |
|
||||
| Image caption | 12–13 px | Regular | `0.01em` | `1.5` | Recedes — tight cluster |
|
||||
| Section label | 11–12 px | Medium | `0.06em`–`0.1em` (if caps) | `1.5` | Wayfinding only |
|
||||
|
||||
---
|
||||
|
||||
## Anti-patterns
|
||||
|
||||
- **Bold display headline** — editorial display is usually light or regular.
|
||||
Bold display reads as billboard advertising. If the design system's display
|
||||
weight is heavy, either use the regular cut or revisit the choice.
|
||||
- **Uniform section padding** — every section has the same gap. No pacing.
|
||||
The page reads as a list of content blocks.
|
||||
- **Pull quote styled as a callout box** — border-left, background tint,
|
||||
or card treatment. A pull quote is typographic. It does not need a container.
|
||||
- **Deck set at body size** — the gap between headline and deck must be large
|
||||
enough to read as a scale event. 18 px minimum for a deck below a 56 px+
|
||||
headline.
|
||||
- **Heading for every section** — editorial long-form does not require
|
||||
a heading at every content shift. Space and pacing are allowed to do the
|
||||
work. (guidance)
|
||||
- **Positive tracking on display** — wide-tracked display headlines read as
|
||||
a branding exercise. Tighten them.
|
||||
- **UI chrome in the reading column** — buttons, tags, chip badges interrupting
|
||||
prose flow inside the body text column. Functional controls (inline code-copy,
|
||||
API anchors, callout toggles) may live inside code and API blocks, but decorative
|
||||
badges and UI chrome should live outside the reading measure to keep prose focus clear.
|
||||
|
||||
---
|
||||
|
||||
## Lint
|
||||
|
||||
- [ ] Display headline is light or regular weight unless the design system
|
||||
specifies otherwise.
|
||||
- [ ] Display tracking is within `-0.02em` to `-0.05em` at 56 px+ (Latin only;
|
||||
0 for Arabic/Persian/Urdu joining scripts; see `rtl-and-bidi` for Hebrew). (guidance)
|
||||
- [ ] Pull-quote tracking: `-0.01em` (Latin only; 0 for joining scripts). (guidance)
|
||||
- [ ] Gap between display and deck: display/deck ratio ≥ 1.5× or absolute px delta
|
||||
≥ 24 px to read as a scale event. (guidance)
|
||||
- [ ] Body line height is `1.6`–`1.7`.
|
||||
- [ ] Body measure is 60–70 ch.
|
||||
- [ ] Pull quote, if present, breaks the body column (full width or offset).
|
||||
- [ ] No more than 2 pull quotes in a single article surface. (long-form only)
|
||||
- [ ] Section spacing alternates — one gap ≥ 1.5× baseline rhythm while another
|
||||
is ≤ 1.2×. (long-form only — guidance)
|
||||
- [ ] Bold used ≤ 2 times per 400 words in body copy. (long-form only)
|
||||
- [ ] `var(--accent)` used ≤ 2 times on the full editorial surface (see `color.md` §accent discipline).
|
||||
- [ ] Section separators (rules, dingbats) are used only when they
|
||||
reinforce publication identity or clearly mark unrelated-content boundaries;
|
||||
they must not be used as a hierarchy fallback. (guidance)
|
||||
- [ ] Pull quote has no background, border, or container treatment.
|
||||
Reference in new issue
Block a user