# Editorial Longform 잡지 기사를 웹으로 옮긴 롱폼 읽기 스타일 — 680px 세리프 단일 컬럼, 드롭캡, 컬럼을 깨고 나오는 풀퀘이트와 이미지. - taxonomy: print-editorial · editorial-magazine, longform, serif-body, drop-cap, warm-paper, reading-first · complexity=medium - page types: editorial, landing, portfolio, docs - best for: 긴 글을 끝까지 읽게 만들어야 하는 기사·에세이·블로그, 매거진·저널·뉴스레터 아카이브, 글이 주인공인 개인 사이트·작가 포트폴리오 - avoid for: 데이터 밀도가 높은 대시보드·관리 도구, 카드 그리드가 필요한 커머스·갤러리, CTA 중심의 SaaS 랜딩 - provenance: authored (design-diversity 팩 'web-editorial-longform' (MIT) 각색) — confidence: colors=manual, typography=manual, spacing=manual, motion=manual, layout=manual ## Design rules # Editorial Longform ## Overview A magazine feature article translated to the web. One narrow serif text column (680px, a 60–68 character measure) on warm paper white, oversized Playfair Display headlines, a drop cap opening the piece, and pull-quotes and images that deliberately break out of the column. There are no cards, no grids, no shadows — only the rhythm of reading. The test of success: scrolling through a long text feels pleasurable. ## Colors & Roles Warm paper `background` (oklch 0.985/0.004/91) with near-black ink `foreground`. `muted-foreground` is a warm greige reserved for bylines, captions, and dates. Exactly one chromatic `accent`: a brick red (oklch 0.47/0.14/31) used only for links, the drop cap, and section-divider glyphs — keep it under 5% of the page area. Hairline `border` (oklch 0.882/0.016/90) draws every rule. No gradients, ever. Light mode is canonical (measured from the source pack's tokens); dark mode is a warm dark-paper adaptation that keeps the same hues and reading-first spirit. ## Typography Rules Three families, strict roles: - **Body — Source Serif 4** (`font-serif`): 1.25rem (20px, deliberately large), weight 400, line-height 1.75. Body is *always* serif. - **Display — Playfair Display** (`font-display`): H1 `clamp(2.5rem, 5vw, 4rem)`, weight 700, line-height 1.1, letter-spacing −0.01em; H2 1.75rem. Pull-quotes are Playfair 1.6rem weight-400 *italic*. - **Meta — Inter** (`font-sans`): captions, bylines, category labels only — 0.8125rem, uppercase, letter-spacing 0.04em. The drop cap is the article's opening gesture: first letter of the first paragraph, floated left, 4.2rem, line-height 0.85, accent color, spanning three lines of body text. ## Layout Principles No grid. A single centered text column fixed at **680px** — never widen past 760px or the measure breaks readability. Page max-width is 1100px; only images and pull-quotes may use it, breaking out of the text column to **1000px or full-bleed**. Below 720px the column becomes 100% width with 20px side padding. Vertical rhythm is airy: 64px between sections/paragraph groups, 1.5em between paragraphs. Everything outside the column stays empty — that emptiness is the design. ## Depth & Elevation None. No shadows of any kind; the page is flat like a printed sheet. Separation is done with 1px hairline rules or a centered accent glyph (`✦` or `—`) as a section divider. ## Shapes Border-radius 0 everywhere — images, rules, buttons, inputs. Images are preferably black-and-white or desaturated, always sharp-cornered. ## Component Stylings - **Hero**: paper background; small uppercase category label (Inter, accent) → left-aligned oversized Playfair H1 → byline/date meta in muted Inter → full-bleed lead image below. - **Drop cap**: floated first letter, 4.2rem / line-height 0.85, accent color, 3-line height. - **Pull-quote**: Playfair italic 1.6rem, pulled wider than the 680px column via negative margins; optional hairlines above/below. - **Figure**: breaks the column to 1000px or full-bleed; small uppercase Inter caption beneath. - **Link**: accent color with underline; on hover the underline thickens 1px → 2px over 150ms. - **Footer**: no color inversion — hairline top rule, centered glyph divider, uppercase Inter meta, a "next article" link. ## Motion Subtle and reading-safe. Text blocks fade in on scroll entry (`opacity 0→1` + `translateY(12px)`, 500ms ease-out). Link underline thickening at 150ms. An optional thin accent reading-progress bar at the top. No parallax, no scroll-jacking, nothing that interrupts reading. ## Do's and Don'ts **Do:** keep body copy serif at 1.25rem/1.75 within the 680px measure; open with a drop cap; let only images and pull-quotes break the column; build hierarchy purely from serif type and vertical space. **Don't:** widen the text column past 760px; set body in sans-serif (Inter is meta-only); use card grids or repeated 3-column boxes; introduce a second accent color; use rounded corners, shadows, gradients, emoji, or blob shapes; build a centered SaaS hero with two giant buttons. ## Responsive Behavior Under 720px the text column goes full-width with 20px padding; breakout images become full-bleed naturally. The Playfair display headline scales via `clamp()`. Pull-quote negative margins collapse to the column width on small screens. Reading rhythm (large serif body, 1.75 leading) is preserved at every size. ## Agent Prompt Guide > Build this in the 'Editorial Longform' style: a magazine feature article on warm paper white with near-black ink and a single brick-red accent under 5% of the page. Body copy is Source Serif 4 at 1.25rem / 1.75 line-height in a centered 680px column; headlines are oversized Playfair Display; Inter appears only in uppercase meta labels. Open with a floated accent-colored drop cap, break the column with italic pull-quotes and 1000px/full-bleed images, divide sections with hairlines or a centered glyph, and use zero radius, zero shadows, no cards, no grids. ## Known Gaps / Confidence Adapted from the MIT-licensed design-diversity pack `web-editorial-longform` (an authored curated spec, not measured from a live site) — all confidence fields are `manual`. Light-mode colors trace directly to the pack's tokens.json; the card/secondary/muted tonal steps and the entire dark mode are derived adaptations (warm dark paper, same hues). All three fonts are Google Fonts, so no commercial-font substitution is needed. ## Tokens (theme.css — use these values verbatim, do not re-derive) ```css /* Editorial Longform — theme.css (generated, do not edit) */ :root { --radius: 0px; --radius-selector: 0px; --radius-field: 0px; --font-sans: 'Inter', sans-serif; --font-serif: 'Source Serif 4', Georgia, serif; --font-display: 'Playfair Display', Georgia, serif; --spacing: 8px; --shadow: 0px 1px 2px 0px color-mix(in oklab, oklch(0 0 0) 0%, transparent); --ks-display-weight: 700; --ks-display-tracking: -0.01em; --background: oklch(0.985 0.004 91.4); --foreground: oklch(0.218 0 0); --card: oklch(0.985 0.004 91.4); --card-foreground: oklch(0.218 0 0); --popover: oklch(0.985 0.004 91.4); --popover-foreground: oklch(0.218 0 0); --primary: oklch(0.218 0 0); --primary-foreground: oklch(0.985 0.004 91.4); --secondary: oklch(0.945 0.010 91); --secondary-foreground: oklch(0.28 0.004 91); --muted: oklch(0.955 0.008 91); --muted-foreground: oklch(0.617 0.020 89.4); --accent: oklch(0.470 0.140 31.1); --accent-foreground: oklch(0.985 0.004 91.4); --destructive: oklch(0.470 0.140 31.1); --destructive-foreground: oklch(0.985 0.004 91.4); --border: oklch(0.882 0.016 90.2); --input: oklch(0.882 0.016 90.2); --ring: oklch(0.218 0 0); --chart-1: oklch(0.218 0 0); --chart-2: oklch(0.470 0.140 31.1); --chart-3: oklch(0.617 0.020 89.4); --chart-4: oklch(0.882 0.016 90.2); --chart-5: oklch(0.42 0.010 90); } .dark { --background: oklch(0.215 0.008 85); --foreground: oklch(0.93 0.010 91); --card: oklch(0.24 0.008 85); --card-foreground: oklch(0.93 0.010 91); --popover: oklch(0.24 0.008 85); --popover-foreground: oklch(0.93 0.010 91); --primary: oklch(0.93 0.010 91); --primary-foreground: oklch(0.215 0.008 85); --secondary: oklch(0.28 0.010 85); --secondary-foreground: oklch(0.87 0.012 91); --muted: oklch(0.27 0.010 85); --muted-foreground: oklch(0.68 0.018 89); --accent: oklch(0.62 0.135 31.1); --accent-foreground: oklch(0.215 0.008 85); --destructive: oklch(0.62 0.135 31.1); --destructive-foreground: oklch(0.215 0.008 85); --border: oklch(0.32 0.012 87); --input: oklch(0.32 0.012 87); --ring: oklch(0.93 0.010 91); --chart-1: oklch(0.93 0.010 91); --chart-2: oklch(0.62 0.135 31.1); --chart-3: oklch(0.68 0.018 89); --chart-4: oklch(0.42 0.012 87); --chart-5: oklch(0.80 0.014 90); } ``` ## Golden example (exemplar.html — match this structure and token usage) ```html

Field Notes — Typography

The quiet luxury of a narrow column

By A. Reader  ·  July 12, 2026  ·  12 min read

When the measure stays between sixty and sixty-eight characters, the eye returns home without effort. Everything in this style serves that single promise: the paper-warm background, the twenty-pixel serif, the generous leading that lets each line breathe.

Nothing competes with the text. There are no cards, no grids, no shadows — only one brick-red accent allowed to punctuate the page, and it earns its place.

“A pull-quote is permission to pause — the one voice loud enough to interrupt the column.”

Then the column resumes, unhurried, exactly where it left off. Sections close not with a border or a box but with a single centered glyph, set in the accent red.

✦

``` ## Apply - shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/editorial-longform.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only. - other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references. - single HTML/artifact: embed the theme.css block in a `