# Design Language for rinji.net ## Aesthetics and Tone rinji.net is a website that behaves like a **臨時 notice taped to a shutter** — the Japanese word *rinji* (臨時) means "provisional," "temporary," "extraordinary," the prefix you see on 臨時列車 (a special unscheduled train), 臨時休業 (a hand-written "closed today" sign), and 臨時ニュース (a breaking-news interstitial that interrupts the regular broadcast). The whole site is built as if it were **a single sheet of cheap risograph-printed paper, slightly mis-registered, taped at the corners to a steel roller-shutter**, fluttering a little in a draft. It is honest about being temporary: nothing here pretends to permanence. The tone is **raw-authentic and a little urgent without being alarmed** — the calm bureaucratic voice of a stationmaster's chalk note, or a 1970s civic-defense pamphlet that has been photocopied so many times the halftone has bloomed into bruises. This is *not* slick. It is the opposite of glassmorphism (82% of the corpus) and the opposite of the hand-drawn cottagecore softness (95% of the corpus). It is **xerographic, provisional, off-register, and proudly cheap** — the aesthetic of a thing made fast, posted, and destined to be peeled off and replaced. Think: emergency-broadcast slate; a paper road-closure sign zip-tied to a cone; the back room of a print shop at 2 a.m.; a train-platform departure board with a slip of paper taped over the cancelled service. The mood is **between a public announcement and a quiet confession** — institutional typeface, human imperfection. ## Layout Motifs and Structure The site is a **magazine-spread / single-sheet broadside** (magazine-spread is only 6% in the corpus; this rejects the card-grid that 91% of sites use). The entire experience is **one continuous vertical "sheet"** — no cards, no bento boxes, no grid of equal tiles. Instead the page is composed like the front of a folded civic pamphlet: - **The Masthead Strip.** A full-bleed black band across the very top, like the title bar of an emergency bulletin: a thin rule, then `臨時 / RINJI` set huge, then a "notice number" and a fake timestamp ("発令 2026.05.11 — 有効期限: 当面の間" / "issued — valid until: for the time being"). The band has a faint, animated **scrolling ticker** of the kind that runs under breaking news. - **The Mis-Registered Body Column.** Below the masthead, content is a **single narrow measure (~58ch)** set ragged-right, like a typewritten notice. Critically, there are **two offset copies of certain headline blocks** — one in cyan, one in magenta — shifted 2–4px apart, as if the riso drum slipped. As you scroll, the misregistration *slowly drifts and self-corrects and slips again*, breathing. - **Tape Corners.** Every distinct "section" of the sheet is a slightly-rotated rectangle (±0.4°) with **translucent strips of tape** rendered at its corners (semi-opaque amber gradients with soft drop shadows and a subtle paper-fiber texture). Sections overlap by a few pixels at these tape points. - **The Margin Stamps.** The left and right margins are not empty — they carry **rotated rubber-stamp marks**: 「臨時」 in a circle, 「要確認」, 「写」, a fake barcode, a perforation line of dots. These sit in the negative space (ma — 16% in corpus) but they are *debris*, not decoration: askew, partially cut off the edge. - **The Footer Peel.** The bottom of the sheet **curls up** — a CSS-transformed corner-peel revealing a "wall" texture (cool concrete grey) behind it, with a faint older poster's ghost-text bleeding through. No hero image. No pricing block. No stat grid. No testimonial row. No CTA buttons styled as pills — any link is a **typewritten underline** or a stamped box. ## Typography and Palette **Fonts (Google Fonts only):** - **Display / Masthead — `Zen Kaku Gothic Antique`** (Japanese + Latin, weight 900 for the 臨時 wordmark, 500 for subheads). A humanist gothic with slightly old, slightly civic letterforms — it reads like signage on a municipal building, not like a startup. Used for 「臨時」 at 14–22vw, tracked tight, in pure black, with the cyan/magenta offset ghosts behind it. - **Body / Notice text — `Shippori Mincho`** for any Japanese running text (it has the dignified, faintly old-fashioned quality of a printed government notice) and **`Courier Prime`** for Latin body, dates, notice numbers, and the ticker — the typewriter-on-a-photocopier voice. Mono (94% of corpus) — but here it is *deliberately* the cheap office-typewriter kind, not the sleek dev-terminal kind. Set at 17–19px, line-height ~1.75, ragged right, with the occasional letter rendered slightly bolder or lighter (random per-load) to fake uneven ink. - **Stamps / margin marks — `Stick`** and `Zen Kaku Gothic Antique` 900, always rotated, always partially clipped. **Palette — risograph-on-newsprint, four inks plus paper:** - `#E8E2D0` — **newsprint paper** (the base; a warm, slightly grubby off-white, faintly yellowed) - `#16110E` — **press black** (not pure #000 — a deep warm carbon, like over-inked photocopy toner) - `#00A6C4` — **riso cyan / "fluorescent" teal** (one of the two misregistration inks; also the breaking-news ticker) - `#E5006D` — **riso fuchsia** (the second misregistration ink; the "発令" stamp; urgent accents) - `#C8A04A` — **tape amber** (the translucent corner tape; faint highlight underlines) - `#9A968C` — **concrete grey** (the wall behind the peeled footer corner; ghost-text) Default mode is paper-light. There is **no dark mode** — a temporary notice does not have a dark mode; it has a paper and that is all. ## Imagery and Motifs **No photography. No 3D renders. No stock illustration. No hand-drawn doodles.** Everything is **print-shop debris and signage furniture**, built from CSS/SVG and a single tileable paper-fiber + halftone-dot texture: - **Halftone bloom** — large areas of "ink" are actually dense SVG dot-screens; near edges the dots bloom and merge (CSS blur on a masked layer), mimicking a photocopy that's been run too dark. - **Misregistration ghosts** — the cyan/magenta offset duplicates of headline type and rule-lines; the core motif. - **Tape strips** — translucent amber rectangles with feathered edges, slight wrinkle (a faint repeating skew in the gradient), soft shadow. They literally hold the sections on. - **Rubber stamps** — circular and rectangular outlined marks: 「臨時」, 「要確認」(please confirm), 「写」(copy), 「至急」(urgent), a date-stamp wheel, a fake EAN barcode, a row of punch-holes. Always rotated 4–18°, often clipped by the page edge or another section. - **Perforation & fold lines** — dotted dashed rules running horizontally across the sheet, with a faint shadow on one side as if the paper is creased there. - **The departure-board flap** — one decorative element borrowed from a Solari split-flap board: a small panel that "flips" between states (e.g. 「平常」→「臨時」) with a mechanical clatter animation. - **Draft flutter** — the whole sheet has an extremely subtle, slow `transform` wobble (sub-pixel-ish, ~8s period) as if a draft moves it. ## Prompts for Implementation Build rinji.net as **one HTML file, one CSS file, one JS module — a single scrollable risograph notice taped to a shutter.** The narrative spine is: *you have walked up to a shutter and there is a notice on it; you read it top to bottom; it is provisional, it knows it, and so do you.* No CTA-heavy layout, no pricing tiers, no stat grid, no testimonial carousel, no email-capture bar. **Scroll narrative (single sheet, ~7 movements):** 1. **The Masthead.** Black band, thin rule, then 「臨時」 slamming in huge with its cyan + magenta ghosts splitting apart on load then *almost* converging. Beneath: `RINJI / NOTICE No. 0511` and the fake issuance line, with the cyan ticker already scrolling a loop of provisional phrases ("運行情報" / "臨時のお知らせ" / "for the time being" / "until further notice"). 2. **The Salutation.** A short, calm typewritten paragraph in Courier Prime / Shippori Mincho — sets the voice: this page is temporary; that is the point; nothing here is load-bearing. A 「写」 stamp rotated in the right margin. 3. **The Body Articles.** Two or three short "notice articles," each its own slightly-rotated taped rectangle, headline in Zen Kaku Gothic Antique with misregistration, body ragged-right. The misregistration offset is driven by scroll velocity — scroll fast and the inks separate more; rest and they ease back together (spring/elastic easing — these are at 84%/20% but used here for *ink slip*, not card bounce, which recontextualizes them). 4. **The Split-Flap Interlude.** A full-width strip with the Solari panel clattering 「平常」⇄「臨時」, surrounded by perforation dots. 5. **The Stamp Field.** A near-empty stretch of paper carrying only margin debris — barcode, punch-holes, 「要確認」, a coffee-ring (a faint translucent brown ellipse) — letting the page breathe like the bottom of a real pamphlet. 6. **The Errata / Small Print.** Tiny Courier Prime text, the kind of thing printed at the foot of a notice — half of it struck through and re-typed above, fake correction marks. 7. **The Peel.** The footer corner curls up on scroll-end, revealing concrete-grey wall and the ghost of an older poster ("前回のお知らせ" bleeding through, almost illegible). The 「臨時」 wordmark, tiny now, is stamped once more in the corner. End. **Animation guidance:** - **Misregistration drift** is the signature: cyan and magenta clones of headlines/rules, offset by a `--slip` CSS variable updated from scroll velocity (clamped ~0–6px), eased back toward ~1px at rest. Subtle, organic, never seizure-y. - **Tape on enter:** when a taped section scrolls into view, its tape strips do a quick `path-draw-svg`-style wipe (45%) — a 250ms reveal of the tape "being pressed down." - **Ticker:** continuous CSS marquee, cyan on black, monospaced, slightly too fast. - **Split-flap:** stagger the row of flaps (70% pattern) with a metallic clatter — `transform: rotateX` on stacked halves, ~40ms per flap. - **Draft wobble:** whole-sheet `transform` on an ~8s sine, amplitude ≈ 0.3° rotate + 2px translate. Disable under `prefers-reduced-motion`; freeze the misregistration at 1px there too. - **Cursor:** the cursor carries a faint, tiny 「臨」 stamp-shadow that lags behind it (a quiet take on cursor-follow, 88% of corpus) — when over a link, the link gets a typewriter-underline that types itself left-to-right. - **Type ink jitter:** on load, randomly assign ±1 to font-weight on a handful of body glyphs (via wrapping spans server-side or a tiny JS pass) to fake uneven photocopy ink — do it once, don't animate it. Tell a story of impermanence. Let the page feel like it could be peeled off and thrown away — and is fine with that. ## Uniqueness Notes Differentiators from the rest of the corpus, each a deliberate departure from the frequency analysis: 1. **Risograph misregistration as the core mechanic.** Nothing in the corpus appears to drive layout from *deliberate four-color print mis-registration that responds to scroll velocity*. It is the inverse of crisp glassmorphism (82%) and the inverse of polished hand-drawn warmth (95%) — it embraces cheap, off-register, photocopied imperfection as the entire visual thesis. 2. **The site IS a temporary notice, structurally.** Magazine-spread layout sits at only 6% and paper-aged imagery at 7%; this site uses both, but more importantly it is conceptually a *single sheet of provisional paper taped to a shutter* — masthead band, ragged-right typewriter column, tape corners, margin stamps, a curling peeled footer. No card-grid (91%), no bento-box, no hero image, no CTA pills. 3. **Bilingual civic-signage typography, not dev-terminal mono.** Where 94% of the corpus reaches for `mono`, this one specifically uses *office-typewriter* `Courier Prime` plus `Shippori Mincho` for Japanese — the voice of a government notice and a stationmaster's chalk note, not a code editor. `Zen Kaku Gothic Antique` 900 for the 臨時 masthead is municipal-building signage, not startup display type. 4. **Riso cyan + fuchsia on grubby newsprint** (`#00A6C4` / `#E5006D` / `#E8E2D0` / `#16110E`) — a four-ink riso palette, not a gradient (gradient is 94% of corpus; this has *zero* gradients except the translucent tape) and not warm-pastoral (98% warm in corpus — this is warm-grubby, which is different). 5. **No dark mode, on purpose.** A temporary notice has a paper, not a theme toggle. The refusal is part of the concept. Avoided patterns flagged by frequency analysis: glassmorphism, hand-drawn cottagecore, card-grid, bento-box, gradient meshes, photography, hero-dominant layouts, CTA/pricing/stat blocks, sleek dev-terminal mono, parallax-for-its-own-sake (parallax 90% — used here only as the gentle draft wobble, not depth-stacking). Chosen seed/style: **vintage newspaper layout** — bent away from a literal 19th-century broadsheet toward a 1970s photocopied 臨時ニュース / 臨時休業 civic notice (riso misregistration, typewriter body, magazine-spread single sheet, paper-aged imagery, slab/mono typography, sepia-grubby palette, raw-authentic tone).