# Design Language for rinji.dev ## Aesthetics and Tone `rinji` is the Japanese word **臨時** — *temporary, provisional, "for the time being," the extraordinary session called outside the normal schedule.* This site treats that word as its entire thesis: it is a developer's site that openly admits **everything here is scaffolding** — a structure that exists only until the real thing arrives, and is honest, even proud, about its own impermanence. The governing aesthetic is **wabi-sabi rendered as a municipal works site**: the cracked-glaze, asymmetric, accept-the-flaw spirit of a tea-bowl, but expressed through the visual grammar of **temporary public infrastructure** — site hoardings, riso-printed paper notices stapled to plywood, traffic-cone orange, barrier tape, "TEMPORARY — DO NOT REMOVE" labels, the chalk numbers builders scrawl on wall studs. Nothing pretends to be permanent or polished. Surfaces look **printed once, by hand, slightly off-register**, then weathered by rain. The tone is **grounded-earthy and quietly witty** — a craftsperson who has built and torn down a hundred temporary structures and finds that funnier and more honest than any "launching soon" marquee. It is calm, dry, unhurried, faintly melancholy in the way a half-demolished building catches afternoon light. **No countdown timers. No hype. No "be the first to know."** Just a provisional structure, doing its job, for the time being. ## Layout Motifs and Structure The page is a **single vertical "hoarding run"** — imagine walking the length of a plywood construction fence on a quiet street. It is built as **five plywood panels stacked top to bottom**, each panel exactly `100svh` tall, separated by a **2px painted seam-line** with two stencilled bolt-marks where panels would be screwed together. The whole run sits inside a **fixed 28px "site-tape" border** around the viewport — diagonal hazard hatching, semi-transparent, that never scrolls. Within each panel the composition is deliberately **asymmetric and "stapled-on"**: a riso-notice card pinned at a small rotation (between `-3.2deg` and `+2.4deg`, never zero, never symmetrical), a chalk-scrawled panel number in the corner (`PANEL 01 OF 05`), and generous raw plywood showing through. There is **no top navigation bar and no footer** — wayfinding is a **vertical "barrier-tape" strip fixed to the right edge**, printed with the five panel words running bottom-to-top in rotated capitals; the active word is "stamped over" with a small red provisional seal. Content blocks are **never centered as a column**: they hang from the top edge, lean against the left margin, or sit low like something set down on the ground. One panel deliberately **breaks the grid** — its notice card has slid halfway off the plywood and overlaps the seam into the next panel, held by a single visible staple. The structural joke: **the layout itself looks temporary** — panels that could be unbolted and carried away. ## Typography and Palette **Type system — Google Fonts only, and pointedly NOT monospace** (mono appears in 94% of designs in this corpus; this site refuses it): - **Stencil display face — `Stardos Stencil`** (weights 400, 700): every panel heading, the "TEMPORARY" labels, the right-edge tape strip. This is the spray-stencil voice of crates, road signs and site hoardings — bridged letterforms, ink that looks pushed through a cut template. Set in `UPPERCASE`, `letter-spacing: 0.08em`, with a faint 1px ink-bleed shadow offset `0.5px 0.5px` in a darker tint to mimic riso mis-registration. - **Working-text face — `Hanken Grotesk`** (variable, weights 300–600): all body copy, captions, the "for the time being" prose. A plain, civic, slightly utilitarian grotesque — the typeface of a printed notice, not a magazine. Body at `1.05rem / 1.62`, `letter-spacing: -0.003em`. Captions in `0.74rem` `UPPERCASE` at `0.12em` tracking, like the small print on a regulatory placard. - **Hand-marked accent — `Caveat`** (weight 600), used *sparingly* — only for the chalk panel numbers, builder's tick-marks, and one or two margin annotations ("temp.", "rev. 3", "remove after"). It should read as crayon-on-plywood, never as a decorative flourish. **Palette — riso-print on weathered plywood, warm but not cozy:** - `#E7DCC6` — **raw plywood** — the dominant ground; a pale, slightly yellow sanded-pine. - `#D8C7A6` — **shaded plywood** — used for panel-edge shadow bands and the underside of overlapped cards. - `#1F1B14` — **stencil ink** — near-black with a brown undertone; all primary type and hatching. - `#E8531D` — **traffic-cone orange** — the single loud accent: hazard tape, the active-panel seal, underlines drawn live. Used at roughly 6% of any given screen — a warning colour, not a brand colour. - `#2B4C3F` — **municipal green** — secondary stencil colour for sub-labels and the bolt-marks; the green of utility cabinets and park railings. - `#F4EEDD` — **riso paper-white** — the notice cards themselves; a soft off-white that sits *on* the plywood, never flush with it. - `#A8341A` — **provisional-seal red** — deep brick-red, only ever inside the round "臨時 / TEMP" stamp graphic. Backgrounds carry a permanent **fine paper-grain + faint plywood wood-figure texture** at low opacity; riso cards carry a subtle **2px halftone-dot mis-registration fringe** in cone-orange along one edge. ## Imagery and Motifs - **The provisional seal (hero motif):** a hand-drawn SVG circular stamp — slightly oval, ink uneven, edges broken — containing the kanji **臨時** above the word **TEMP** in Stardos Stencil, ringed by `· FOR THE TIME BEING ·`. It appears once, large, on Panel 01, then recurs tiny as the active-panel marker on the tape strip. - **Hazard hatching:** 45° diagonal stripes (cone-orange on transparent) — the fixed viewport border, the seam-bolt accents, and the "slid-off" card's torn edge. - **Staples and bolt-marks:** small precise SVG glyphs — a real staple (two legs, top bridge, faint shadow) holds every notice card; stencilled hex-bolt circles mark every panel seam. These are the only "icons" on the site. - **Chalk arithmetic:** in margins, faint Caveat scribbles — `01/05`, `rev. 3`, a crossed-out word, an arrow pointing at a seam — as if a builder annotated the page mid-job. - **Riso registration ghosts:** every card and heading has a faint 1–2px duplicate offset in cone-orange or municipal-green, the way a two-colour riso print never quite lines up. This is the texture that unifies everything. - **No photography. No 3D. No gradients-as-decoration.** The only "image" is flat printed-and-weathered surface and a handful of hand-drawn marks. - **Weathering:** one corner of the plywood run has a faint water-stain bloom (a soft radial in shaded-plywood tone); one notice card has a dog-eared corner; the hazard tape is scuffed pale in two spots. ## Prompts for Implementation Build `rinji.dev` as **one HTML file, one CSS file, one small ES module** — no framework, no build step, no service worker. It is a slow walk along a temporary hoarding: five `100svh` plywood panels, scrolled top to bottom. There is **no CTA, no pricing block, no stat-grid, no testimonials, no email capture, no logo wall, no FAQ accordion, no cookie banner, no "launching soon" countdown.** The site's whole content is a short, dry, first-person essay — *"this is rinji.dev. it is temporary, on purpose. here is what stands here for the time being, and what it is holding the space for."* — broken across the five panels. **Narrative structure (five plywood panels, vertical scroll, riso-print physics):** 1. **PANEL 01 — 臨時.** The big provisional seal lands center-low with an ink-stamp **press animation** (scale from `1.06`→`1.0` with a 1-frame orange registration-ghost overshoot, a faint "thud" shadow spread). Heading in Stardos Stencil: **"FOR THE TIME BEING."** One line of Hanken Grotesk beneath: the thesis sentence. Chalk `PANEL 01 OF 05` in the corner. 2. **PANEL 02 — WHAT THIS IS.** A riso-notice card pinned at `-2.6deg` by one staple, paragraph explaining that everything here is scaffolding around something not yet ready, and that this is stated plainly rather than disguised. As it enters, the card does a tiny **settle-and-tilt** (drops 14px, rotates the last 0.8deg) like paper finding its rest against plywood; the staple "snaps" in 80ms later. 3. **PANEL 03 — THE BREAK.** The grid-break panel: the notice card has slid halfway down and overlaps the seam into Panel 04, torn edge showing hazard hatching, held by one visible staple under tension (a faint stress-line drawn from the staple). Copy here is the wittiest beat — a line about how a temporary structure that won't admit it's temporary is the saddest kind. On scroll, the card **shivers very slightly** (±0.4deg, 1.2s ease) as if the wind caught it. 4. **PANEL 04 — WHAT IT HOLDS.** Plain plywood, minimal: a short list (3–4 lines, NOT a grid, NOT cards — just left-hung lines with chalk tick-marks) of the things this provisional site is keeping the space warm for. Each line **reveals by an orange underline being drawn left-to-right** (SVG path-draw, ~600ms, slight overshoot) under the text, then the text settling from 30%→100% opacity behind it. 5. **PANEL 05 — UNTIL THEN.** The run ends. Heading: **"UNTIL THEN."** Below it, a single hand-typed-looking line ("rinji.dev — provisional, rev. 3, remove after.") and a faint chalk arrow pointing back up to Panel 01, implying the loop. The bottom seam has its two bolts un-stencilled — half-painted — as if this panel is the one about to be carried off. **Motion language:** everything moves like **paper and plywood, not glass and light.** Use short, slightly-damped transforms — settle, snap, shiver, stamp — never smooth float, never parallax-as-spectacle. Scroll progress drives the right-edge **barrier-tape strip**: the active panel word gets its red `臨時` seal stamped over it (the seal does the same press-overshoot). A faint horizontal **"seam crossed"** flash (1px cone-orange line, 200ms) plays each time a panel seam passes the viewport top. Cursor: when hovering a notice card, the staple gives a 2px **stress-creak** (rotate ±0.3deg) — a single micro-interaction, used once per card, nothing more. Respect reduced-motion by freezing all of it to the settled state. **Bias the entire build toward this being an unhurried, full-screen, first-person walk** — five panels, a short honest essay, a stamp, and the wind. ## Uniqueness Notes 1. **"Temporary infrastructure" as the literal site material — not a metaphor laid over a normal layout, but the layout *is* a hoarding** (bolted plywood panels, hazard-tape border, barrier-tape nav, staples holding cards). No other design in the corpus is built as municipal/construction temporary-works; the dominant `card-grid` (91%) / `full-bleed` (87%) / `centered` (82%) conventions are all refused — the layout is asymmetric, left-hung, deliberately off-register, and one panel breaks its own grid by sliding off the plywood. 2. **Riso-print mis-registration is the unifying texture, and the typography is pointedly anti-mono.** `mono` typography appears in 94% of designs here and `glassmorphism` in 82% — this site uses neither: it pairs `Stardos Stencil` (spray-stencil) with `Hanken Grotesk` (civic grotesque) and `Caveat` (chalk), and every heading/card carries a deliberate 1–2px two-colour registration ghost. It is "warm palette" (the 98% convention) but inverted in feeling — warm plywood used to evoke a works-site, not a cosy cottage. 3. **The concept is built on admitted impermanence — no countdown, no hype, no CTA.** Where "coming soon"/launch pages perform urgency, rinji.dev performs honesty: a dry first-person essay about being scaffolding, ending in a loop arrow and half-painted bolts. It collapses the `hand-drawn` (95%) and `parallax`/`cursor-follow`/`spring` motion clichés down to a tiny vocabulary of paper-and-plywood moves (stamp, settle, shiver, snap, underline-draw) and a single per-card micro-interaction. 4. **Chosen seed/style: `wabi-sabi imperfect ceramic`** (an 8% / underused aesthetic in the corpus) — reinterpreted away from ceramics toward weathered plywood and worn hazard tape, but keeping wabi-sabi's core: asymmetry, accepted flaws, the beauty of the provisional and the about-to-pass. 5. **Avoided per frequency analysis:** `hand-drawn` (95%), `glassmorphism` (82%), `mono` typography (94%), `photography` imagery (98%), `card-grid` (91%), `full-bleed` (87%), `centered` (82%), `parallax` (90%), `cursor-follow` (88%), `spring`/`magnetic` motion (84%/79%), and all gradient-as-decoration (`gradient` palette 94%) — none are used here.