# Design Language for kurairi.com ## Aesthetics and Tone kurairi.com is the night-ledger of a **蔵入り (kura-iri) — a Japanese earthen storehouse at the hour the doors are sealed for the night.** "蔵" (*kura*) is the thick-walled fireproof warehouse where a household keeps what it cannot afford to lose; "入り" (*iri*) is the act of *going in*, of putting away, of the sun *entering* the horizon. So *kurairi* is simultaneously "into the storehouse" and "the dimming-down" — and the whole site lives in that double meaning: a darkened repository, lit only by a single oil lamp, where six broken-and-mended ceramic pieces are kept on a shelf of cryptomeria wood, and the site is the act of walking the lamp slowly past each one. The aesthetic is **wabi-sabi rendered in near-darkness** — not the bright, sunlit, linen-and-pottery wabi-sabi of a Brooklyn ceramics shop (which is what 3% of the corpus and 100% of Pinterest does), but **wabi-sabi as the tea master experiences it at night**: the bowl is more beautiful for the *kintsugi* seam of gold lacquer running through it, the seam is more beautiful for being *barely visible* in lamplight, and the visibility is more beautiful for *changing as you move*. Imperfection (the chip, the crawl-glaze, the warped lip, the firing crack) is not hidden — it is the *only* thing the lamp is brought close enough to reveal. The mood is **quiet, attentive, slightly melancholic, deeply unhurried**: this is a site you cannot rush, because the lamp moves at its own pace. Tone in copy: **zen-contemplative crossed with the dry precision of a museum conservator's night-notes** — short declarative lines, no exclamation, no second person until the very end, present tense, the vocabulary of *the kiln, the wheel, the repair table.* Never "discover" or "explore" — instead "the lamp finds," "the seam holds," "the chip was left." ## Layout Motifs and Structure A **single horizontal storehouse-shelf** that the visitor traverses left-to-right — **horizontal-scroll as the primary axis**, not vertical. The page is a `position: sticky` vertical scroll-jack: scrolling the wheel/trackpad *downward* translates a long horizontal track *leftward*, so you are physically walking the length of the shelf. Total track width ≈ 7 viewport-widths. **The shelf has seven bays, governed by 間 (ma) — negative space as structural element:** - **Bay 00 — The Door (1 viewport).** Almost pure black. Centered: the storehouse's `漆喰` (shikkui plaster) double-door, rendered as two soft off-white SVG rectangles with a hairline seam. A single word sits beneath: *kurairi*. The door does not open with a click — it opens because you *scroll into it*, splitting apart with a low spring as bay 00 exits left. - **Bays 01–06 — The Pieces (≈0.95 viewport each, but unevenly placed).** Six ceramic pieces, one per bay, each sitting on a thin horizontal cryptomeria-grain plank that runs unbroken through all six bays at the same vertical height (≈62% down the viewport). The pieces are *not* centered in their bays — they cluster toward the bay's leading edge, leaving a wide stretch of black emptiness (the *ma*) before the next one arrives. That emptiness is not filler; it is the *walk between objects*, and it is timed: roughly 1.4 seconds of scroll per gap. In each gap, a faint vertical column of `空 / 間` micro-text drifts by at 0.3 opacity. - **Bay 07 — The Lamp Set Down (0.6 viewport).** The track ends. The lamp's glow dims to a coal. One line of text fades up at center. Then the shelf is dark again. **Persistent overlay — the lamp.** A radial-gradient pool of warm light ≈ 520px across is locked to the cursor (on touch: locked to a slow auto-orbit). *Nothing on the shelf is fully visible outside this pool* — the ceramics, the plank grain, the kintsugi seams all sit at 12–18% luminance until the lamp passes over them, then bloom to full warmth and settle back as it leaves. The whole site is, functionally, **a flashlight game played on a museum shelf.** **No top nav. No header. No footer. No menu.** Position in the storehouse is shown only by six faint dots along the very bottom edge, one filling with amber as its bay enters frame. ## Typography and Palette **Type system — Google Fonts only:** - **Shippori Mincho** (weights 400, 500, 600, 700, 800) — the primary face, used for the piece-names, the conservator's notes, and all Japanese glyphs. Shippori Mincho is a Japanese *Mincho* (serif) face with crisp, slightly old-fashioned brush-derived terminals; it carries Latin and full kana/kanji in one family, so "古信楽 — old Shigaraki" can sit on one line in one font. Set generously: piece-names at `clamp(2.4rem, 5vw, 4.4rem)`, weight 600, `letter-spacing: 0.04em`; notes at `1.0625rem`, weight 400, `line-height: 1.9`, `max-width: 30ch`. - **Cormorant** (weights 400, 500, italic 400/500) — the *Western conservator* voice: the small italic glosses, the date-stamps ("acquired, repaired — winter"), the catalogue numerals (01–06 set in lining figures). Cormorant's tall, fragile, high-contrast serifs read as fountain-pen marginalia and contrast deliberately with Mincho's brushed weight. - **Zen Kaku Gothic New** (weight 400 only) — a single, sparing sans for the bottom-edge dot labels and the `ma` micro-text columns (空 間 静); kept tiny (10–11px), wide-tracked (`0.3em`), low opacity. No third decorative display face. The grandeur here is in *scale and darkness*, not in letterform novelty. **Palette — sumi-ink darkness with one warm light source:** - `#0B0A09` — **Kura Dark.** The base black; warm-shifted, never pure `#000`. The storehouse interior. - `#161310` — **Plaster Shadow.** Panel/plank base, slightly raised from Kura Dark. - `#E8DFCE` — **Shikkui.** The off-white lime-plaster of the doors and the piece-names when lamp-lit. Never `#fff`. - `#C9B79A` — **Aged Bone.** The default (lamp-off) tint of ceramic surfaces and grain — visible only as a ghost. - `#D8A24A` — **Lamp Amber.** The oil-lamp glow, the active dot, the moment a chip catches light. - `#B07A2E` — **Kintsugi Gold.** The lacquer-and-gold repair seams — drawn, not painted (see below). - `#5E4B3A` — **Cryptomeria.** The wood plank's grain lines. - `#3A4540` — **Celadon Ash.** A cold green-grey used *only* in bay 04 (the celadon piece) so one object reads cool against five warm ones — a single note of contrast across the whole shelf. Contrast is intentionally low across most of the page (accessibility is explicitly out of scope here); the *lamp pool* is where contrast lives. ## Imagery and Motifs **No photographs. No stock. No 3D renders. No icon set.** Every object is hand-built SVG, because a photograph of pottery in lamplight cannot be *re-lit by the cursor* — and re-lighting is the entire interaction. **The six pieces (each a layered SVG, 2–4 paths for the silhouette, plus a kintsugi-seam path, plus a noise-displaced clay-texture fill):** 1. **古信楽 — Old Shigaraki.** A squat storage jar, lip warped off-round, surface pocked with `feTurbulence`-driven ash-fleck speckle. Its flaw: a long firing crack down one shoulder, *unrepaired*, left as the kiln gave it. 2. **黒織部 — Black Oribe.** A shallow shifted-rim dish, asymmetric by design, half matte-black, half exposed buff clay. Flaw: a hairline glaze-crawl gap — the conservator's note: "left." 3. **粉引 — Kohiki.** A tall white-slip bottle, the slip thin and translucent over grey body so it reads bluish where the lamp grazes. Flaw: a chipped foot, *kintsugi-mended* — the seam wraps the base. 4. **青磁 — Celadon.** A lobed bowl in Celadon Ash green — the one cool object. Flaw: a single `貫入` (kannyū) crackle network across the glaze, drawn as a fine fractured `path` mesh, faintly gold-filled. 5. **志野 — Shino.** A heavy guinomi (sake cup), thick crawled white glaze, pinholes, the famous "scarlet" blush rendered as a soft `radialGradient` of Lamp Amber bleeding through. Flaw: a deep gold-mended split across the rim. 6. **萩 — Hagi.** A pale pink-buff tea bowl, intentionally under-fired soft glaze with the `貫入` crackle that *darkens with use* — shown mid-transformation, half pale, half tea-stained, with a small *kintsugi* "rivet" (a separate gold disc patch). **The kintsugi seams animate.** Every gold repair line is an SVG `` with `stroke-dasharray` set to its own length and `stroke-dashoffset` animated from full to 0 the moment the lamp pool's center crosses within ~260px of the piece — so the gold *flows into the crack* like warm lacquer being drawn along it, then a `` adds a faint specular gleam that tracks the cursor's angle. As the lamp leaves, the gleam dies but the drawn seam remains. **Ambient motifs:** the unbroken cryptomeria plank with hand-drawn grain; the slow vertical `空 / 間 / 静` micro-text columns in the gaps; a single faint `family crest (家紋)` — a stylized SVG mitsudomoe-like swirl — pressed into the wall behind bay 00 at 6% opacity; and an extremely subtle film-grain `feTurbulence` layer over everything at ~3% so the dark never looks like flat CSS black but like a dim photograph of a real room. Dust motes (4–6 tiny particles) drift only *inside the lamp pool*, lit, like motes in a sunbeam. ## Prompts for Implementation Build kurairi.com as **one HTML file, one CSS file, one ES module** — no framework, no router, no build step, no service worker, no fetch, no analytics, no cookie banner. Target uncompressed bundle under ~90KB. **There is no CTA, no pricing block, no stats grid, no testimonials, no logo wall, no email capture, no contact form, no FAQ, no newsletter, no "features" section.** This is a 95-second walk past six broken bowls with a lamp. **The scroll-jack horizontal mechanism:** - A tall outer `
` (height ≈ 720vh) creates scroll distance. A `position: sticky; top: 0; height: 100vh; overflow: hidden` viewport holds an inner `.shelf` track of `width: 720vw`. - On scroll, `requestAnimationFrame` reads `window.scrollY`, computes progress 0→1, and sets `.shelf { transform: translate3d(-${progress * (720-100)}vw, 0, 0) }` — eased through a critically-damped spring (lerp the current X toward the target X at ~0.09 per frame) so it never snaps, it *glides*. - Respect `prefers-reduced-motion`: if set, disable the spring (use the raw value) and slow the lamp's auto-orbit to a near-crawl. **The lamp pool (the heart of it):** - A fixed full-viewport `
` with a `radial-gradient(circle 260px at var(--mx) var(--my), rgba(216,162,74,0.92), rgba(216,162,74,0.35) 45%, transparent 72%)` set to `mix-blend-mode: soft-light` over a second `screen`-blended copy for warmth — its `--mx/--my` updated from `pointermove`, lerped (don't track 1:1 — let the light *lag* the cursor by ~120ms, like a real lamp swinging). - The shelf content sits under a near-black `::before` scrim at ~0.86 opacity with `mix-blend-mode: multiply`, *cut through* by the lamp — i.e. the lamp div is `z-index` above the scrim and below nothing, so wherever it glows, the scrim is lifted. Tune so off-lamp ceramics read at ~14% luminance and on-lamp at ~92%. - On touch devices: replace cursor-tracking with a slow Lissajous auto-orbit of `--mx/--my` (period ~14s) so the lamp drifts across the shelf on its own, and let a tap "hold" the lamp at the tapped point for 3s. **Per-piece reveal choreography (storytelling, not UI):** 1. When a piece's bay center comes within 0.6 viewport of frame-center, stagger-fade its label (Shippori Mincho, from `translateY(14px)` + 0 opacity) and its Cormorant catalogue numeral and the conservator's note (each delayed ~140ms after the previous), all eased with a soft spring. 2. The kintsugi seam path animates its `stroke-dashoffset` to 0 over ~1100ms with `ease-out`, gated on the *lamp pool* reaching the piece — so a visitor who scrolls past without bringing the lamp near sees the crack but *not the gold*. The gold only "pours" if you light it. 3. A `feSpecularLighting` (or a cheaper moving `linearGradient` highlight band) on the seam tracks `--mx` so the gold gleams from the side the lamp is on. 4. The single unrepaired crack (Shigaraki, bay 01) does the *opposite*: when lit, a one-line note fades in — "left as the kiln gave it" — and *no* gold appears. The absence is the point. 5. Dust motes: 5 absolutely-positioned 2px dots with individual slow `@keyframes` drifts, their opacity multiplied by how close they are to `--mx/--my` — so they only sparkle inside the pool. **Bay 00 (the door):** two `.door-leaf` rectangles meeting at center. As scroll progress passes ~0.04, animate them apart (`translateX(∓60vw)`) with a heavy, low spring and a faint dust-puff (a quick-fading blurred ellipse). The crest behind them holds at 6% then fades as the doors clear. **Bay 07 (the close):** the lamp's gradient radius shrinks (`260px → 90px`) and its amber desaturates toward `#7a5c2e` as you reach the end; one Shippori Mincho line fades up at center — something like *"六つ。直したものも、直さなかったものも。"* with a Cormorant gloss beneath: *"six. the mended, and the left-alone."* Hold it. Then, only here, a single quiet line of address-to-the-reader may appear in Cormorant italic. Nothing clickable. The shelf stays dark. **Texture & polish:** a global `feTurbulence` grain overlay at ~3% opacity, `mix-blend-mode: overlay`; all "white" is `#E8DFCE`, all "black" is `#0B0A09`; the cryptomeria plank is a single tall SVG with 30–40 hand-varied grain `path`s in `#5E4B3A` at low opacity; transitions favor *settling* (overshoot then ease back) over *snapping*. Sound is optional and off by default — if added, a single low wooden *tok* (the lamp set on the plank) at bay 07, nothing else. ## Uniqueness Notes **Differentiators from other designs in this codebase (311 DESIGN.md files analyzed):** 1. **Wabi-sabi at night, not in daylight.** Wabi-sabi appears in ~3% of the corpus and every instance — like the broader trend — is bright, linen-toned, sunlit, "imperfect ceramic" as a *bright airy shop*. kurairi.com puts the same philosophy in a ~14%-luminance darkened storehouse where imperfection is something you have to *bring a light to find*. It also lands in the rare `dark-mode`-adjacent / `mysterious-moody` + `zen-contemplative` tonal zone instead of the dominant `pastoral-romantic` (36%) / `warm-inviting` (27%) tones. 2. **The cursor is a physical light source, not a follower.** `cursor-follow` is in 88% of the corpus — but always as a dot, a ring, a magnet, a trailing blob *added on top of* a fully-visible page. Here the cursor *is the only light*; without it the content is near-invisible. The interaction model is a flashlight game on a museum shelf, which I have not seen in the corpus. 3. **Horizontal scroll-jack as "walking a storehouse shelf."** `horizontal-scroll` layout is ~7% of the corpus and usually a portfolio carousel. Here it is narrativized: vertical wheel-motion = walking left along a single unbroken cryptomeria plank, with the *empty* stretches between objects (大きな 間 / ma — `ma-negative-space` at ~7%) deliberately *timed* as the walk between pieces, not as padding. 4. **Kintsugi seams that draw themselves only when lit.** Combines `path-draw-svg` (~29%) with the lamp mechanic: the gold lacquer "pours" into each crack via animated `stroke-dashoffset` *only if the lamp pool reaches the piece* — so a hurried visitor literally never sees the gold. The site rewards slowness mechanically, not rhetorically. 5. **Zero photography, zero stock, zero CTA, zero conversion furniture.** In a corpus where 98% of designs use photography and most carry CTA/stat/pricing scaffolding, this is six hand-drawn SVG ceramics, one lamp, one plank, and ~120 words of conservator's notes — full stop. **Avoided overused patterns (from frequency analysis):** no glassmorphism (72%), no hand-drawn-illustration aesthetic (97%), no card-grid (89%), no full-bleed photography (92%), no warm-gradient-mesh palette (96% gradient / 98% warm — this palette is near-monochrome darkness with a single warm light *source*, not a gradient skin), no mono primary typeface (94% — primary is Shippori Mincho serif), no dashboard/bento layouts. **Chosen seed/style:** `wabi-sabi imperfect ceramic` — *aesthetic: wabi-sabi, layout: horizontal-scroll + ma-negative-space, typography: serif-classic (Shippori Mincho) + elegant-serif (Cormorant), palette: muted / near-monochrome dark with single amber accent, patterns: path-draw-svg + cursor-follow-as-light + spring, imagery: custom-illustration (SVG only) + grain-overlay, motifs: crystalline (kannyū crackle) + candle-atmospheric, tone: zen-contemplative + mysterious-moody.*