# Design Language for okurairi.com ## Aesthetics and Tone okurairi.com is **a printed broadsheet for things that were never released** — お蔵入り (okurairi: "sent to the storehouse," the Japanese term for a film, album, game, or project that gets shelved indefinitely, vaulted, killed in post, abandoned on a hard drive). The site presents itself as the **last edition of a newspaper that only ever covered the unreleased**: cancelled sequels, scrapped logos, the album the label buried, the building that was approved and then quietly un-approved, the wedding that the calligrapher had already lettered the invitations for. It is a morgue file made public — the "morgue" being the literal newsroom term for the archive of obituaries written in advance, stories set in type and then never printed. The tone is **grounded-earthy and quietly mysterious-moody** — not goth, not noir, not "dark mode." It is the mood of a regional newspaper office at 6am: fluorescent tube light on yellowing newsprint, the smell of toner and old coffee, a layout desk where someone has pinned up galley proofs that will never run. There is dry institutional humor in it — the deadpan voice of a copy editor who has filed forty years of corrections — but underneath, genuine tenderness for the work that didn't survive. Nothing here is for sale. Nothing here launches. The whole site is a memorial that refuses to be solemn about it. Visually it commits hard to **letterpress / hot-metal newspaper printing**: a four-column-to-six-column grid, hairline column rules, a masthead with a dateline and an edition number, "continued on page 4" jumps that actually scroll you down the page, halftone-dot photo treatments, registration-mark crop corners, and the slightly-off ink registration of cheap web-offset printing — a 1px cyan or magenta ghost behind the black text, as if the press was running fast and out of true. The paper is warm, not white. The ink is soft black, not pure black. Everything looks like it was *printed*, then *scanned*, then *put behind glass*. ## Layout Motifs and Structure The spine is the **vintage-newspaper layout** (under 2% in the frequency analysis — and in those rare cases it's almost always a faux-front-page hero followed by normal modern sections). okurairi.com refuses that. It is **a newspaper all the way down**: a single broadsheet page, six narrow columns, that you read top to bottom the way you'd read an actual paper — masthead, above-the-fold lead, the fold (a literal horizontal crease rendered in CSS, with a faint shadow and a hairline), below-the-fold secondary stories, then "inside this edition," then classifieds, then the colophon where the press run is stated. **The grid:** A 6-column newsprint grid at desktop (collapsing to 3, then 1). Column gutters are narrow (16px) with a 0.5px `#3A352C` hairline rule running down the *middle* of each gutter — the way newspapers separate columns. Body text is *set in the columns*, fully justified, with real hyphenation (`hyphens: auto`), tight leading. Headlines span 2–6 columns and break the grid the way newspaper heads do. There is no whitespace luxury here — the page is *dense*, the way a front page is dense, every column inch worked. **The fold.** About one viewport height down, there is THE FOLD: a full-width horizontal line with a soft 6px gradient shadow above it (paper curling) and a printed crease texture, and the words *— FOLD —* set tiny in the dead center. Everything above is the front-page lead story (the site's thesis: a museum of the unreleased). Everything below is "the rest of the paper." Scroll past the fold and a tiny fixed dateline in the corner updates from "ABOVE THE FOLD" to "BELOW THE FOLD" to "INSIDE." **Story blocks as exhibits.** Each shelved project is **a news story with a printed headline, a byline, a dateline, a halftone photo with a caption, and a body**. The body text is the story of what it was and why it died — written in inverted-pyramid newspaper style (most important fact first). Some stories are short two-paragraph briefs. One is a long investigative feature that runs three columns wide and has a pull-quote. Each ends with a **jump line** — "*Continued on A-7*" — and clicking it smooth-scrolls you to the continuation further down, where a "*Continued from A-1*" line picks it back up. This is immersive-scroll (12%) and editorial-flow (3%) reimagined as *literally reading a newspaper*. **Classifieds section.** Near the bottom, a genuine **classifieds grid** — tiny agate-type listings, each one a one-line obituary for something minor that was shelved: "*LOST: domain name, registered 2019, never built. Sentimental value only.*" "*FOR SALE: complete brand identity, used once internally, never shipped. As-is.*" Three columns of these, in 8px type, the way a real classified page looks — a wall of small grief, alphabetized. **Corrections box.** Floating in one column: a small boxed "**CORRECTIONS**" item that says something like "*In our last edition we reported that this project was 'merely delayed.' It is not delayed. It is okurairi. We regret the error.*" ## Typography and Palette **Fonts — Google Fonts only:** - **Old Standard TT** — the body and headline serif. A faithful revival of early-20th-century book and newspaper types (the kind of "modern" serif with high contrast and bracketed serifs that you'd find in a 1920s broadsheet). Used for: all body copy (16px desktop, justified, hyphenated, 1.45 leading), bylines (italic, small caps via `font-variant: small-caps`), captions, the classifieds agate type (8–9px), and — at large sizes, 300–700 weight — the secondary headlines. Old Standard TT has the slightly brittle, ink-trap-less quality that reads as "set on a Linotype," which is exactly the register we want. - **Libre Caslon Display** — the masthead and the lead headline only. A high-contrast display Caslon. The masthead wordmark "**okurairi**" is set in this, large, with a hairline rule above and below it and a dateline strap beneath ("VOL. I · NO. 1 · THE FINAL EDITION · ALL THE NEWS THAT NEVER FIT"). The single biggest above-the-fold headline is also Libre Caslon Display, ~64–96px, tightly tracked, possibly in two decks (a main head and a smaller "drop head" below it, newspaper-style). - **Spectral** — used *only* for the optional Japanese-romanization gloss line under the masthead ("*o · ku · ra · i · ri — 「お蔵入り」— shelved; sent to the storehouse; never released*") and for the colophon at the very bottom (the press-run statement, the "printed and not distributed" line, the credits). Spectral is a quieter, lower-contrast serif than the Caslons, so it recedes — it's the "fine print" voice. - **JetBrains Mono** — strictly for the *furniture*: the page numbers (A-1, A-7, B-3), the edition number, the "continued on" jump lines, the dateline corner indicator, the registration-mark labels, and the timestamp. Mono is at 94% in the frequency analysis — nearly universal — so we quarantine it to the *smallest, most functional* role only: it is the typewriter the sub-editor used to slug the copy, never the voice of the paper itself. Tiny sizes (10–11px), letter-spaced, uppercase. **Palette — warm newsprint, soft ink, two-color press:** - `#EDE6D6` — **newsprint cream**, the page. Warm, slightly pink-grey, the color of cheap wood-pulp paper a few years old. NOT white. - `#E3DAC6` — **aged margin**, a half-step darker, used for the masthead strap background, the classifieds box fill, and the very edges of the "page" (so the page looks like it has a subtly toned border / foxing at the margins). - `#23211C` — **soft press black**, the ink. Warm near-black, never `#000`. All body text, all rules, all headlines. - `#7A6F58` — **faded ink / agate brown**, for secondary text: captions, bylines, the hairline column rules, datelines. The color black ink fades to. - `#2E6F8E` — **registration cyan**, used at ~12–18% opacity ONLY as the misregistered ghost behind the main headline and the masthead — a 1px-offset cyan shadow, as if the press's cyan plate was slightly out of true. Also the link color (because newspapers that went online underlined things in this exact dull web-blue). - `#9E3B2E` — **registration red / wire-service red**, used sparingly: the "CORRECTIONS" box border and label, the "BREAKING" / "BULLETIN" kickers above certain stories, the edition strap accent, and a single thin red rule under the masthead. The red plate, also slightly misregistered (0.5px offset). Halftone treatment: every photo is rendered as a **black-only halftone** — converted to a dot screen (CSS `background-image` of a tiled dot pattern in `multiply` blend mode over a desaturated image, or an SVG `feImage`/`feComponentTransfer` posterize) at ~85 lpi coarseness, sitting on the cream paper. Photos are never full-color, never crisp. They look *printed*. ## Imagery and Motifs **Primary imagery: paper-aged + grain-overlay + halftone, with hand-set newspaper furniture.** No glossy photography, no gradient meshes, no 3D. The visual world is entirely **the printed page**: - **Halftone photographs** — coarse black dot screens of: an empty editing suite, a stack of unsold record sleeves, a model of a building that was never built, a roll of undeveloped film, a calligrapher's failed first attempt, a server rack, a closed door with a number on it. Each has a sans-serif-free **cutline** (caption) underneath in faded brown italic, starting with a bold lead-in word, newspaper-style: "**ABANDONED.** The third-floor edit bay where the director's cut was assembled before the studio reversed itself." - **Newspaper furniture**: hairline column rules; "30" marks (the old wire-service end-of-story symbol, "—30—") at the end of each story; ☞ pointing hands in the classifieds; dingbat squares as paragraph separators in briefs; a small woodcut-style printer's-mark logo (a tiny storehouse / 蔵, kura, rendered as a 1-color line woodcut) used as the site's icon and as the colophon device. - **Registration marks**: the four corners of the "page" carry tiny crosshair registration targets and color bars (a strip of C/M/Y/K/grey swatches like the edge of a press sheet) — the kind of printer's marks that get trimmed off but here are left on, because this edition was never trimmed, never distributed. - **The crease / fold**: rendered as a real horizontal artifact — a 1px dark line with a soft gradient bruise of shadow, plus a faint repeating crease texture — so the page genuinely looks folded once across the middle. - **Foxing & toning**: very subtle radial brown stains at two or three random spots on the page (CSS radial gradients at ~4% opacity), the way old newsprint browns unevenly. A faint paper-fiber grain over everything (a tiled noise PNG at low opacity, or an SVG turbulence filter). - **Stamps & marginalia**: a faded rubber-stamp "**DO NOT DISTRIBUTE**" set at an angle near the masthead; handwritten-looking margin notes in the gutter (in a *humanist* hand — not a cute script — like a sub-editor's pencil: "*kill graf 3?*" "*confirm date*"), drawn as SVG paths so they can path-draw-in on scroll. ## Prompts for Implementation Build okurairi.com as **one static HTML file, one CSS file, one small JS module (~5KB)**. No framework, no build step. The only external dependency is the Google Fonts link (Old Standard TT, Libre Caslon Display, Spectral, JetBrains Mono). The whole printed page, excluding fonts, should fit under ~85KB; halftone images can be tiny because they're low-detail dot screens. **The page is a broadsheet you read top to bottom.** Structure, in order: 1. **The masthead.** Full width. `okurairi` in Libre Caslon Display, huge, with a 1px misregistered cyan ghost behind it and a hairline `#23211C` rule above and a thin `#9E3B2E` rule below. Beneath: a JetBrains Mono strap — "VOL. I · NO. 1 · THE FINAL EDITION · [today's date, set live by JS] · PRICE: NOTHING, IT WAS NEVER SOLD". Beneath that, a Spectral gloss line: "*o · ku · ra · i · ri 「お蔵入り」 — shelved; sent to the storehouse; the film that never screened, the album that never pressed, the project that quietly died.*" A faded angled "DO NOT DISTRIBUTE" stamp sits over the top-right corner. The four page corners carry registration crosshairs; a CMYK color bar runs down the extreme left edge. 2. **Above the fold — the lead story.** A 4–6 column headline in Libre Caslon Display ("**A MUSEUM OF THE UNRELEASED**" with a drop-head: "*Everything inside this edition was finished, or nearly finished, and then sent to the storehouse. None of it ever reached you. Read on.*"), a byline ("*By THE NIGHT DESK · filed [time]*"), and 3 columns of justified Old Standard TT body that lays out the premise. A halftone photo (empty edit bay) spans 2 columns with a cutline. The story ends with a jump: "*Continued on A-12*" in mono. 3. **THE FOLD.** Full-width crease artifact, soft shadow, tiny "— FOLD —" centered in mono. A `position: fixed` corner indicator (bottom-left, mono, 10px) reads "ABOVE THE FOLD" and, via IntersectionObserver, flips to "BELOW THE FOLD" once you scroll past the crease, then to "INSIDE THIS EDITION" deeper down, then "THE COLOPHON" at the very bottom. 4. **Below the fold — the stories.** 5–7 individual "stories," each an exhibit of something shelved (invent them — a cancelled animated film, a wedding the invitations were printed for, a town's rejected new flag, a band's buried second album, a piece of software demoed once and never shipped, a building approved then un-approved, a book that was set in type and pulped). Each story = a kicker (some in red: "BULLETIN", "FROM THE ARTS DESK", "OBITUARY"), a serif headline (2–4 cols), a byline, a halftone photo + cutline, justified body in inverted-pyramid style, a pull-quote (large Old Standard TT, hanging in a column), and an end mark "**—30—**". One long "investigative feature" runs wider and has a "*Continued from A-1*" pickup near the bottom that the masthead jump pointed to. 5. **A "CORRECTIONS" box** floating in one column: red hairline border, red mono label, deadpan body ("*We previously described this project as 'on hold.' We have since learned it is not on hold. It is okurairi. The Editor regrets nothing.*"). 6. **CLASSIFIEDS.** A 3-column wall of 8–9px Old Standard TT agate listings, each a one-line obituary for something minor that was shelved, with ☞ pointing-hand dingbats and tiny ALL-CAPS lead words ("LOST:", "FOR SALE:", "WANTED:", "FOUND:"). Alphabetized. Dense. Heartbreaking in aggregate, never sentimental individually. 7. **THE COLOPHON** at the bottom, in Spectral, tiny: "*okurairi.com was set in Old Standard TT, Libre Caslon Display, Spectral, and JetBrains Mono. The press run was one copy. It was printed and not distributed. It is, itself, okurairi.*" The little woodcut storehouse mark. A final "— 30 —". **Motion (restrained, all in service of "reading a newspaper that was almost printed"):** - On load: the misregistered cyan/red ghosts behind the masthead drift in from a 4px offset to their 1px resting offset over ~600ms, ease-out — the press "coming up to registration." - **Jump lines**: clicking "*Continued on A-7*" smooth-scrolls to the continuation; the destination "*Continued from A-1*" line gets a brief 1.5s highlight (a faint yellow newsprint-marker swipe drawn as a `::after` that wipes across). - **scroll-triggered fade-reveal + stagger** (both common, but used here as *ink-drying*): each story block, as it enters, does a subtle ~250ms fade from 0.6→1 opacity with a tiny 6px rise — never bouncy, never springy. The halftone photos additionally do a faint "ink soak" — the dot pattern starts very slightly blurred/spread and crisps to its final dot size over ~400ms. - **path-draw-svg**: the pencil marginalia ("*kill graf 3?*", "*confirm date*", a circled paragraph) draw themselves in along their SVG path when scrolled into view, ~700ms, like someone marking up the proof in real time. - **The corner dateline indicator** updates with a quick 1-line vertical roll (old split-flap feel, but minimal — a 150ms translateY swap, no skeuomorphic flaps). - A barely-there continuous grain shimmer over the whole page (the noise overlay's `background-position` nudges ~1px on a slow loop) so the paper feels alive, like light moving across it. - `prefers-reduced-motion`: all of the above collapse to instant; the page is fully readable static — which is correct, because it's a *newspaper*. **AVOID:** no CTA buttons (nothing launches), no pricing tables ("PRICE: NOTHING, IT WAS NEVER SOLD"), no stat grids, no testimonials, no signup, no hero-with-gradient, no glassmorphism, no card-grid of features, no dark mode toggle, no cookie-banner cosplay. The only "interactive" elements are the jump links between story and continuation. This is a thing you *read*, not a thing you *use*. ## Uniqueness Notes Differentiators, each a deliberate move against the frequency analysis: 1. **A newspaper that is actually a newspaper, top to bottom.** vintage-newspaper layout is under 2%, and in those cases it's a faux-front-page hero bolted onto a normal modern site. okurairi.com is a *single broadsheet page* — six justified hyphenated columns, a literal CSS fold, "continued on A-7" jumps that scroll the page, a classifieds wall in 8px agate type, a "—30—" end mark, a corrections box, a colophon stating the press run. The newspaper isn't a skin; it's the entire information architecture. 2. **Subject matter that exists nowhere else in the batch: お蔵入り, the unreleased.** Every site in the frequency data is *about* something that shipped. This one is a memorial to things that *didn't* — cancelled films, buried albums, pulped books, un-approved buildings, printed-but-uncancelled wedding invitations. The site's content is grief for unreleased work, delivered in the deadpan voice of a night-desk copy editor. The page itself ends by declaring that it, too, is okurairi. 3. **Misregistered two-color letterpress, not "dark mode" or "vintage filter."** Warm newsprint cream `#EDE6D6`, soft press black `#23211C`, and a *deliberately misregistered* cyan `#2E6F8E` and red `#9E3B2E` plate offset by 1px — plus coarse 85-lpi black halftone photos, registration crosshairs and CMYK color bars left untrimmed at the page edges, foxing stains, paper-fiber grain, and a rubber-stamped "DO NOT DISTRIBUTE." This is the texture of a fast cheap web-offset press caught out of true, a register almost no batch site attempts. 4. **JetBrains Mono quarantined to furniture only.** mono is at 94% — effectively universal — so here it appears *only* in the smallest functional bits: page numbers (A-1, A-7), the edition strap, jump lines, the dateline corner indicator, registration labels. The paper's *voice* is four serifs (Old Standard TT, Libre Caslon Display, Spectral) — the Linotype, not the terminal. 5. **Animation as printing-press physics, not UI delight.** No spring, no magnetic cursor, no tilt-3d, no parallax. The only motion: registration ghosts drifting into true on load, ink "soaking" into halftone dots, pencil marginalia path-drawing onto the proof, a split-flap dateline indicator, jump-line highlight swipes, and a 1px grain shimmer. Every motion is something that happens *to ink on paper*, not something a web app does. Chosen seed/style: **vintage newspaper layout** (from seeds.json — "vintage newspaper layout"). Avoided per frequency analysis: glassmorphism (80%), hand-drawn aesthetic (96%), card-grid (90%), full-bleed hero-dominant CTA layouts, photography (98% — replaced entirely with black halftone), warm-gradient palettes (95% gradient — replaced with flat misregistered two-color ink), spring/magnetic/cursor-follow/tilt-3d motion (81–89%), and dashboard/bento-box layouts.