# Design Language for matchoomnews.com ## Aesthetics and Tone matchoomnews.com is a **risograph wire-room broadsheet** — imagine the print desk of a regional newspaper that never went digital, photographed at 6:47 AM under tungsten work-lamps, then run through a two-drum risograph printer that only has fluorescent ink. The name reads like a fictional dateline ("MATCHOOM —"), so the entire site behaves as if it *is* that newspaper: every section is a slug, a fold, a galley, a column inch. The tone is **raw-authentic crossed with bold-confident** — the voice of a copy editor who has been awake too long, who trusts the reader, who never pads. There is no warmth in the marketing sense and there are absolutely no gradients: this is **flat ink on uncoated stock**, the aesthetic equivalent of newsprint that smudges your thumb. The mood sits between neubrutalism (exposed structure, hairline rules, registration marks left visible) and a strict Swiss editorial grid (Karl Gerstner's *Capital* magazine, the Tschichold Penguin redesign, the front page of *Le Monde* before color). It should feel printed, not rendered — like the screen is a lightbox and the layout is a paste-up board where the wax-backed columns haven't been burnished down yet, so they cast a 1px hard shadow. Misregistration is a *feature*: headlines print 2px off in fluorescent pink behind the black, the way a cheap risograph misaligns the second drum. ## Layout Motifs and Structure The spine is an uncompromising **broken-grid broadsheet**: a 16-column, 1440px-wide editorial cage with 16px gutters and a 28px baseline rhythm — a real newspaper grid, not a website grid. Page width is constrained like a physical broadsheet (max 1440px, centered, with visible "trim marks" at the four corners of the viewport — small crosshairs in the corners, like a print proof). The masthead is a full-bleed band: oversized condensed wordmark "MATCHOOM NEWS", a hairline rule below it, then a "weather-ear / dateline-ear" row (left ear: a fake but specific dateline + edition number; right ear: live-ish ticker text). Below that, the layout fractures into **uneven column inches** — the lead story occupies columns 1–9 with a 5-deck headline, a thin black sidebar (columns 11–16) carries "briefs" stacked like a real newspaper sidebar, each separated by a 1px rule and a tiny ▦ ornament. As you scroll, sections are **galleys**: each one announced by a "SLUG LINE" — a small uppercase mono label in a black rectangle (`▸ SECTION / FOLD 02`), then a rule, then content that re-fractures the grid differently every time (sometimes a single 12-column essay column with generous `ma` negative space in columns 13–16; sometimes a 4-up brief grid; sometimes a horizontal-scroll "ticker tape" strip that moves opposite to scroll direction). Pull-quotes break across column boundaries and overlap the gutter, set in giant condensed type with a fluorescent-pink offset shadow. Footer is the **colophon**: set ragged, in small mono, listing fictional desks, the "press run", and a final registration cross. No hero with a button. No pricing. No stat grid. The "stats", if any, are *circulation figures* set as a single line of running text, never as cards. ## Typography and Palette **Type stack — Google Fonts only.** - **Anton** — the masthead and all primary headlines. A single-weight ultra-condensed grotesque display face; it is the closest Google-Fonts equivalent of newspaper "Poster Bodoni"-adjacent wood-type bigness without the serifs. Used at 96–220px for the wordmark and 40–80px for deck headlines. Always uppercase, always tracked tight (-0.01em), always with the 2px fluorescent-pink misregistration shadow on the masthead only. - **Archivo** (variable, weights 400–800, plus **Archivo Expanded** is *not* used — only the normal Archivo) — the deck subheads, slug lines (uppercase, 12px, letter-spacing 0.16em), kickers, and bylines. A neo-grotesque with strong newspaper bones; sits beneath Anton without competing. - **Spectral** — the body copy. A serif-revival face designed for screen reading; it carries the long-form essay galleys at 19px/28px with real paragraph indents (1.5em first-line indent, no space between paragraphs, exactly like a newspaper column). Drop caps in Anton, 3 lines deep, sitting in the text well. - **JetBrains Mono** — the "wire-room" furniture: datelines, edition numbers, the colophon, the ticker tape, file-name-style timestamps (`08:47 / EDT / WIRE`), and any number that wants to feel like teletype. 12–14px, used sparingly so it reads as *machinery*, not as a theme. **Palette — flat ink, uncoated stock, fluorescent risograph spot colors. No gradients anywhere.** - `#F4F1E8` — Newsprint Cream. The paper. Every background. Slightly warm-grey, like recycled stock. - `#15140F` — Press Black. Not pure black — a dense ink black with a hint of brown, the color of a heavy ink-laydown on absorbent paper. All body text, all rules, all slug rectangles. - `#FF2D78` — Fluoro Pink (Risograph "Fluorescent Pink" 1014). The misregistration shadow, pull-quote offsets, the live ticker underline, link hover state, the corner registration crosses. - `#1F4FD8` — Process Blue (Risograph "Blue" 002 / "Federal Blue"). Section slug accents on alternating folds, the "BREAKING"-style kicker tag, hovered briefs. - `#E8E3D2` — Tint Block. A 12%-darker wash of the cream, used only as a flat fill behind sidebars and the colophon — a "tint block" exactly like newspapers use to set off a box. No transparency tricks; just a flat second color. - `#8C8576` — Galley Grey. Captions, dateline ears, the "continued on…" notes, disabled/secondary mono text. ## Imagery and Motifs The hero imagery is **halftone-dot duotone photography** — every photograph is rendered as a coarse newspaper halftone (CSS `mix-blend-mode: multiply` over an SVG dot pattern, ~6–10px dot pitch) and forced into a Press-Black + one-spot-color duotone (alternating Fluoro Pink and Process Blue per fold). Photos sit in hard-edged rectangular wells with a 1px black keyline and a "PHOTO:" mono credit hanging below in Galley Grey. Decorative motifs are all **print-shop furniture**: visible registration crosses (⊕) in the four viewport corners; "▦" and "▸" dingbats as section markers; a thin repeating em-dash rule (`— — — — —`) used instead of soft dividers; "JUMP ▸" arrows on continued stories; column-rule hairlines between every text column; a faux **fold line** — a single horizontal hairline with the label "THE FOLD" in tiny mono, placed at exactly 100vh on the front page so the "above the fold / below the fold" metaphor is literal. The ticker tape is a strip of mono headlines separated by ◆, scrolling horizontally. No icons from any icon set — every glyph is either a unicode dingbat or hand-built SVG (crosshair, dot-screen, em-dash rule). A subtle full-page **paper-grain noise overlay** (SVG `feTurbulence`, ~3% opacity, monochrome) lies over everything to kill the digital flatness. ## Prompts for Implementation Build matchoomnews.com as **one long static HTML document** — no SPA, no router, no framework. It is a single scrolled newspaper. Structure: `
`, then `
` containing stacked `
` elements, then `