# Design Language for masugomi.com ## Aesthetics and Tone masugomi.com is **a municipal recycling depot the morning after election night** — a corrugated-steel shed where last week's front pages, press releases, and hot takes have all been baled, crushed, and stacked into wobbling towers of pulp. The name is the Japanese internet portmanteau *masu-gomi* (マスゴミ): "mass media" fused with "garbage." This site takes that joke literally and builds a small, defiant museum of discarded news inside a scrapyard. The mood is **edgy-rebellious** — sardonic, deadpan, a little gleeful — but never frantic. It is the calm of a person sorting trash who has stopped being angry and started being precise. The governing aesthetic is **anti-design** (≈3% of the corpus — a deliberately neglected slot): mismatched type sizes, intentionally crooked baselines, "ransom-note" headline collage, system-default form widgets left unstyled on purpose, scrollbars visible, borders that don't quite meet at the corners. This is *anti-design as critique*, not anti-design as carelessness — every misalignment is measured, every clash is composed. Underneath the chaos sits a **goblincore** (≈2%) sensibility: an affection for the cast-off, the soggy, the chewed-up; a magpie's hoard of newsprint scraps, bottle caps, bent staples, coffee rings, and torn corners arranged like treasure. The two together — anti-design's hostility plus goblincore's tenderness — produce something specific: **a junk-press shrine.** Photography is banned. Gradient meshes are banned. Glassmorphism is banned. Everything is flat-shaded, hard-edged, grain-fed, and looks like it was photocopied four times and then scanned on a flatbed with the lid open. Tone in copy: clipped, dry, occasionally aphoristic. Headlines are quoted from "the discard pile" and visibly struck through, redacted, or stamped VOID. The site never shouts CONVERT. It mutters. ## Layout Motifs and Structure The structural spine is **broken-grid** (≈5% in the corpus) executed as an actual *collapsed* grid — a 12-column lattice that has been kicked: columns 3 and 7 are 14px wider than their neighbours, the gutter between 9 and 10 is doubled, and three modules straddle column boundaries at a 1.5° rotation. CSS Grid holds the bones; `transform: rotate()` and negative margins do the violence. Nothing snaps cleanly. The eye is meant to *trip* down the page the way you trip over bin bags in an alley. The page is organized as a vertical descent through **six "bales"** — compressed cubes of content, each one a `
` with a thick (6px) hard black outline that is deliberately mitred wrong at one corner (a 4px gap, left visible): 1. **THE WEIGH STATION** — the masthead. The wordmark "masugomi" is set as a ransom-note collage: each glyph cut from a different font, different size, different baseline, some glyphs rotated, one upside-down. Beside it, a fake "intake ticket" — a monospace receipt reading TODAY'S HAUL: ___ kg of takes. 2. **THE SORTING TABLE** — a 4-column masonry of "found headlines": real-looking but invented news fragments, each on its own torn-paper card, each defaced (strikethrough, [REDACTED] black bars, marginalia in red ballpoint). Cards overlap by 8–18px. No two cards share a baseline. 3. **THE BALER** — a single full-bleed band where headlines visibly *compress*: on scroll, a stack of headline cards squashes vertically (scaleY) into a dense brick, then a stamp slams down: BALED. 4. **THE PULP TANK** — a quieter section: a slowly churning field of dissolved newsprint (animated SVG noise + drifting letterforms) with three short essays floating like scraps on the surface, each in a different mismatched typeface. 5. **THE SCRAP HOARD** — the goblincore treasure chamber. A cramped pegboard wall hung with "salvaged objects": bent staples, a coffee-ringed sticky note, a torn press-pass lanyard, a chewed pencil — each an SVG, each with a handwritten tag string. Hover wiggles the object on its hook. 6. **THE OUTGOING CHUTE** — the footer, styled as a metal hopper. One small, ugly, system-default `` mailto link labelled "drop something in the chute →". No newsletter modal. No social row. The chute just goes down into black. A persistent left rail (sticky, 56px wide) is a vertical "fill gauge" — a printer's-error progress bar that fills as you scroll, captioned in 9px mono: BIN 23% FULL. ## Typography and Palette **Fonts (Google Fonts only — confirmed available; the clash IS the design):** - **Special Elite** — the workhorse: a battered, ink-bled typewriter face. Used for body copy (1.0625rem / 1.7), all the "found headline" text, intake tickets, and marginalia. It looks struck, smeared, used. - **Archivo Black** — the brute. Used for the BALED / VOID / [REDACTED] stamps and the six bale titles, set ENORMOUS (clamp(2.6rem, 9vw, 6.5rem)), tracked tight (-0.02em), and frequently rotated 1–3°. - **Anton** — the tabloid scream. Used sparingly for one or two "screamer" headlines per section, condensed and CAPS, deliberately *too big for its container* so it clips at the bale's edge. - **Courier Prime** — the bureaucracy. Used for the fill gauge, receipts, weight tickets, file-numbers, and the footer chute labels. The voice of the depot's paperwork. - **DM Sans** (weight 400) — the one "normal" voice, used *only* in the Pulp Tank essays, so that the calm section reads as eerily, suspiciously clean against everything else. Five typefaces on one page is itself the anti-design statement. Set them to clash on purpose: never align their baselines, never harmonize their sizes. **Palette — "wet cardboard, newsprint, and a warning light":** - `#1A1714` — **Bin Bag Black**: backgrounds of the masthead, the baler, the footer chute. Not pure black — a soot-and-grease near-black. - `#E7E0CE` — **Soggy Newsprint**: the dominant paper field; the cards, the sorting table, the essay scraps. A grey-yellowed off-white, like a newspaper left in the rain and dried on a radiator. - `#C9402E` — **Stamp Red**: the [REDACTED] alternative, the VOID stamp, the marginalia ballpoint, the warning fill-gauge. Used at small scale only — it should look like a violation, not a brand. - `#5C5A4C` — **Pulp Grey-Green**: the Pulp Tank churn, the goblincore tags, the mitred-wrong borders. A damp, mossy industrial grey. - `#8C7B3F` — **Tarnished Brass**: the salvaged-object hardware (staple, lanyard clip, pencil ferrule), the hopper metal. A dull, oxidized gold — the only "warm shine" allowed, and it's a tired one. - `#000000` — true black: only for the 6px hard outlines and the censorship bars. A persistent **grain-overlay** (≈8%) at 6–9% opacity sits over the entire viewport — a tiled SVG `feTurbulence` "newsprint dot" texture that subtly *moves* (translates 2px on a 4s loop) so the page feels like it's printed on paper that won't sit still. ## Imagery and Motifs All imagery is **SVG and CSS only** — flat, hard-edged, deliberately crude, channeling **collage** (≈8%) and **vector-art** with a **grain-overlay** wash. No photography. No 3D. No bokeh. No gradient mesh. - **Ransom-note glyph collage** — the core motif. The wordmark and the "screamer" headlines are built letter-by-letter from rectangular ``s, each randomly assigned one of the five fonts, a size jitter (±18%), a baseline jitter (±10px), and a rotation jitter (±4°). Re-randomized (gently) on each page load. - **Torn-paper edges** — every card uses a jagged `clip-path: polygon(...)` with ~14 vertices to mimic a hand-ripped sheet, plus a 2px Soggy-Newsprint inner edge to read as paper thickness. No `border-radius` anywhere — corners are either sharp, torn, or wrong. - **Censorship & defacement** — black `[REDACTED]` bars (pure-black rectangles over text), red strikethroughs drawn as animated SVG `` (path-draw-svg, ≈30% — but used here as *vandalism*, the pen striking out a lie), VOID and BALED stamps as rotated Archivo-Black text inside a double-stroked rounded-rectangle-that-isn't-rounded. - **Salvaged-object icons** (goblincore hoard): a bent staple, a torn lanyard, a coffee-ringed sticky note, a chewed pencil, a crushed paper cup, a snapped pen, a faded press badge — each drawn as a 2-tone flat SVG (Tarnished Brass + Bin Bag Black line), hung on `` pegboard hooks with a 1px string. - **Coffee rings & stains** — semi-transparent Pulp-Grey-Green ellipses, irregular, scattered behind cards at low opacity, never symmetric. - **The fill gauge** — a vertical bar in the left rail, segmented like a printer's misregistered colour bar, filling Stamp Red as you scroll, captioned in 9px Courier Prime. - **Compactor jaws** — in THE BALER, two simple SVG trapezoids that close on scroll, squashing the headline stack between them. ## Prompts for Implementation Build masugomi.com as **one HTML file, one CSS file, one ES module — no framework, no build step.** It is a vertical descent through a recycling depot for discarded news. It is *not* a SaaS landing page, *not* a CTA funnel, *not* a stat-grid. There are **no pricing blocks, no testimonial card-grids, no "Get Started" buttons, no signup modals, no stat counters.** The only outbound action is one deliberately ugly mailto link in the footer chute ("drop something in the chute →"). The page should feel like wandering through a scrapyard of yesterday's certainties, picking things up, reading the defaced headline, putting it back. **Page shell.** A single `
` holding six `
` blocks plus a sticky `