# News Journal Grid 신문 1면을 웹으로 옮긴 미감 — 다단 밀집 그리드, 굵은 세리프 헤드라인, 가는 룰 라인 구획, 빨강 한 점. - taxonomy: print-editorial · newspaper-front-page, dense-grid, serif-headlines, rule-dividers, kicker-labels, monochrome-plus-red · complexity=medium - page types: editorial, landing, portfolio - best for: 뉴스·매거진 홈/아카이브처럼 기사 밀도가 높은 인덱스, 텍스트가 많은 블로그·뉴스레터 웹판, 리서치 리포트·저널 스타일 콘텐츠 허브 - avoid for: 여백 중심의 미니멀 브랜드 랜딩, 일러스트·모션이 주인공인 소비자 앱, 차트 위젯 중심의 SaaS 대시보드 - provenance: authored (design-diversity 팩 'web-news-journal-grid' (MIT) 각색) — confidence: colors=manual, typography=manual, spacing=manual, motion=manual, layout=manual ## Design rules # News Journal Grid ## Overview A broadsheet newspaper front page translated to the web. Ink-black type on newsprint off-white, a dense 12-column grid packing six or more article blocks into one viewport, bold serif headlines whose size encodes story importance, and thin black rules doing all the dividing. Density is authority: whitespace is spent sparingly, and breathing room comes from rule lines, not gaps. One red — and only one — punctuates kickers and the breaking badge. ## Colors & Roles Canonical mode is **light**: `background` newsprint off-white (oklch 0.990/0.004/106.5, from `#fcfcf9`), `foreground` ink (0.200, from `#161616`), `muted-foreground` meta gray (0.468, from `#5a5a5a`). `border` equals the ink foreground — rules ARE the medium, so they are full-strength black, not softened gray. `card` equals `background`: article blocks have no fill, no shadow; they exist only between rules. The single chromatic role is `accent` red (oklch 0.530/0.207/22.3, from `#c8102e`), used for category kickers, a "Breaking" badge, and key links — under 5% of page area. `destructive` reuses the same red. Dark mode is an authored "evening edition" inversion: warm charcoal paper, light ink and rules, the same red hue lifted in lightness (no neon). ## Typography Rules Three families, three jobs: - **Headlines** — Playfair Display (`font-display`), weight 700–900, line-height 1.12, letter-spacing −0.015em. Four sizes carry the hierarchy: lead `clamp(2rem, 4.5vw, 3.4rem)`, major `1.6rem`, standard `1.2rem`, brief `1rem`. Headlines are serif-only, always. - **Body** — Source Serif 4 (`font-serif`), `1rem`/400, line-height 1.55, measure 60–72ch. - **Kickers/meta** — Archivo (`font-sans`): kicker `0.68rem`/700, uppercase, +0.12em tracking, in accent red; bylines/meta `0.75rem`/500 in meta gray; datelines uppercase. ## Layout Principles Max width 1280px, 12 columns, 24px gutters. The signature split: lead story spans 7 columns, sidebar takes 5 with vertically stacked briefs divided by 1px rules. Breakpoints: 600px (1 col), 900px (2–3 col), 1200px (4–5 col). Body copy may flow in CSS multi-columns (`column-count`). Vertical rhythm is tight — 32px between blocks. A masthead tops the page: large serif site name, date left, section menu right, closed by a 3px rule (a double rule — 0.5px hairline above the 3px bar — is idiomatic). ## Depth & Elevation None. Zero shadows, zero gradients, zero blur or glass. The page is as flat as newsprint. All separation is a rule line in a strict weight hierarchy: **0.5px** inside an article, **1px** between article blocks, **3px** for masthead and section breaks. Never invent intermediate weights. ## Shapes Border-radius 0 everywhere — blocks, buttons, inputs, badges, images. Right angles only. Images carry no border; render them grayscale or desaturated (−40%) with a small meta-font caption below. ## Component Stylings - **Masthead**: oversized Playfair site name, Archivo meta for date/menu, 3px bottom rule. - **Article block (card)**: kicker (red, uppercase) → serif headline → two-line excerpt → byline. No background, no shadow; the surrounding rules define it. - **Button**: radius 0, 1px solid `foreground`, transparent fill, uppercase Archivo 0.75rem, padding 10px 20px; hover inverts to ink fill instantly. Primary variant = ink fill. - **Input**: 1px full border (`input`), radius 0; focus keeps the border and adds a 2px `ring` outline. Underline-only variant acceptable. - **Badge ("Breaking")**: `accent` fill, kicker typography, radius 0 — about one per page. - **Pull quote**: 3px red left rule + large serif quotation. - **Nav**: section links row under the masthead rule, uppercase Archivo, not sticky; hover turns red in 100ms. ## Motion `motion: none` — a newspaper is static. The only permitted effects are hover states: an instant (0ms) underline on headline links, or an ink→red color change at 100ms linear. Scroll-triggered animation, fades, and parallax are banned outright. ## Do's and Don'ts **Do:** divide only with rules in the 0.5/1/3px hierarchy; encode importance through the four headline sizes; keep red under 5% and only on kickers/badges/key links; pack six-plus blocks per viewport; set kickers and datelines in uppercase Archivo. **Don't:** use any gradient; round any corner or cast any shadow; give cards a background fill; add a second accent color; animate on scroll; loosen the layout with big whitespace; set headlines in sans-serif; use emoji, illustrations, or blob shapes. ## Responsive Behavior The grid collapses by breakpoint: 4–5 columns above 1200px, 2–3 between 900–1200px, one column under 600px. The 7+5 lead/sidebar split stacks on mobile with the lead first. The lead headline scales via `clamp()`. Rules keep dividing in every layout — vertical rules between columns become horizontal rules between stacked blocks. ## Agent Prompt Guide > Build this in the 'News Journal Grid' style: a dense newspaper front page on newsprint off-white with near-black ink, a 12-column grid splitting a 7-column lead story from a 5-column stacked sidebar, six or more article blocks divided only by black rules (0.5px/1px/3px hierarchy), bold Playfair Display serif headlines in four sizes, Source Serif 4 body, uppercase Archivo kickers and bylines, one red accent under 5% of the page, zero radius, zero shadows, grayscale images, and no motion beyond instant hover underlines. ## Known Gaps / Confidence Adapted from the MIT-licensed design-diversity pack `web-news-journal-grid` — an authored spec, not measured from a live site, so all confidence fields are `manual`. Light mode is canonical (traced to the pack's hex tokens via culori); dark mode is our faithful "evening edition" adaptation and has no pack source. Sub-pixel rules (0.5px) render as 1px on 1x displays; treat the hierarchy as relative weight, not literal pixels, where needed. ## Tokens (theme.css — use these values verbatim, do not re-derive) ```css /* News Journal Grid — theme.css (generated, do not edit) */ :root { --radius: 0px; --radius-selector: 0px; --radius-field: 0px; --font-sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --font-serif: 'Source Serif 4', Georgia, serif; --font-display: 'Playfair Display', Georgia, serif; --spacing: 8px; --shadow: 0px 0px 0px 0px color-mix(in oklab, oklch(0.200 0 0) 0%, transparent); --ks-display-weight: 800; --ks-display-tracking: -0.015em; --background: oklch(0.990 0.004 106.5); --foreground: oklch(0.200 0 0); --card: oklch(0.990 0.004 106.5); --card-foreground: oklch(0.200 0 0); --popover: oklch(0.990 0.004 106.5); --popover-foreground: oklch(0.200 0 0); --primary: oklch(0.200 0 0); --primary-foreground: oklch(0.990 0.004 106.5); --secondary: oklch(0.955 0.004 106.5); --secondary-foreground: oklch(0.200 0 0); --muted: oklch(0.955 0.004 106.5); --muted-foreground: oklch(0.468 0 0); --accent: oklch(0.530 0.207 22.3); --accent-foreground: oklch(0.990 0.004 106.5); --destructive: oklch(0.530 0.207 22.3); --destructive-foreground: oklch(0.990 0.004 106.5); --border: oklch(0.200 0 0); --input: oklch(0.200 0 0); --ring: oklch(0.200 0 0); --chart-1: oklch(0.200 0 0); --chart-2: oklch(0.530 0.207 22.3); --chart-3: oklch(0.468 0 0); --chart-4: oklch(0.70 0 0); --chart-5: oklch(0.33 0 0); } .dark { --background: oklch(0.210 0.004 106.5); --foreground: oklch(0.945 0.004 106.5); --card: oklch(0.210 0.004 106.5); --card-foreground: oklch(0.945 0.004 106.5); --popover: oklch(0.210 0.004 106.5); --popover-foreground: oklch(0.945 0.004 106.5); --primary: oklch(0.945 0.004 106.5); --primary-foreground: oklch(0.210 0.004 106.5); --secondary: oklch(0.265 0.004 106.5); --secondary-foreground: oklch(0.90 0.004 106.5); --muted: oklch(0.265 0.004 106.5); --muted-foreground: oklch(0.70 0.003 106.5); --accent: oklch(0.60 0.19 22.3); --accent-foreground: oklch(0.985 0.004 106.5); --destructive: oklch(0.60 0.19 22.3); --destructive-foreground: oklch(0.985 0.004 106.5); --border: oklch(0.88 0.004 106.5); --input: oklch(0.88 0.004 106.5); --ring: oklch(0.945 0.004 106.5); --chart-1: oklch(0.945 0.004 106.5); --chart-2: oklch(0.60 0.19 22.3); --chart-3: oklch(0.70 0.003 106.5); --chart-4: oklch(0.50 0.003 106.5); --chart-5: oklch(0.82 0.003 106.5); } ``` ## Golden example (exemplar.html — match this structure and token usage) ```html
Saturday, July 12, 2026World · Business · Science · Opinion

The Daily Ledger

World

Twelve Columns, One Gutter Treaty

Delegates agreed the lead takes seven and the sidebar five.

Opinion

Against the Rounded Corner

A right angle never apologized, and neither should a layout.

Culture

One Red, Well Spent

Restraint, critics write, is the loudest color on the page.

``` ## Apply - shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/news-journal.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 `