# Design Language for okurairi.com ## Aesthetics and Tone okurairi.com (お蔵入り — *okurairi*, literally "entering the storehouse," the Japanese idiom for projects that are shelved, films that never release, B-sides locked in a vault, ideas politely retired) is a **playful cinematic museum of things that never saw daylight**. The site is conceived as a candle-lit *kura* — the windowless plaster-walled storehouse behind a Japanese country house — repurposed at midnight as a private repertory cinema for unfinished work. A curator we never see has dragged a 16mm projector into the rafters, propped beeswax pillars on tatami crates, pinned hand-drawn lobby cards to crooked shelves, and is screening reels that no studio would greenlight. The mood is **cinematic but mischievous**. We borrow the chiaroscuro of a Kurosawa night-scene and the deep velvet blacks of a Wong Kar-wai interior, but the caption cards are scribbled in a child's marker, the title sequences pun on themselves, and the candles occasionally sneeze and gutter sideways. Nothing is reverent for long. A solemn frame holds a doodle of a sad sock-puppet. A trailer subtitle reads *"this was supposed to be epic."* The viewer is treated as a co-conspirator at an after-hours screening, not an audience at a premiere. The atmosphere is **warm, breathing, slightly drunk on its own light**. Candle flames register as physically real: they bob, lean to escape draughts, throw soft amber halos that pulse the entire page rhythm by ~1.5%. Shadows on the parchment walls drift. Reels click. A faint shamisen bend or a single dust-mote twang punctuates section changes. Yet the playfulness is the spine — every cinematic gesture (the iris-out, the title card, the "intermission" interstitial) is undercut with a wink. This is not a portfolio of failures; it is a celebration of the generous absurdity of work that almost was. ## Layout Motifs and Structure The page is a **modular-block wooden shelving unit** — *not* a dashboard, *not* a card grid, *not* full-bleed. Imagine the cross-section of a real *kura* shelf: thick uneven plank dividers, irregular cubbies of varying width and height, each cubby holding one shelved project. The shelf grid is built on a **5-column, variable-row CSS grid where modules span 1-3 columns and 1-2 rows in a deliberately uneven mosaic** — never the regular 12-col rhythm of a corporate site. Plank dividers (1px → 4px hand-painted SVG strokes with knot-grain texture) frame each cubby, and every cubby has its own internal sub-layout: some are vertical lobby-card portraits, some horizontal title-strips, some square snapshot tins. **Structural beats, top to bottom:** 1. **The Shutter (above the fold).** A full-width *iris* — a circular black mask 80vw across — opens on first paint. Through the iris we see the okurairi.com logotype hand-lettered in wax-pencil, with a single candle flame jittering beside it. Beneath, a marquee strip in flickering serif: *"NOW NOT SHOWING."* A single line of body text introduces the storehouse. 2. **The Shelf (modular-blocks proper).** 14-18 cubbies, each one a *shelved project trailer*. The contents are fictional, archetypal "shelved" works — *Trailer #11: A Romance Between Two Vending Machines*, *Reel B: The Documentary About Boredom That Was Itself Boring*, *Cassette 0: Lullabies For Insomniacs Who Won't Listen*. Cubbies are not rectangles in equal grid — they are an interlocking mosaic where some cells extend across two rows, some are tiny square "ticket-stub" cells, and a few contain only a candle. 3. **The Intermission.** Halfway down, a full-width slim band imitating an analog film *intermission* card — orange-cream gradient (the only place gradients are allowed), countdown numerals 5-4-3-2-1 looping with the kinetic flicker. 4. **The Cutting Room.** A second cluster of cubbies, smaller and more crowded, holding *fragments*: an orphaned subtitle, a single storyboard panel, a song title with no song. This block is denser, like a wall of pinned index cards. 5. **The Vault Door.** Footer is a hand-drawn iron storehouse door, slightly ajar, with the curator's signature scrawled in red marker. There is **no sidebar, no sticky navigation, no hamburger**. Wayfinding is a single floating *programme card* (the kind you get at a small art-house cinema) that stays in the lower-right at z-index 50 and lists six section anchors as ticket-stub buttons. Clicking one fires a soft *ka-chunk* projector noise and slides the iris over the viewport before snapping to anchor. The grid uses **`grid-template-areas`** with named cubbies (`shelf-a`, `shelf-b`, … `shelf-p`) so each project occupies a hand-authored slot rather than auto-placement. On <900px the layout collapses to a single column where the cubby boundaries become **horizontal plank dividers** with the candle motif sliding into a left-margin "drip" rail. ## Typography and Palette **Display & kinetic title type — "Caprasimo" (Google Fonts)**, used for module titles, section headers, and the marquee. Caprasimo is a chunky, slightly ornate display serif with theatrical brackets and a film-poster bravado; its weight makes it perfect for letters that need to *flicker*. Title characters are wrapped per-glyph in `` and animated with a custom **flame-flicker** keyframe: each glyph independently shifts `transform: translateY(-1px) skewX(0.4deg) scale(1.01)` and adjusts its `text-shadow` warmth (`0 0 14px #f5b35e` ↔ `0 0 22px #ffd07a`) on a 90-220ms randomized cycle, producing the optical sense of being lit by a real flame nearby. Headlines use `clamp(2.6rem, 5.4vw, 4.8rem)`, letter-spacing `-0.012em`, line-height `1.05`. **Marquee / kinetic ticker type — "Big Shoulders Stencil Display" (Google Fonts)**, weight 600, used only for the "NOW NOT SHOWING" strip and the intermission countdown. Its stencil cuts read as *projected* light bleeding through a film gate. Animated as a horizontal scroll with a **600ms holdframe every 7 seconds**, mimicking the stutter of a misaligned reel. **Body type — "Fraunces" (Google Fonts)**, weight 400 (italic for marginalia, regular for body), `optical-size` set to 14 for body and 72 for pull-quotes via `font-variation-settings`. Fraunces' slightly squishy ball terminals and gentle wedge serifs give the body copy a warm, narrative voice — it reads like the curator's own handwriting transcribed by a respectful printer. Line-height 1.62, max-width 60ch. **Marginalia / hand-drawn captions — "Caveat" (Google Fonts)**, weight 500, scattered across the cubbies as if scrawled on each lobby card with a wax pencil. Used at small sizes (`0.92rem`) and rotated -2° to 3° at random. **Triadic palette — three primary hues 120° apart on the wheel, plus neutrals.** No monochrome, no duotone, no gradient backgrounds (the only gradient is the intermission band). - **Candle Amber** `#e8a14a` — the warm point of the triad. Flame cores, marquee glow, the "now (not) showing" strip, hover halos. - **Storehouse Indigo** `#3a4f8c` — the cool point of the triad. Plaster-wall background tint at night, plank-shadow inks, the iris ring, projector beam edges. - **Reel-Tape Crimson** `#c14b58` — the rebellious third. Curator's red-marker signature, "CUT" stamps, error states, mischievous accents. - **Beeswax Cream** `#f4ead2` — page surface, parchment of the lobby cards. - **Vault Black** `#13110f` — true ink, not flat black; used for outlines and the iris mask. - **Tatami Sage** `#7a8a6c` (supporting) — the pale green of aged tatami binding, for body copy on cream and divider-grain shading. The triad is held at 120° (amber 36°, indigo 222°, crimson 354° — within ±6° of true triadic) so colors *vibrate* against each other rather than harmonize. The page background is `#f4ead2` lit by a radial `radial-gradient(circle at 30% 20%, rgba(232,161,74,0.18), transparent 55%)` that pulses with the candle. ## Imagery and Motifs **All imagery is hand-drawn, monoline, candle-lit.** Zero photographs. Zero 3D renders. Zero stock illustration. Every visual is an SVG drawn in a 1.4px wax-pencil stroke with `stroke-linecap: round`, slight `stroke-dasharray` jitter (`0.7 0.4 0.6 0.5`) to fake an unsteady pencil, and a 6-9% `feTurbulence` displacement filter so lines wobble like firelight is on them. **Candle vocabulary (the spine motif):** - **The Pillar Candle** — a tall beeswax cylinder rendered with vertical drip striations, sits in the lower-left of the viewport at all times. Its flame is its own SVG group, animated with a 7-keyframe loop combining `path` morphing (the flame silhouette breathes between three drawn shapes), translation (±2px wobble), and a sibling `` halo that brightens the surrounding page by 1.5% during peaks. - **The Birthday-Cake Candle** — playful counterpoint, a stubby spiral-striped candle with a tilted flame, appears in the "playful" cubbies (e.g., the vending-machine romance trailer). - **The Lantern (chōchin)** — a paper lantern hangs above the marquee, its silhouette drawn in indigo with amber lightleak through the slats. - **The Snuffer & The Match** — used as cursor states. Hovering a project cubby shows a tiny matchstick cursor; hovering the close button shows a brass snuffer. **Lobby-card vocabulary (one per cubby):** - A hand-drawn **title slate** (the clapperboard) at top of each cubby with the project's fake number stenciled in. - A **pictogram of the shelved work** below: e.g., two vending machines holding tiny hands; a yawning microphone; a sock with a face. Always single-stroke linework with one accent fill in amber, indigo, *or* crimson (never two — triad discipline per cubby). - A **wax seal** in the corner stamping the cubby's status: 棚上げ (shelved), 中止 (canceled), 保留 (held), 紛失 (lost). Seals are rendered as round crimson ink blots with imperfect edges. - A **scribbled marginalia line** in Caveat at the bottom: *"the second act fell down a staircase"*, *"footage was eaten by a cat"*, *"the composer remembered halfway through"*. **Decorative patterns:** - **Wood-grain plank dividers** — SVG patterns generated from a single 240px tile of hand-drawn knot-grain, repeated as the column/row separators. - **Dust motes** — twenty-five small `` elements in cream, drifting in 18-32s irregular paths across the viewport, lit when they pass the candle radius. - **Frame leader (film leader)** — the SCMP/Academy countdown leader appears as a decorative motif in the intermission band, with the okurairi.com mark in the gate. - **Hanko stamps** — the wax seals double as section dividers; an oversized 紙 (paper) stamp marks the start of the cutting-room block. ## Prompts for Implementation Build okurairi.com as a **single static HTML page (index.html), one CSS file (style.css), one JS file (script.js, vanilla — no framework)**. The narrative arc — *enter the storehouse, browse the shelves, sit through the intermission, descend into the cutting room, exit through the vault door* — is a continuous downward scroll, not a SPA. Total height ~6-8 viewport heights. **Storytelling first.** Every cubby must contain a tiny story. Write 14-18 fictional shelved-project micro-narratives (50-90 words each), each with: a title in Caprasimo, a fake reel/cassette/manuscript number, a hand-drawn pictogram, a status seal, a body description in Fraunces, and a Caveat-font scribble at the bottom. The micro-stories should range from earnest-melancholy (*"Reel 03: A Documentary About The Sound A House Makes When Empty"*) to absurd-comic (*"Manuscript 41: The Cookbook For People Who Have Never Met Food"*). **The opening iris is a story beat.** On `DOMContentLoaded`, the iris (`clip-path: circle(0% at 50% 40%)`) opens over 1800ms with a custom cubic-bezier `(0.16, 1, 0.3, 1)` while the candle flame in the corner fades from off to lit. A single line of subtitle types underneath in Fraunces italic via a kinetic typewriter (38ms per character with random ±12ms jitter): *"Welcome to the storehouse. Mind the candles."* **Border animation is the cubby personality.** Every cubby has an SVG plank-frame with `stroke-dasharray` set to its full perimeter and `stroke-dashoffset` animated. On scroll-into-view (IntersectionObserver, threshold 0.35), the border draws itself in 900ms with a slight overshoot, the candle in the cubby's corner ignites (200ms flame fade-in), and the lobby card content fades up `translateY(14px) → 0`. On hover, the border re-paints in crimson (the rebellious accent) over 600ms — a visible "this one is interesting" gesture. **No fade-in stagger on the entire page** — animation is **per-cubby, scroll-driven, and physical**. **Kinetic typography lives in three places only:** the marquee (continuous flicker), section H2s (per-glyph flame jitter on a slow 8s cycle once visible), and the intermission countdown. Body text is calm; marginalia is static-rotated. Restraint matters — kinetic type used everywhere becomes noise. **Candle physics drives ambient mood.** A single shared `requestAnimationFrame` loop (no per-element timers) updates a global `--candle-intensity` CSS variable in `[0.92, 1.08]` at ~28Hz using a band-limited noise function (sum of three sines at 0.7Hz, 1.3Hz, 2.9Hz with random offsets). All halos, the page radial-gradient, and the per-cubby flame opacities consume this variable. Result: the entire page breathes together as if one flame is lighting it. **Sound is optional but designed for.** A small speaker icon (drawn as a tiny gramophone horn) in the lower-right offers an ambient layer: faint projector clicks, room-tone hum, occasional shamisen pluck on section change. Default off. State persisted to `localStorage` under `okurairi.audio`. **Cursor is part of the brand.** Replace default cursor on cubbies with a 24×24 SVG matchstick (`cursor: url(...) 4 4, pointer`). On the iris/close affordance, the brass snuffer. On body, a soft default pencil tip. **Avoidance list (load-bearing).** No CTA blocks. No pricing tables. No statistics grids. No testimonial carousels. No "trusted by" logo strips. No newsletter signup form. No hero with a headline + subhead + button trio. The page makes no commercial argument; it offers a place to wander. The closest thing to a CTA is a final line at the vault door: *"if you have something shelved of your own, the curator keeps a guestbook"* — and the guestbook is not a form, it is a hand-drawn link to a `mailto:` styled as a wax-sealed envelope. **Fallbacks.** Without JS, the iris is open by default, candles are static SVG (no flicker), borders are pre-drawn, and the page reads as a long illustrated zine. The narrative still works. ## Uniqueness Notes **Differentiators from the existing portfolio of 350+ designs:** 1. **The shelved-project storehouse as a literal site metaphor.** No other site in the corpus is built around the Japanese concept of *okurairi* — entering the storehouse — and translates it into an interface where the very content of the page is a fictional inventory of works that never released. The site is *about* its theme in form, not just decoration. 2. **Modular-blocks layout used as a true uneven mosaic, not a card grid.** Layout frequency analysis shows card-grid at 52% and dashboard at 74%; modular-blocks sits at only 2%. We commit fully — `grid-template-areas` with hand-authored irregular cubby placements and structural plank dividers — refusing the regular tile rhythm that 350+ other sites already exhaust. 3. **Triadic palette discipline at 120° spacing.** Triadic appears in only ~2% of sites; gradient palette dominates at 81%. okurairi commits to three primaries vibrating against each other (amber/indigo/crimson) with strict per-cubby allocation — exactly one accent color per cubby — producing visual snap that gradient/warm-dominant designs cannot achieve. 4. **Candle physics as a unifying ambient driver.** A single shared CSS custom property (`--candle-intensity`) updated by one rAF loop makes the entire viewport breathe with one flame. Most "atmospheric" sites animate elements independently; here every halo, gradient, and flame opacity reads from the same noise signal, so the page becomes *one organism in one room*. 5. **Border-animate as cubby personality, not loading flourish.** The 2% border-animate pattern is reframed: borders draw on scroll-into-view as a *narrative beat* (the lobby card being pinned to the wall), and re-paint in the crimson triad point on hover as the *playful accent*. No other site uses border-animate as a per-module character moment. 6. **Cinematic + playful tone deliberately collided.** Cinematic aesthetic (4%) usually pairs with mysterious-moody (5%) or opulent-grand (6%) tone. We intentionally pair it with playful (18%) — the storehouse curator winks. Fictional shelved projects mix earnest melancholy with absurd comedy, undercutting the candlelit gravity at every turn. 7. **Hand-drawn (75% — overused) reframed as wax-pencil + flicker filter.** Rather than ride the most common imagery vector flat, every SVG carries an `feTurbulence` displacement filter modulated by `--candle-intensity`, so all linework physically *reacts* to the room's flame. Hand-drawn becomes hand-drawn-being-watched-by-a-candle. 8. **Avoidance of dashboard, full-bleed, parallax, stagger, photography.** The frequency leaders (dashboard 74%, parallax 77%, stagger 69%, photography 80%, gradient 81%, mono typography 81%) are all explicitly rejected. okurairi.com cannot be confused with any other site in the corpus on first scroll. 9. **Per-glyph flame flicker on display type.** Caprasimo headlines run a per-glyph randomized translate/skew/text-shadow cycle producing real optical flicker — kinetic-animated typography (4%) deployed as candle physics rather than scroll-jacking or marquee scrolling. **Chosen seed (from assignment, Batch 018):** aesthetic: **cinematic** · layout: **modular-blocks** · typography: **kinetic-animated** · palette: **triadic** · patterns: **border-animate** · imagery: **hand-drawn** · motifs: **candle-atmospheric** · tone: **playful** **Frequency-aware avoidances:** dashboard layout, full-bleed layout, card-grid layout, centered layout, photography imagery, gradient palette, warm-only palette, mono typography, parallax patterns, stagger patterns, friendly tone, authoritative tone, scroll-triggered fade-in stagger.