# Design Language for rinji.org ## Aesthetics and Tone This site is built on the word **臨時 (rinji)** — provisional, temporary, the extraordinary session called on short notice, the bus that runs only today, the bridge of planks laid down while the real one is being argued about. The design takes that meaning literally and turns it into an aesthetic of *honest impermanence*: a wabi-sabi sensibility applied not to ceramics-on-a-shelf but to the scaffolding, kraft paper, gaffer tape, and unfired clay of something that was assembled this morning and may be dismantled by evening — and is beautiful precisely because it admits this. The mood is a potter's workshop at the unglazed stage: raw earthenware drying on slatted boards, a tarp half-pinned over a doorway, a hand-lettered "OPEN — for now" sign curling at one corner. Nothing here pretends to be permanent marble. Edges are deckled. Corners lift. The grid is pinned, not welded. Yet the whole thing has the quiet dignity of a thing made with care for a short life — like a tea bowl thrown for one specific guest, or a paper lantern that will be lit once. Tone is **grounded-earthy and zen-contemplative**: unhurried, a little dusty, faintly amused at its own temporariness. It speaks softly. It does not sell. It treats the visitor as someone who wandered into a half-finished room and is welcome to look around before the light changes. There is melancholy in it — *mono no aware*, the pathos of things — but the dominant note is warmth: the warmth of clay still holding the heat of hands. ## Layout Motifs and Structure A **pinned-board composition** on a deliberately *broken grid* — imagine a workshop wall of slatted wood where sheets of paper, clay tags, and tarps have been tacked up at slightly-off angles and never straightened. - **Base grid:** a loose 9-column field, but every block is rotated between −1.4° and +1.8° and offset 2–8px from true. Alignment is approximate, like things hung by eye. On scroll the rotations breathe by ±0.3°, as if a draft moved through the room. - **The Tarp (hero / first viewport):** a full-bleed sheet of warm kraft-colored canvas with visible grommets at the corners, one corner *un-pinned* and curled back to reveal a sliver of the page beneath. The site title — **臨時 / rinji / "for now"** — is brush-lettered across it, slightly uneven, one stroke running off the edge. No nav bar floats on top; instead a small clay tag hangs on a string from the top-left grommet with the section names hand-incised into it. - **The Boards (content sections):** each section is a "drying board" — a horizontal slatted plank holding 2–4 unfired-clay cards. Cards have rough, irregular edges (SVG-displaced borders), faint thumbprint smudges, and cast a soft short shadow as if resting *on* the board, not floating in space. Reading flows down the boards in an editorial, single-column-ish rhythm with generous *ma* (negative space) — bare plank between every group. - **The Provisional Footer:** a sawhorse and a folded tarp; the colophon is written on masking tape stuck across two slats. A line reads: "This page is rinji. It will be replaced when the permanent one is ready. It is not." The contradiction is intentional and stays. - **Marginalia rail:** a thin left margin holds vertical incised text — a date, a "valid until" that is always blank, a tally of how many times the page has been "re-pinned" (a counter that resets every session). No dashboard. No bento. No card-grid-as-grid — the cards exist but they sit on *boards*, askew, never in a clean matrix. ## Typography and Palette **Typefaces (all Google Fonts):** - **Display / brush-lettering:** **Yuji Mai** — a brush-script Japanese-Latin face with genuine ink-bleed irregularity; used for the title 臨時 and section headers. It looks hand-drawn because it is. Run large (clamp 3rem → 7rem), tracking loose, occasional single glyph rotated. - **Body / running text:** **Zilla Slab** — a warm, slightly soft slab serif with a workbench-honest feel; weights 300/400/500. Generous 1.7 leading. Used for everything you actually read. - **Incised labels / clay tags / marginalia:** **Cutive Mono** — a typewriter-derived monospace, narrow and a touch worn; used at small sizes (0.7–0.85rem), letter-spaced +0.06em, for the tags, the "valid until" blank, the masking-tape colophon. - **Korean / Japanese passages where present:** **Shippori Mincho** — an elegant mincho with brush-cut serifs that sits naturally beside Yuji Mai. **Palette — the unglazed-clay set:** - `#E7DCC8` — **kraft canvas** (the tarp; primary background) - `#C9B79C` — **raw plank** (board surfaces, section bands) - `#9A6B4F` — **terracotta unfired** (primary accent — card edges, brush strokes, links) - `#3A2E26` — **kiln-soot brown** (primary text; near-black but warm) - `#7C8A6E` — **dried-sage** (secondary accent — the string, the incised marginalia, hover states) - `#D8503A` — **vermilion stamp** (rare, single-use punctuation: the hanko-style "rinji" seal, the un-pinned-corner glow; appears at most twice per viewport) - `#EFE9DC` — **bone slip** (raised card faces, where text sits) Everything is matte. No pure white (`#FFFFFF` is forbidden), no pure black, no glass, no neon. Faint paper grain at 4–6% over the whole surface. ## Imagery and Motifs - **Deckled / displaced edges:** every card, tarp, and tag uses an SVG `feTurbulence` + `feDisplacementMap` on its border so no two edges are alike — torn paper, rough-cut clay, frayed canvas. Regenerated per load with a session seed. - **Grommets, string, and pins:** brass grommet circles, a hanging string with a real (CSS) catenary curve, push-pins casting tiny shadows. The string sways on scroll and on cursor proximity. - **Thumbprints & tool marks:** subtle, low-opacity SVG fingerprint whorls and the parallel ridges of a clay rib pressed into card backgrounds — never decorative-loud, just *evidence of a hand*. - **The provisional stamp:** a circular brush-drawn 臨時 hanko in vermilion that thuds onto the page (a quick scale-down + slight rotation) when a section enters view, then sits there slightly off-center, ink edges feathered. - **Slats & sawhorses:** thin horizontal wood-grain bands (CSS gradients, not photos) define section boundaries; the footer literally renders a sawhorse in SVG line-work. - **Drying cracks:** as you scroll, faint hairline crack-paths slowly draw themselves across the kraft background (`path-draw-svg`), as clay dries. They never break anything; they're just time, visible. - **No stock photography.** No 3D renders. No gradient mesh. If a visual is needed it is drawn in SVG line-work the color of soot or sage, loose-handed. ## Prompts for Implementation Build a single-route, full-screen **narrative scroll** — the visitor walks through a workshop in the order: *the tarp → the drying boards → the marginalia → the provisional footer*. Scrolling is the only navigation; the clay tag on its string is the table of contents and clicking a name *swings the string* and eases the page to that board. - **Open with the Tarp full-bleed.** Title brush-lettered, one corner un-pinned and curled, vermilion glow leaking from underneath. No CTA. No "Get Started." No menu bar. Just the curled corner inviting a peek — on hover the corner peels back a few more degrees with a `spring` ease, revealing the first board beneath, then settles when the cursor leaves. Scroll to actually enter. - **Every block enters askew and *settles*** — appears rotated a degree or two more than its resting angle, overshoots, and `elastic`-settles into place as if just hung. Stagger the clay cards on each board so they land one after another, like being set down. - **The string is alive.** Render it as an SVG quadratic curve with a small physics loop (verlet, two points) so it sways with scroll velocity and leans toward the cursor when near. The clay tag at its end has weight. - **Cursor as a hand, lightly.** A soft, small custom cursor — a faint smudge, not a dot. Near a card edge it deepens slightly (a fingerprint pressing). `magnetic` pull on the clay tags only; everything else stays put. - **Drying-crack scroll-draw:** one or two hairline crack `path`s per long section, `stroke-dashoffset` animated to draw as that section scrolls through center. Sage or faint soot, never the accent. - **The 臨時 stamp** lands once per major section via `IntersectionObserver` — quick scale 1.15 → 1 with a −3° rotate and a tiny shadow puff. It must look *stamped*, not faded-in. - **Honor `prefers-reduced-motion`:** the string goes static-curved, blocks fade gently into their resting angles, cracks appear pre-drawn, the stamp simply is there. The askewness and the materials stay — they're structure, not motion. - **Microcopy carries the theme.** Buttons (the few that exist — only "send" on a contact line, written on masking tape) say things like "tack it up" / "for now". The "valid until" field is always empty. The re-pin counter resets each visit. The footer keeps its self-contradiction. - **AVOID:** CTA-stacked hero, pricing tables, stat/metric grids, feature-card matrices, glassmorphic panels, gradient-mesh backgrounds, hand-drawn-doodle clipart, full-screen video, cookie-banner-as-design. This is a workshop wall, not a SaaS landing page. Performance and accessibility tuning are out of scope here — prioritize the material poetry: the tooth of the kraft, the lift of the corner, the weight on the string. ## Uniqueness Notes Differentiators from other sites in the batch: 1. **Self-aware impermanence as the entire concept.** The site *is* the meaning of its domain — 臨時, "for now" — and says so, contradicts itself, and keeps a counter of its own re-pinnings. No other batch site can borrow "the page that admits it's temporary and is beautiful for it" without it ringing hollow. 2. **Wabi-sabi applied to scaffolding, not to objects on shelves.** Most wabi-sabi designs render serene ceramics in clean white space. This one is the *workshop before the glaze* — kraft, grommets, drying boards, tool marks, deckled SVG-displaced edges — material honesty over object worship. 3. **A physics-driven hanging string as navigation + a brush-stamped 臨時 hanko as the section punctuation.** Verlet-sway clay tag for the TOC, thudding vermilion seal per section — interaction grammar that exists nowhere else here. 4. **A strictly matte, no-white, no-black, no-glass unglazed-clay palette** (`#E7DCC8 / #C9B79C / #9A6B4F / #3A2E26 / #7C8A6E / #D8503A / #EFE9DC`) paired with **Yuji Mai + Zilla Slab + Cutive Mono + Shippori Mincho** — a typographic set that doesn't lean on the batch's overused plain mono. Chosen seed / style: **wabi-sabi imperfect ceramic** — extended from "objects" to "the provisional structure itself." Avoided patterns from frequency analysis: no **glassmorphism** (82%), no **hand-drawn doodle clipart** (95% — the only hand here is brush-lettering and tool marks, not cute doodles), no **photography** (98%), no **card-grid-as-grid** (91% — cards sit askew on boards), no **gradient palette** dependence (94% — flat matte clay tones), no **cursor-follow dot** cliché (88% — a soft smudge that mostly stays put), no **warm gradient + parallax** default combo. Underused leans embraced: **wabi-sabi aesthetic**, **broken-grid + ma-negative-space layout**, **slab serif body**, **paper-aged / noise-texture imagery**, **elastic settle** and **path-draw-svg** as the motion vocabulary.