/ui-craft-editorial

name: ui-craft-editorial
description: "Editorial / magazine / long-form / Medium / Substack / content-heavy UIs. Locked knobs: CRAFT=9, MOTION=4, DENSITY=3. Serif display + humanist body, wide reading column, drop caps, OpenType. Trigger on: editorial, magazine, long-form, blog, Medium-like, Substack-like."
argument-hint: "[action: build|review|polish] [target]"

UI Craft — Editorial

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.

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.

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.

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]`.

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`, `sound.md` unless relevant.

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.