# Design Language for okurairi.net ## Aesthetics and Tone `okurairi.net` is built around the Japanese phrase **お蔵入り (okurairi)** — "to be put in the storehouse," the fate of a film, a record, a manuscript that is finished but never released, sealed away in a *kura* (蔵, the white-walled fireproof warehouse of old merchant towns). This site is that storehouse, walked through at dusk. Not a gallery — galleries are about display. A *kura* is about keeping: keeping things from light, from fire, from time, from the eyes of anyone who would judge whether they were ever "good enough." The mood is **wabi-sabi as inventory**. Imperfect, weathered, asymmetrical, quietly mournful but not sad — there is dignity in the shelved thing. Imagine the inside of a clay-walled storehouse: the air thick and amber, dust suspended in a single shaft of low light from a high window, the smell of old paper and rice straw, ceramic jars with crackle-glaze (*kannyu*, 貫入) lined unevenly on cedar shelves. Every "exhibit" on this site is a project that was abandoned, cancelled, or simply never finished — and the site treats each one with the gravity of a museum object, complete with a wabi-sabi accession label. The tone of voice is the hushed register of a conservator speaking to no one: precise, tender, faintly apologetic on behalf of the objects. This is **not** a portfolio that says "look what I made." It is the opposite: a portfolio of what was *not* made, presented so carefully that the visitor begins to feel the unreleased thing was the truer thing. ## Layout Motifs and Structure A **single vertical descent through a storehouse**, not a scroll-jacked rollercoaster — gravity-paced, like walking down a dim corridor where shelves emerge from the dark one at a time. - **The Threshold (viewport 1):** A near-black field, then a single warm shaft of light fading up the left third — the *kura* door cracked open. The domain set in small caps, low on the screen, with its translation beneath in a whisper: *okurairi — kept in the storehouse*. No nav bar. No menu. The only affordance is downward. - **Ma (間) as the primary structural element:** Generous, uneven negative space is the *content*. Shelves do not fill the viewport — they sit off-center, with the empty dark given more room than the object. Margins are deliberately unequal left vs. right (e.g. 22vw / 9vw), rebalancing slowly as you descend, as if the building itself leans. - **The Shelf Units:** Each shelved project is one full-viewport "shelf" — a horizontal cedar plank rendered as a thin warm rule, on which sits ONE artifact: a crackle-glazed jar, a tied paper bundle (*furoshiki*), a film canister, a wax-sealed scroll tube. The artifact is rendered as a soft, slightly out-of-focus shape (blur-focus is a core pattern) that sharpens only when the visitor's gaze (cursor) lingers near it for >800ms — as if their attention is the lamplight. - **Accession Labels:** Beside (never beneath) each artifact, a small typeset card in the manner of a museum tag — but worn: a project codename, the years it lived (e.g. *2019–2021, sealed*), a one-line cause of death (*"funding withdrew the week before the shoot"*), and a single redacted-looking line where the synopsis would be. The card is rotated 1.5–3° off true. Nothing is straight. Straightness would be a lie. - **The Inventory Ledger (footer-as-room):** The descent ends not in a CTA but in a *room* — a dim wide space with a single book on a stand: the storehouse ledger, listing the count of sealed works (handwritten-style numeral), the date of the last entry, and a closing line. Then the light fades down to black again. The door closes. Explicitly avoided: hero-with-button, card grids, bento boxes, pricing tiers, stat counters, testimonial rows, "featured work" carousels. ## Typography and Palette **Typefaces (all Google Fonts):** - **Cardo** — display + accession labels + body. A quiet, slightly old-fashioned serif revival with real warmth and ink-trap personality; set it large and loose for the few headlines (the artifact names), and small with generous leading (1.7) for the conservator's notes. Cardo's faint asymmetries suit a wabi-sabi inventory. - **Shippori Mincho** — for any Japanese glyphs (お蔵入り, 蔵, 間, 貫入) and for the few words rendered vertically. A traditional mincho with brush-derived bones; carries the storehouse's age without costume. - **Spectral** — for the worn "redacted" lines, the ledger numerals, and italic whispered asides; its low-contrast italic reads like soft pencil. Used sparingly. No sans-serif anywhere. No monospace. The web's defaults are unwelcome guests here. **Palette — muted, sepia-nostalgic, candle-lit:** - `#0B0906` — *kura* darkness (deep brown-black, never pure #000) — the ground. - `#1C1611` — shelf shadow / panel base. - `#3A2E22` — aged cedar plank. - `#C9A86A` — lamp-shaft amber (the one warm light; used as the focal glow and rule color). - `#E7D9BE` — old rice paper (primary text on dark; warm cream, never white). - `#8C7A5E` — dust / faded-label ink (secondary text, accession tags). - `#6B7B6E` — *seiji* celadon — the single restrained accent, a glaze-green, used only on the crackle lines of one jar and on hover sharpening. - `#A24B3C` — *bengara* iron-oxide red — used once, for the wax seal and the redaction bars. The only loud thing in the building, and it's loud the way a single closed door is loud. Crackle-glaze (*kannyu*) lines are drawn as 0.5px hairline fractures in `#6B7B6E` at 30% opacity over the jar shapes. ## Imagery and Motifs - **Dust motes (floating-elements):** A slow, irregular drift of 8–14 tiny semi-transparent specks per shelf, mostly within the amber shaft, with subtle parallax — they're between the visitor and the artifact, the patina of a closed room. Never decorative sparkle; almost-invisible. - **Paper-aged & noise texture:** Every surface carries a per-session-regenerated grain — uneven, with a faint vertical foxing bias near edges, like the spots on old paper. The accession cards have darker, blotchier edges (a tea-stain ring on one, randomly placed). - **Crackle-glaze fractures:** Hand-drawn SVG fault-line networks (Voronoi-derived) over ceramic forms — these *very slowly* extend by a hair as the page lives, as if the glaze is still settling. Wabi-sabi made literal: the object continues to age while you watch. - **The shaft of light:** A single soft-edged CSS gradient cone from the upper-left, parallaxing gently against scroll, occasionally — every ~40s — flickering 4% as if the high window's shutter moved in wind. - **Knot & wrapping motifs:** Tied *furoshiki* corners, wax seals, twine — the visual language of *closing*, not opening. Icons (if any) are minimal hand-inked line marks: a knot, a folded corner, a small ▣ for "sealed." - **Vertical text columns:** The kanji 蔵 (storehouse) appears once, set vertically in Shippori Mincho along the right margin near the threshold, faint, like a brushed label on the building itself. - No photography. No 3D render. No people. The objects are abstract, soft, suggested — you are not allowed to fully see what was lost. ## Prompts for Implementation Build a **single-route, full-screen narrative descent**. Treat the whole page as one continuous dim corridor; scroll is walking; there is no second page. - **Open in darkness.** First paint is `#0B0906` with the amber shaft fading in over ~2.5s and the domain rising into view low-center. No nav, no logo lockup, no "skip intro," no button. The instruction is implicit: the page moves down. - **Reveal by approach, not by trigger-line.** As each shelf enters the viewport, fade it in from the dark with `fade-reveal` — but the artifact stays *blurred* (8–12px) and desaturated until the cursor dwells within ~180px for 800ms, at which point it sharpens and warms over ~1.2s (the `blur-focus` pattern as the spine of the whole interaction). Move away and it slowly re-blurs over ~3s — attention is finite; the storehouse forgets. - **Everything is slightly wrong on purpose.** Rotate accession cards 1.5–3°, offset shelf planks by a few px, let line-heights and margins vary shelf to shelf. Use prefers-reduced-motion to halt the dust drift, the flicker, and the crackle-growth — but keep the asymmetry; that's structure, not motion. - **The cursor is a lamp, not a pointer.** Optionally render a very faint warm radial glow following the cursor at low opacity that subtly lifts whatever surface it passes over (additive blend, ~6% strength). Magnetic pull on the accession cards is *forbidden* — these objects do not reach for you. - **Redaction interaction.** The "synopsis" line on each card is a `#A24B3C` bar. Hovering it does NOT reveal text — it reveals more redaction, the bar extending a little, with a tiny tooltip in Spectral italic: *"not for release."* The withholding is the content. - **Dust & crackle as ambient life.** Canvas or SVG dust particles drifting at <0.4px/frame, mostly inside the light cone. Crackle SVG paths with `stroke-dashoffset` very slowly animating to "grow" fractures. The shaft flicker on a loose ~40s timer. All of it nearly subliminal — if a visitor *notices* an animation, it's too strong. - **The ledger ending.** Final viewport: a wide dim room, a single book on a stand drawn in soft line, an open page with a handwritten-style count (use Cardo at large size, off-center) of sealed works and a date. Then a closing line in small caps, then the amber shaft and everything fades down to `#0B0906`. No newsletter form. No "let's work together." The door closes; that's the end. - **Performance is irrelevant to this brief; atmosphere is everything.** Layer freely: grain overlays, blend modes, parallax cone, particle field. Type set in Cardo/Shippori Mincho/Spectral, served warm, never on white. ## Uniqueness Notes Differentiators from other sites in the batch: 1. **The domain's literal meaning is the entire architecture.** お蔵入り = "shelved, sealed in the storehouse." The site IS a storehouse you descend through, exhibiting *unreleased* works as museum objects. No other domain in the batch can borrow this without it becoming nonsense — the concept is welded to the word. 2. **A portfolio of the un-made.** Inverts the portfolio genre completely: instead of "look what I built," it's "here is what was abandoned, cared for anyway." Accession labels, causes-of-death, redacted synopses — the failure is curated with museum gravity. 3. **Attention-as-lamplight interaction.** Artifacts are permanently blurred and only sharpen where the cursor dwells, then slowly re-blur — the visitor's gaze is a finite light source moving through a dark room. Magnetic/hover-lift toward the cursor is explicitly banned; objects do not court you. 4. **Withholding as the payload.** The redaction bars *grow* when hovered. There is no CTA, no form, no exit ramp — the experience ends with a door closing into black. 5. **Strict no-sans, no-mono, no-photo, no-#000, no-#fff discipline** — Cardo + Shippori Mincho + Spectral on a sepia/candle palette (`#0B0906 / #C9A86A / #E7D9BE / #6B7B6E / #A24B3C`), with literal aging (crackle glaze extends, paper foxes) happening live. Chosen seed/style: **wabi-sabi imperfect ceramic** (registry frequency ~9%, deliberately underused) — extended across axes as: aesthetic: wabi-sabi (+ zen restraint); layout: ma-negative-space + immersive single-route descent; typography: serif-revival/elegant-serif (Cardo + Spectral) with Shippori Mincho for CJK, zero sans/mono; palette: muted + sepia-nostalgic (candle-amber, rice-paper cream, celadon, bengara red on brown-black); patterns: fade-reveal + blur-focus as the interaction spine (parallax used only for the light cone and dust); imagery: paper-aged + noise-texture + hand-drawn crackle SVG, no photography/3D; motifs: floating-elements (dust motes) + knot/seal/wrapping marks + a single vertical kanji; tone: zen-contemplative + nostalgic-retro. Avoided patterns from frequency analysis: no glassmorphism (80%), no hand-drawn-cartoon aesthetic (96%), no photography (98%), no card-grid (90%), no full-bleed hero-with-CTA, no cursor-follow magnetic pull (89%/81% — a faint cursor *glow* is used, but no magnetic attraction), no stat counters, no dashboard, no mono typography (94%), no warm-gradient-mesh (95% gradient). Pastoral-romantic (35%) is sidestepped in favor of a melancholy storehouse register.