# Design Language for matchumnews.com ## Aesthetics and Tone matchumnews.com is built as a **resurrected teletext broadcast service** — the website equivalent of a 1986 Ceefax / Antiope news page that somehow kept running on a satellite no one decommissioned. The whole site behaves like a hijacked TV signal: chunky pixel blocks, hard rectangular color fields, a permanent faint scanline shimmer, and a "page number" addressing system instead of URLs. The tone is **playful and proudly low-res** — not retro-cute, but retro-*infrastructural*: this is the news as a public utility broadcast, blocky and matter-of-fact, narrated by a calm robot announcer. The "matchum" in the name is treated as a fictional broadcaster ("Matchum Teletext Network — Channel 8½"), and the site leans into that lore: a station ident sequence on load, a rolling ticker that never stops, a "next page in 0:08" auto-advance bar, and the slightly menacing serenity of a screen that has been displaying the same headline since 03:17 GMT. Pixel-art aesthetic is the spine; everything is rendered as if on a 40×25 character grid blown up to fill a modern viewport. Warmth comes not from color temperature (the palette is cool and electric) but from the *familiarity* of the broadcast ritual — the page flip, the hold-music hum, the test card. ## Layout Motifs and Structure **Hard modular-blocks on a fixed character grid.** The viewport is conceptually divided into a 40-column × 25-row teletext matrix; every element snaps to that grid — no fluid in-between positions, no soft margins, ever. The structure: - **Header band (rows 0–2):** a solid color bar with "MATCHUM" in double-height blocky caps on the left, the live clock (`HH:MM:SS GMT`, monospace, ticking) center, and the current page address on the right (`P101`, `P204`…). Below it, a single-row reversed-out subtitle strip: `MATCHUM TELETEXT NETWORK · CH 8½ · UPDATED 03:17`. - **The "page" body (rows 3–22):** each news story is its own full-width *page* — you do not scroll a long feed, you **flip pages**. Stories stack as discrete teletext pages and the FastText colored buttons (red / green / yellow / cyan, bottom row) jump between them. A vertical version exists for mobile: pages become a stacked deck you swipe, each one still a perfect rectangle. - **Index page (P100):** a numbered directory — `101 WORLD … 110 BUSINESS … 150 WEATHER … 199 ABOUT` — laid out as two columns of dotted leader lines, exactly like a real teletext index. - **Footer bar (rows 23–24):** the four FastText color blocks + a `[HOLD] [REVEAL] [SUBPAGE ▸]` control cluster. `REVEAL` un-blurs "spoiler" text (e.g. sports scores) that loads pre-obscured, just like the real `REVEAL` key. - **The ticker:** a permanent single-row marquee pinned just under the header, scrolling right-to-left at a steady, hypnotic pace — breaking-news fragments, the temperature, a stock figure, then loops. Negative space is used as **deliberate blank grid cells** — black (or deep-navy) rectangles left intentionally empty, the way teletext pages had big quiet zones. No drop shadows. No rounded corners anywhere. No overlap, no depth — strictly 2D, strictly aligned. ## Typography and Palette **Type system (Google Fonts only):** - **Pixel display face — `Press Start 2P`:** used for the "MATCHUM" wordmark, page numbers, and the loading ident. True bitmap-grid letterforms; only ever used at integer multiples of its base size (16px, 32px) so pixels stay square. Tracking left at default; never italic. - **Blocky body / headline face — `VT323`:** the workhorse. All headlines, story body text, index leaders, ticker, clock — everything readable is set in VT323, a monospaced CRT terminal face with the soft phosphor bloom baked into its outlines. Body at 22–24px (it needs the size), headlines at 36–44px in UPPERCASE, line-height a tight 1.15 so text packs into grid rows. - **Captions / micro-labels — `DSEG7 Classic` is not on Google Fonts, so use `Share Tech Mono`** for tiny status text (`SUBPAGE 1/3`, `0:08`, byline stamps) — a clean technical mono that reads at 12–13px without bloom, providing contrast against VT323's glow. **Palette — classic teletext primaries at full saturation, on darkness:** - `#0A0A14` — **broadcast black** (the screen void; the real base, faintly blue-shifted like an unlit CRT). - `#10103A` — **deep signal navy** (alternate page background, header bands). - `#FFFFFF` — **pure white** (primary text — teletext white). - `#FFE600` — **teletext yellow** (the dominant accent: section flags, the "BREAKING" tag, page numbers). - `#00E5FF` — **teletext cyan** (links, the REVEAL state, ticker highlights). - `#FF2D55` — **teletext red** (FastText red button, alert bars, the recording dot). - `#00E676` — **teletext green** (FastText green, "LIVE" pill, weather sun). - `#FF66CC` — **teletext magenta** (rare — used once per page max, for the "matchum" lore voice / station messages). Color is applied as **flat blocks**: a yellow story flag is a solid yellow rectangle with black text reversed out of it; there are no gradients except one allowed exception — a subtle vertical CRT vignette and a 4%-opacity scanline texture over everything. ## Imagery and Motifs - **Block-mosaic illustrations:** no photographs. Any image (a map, a portrait, a weather symbol) is rendered as a **teletext block-graphic** — built from the 2×3 sixel-style block characters at ~24px cells, so a "sun" is a yellow circle approximated in ~80 chunky squares, a "world map" is a green-on-navy blocky silhouette. These can be drawn with CSS grid + colored divs or tiny inline SVG `` arrays. - **The test card (P900 / 404):** a full pixel-art SMPTE-style colour-bar test card with "MATCHUM — NO SIGNAL ON THIS PAGE" stamped across the middle, plus a slowly drifting horizontal hold glitch. - **The page-flip wipe:** when changing pages, the new page paints in **top-to-bottom, row by row**, ~20ms per row — the way teletext pages assembled live. A faint "tuning" static fills rows not yet drawn. - **Scanlines + interlace shimmer:** a 2px repeating-linear-gradient overlay at low opacity; every few seconds a single brighter scanline rolls slowly down the screen (the "vertical hold" tell). - **The cursor:** a solid blinking block caret (`█`) that follows nothing — it just sits and blinks at the end of the current headline like a terminal prompt, and on hover over a link it jumps to the start of that link's text. - **FastText buttons:** four fat colored rectangles labeled with the next-page topics — the only "buttons" on the site, styled exactly like the bottom of a 1990 BBC2 teletext page. - **Grid-line motif:** an extremely faint dotted grid (the 40×25 matrix) is occasionally revealed for half a second on load, then fades — a wink at the underlying structure. ## Prompts for Implementation - **Open with the station ident:** on first load, ~2.2s sequence — black screen, a single cyan dot expands into the MATCHUM colour-bars test card, a low 50Hz hum, then "TUNING…" types out and the index page P100 paints in row-by-row. Skippable on click/keypress. Store a flag so repeat visits within a session skip straight to the page. - **Build the page-flip as the core interaction, not scrolling:** Left/Right arrow keys, the FastText color buttons, and number entry (`type 1-0-4`, watch the digits fill the page-address field) all flip between story-pages. Each flip = the row-by-row paint wipe + a soft "blip". Mobile: horizontal swipe between pages, with a 25-row "venetian-blind" wipe. - **The ticker must literally never stop** — a continuous CSS marquee (JS-driven for seamless loop), pinned under the header, cycling: latest headline fragment → time → temperature → a "matchum" lore line → repeat. - **Implement REVEAL and HOLD as real toggles:** some inline spans render pre-blurred with a "▒▒▒▒" block fill; `REVEAL` un-blurs all of them with a quick left-to-right unmask. `HOLD` freezes the ticker and any auto-advance timer (the "next page in 0:08" bar) and turns its label red. - **Everything snaps to the grid:** define `--cell: clamp(...)` and size/position every box in integer cell units; use `image-rendering: pixelated` on any raster; disable anti-aliasing feel by avoiding sub-pixel transforms. - **Animation vocabulary:** typewriter-effect (headlines & ticker type in), row-by-row paint wipe (page flips), a periodic slow scanline roll, the blinking block caret, and one glitch hiccup (horizontal hold tear) roughly every 30–45s. No springs, no parallax, no easing curves softer than `steps()`. Motion should feel *mechanical and broadcast-timed*, never bouncy. - **Tone of the copy:** terse teletext register — `WORLD 101`, `Mon 11 May`, all-caps headlines under 60 chars, datelines like `BRUSSELS —`, and the occasional eerie station message from "matchum" itself in magenta (`THIS PAGE LEFT INTENTIONALLY AWAKE`). - **AVOID:** hero CTAs, pricing tables, stat-counter grids, glassmorphism, soft drop shadows, photographic backgrounds, rounded corners, gradient meshes, parallax storytelling. This is a flat broadcast signal — keep it rectangular, keep it humming. ## Uniqueness Notes - **Teletext / Ceefax broadcast paradigm** — page *addresses* and a row-by-row paint wipe replace scrolling entirely; almost no site in the corpus uses pixel-art (3%) and none model themselves on a teletext service or implement a REVEAL/HOLD key. - **Flat, depth-free, rectangle-only system** — deliberately rejects the corpus-dominant glassmorphism (73%) and parallax (95%); zero shadows, zero rounded corners, motion limited to `steps()` and `marquee`, which is the opposite of the near-ubiquitous spring/magnetic/cursor-follow stack. - **Block-graphic imagery instead of photography** — the corpus is 98% photography; here every image is a colored-`` mosaic on a 40×25 matrix, a genuinely distinct visual language. - **Permanent broadcast furniture** — a never-stopping ticker, a live GMT clock, an auto-advance countdown bar, a station ident on load, and a SMPTE colour-bar test card as the 404 — site-wide motifs no other design carries. - Chosen seed/style: **90s pixel art playful** (aesthetic: pixel-art, layout: modular-blocks, typography: tech-mono/pixel, palette: high-contrast, patterns: typewriter-effect + glitch, imagery: vector-art block-mosaic, motifs: grid-lines, tone: playful). - Avoided per frequency analysis: glassmorphism, parallax, cursor-follow, spring, magnetic, photography, full-bleed-photo heroes, warm gradient palettes, hand-drawn — all heavily overused; this design takes the opposite stance on every one.