# Editorial Magazine Deck 펄 화이트 지면 위 비대칭 다단 칼럼, 큰 세리프 헤드라인과 드롭캡, 풀컷 사진이 교차하는 고급 잡지 스프레드 프레젠테이션 스타일. - taxonomy: print-editorial · editorial-magazine, magazine-spread, serif-display, drop-cap, asymmetric-columns, hairline-rules, spot-color, print-editorial · complexity=medium - page types: presentation - best for: 브랜드 매거진·룩북형 스토리텔링 덱, 문화·라이프스타일·패션 발표 덱, 긴 산문 내러티브가 주인공인 에세이형 프레젠테이션 - avoid for: 숫자·표가 빽빽한 데이터 대시보드 덱, 전략 컨설팅·경영진 보고형 액션타이틀 덱, 화려한 모션·3D가 필요한 제품 런칭 키노트 - provenance: authored (design-diversity 팩 'ppt-editorial-magazine' (MIT) 각색) — confidence: colors=manual, typography=manual, spacing=manual, motion=manual, layout=manual ## Design rules # Editorial Magazine Deck ## Overview The editing craft of a high-end print magazine, moved onto a 16:9 deck. Slides are not single cards — they read like a **magazine spread**: body copy flows in asymmetric multi-column grids, a large contrasty serif headline breaks across column boundaries, and the first paragraph opens with a three-line drop cap. A full-cut photograph owns one column top-to-bottom while prose wraps the next. Division is done only with fine hairline rules; emphasis is done only with a single deep-vermilion spot color. Serif is the identity; sans-serif appears only in kickers and captions. "It looks like a spread, not a slide" is the whole point. ## Colors & Roles Canonical mode is **light**: `background` is warm pearl white (#FBFAF7) on every page. Type and data live on a warm neutral ramp traced from the pack — ink black (`foreground`/`primary`, #1C1B19) for headlines and body, mid-gray (`muted-foreground`, #8A8782) for captions and secondary text, light warm gray (`border`, #C9C5BC) for hairlines and the de-emphasized bar. `primary` is ink, not the accent — hierarchy is the job of typography and size, never color. The one chromatic voice is deep vermilion (`accent`, #A8312A → oklch 0.493 0.156 27.7): drop cap, kicker, pull-quote mark, one emphasized word, one chart bar — never more than a single spot per surface. `secondary`/`muted` are warm paper tints (#F2F0EA/#EDEAE3) derived from the page color. `destructive` maps to vermilion because the palette carries no separate red. `chart-1..5` are an ink-to-paper ramp with vermilion only at `chart-2`; two-series charts separate by lightness (ink + mid-gray), the emphasized element is the only saturated one. The dark map is an authored "warm-paper dark" adaptation (warm-charcoal page, paper foreground, lifted vermilion) and is not part of the original spec. ## Typography Rules Serif carries the deck. Display: Playfair Display (Georgia / Noto Serif KR fallback) for headlines. Body: Source Serif Pro (Source Serif 4 on Google Fonts). Sans (Arial) is reserved for kickers and captions as deliberate contrast. Deck type steps, in pt on a 13.33in × 7.5in canvas: headline 40pt / bold / −0.01em / 1.1, spanning column boundaries; subhead 22pt italic; body 17pt / 1.45, at most 12 lines per column, prose not bullets; drop cap 54pt bold vermilion spanning the first three body lines; pull quote 24pt italic with a vermilion quote mark; kicker 11pt bold uppercase +0.12em vermilion; caption 10pt italic mid-gray. Chart value labels are 13pt Source Serif Pro with tabular figures (`font-variant-numeric: tabular-nums`); KPI hero numbers 40pt bold ink tabular. Korean uses Noto Serif KR. ## Layout Principles 16:9 canvas, 13.33×7.5in. A **multi-column grid** splits the body into 2 columns (5:7 asymmetric width ratio) or 3, with 0.3in gutters, 0.7in side margins and 0.6in top/bottom. The headline breaks past column edges to occupy the full top width or the left two-thirds. A full-cut rectangular photo fills one column edge-to-edge (including the vertical margins) while body prose flows into the other. Composition is deliberately asymmetric — never symmetric or center-aligned. Page number sits bottom-outer in 10pt serif; chart/data slides add a source caption. ## Slide Anatomy - **Cover / title slide**: pearl-white page, top kicker, a two-line 40pt serif headline, then a full-width full-cut photo beneath; page number bottom-outer. No bullets. - **Content spread (the workhorse)**: full-width or left-2/3 headline on top, then a 5:7 two-column body — a full-cut photo in the narrow (5) column, prose in the wide (7) column opening with a drop cap, columns split by a hairline. - **Chart slide**: one SVG magazine-infographic inset in the column flow (~4.5in narrow / ~6.2in wide, 2.4–3.2in tall), bracketed above and below by 0.5pt hairline rules; ink-black bars with a single vermilion emphasis, direct serif tabular value labels, source in 10pt Arial italic. - **Process / timeline slide**: full-width headline over a horizontal 4–5 step process (square hairline nodes, serif number badges, ink connectors with 5px arrowheads, one vermilion step) or a horizontal timeline (ink axis, circle markers, current point vermilion). - **Matrix slide**: narrow column holds a full-cut photo, wide column a ~4.2in 2×2 matrix — ink cross-axis, four uppercase vermilion axis labels, neutral data points with one vermilion key point. ## Depth & Elevation Completely flat. No shadows, gradients, glass, noise, or blur — ever. Photos are borderless rectangles. Containment and division are done with 0.5pt light-gray hairline rules; prominence is done with the single vermilion element or size/weight. ## Shapes Zero border-radius everywhere — photos, chart bars, diagram nodes, badges. Hairline rules are 0.5pt light gray; ink lines (chart baseline, connectors, timeline axis) are 0.5–0.75pt ink. Diagram number badges are 0.3in circles with a serif Playfair digit; the one highlighted badge is vermilion-filled with a white digit. No icons, no clipart. ## Component Stylings - **Headline block**: uppercase vermilion kicker above a 40pt Playfair bold headline that breaks past column edges; 22pt italic subhead optional. Left-aligned. - **Body column**: 17pt Source Serif prose in 5:7 (or 3-up) columns, max 12 lines/column, first paragraph opened by a 54pt bold vermilion drop cap over three lines; columns split by 0.5pt hairlines. Prose, never bullet lists. - **Photo**: full-cut rectangular, fills a column edge-to-edge including vertical margins; no border, radius, or shadow; body wraps the adjacent column. - **Pull quote**: 24pt italic larger than body, with a leading vermilion quote mark, aligned to a column. - **Charts**: ink-monochrome data-ink minimalism — no legend, gridlines, chart border, or y-axis; 0.75pt ink x-baseline only, baseline at 0. One vermilion bar/segment, the rest ink or mid-gray lightness. Bar:gap = 3:2, square corners. Direct 13pt serif tabular value labels; axis/caption/source in 10pt Arial italic. Bracketed by hairline rules. - **Diagram**: one language — square (radius 0) hairline nodes with no fill, 0.5pt ink straight connectors with 5px triangular heads, serif number badges; one vermilion element only. Process, timeline, comparison, 2×2 matrix, and funnel all derive from it. - **KPI card**: borderless, bracketed by 0.5pt hairline rules — 11pt uppercase vermilion kicker, 40pt Playfair bold ink value (tabular), 10pt Arial italic ▲/▼ delta (arrow and text both mid-gray, never color); 3–4 per grid, separated by vertical hairlines. - **Footer / pagination**: 10pt serif page number bottom-outer; 10pt Arial italic "Source: … (unit)" caption on chart/data slides. ## Motion Effectively none. Slide transition is a single 0.4s page-turn fade — no morph, fly-in, or parallax. The static authority of the printed page is the identity. ## Do's and Don'ts **Do:** flow body as asymmetric-column prose (5:7); open with a big serif headline breaking column edges and a three-line drop cap; divide with 0.5pt hairlines only; use one full-cut borderless photo per spread; keep the single vermilion spot for drop cap / kicker / pull-quote mark / one word / one chart bar; render charts as ink-monochrome magazine infographics with direct serif tabular labels. **Don't:** set headlines or body in sans-serif (sans is kicker/caption only); center or symmetrically align; round corners or add shadows, boxes, or gradients; fill body with bullet lists; use more than one accent color or color body text; use emoji, clipart, or stock icons; regress charts to 3D, gridlines, legend boxes, truncated axes, rounded or div-block bars, or rainbow fills. ## Agent Prompt Guide > Build this presentation in the 'Editorial Magazine Deck' style: 16:9 slides that read like a magazine spread. Warm pearl-white page, ink-black serif body (Source Serif Pro, 17pt) in asymmetric 2–3 column grids (5:7 ratio). Each slide opens with a big Playfair Display headline (40pt bold) breaking past column edges over an uppercase vermilion kicker; the first paragraph opens with a 54pt bold vermilion drop cap over three lines. Full-cut borderless photos fill one column top-to-bottom while prose wraps the next. The only accent is deep vermilion (#A8312A), used once per surface; everything else is ink, mid-gray, and light-gray hairlines. Division is 0.5pt hairline rules only. Charts and diagrams are ink-monochrome magazine infographics — no gridlines, no legend, no chart border, x-baseline only at 0, direct 13pt serif tabular labels, 10pt Arial italic captions. Sans-serif is kickers and captions only. Zero radius, zero shadows, no gradients; transition is a 0.4s fade. ## Known Gaps / Confidence Adapted from the MIT-licensed design-diversity pack `ppt-editorial-magazine` — an authored spec, not an extraction from a live deck, so all confidence fields are `manual`. A ppt-track entry: the shadcn token mapping is a web-rendering convenience (pt-based type steps, 16:9 frames), and the dark color map is an authored warm-paper-dark adaptation absent from the source pack. Provenance care: the pack ships design spec and tokens, not original photo/font assets — do not redistribute reference imagery or commercial fonts; Playfair Display, Source Serif 4, and Noto Serif KR are the Google Fonts fallbacks. ## Tokens (theme.css — use these values verbatim, do not re-derive) ```css /* Editorial Magazine Deck — theme.css (generated, do not edit) */ :root { --radius: 0px; --radius-selector: 0px; --radius-field: 0px; --font-sans: 'Arial', 'Helvetica Neue', 'Pretendard', 'Noto Sans KR', sans-serif; --font-serif: 'Source Serif 4', 'Source Serif Pro', 'Georgia', 'Noto Serif KR', serif; --font-display: 'Playfair Display', 'Georgia', 'Noto Serif KR', serif; --spacing: 8px; --shadow: 0px 1px 2px 0px color-mix(in oklab, oklch(0 0 0) 0%, transparent); --background: oklch(0.985 0.004 91.4); --foreground: oklch(0.222 0.004 84.6); --card: oklch(0.985 0.004 91.4); --card-foreground: oklch(0.222 0.004 84.6); --popover: oklch(0.985 0.004 91.4); --popover-foreground: oklch(0.222 0.004 84.6); --primary: oklch(0.222 0.004 84.6); --primary-foreground: oklch(0.985 0.004 91.4); --secondary: oklch(0.955 0.008 91.5); --secondary-foreground: oklch(0.222 0.004 84.6); --muted: oklch(0.937 0.010 87.5); --muted-foreground: oklch(0.624 0.008 80.7); --accent: oklch(0.493 0.156 27.7); --accent-foreground: oklch(0.985 0.004 91.4); --destructive: oklch(0.493 0.156 27.7); --destructive-foreground: oklch(0.985 0.004 91.4); --border: oklch(0.824 0.013 86.8); --input: oklch(0.824 0.013 86.8); --ring: oklch(0.222 0.004 84.6); --chart-1: oklch(0.222 0.004 84.6); --chart-2: oklch(0.493 0.156 27.7); --chart-3: oklch(0.624 0.008 80.7); --chart-4: oklch(0.824 0.013 86.8); --chart-5: oklch(0.529 0.009 80.7); } .dark { --background: oklch(0.201 0.004 84.6); --foreground: oklch(0.937 0.010 87.5); --card: oklch(0.236 0.006 78.2); --card-foreground: oklch(0.937 0.010 87.5); --popover: oklch(0.236 0.006 78.2); --popover-foreground: oklch(0.937 0.010 87.5); --primary: oklch(0.937 0.010 87.5); --primary-foreground: oklch(0.201 0.004 84.6); --secondary: oklch(0.258 0.007 67.5); --secondary-foreground: oklch(0.748 0.010 87.5); --muted: oklch(0.258 0.007 67.5); --muted-foreground: oklch(0.713 0.012 84.6); --accent: oklch(0.573 0.163 27.4); --accent-foreground: oklch(0.937 0.010 87.5); --destructive: oklch(0.573 0.163 27.4); --destructive-foreground: oklch(0.937 0.010 87.5); --border: oklch(0.338 0.008 75.3); --input: oklch(0.338 0.008 75.3); --ring: oklch(0.937 0.010 87.5); --chart-1: oklch(0.937 0.010 87.5); --chart-2: oklch(0.573 0.163 27.4); --chart-3: oklch(0.713 0.012 84.6); --chart-4: oklch(0.396 0.010 73.6); --chart-5: oklch(0.624 0.008 80.7); } ``` ## Golden example (exemplar.html — match this structure and token usage) ```html

Field Notes — No. 04

The margin is where the reading begins.

A spread is not a slide. Type flows in columns of unequal width, the eye falls first on the serif headline, then settles into the measure. Nothing is centered; the asymmetry is the composition.

Rules are hairlines. Emphasis is a single spot of vermilion — a dropped initial, a mark, one word — never a second color, never a box or a shadow.

“Set the page, and the slide disappears.
14 Photograph — column full-cut

Issue Two — Cover

Whitespace,
set in serif.

A magazine spread, folded into sixteen by nine.

Cover 01
``` ## Apply - shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/ppt-editorial-magazine.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 `