# Design Language for okurairi.net ## Aesthetics and Tone okurairi.net is a **wabi-sabi archive of the unreleased** — a quiet, twilight-lit ledger of things that almost-were and were ultimately shelved. The Japanese word *okurairi* (お蔵入り) literally means "entering the kura" — going into the family storehouse — and idiomatically refers to a film never released, a song mastered but never pressed, a manuscript pulled from print, a project that crossed every gate except the last. This site is the public reading room of a fictional **"Shelved Index"** — a small, scrupulous, slightly melancholy bureau that catalogues items their makers chose to withhold, with the consent (real or imagined) of those makers. The mood is **dusk in a wooden kura on the third evening of rain**: cedar that has gone the colour of weak tea, soot-darkened plaster, a kerosene lamp turned low, the smell of old rice-paper and a faint metallic tang from oxidised film tins. Nothing in the room is new and nothing is broken — everything is **perfectly used**. A hairline crack runs through the lacquer of a writing-box; a cabinet door has settled 1.5° off plumb in eighty years and no one corrects it; a kintsugi seam of dull gold runs across a tea-bowl that holds paperclips. Imperfection is honoured, not decorated. Tonally the site is **mysterious-moody crossed with scholarly-intellectual**, with a thread of **zen-contemplative** patience underneath. There is no urgency, no marketing, no enthusiasm. The site speaks in the register of a careful conservator writing a finding-aid: short declarative sentences, precise dates, deliberate gaps where information is uncertain, and a willingness to leave a record entry blank rather than guess. There is sadness here, but it is *useful* sadness — the productive grief of a librarian for things almost lost. The site believes shelved work is not failed work; it is **work that completed its real purpose privately**, and the archive's job is to acknowledge that completion without disturbing it. Anti-patterns explicitly rejected: no triumphant CTAs, no testimonials, no pricing, no "join the newsletter," no statistic counters, no hero gradients, no glowing borders, no neon. Nothing here is for sale and nothing is being optimised. ## Layout Motifs and Structure The site is a **single vertical scroll governed by *ma***, the Japanese principle of meaningful negative space. Roughly 62% of every viewport is empty cream paper. Content is small, set in deep margins, and surrounded by air the way a single bowl sits at the centre of a low table at a tea ceremony. The eye is allowed to rest between objects. Underlying grid: a **9-column "tatami" lattice** — three groups of three columns separated by wider gutters that mimic the binding strips between tatami mats. The lattice is *invisible* by default but reveals itself as 0.5px hairlines at 8% opacity when the cursor stops moving for 2.4 seconds. Content blocks always sit on whole-mat units (1×1, 1×2, 2×1, 2×2 mats); fractional placements are forbidden by the design itself, which is the architectural mercy of *ma*. Macro-structure (top to bottom — these are the only sections; nothing else is added): 1. **Threshold (genkan).** A single full-viewport plate, mostly blank. The wordmark "おくらいり / okurairi.net" sits low and left, around the 22% mark from bottom-left. To its right, a one-sentence definition typeset like a museum vitrine label. No navigation, no buttons. Scrolling is the only affordance, and a tiny vertical bar of nine sumi-ink dots in the lower-right margin tracks where the reader is in the catalogue. 2. **The Reading Room.** A short prose passage — three paragraphs maximum — explaining what the Shelved Index is and is not. Set in a single 5-mat-wide column, deeply inset, with the right two-thirds of the viewport entirely empty save for a small pen-and-ink illustration of a *kura* door, slightly ajar. 3. **Six Numbered Entries (the catalogue).** The heart of the site. Each entry is a **shelved object record** in the bureau's house format. Entries occupy 4×2 mats and alternate left- and right-aligned within the lattice, never centred. Between entries: a full mat of vertical breathing room (≈ 28vh of empty paper). Each entry contains: - a **call number** (e.g. `SI–1974–FILM–017`) set in mono in the upper outside corner - a **lacquered title** (the shelved work's title or working title), italicised, sometimes followed by a bracketed `[unconfirmed]` - a **provenance line** (creator initials, year withdrawn, medium) - a **shelving note** of 60–110 words explaining, in conservator's voice, what the item is and why it was withheld — never sensational, often tender - a **condition mark** drawn as a small sumi-brush ideogram (健 sound, 損 damaged, 朧 indistinct, 蔵 stored, 焚 burned, 還 returned) - and, when extant, a **fragment**: a single permitted excerpt — one sentence of a film synopsis, eight bars of a melody as a thin SVG line, four lines of a poem — surrounded by white margin. 4. **The Withholding Clause.** A short, formal page-spread explaining the bureau's ethic: nothing complete is reproduced; the archive exists to remember that withholding is itself a creative act. Set as a calligraphic-feeling block in the centre of an otherwise empty viewport, with a single horizontal hairline running the page-width above and below. 5. **Colophon (奥付 *okuzuke*).** The traditional Japanese book-end colophon: hand-set typography credits, paper-stock notes, the date the catalogue "went to press," the names (initials only) of the volunteer cataloguers, and the sentence "*This index is itself shelved every spring.*" — meaning the site quietly archives its own state on a fixed date. Sits in the bottom-right corner of a final empty viewport. There is **no header, no menu bar, no footer with social links, no chat bubble, no cookie banner overlay**. The only fixed UI is the 9-dot scroll dotted-rule in the lower-right margin and a thin horizontal **cedar-grain progress thread** at the very top edge of the viewport, 1px tall, that fills with sumi-ink as the reader descends. The composition logic is **asymmetric on purpose**. Mirror-symmetry is avoided everywhere; left-right balance is achieved through *weight* (a small dense block balancing a large empty quadrant), not through reflection. This is the wabi-sabi principle of *fukinsei*. ## Typography and Palette Three Google Fonts only, each with a clear narrative role. All three names verified as published on Google Fonts. - **Display / wordmark / entry titles:** **"Cormorant Garamond"** at 500 italic and 600 roman. A revival of Claude Garamont's 16th-century romans drawn unusually fine and tall, with restrained calligraphic terminals. Used at `clamp(2.4rem, 6.4vw, 5.2rem)` for the wordmark, with letter-spacing `0.01em`, line-height `0.96`, and the `okurairi` set in lowercase italic 500 to feel like a hand-written ledger entry rather than a logo. Entry titles use Cormorant Garamond italic 500 at `clamp(1.4rem, 2.6vw, 2.1rem)`. Garamond carries the scholarly-conservator voice without ever feeling corporate. - **Body / shelving notes / prose:** **"Spectral"** at 400 and 400-italic, optical size set for reading. Spectral is a contemporary serif with a slightly soft, slightly humid feel — its terminals are cut, not rounded, and there is a faint architectural cool in its bowls. Body text at `1.0625rem` with line-height `1.72` and a measure capped at **62 characters**. Italics are used for object titles and for the rare moment the bureau speaks in its own voice ("we elected not to display this film"). - **Mono / call numbers / provenance / colophon technicalia:** **"JetBrains Mono"** at 400, used at `0.78rem` with letter-spacing `0.04em` and `font-variant-numeric: tabular-nums`. Mono is reserved entirely for *codified* information: call numbers, dates, dimensions, paper-stock specs, the colophon's ISBN-style ledger row. It never appears in prose. This separation of registers (Garamond = library voice, Spectral = reading voice, JetBrains Mono = catalogue voice) is the entire typographic system. A fourth presence — not a font, but a graphic element — is the **sumi-brush condition ideogram** (健 損 朧 蔵 焚 還). Each is hand-drawn once as an SVG path and used at small size; they are *not* rendered with a font, deliberately, so each stroke carries a real wet-brush wobble. Colour palette — eight tones, all named after substances, all desaturated, all warm-leaning: - **`--washi`** `#EFE7D6` — the dominant page colour, a warm un-bleached mulberry-paper cream. ≈ 78% of pixel area. - **`--sumi`** `#1B1612` — primary ink; not pure black. Deep brown-black like fresh-ground sumi-stick mixed thin. - **`--shibu`** `#5A463A` — persimmon-tannin brown, used for secondary text, hairlines, and the cedar-grain progress thread. - **`--kintsugi`** `#A88542` — antique gold, used *only* for the sumi-brush condition ideograms and the single hairline that opens and closes the Withholding Clause. Approximately 0.3% of pixel area; its scarcity is the point. - **`--matcha-grey`** `#7A8174` — a dusty greyed tea-green, used for `[unconfirmed]` brackets, italicised editorial notes, and the dotted scroll-rule. - **`--shiro`** `#F8F4E8` — paler paper, used for inset blocks (fragment excerpts) so they read as a slip of fresh paper laid on the page. - **`--asagi`** `#5C7A82` — dawn-blue-grey, used sparingly for hover states on entry titles. The site's only cool tone; a single drop of cold in a warm room. - **`--kuro-grain`** `#0F0B08` — used at 4–6% opacity for the noise-grain layer that overlays the entire site (subtle paper texture). Contrast between `--sumi` and `--washi` is intentionally moderate (≈ 13.4:1) so the page reads as old paper rather than printed-yesterday paper. No pure white and no pure black appear anywhere on the site. ## Imagery and Motifs There is **no photography**. Every visual element is either inline SVG, hand-drawn type, or generated paper-grain — the site contains zero raster images. This is partly aesthetic discipline and partly thematic: a registry of withheld things should not parade pictures. The visual vocabulary, motif by motif: - **Pen-and-ink kura door** (Section 2). A 360×440px inline SVG of the storehouse door drawn in single-weight 0.9px `--sumi` strokes, slightly ajar, with one diagonal sliver of `--shiro` paper-light spilling out. The hinges show wear. Drawn with deliberate hand-tremor in the path data — no perfectly straight lines. - **Six conditional ideograms** (健 損 朧 蔵 焚 還), each a real wet-brush sumi character traced into SVG as a multi-segment path with variable stroke-width. Each character has one micro-blot at its starting tick to mimic the touch of a charged brush. Used inline in entries. - **Cedar-grain progress thread.** A 1px-tall band at the very top of the viewport whose fill, as scroll progresses, is not a flat colour but a generated 1D wood-grain texture — sparse vertical knots of `--shibu` over `--washi`, computed once on page load with a seeded noise function. No two visits have identical grain. - **Tatami lattice ghost.** When idle for 2.4s, the 9-column lattice fades in at 8% opacity over 600ms, the lines drawn as path-draw-svg from top to bottom (not pop-in). Any movement fades it out in 240ms. - **Fragment plates.** When an entry permits a fragment, it sits in a small inset rectangle of `--shiro` paper with a hairline `--shibu` border. For audio fragments, the eight permitted bars of melody are rendered as a horizontal SVG line that rises and falls with note pitch (no audio plays — the *shape* of the music is all the bureau will release). For text fragments, the excerpt is set in Spectral italic with a true em-dash above and below. For film fragments, a single SVG storyboard panel (a low rectangle with a horizon line and one figure) stands in for the unseen scene. - **Paper grain.** A static `` noise overlay sits above the background colour at 4–6% opacity, with octaves tuned to feel like the long fibres of washi rather than the fine grit of newsprint. Generated once, fixed for the session. - **Marginalia ticks.** Small `--shibu` editorial marks — a single horizontal dash in the outer margin next to entries that have been "re-shelved" (i.e. updated), an open circle next to entries whose makers have since died, a tiny tilted square next to entries the bureau has been asked to remove. These marks are never explained on the page; a reader who notices the system can decode it. This is a deliberate quiet-knowledge motif. - **No icons of the modern UI sort.** No magnifying glass, no hamburger, no arrows, no share buttons. The only "interactive" graphic is the cursor itself, which on hover over an entry title becomes a small `--kintsugi` square (1ch wide), recalling a chop-mark seal. Forbidden imagery, listed so the implementer cannot drift into it: glossy 3D renders, mesh gradients, glowing light orbs, photographic textures, parallax photography, glassmorphic cards, neon rings, isometric icons, animated emojis. ## Prompts for Implementation - Build the site as **a single static HTML document** — `index.html`, `style.css`, `script.js`, and one inline `noise.svg` filter. No framework, no bundler, no router, no service worker. The reader should be able to view-source and read the entire site as a single calm document. Total weight target under 90KB transferred (text only — there are no images to begin with). - **Load order is part of the experience.** Fonts load via a single `` to Google Fonts with `display=swap` (Cormorant Garamond 500 italic + 600, Spectral 400 + 400-italic, JetBrains Mono 400). Until they arrive, the page renders in `serif` and `monospace` system stacks — and *this is fine*. The site should look dignified even ungoverned by webfonts. - **Layout-first construction.** Build the 9-column tatami lattice in CSS Grid first, with all six entries placed on whole-mat coordinates, *before* writing any JS. The site must be fully readable, scrollable, and beautiful with JavaScript disabled. JS only adds: the idle-tatami-reveal, the cedar-grain progress thread, the seeded paper-grain regeneration, and a single `IntersectionObserver` that triggers the per-entry fade-reveal of the shelving notes (the call number and title are always already visible). If JS is off, all entries are simply visible from the start. **No layout shift is permitted on JS load.** - **Storytelling discipline.** This is the heart of the site. Each of the six catalogue entries is a tiny story, *complete in itself*, that does not link out, does not unfold a modal, does not expand. The reader meets the entry, reads the conservator's note, sees the permitted fragment, and moves on. The cumulative effect of six entries is meant to be *quiet astonishment* at how much creative work in the world lives in storehouses. Write the entries in the voice of a person who has personally handled the objects. - **Animation is sparing and slow.** Every animated element honours **fade-reveal** as its primary verb — opacity 0 → 1 over 900–1400ms with `cubic-bezier(0.22, 0.61, 0.36, 1)`, with stagger between sibling elements of 110ms. No bouncing, no sliding-from-the-right, no scale-up. The cedar-grain progress thread fills smoothly with `requestAnimationFrame`. The idle tatami reveal is the only *appearing* element; everything else is already where it will be. **`prefers-reduced-motion: reduce` disables the tatami reveal, the grain regeneration, and the entry stagger; the site loses nothing essential when reduced.** - **Cursor and hover.** The cursor over body text is the OS default. Over an entry title, swap to a 1ch-wide `--kintsugi` square (CSS `cursor: url(...) 8 8, pointer;` with a 16×16 SVG data URI). On hover of an entry title, the title shifts colour from `--sumi` to `--asagi` over 320ms; nothing else changes. There is no "card hover lift," no shadow-grow, no border animation. Restraint is the brand. - **Type the dates correctly.** All dates in entries use Japanese-archival convention: `YYYY 年 M 月` for general dates, `YYYY` alone for years-only. Mix of Western and traditional registers is intentional — the bureau is bilingual. - **Full-screen narrative bias.** Each section is engineered to occupy at least 100vh, often 130–160vh, so that the reader's window is filled by *one thing at a time*. The pleasure of the site is that **only one entry is ever fully on-screen**, surrounded by paper. Do not pack entries vertically; the empty space between them is content. - **Forbidden patterns** (do not silently re-introduce these): hero CTAs, signup forms, statistic blocks, pricing tables, social-proof rows, testimonial sliders, FAQ accordions, "how it works" three-column grids, comparison tables, footer link farms, breadcrumb navigation, sticky headers with logo and menu, in-page anchors styled as buttons, cookie banners, exit-intent modals, chat widgets, badges of any kind. None of these belong in a kura. - **Edge handling.** On viewports under 640px the 9-column lattice collapses to **3 columns** (one tatami group). All entries become full-width within that group. The dotted scroll-rule moves from the right margin into a single dot in the upper-right corner. The wordmark drops to `clamp(1.8rem, 9vw, 2.6rem)`. Nothing is hidden; the site is fully present on a phone, just compressed in width. - **The site catalogues itself.** In the colophon, include a JetBrains Mono table row that reads: `SI––WEB–001 · okurairi.net · v1 · · 蔵`. The site is, by its own logic, an okurairi. ## Uniqueness Notes Differentiators from the rest of the portfolio (350 designs analysed via frequency.sh): 1. **Concept-first wabi-sabi, not decorative wabi-sabi.** The aesthetic seed `wabi-sabi` sits at 6% in the registry and is usually used cosmetically (rough textures, hand-torn edges, ceramic-glaze gradients). This site **earns** wabi-sabi by being *about* an idea — *okurairi*, the dignified withholding of work — that is itself wabi-sabi in nature: incomplete, accepted, honoured. The visual restraint follows the concept rather than dressing it. 2. **Almost zero overlap with the dominant patterns.** The frequency analysis flags `photography` (80%), `gradient` (81%), `parallax` (77%), `dashboard` (74%), `hand-drawn` (75%), `mono` (81%) and `card-grid` (52%) as massively overused. This site uses **no photography, no gradients, no parallax, no dashboard, no card-grid, no hand-drawn illustration system**, and `mono` is restricted to call-numbers and the colophon — the deliberate anti-default. 3. **`ma-negative-space` honoured structurally, not decoratively.** That layout token sits at 10% in the registry, but in most uses it means "a bit of padding around a hero." Here, *ma* is a literal mat-grid law that forbids fractional placements, and 60%+ of every viewport is empty paper as a non-negotiable rule. This is the strictest structural reading of *ma* in the portfolio. 4. **A registry-rare typography pairing.** Cormorant Garamond + Spectral + JetBrains Mono is `garamond-classic` (5%) + `serif-revival` (10%) + `tech-mono` (7%) — three underused typography seeds combined into one system, with rigid register-separation (library voice, reading voice, catalogue voice). No other site in the portfolio assigns mono *exclusively* to codified data. 5. **Custom palette built from substances, not hex chips.** Every colour name is a real material (washi, sumi, persimmon-tannin, kintsugi, matcha, asagi-blue) with a documented ratio of pixel area. `--kintsugi` is rationed to ≈ 0.3% of pixels, a discipline most "luxury-gold" palettes ignore. 6. **Non-standard sectioning that ignores the SaaS template entirely.** Threshold → Reading Room → Six Entries → Withholding Clause → Colophon. There is no Hero, no Features, no Pricing, no Testimonials, no FAQ, no Footer. The portfolio's frequency report shows `dashboard` and `card-grid` dominating — this site refuses both. 7. **Generative paper-grain and wood-grain seeded once per visit.** Two procedural noise fields (washi fibre, cedar plank) are computed once on page load and never re-seeded — so each visit has a uniquely textured paper, but within a visit the page is stable. This is *generative* (9% registry) without being *generative-art-as-spectacle*. 8. **A self-referential colophon.** The site catalogues itself as `SI––WEB–001` in its own ledger, and the closing sentence ("This index is itself shelved every spring") implies the site is a temporary artefact — a quiet rebuke to the assumption that web pages must be permanent. **Documented chosen seed/style (from style vocabulary in `tools/design/seeds.json`):** - aesthetic: **wabi-sabi** (6% registry — present but usually decorative; reframed here as conceptual) - layout: **ma-negative-space** (10% registry — usually under-applied; honoured here as a structural law) - typography: **garamond-classic** (5% registry — underused) paired with **serif-revival** (10%) and **tech-mono** (7%) - palette: **muted-vintage** (5% registry — underused) crossed with **sepia-nostalgic** (3%) - patterns: **fade-reveal** (6% registry — underused; chosen against the dominant `parallax` and `stagger`) - imagery: **paper-aged** (14%) combined with **custom-illustration** (4%) and **noise-texture** (7%) - motifs: **candle-atmospheric** (4% registry — underused; reinterpreted as "kerosene-lamp at dusk") - tone: **mysterious-moody** (5%) crossed with **scholarly-intellectual** (11%) and **zen-contemplative** (6%) **Avoided patterns flagged by frequency analysis (and excluded from this design):** photography (80%), gradient (81%), warm gradient pairing (the default), parallax (77%), stagger as primary verb (69%), dashboard (74%), card-grid (52%), hand-drawn aesthetic (75%), full-bleed (47%), hero-dominant layout (8% but template-feeling), spring/elastic motion (34% / 12%), cursor-follow (22%), CTA stacks, pricing blocks, stat-grids, testimonial rows, hover-lift, scale-hover, card-flip, neon palettes, glassmorphic cards.