# Design Language for kaguya.bid ## Aesthetics and Tone kaguya.bid is **a moonlight estate sale held inside a paper lantern** — the quiet, almost liturgical dispersal of the belongings of Kaguya-hime (かぐや姫, the bamboo-cutter's moon-child of the *Taketori Monogatari*) on the night before she ascends back to the lunar court. The domain word *kaguya* is taken at its literal root — *kagu* (to be radiant, to shimmer) — so the entire surface of the site behaves like **the inner skin of washi paper held up against a full moon**: faintly luminous, faintly oily with refracted light, never glossy. The auction here is not loud. There is no gavel, no countdown clock, no "BID NOW." Instead the page is a **slow contemplative procession of seven heirlooms**, each one drifting through a thin holographic sheen the way light slides across the back of a beetle's wing or the surface of an old soap bubble caught in lamplight. The mood is **zen-contemplative**: the patience of a tea ceremony crossed with the bittersweetness of *mono no aware* — the ache of beautiful things that are about to be let go. Everything on the page is **about to leave**. The visitor is not a buyer; the visitor is a mourner-witness, walking the rooms of the bamboo house one last time before the moon takes everything back. The holographic treatment is deliberately *restrained* — not the loud chromatic-aberration RGB-split of Y2K hologram trends, but the **soft pearlescent diffraction of mother-of-pearl, dragonfly wing, and the faint oil-slick rainbow on a puddle at dusk**: low-saturation iridescence that only fully reveals itself in motion. Over everything floats a fine, ever-present **grain-overlay** — the tooth of handmade paper, the dust suspended in a moonbeam — so that even the iridescence reads as analog, photographed, slightly worn. The total feeling: a museum at closing time, lit by one window, where the exhibits are quietly shimmering goodbye. ## Layout Motifs and Structure The page is built as a single **bento-box lattice** — a tatami-room floor plan rendered as an asymmetric grid of unequal rectangular "cells," each cell a *box* in the literal Japanese sense (an *obon* tray, a *jubako* lacquer tier, a paulownia-wood collector's case). There is **no hero banner, no full-bleed cover image, no horizontal section bands.** The visitor lands directly *inside the grid* — the moment the page loads, the bento lattice is already assembled, like walking into a room where the heirlooms are already laid out on the floor mats. Structure: - **The lattice is a 12-column, variable-row CSS Grid.** Cells span 3–8 columns and 1–3 rows, never uniform. The negative gutters between cells are wide and unequal (16px here, 64px there) so the whitespace itself becomes a *ma* (間) — breathing space, the silence between notes. - **Seven heirloom-cells, one per lot:** (1) the radiant bamboo stalk Kaguya was found inside, (2) the jeweled branch of Mount Hōrai, (3) the fire-rat's fur robe, (4) the dragon's-neck five-color jewel, (5) the swallow's cowrie shell, (6) the elixir of immortality in its lacquer box, (7) the feathered celestial robe (*hagoromo*) that will carry her away. Each cell holds: a slab-serif lot numeral set huge in the corner, the heirloom's name in both Japanese and English, a two-line contemplative description (no provenance jargon, no estimate, no "lot details" table), and the heirloom's CSS/SVG figure. - **One "manifest-cell"** spans the full 12 columns near the top — but it is not a banner; it is the *inventory sheet itself*, a flat ledger of "seven things, one night, no reserve," typeset like a hand-written estate manifest. - **One "ascension-cell"** anchors the bottom-right corner: the moon, growing larger as you scroll, until in the final cell it has eaten the whole grid. - Cells **morph on scroll**: as the visitor scrolls a cell into the viewport center, its border-radius eases from sharp rectangle toward soft super-ellipse, its background iridescence-angle rotates, and its grain settles — so the bento lattice feels like it is **breathing**, each box opening and closing like the lid of a lacquer tier. The grid never *re-flows*; only the cells' inner geometry morphs. On narrow screens the bento collapses to a single column of stacked cells, each retaining its morph behavior. - A **slim left-margin rail** holds seven vertical tick-marks (one per heirloom) and a single rising hairline that fills as you descend — the only navigation. No top bar. No hamburger. No footer beyond a single line of moon-script. ## Typography and Palette **Type system — Google Fonts only, two families, governed by `typography: slab-serif`.** - **Zilla Slab** (Google Fonts; weights 300, 400, 500, 700) — the **primary voice** and the soul of the page. Zilla Slab's gentle, rounded-cornered Egyptian slab serifs read as **the carved characters on a wooden auction placard, or the title-block letterpress of a Meiji-era museum catalogue** — bookish, calm, with just enough weight in the slabs to feel like objects you could pick up. Used for: the seven enormous lot numerals (set 180–320px, weight 300, letter-spacing −0.02em, in the corner of each bento cell), all heirloom names, the manifest ledger, and the moon-script footer line. The huge thin-weight numerals are the page's main visual rhythm — seven slab-serif "I … VII" climbing through the grid like stone markers on a path. - **Shippori Mincho** (Google Fonts; weights 400, 500) — the **secondary voice**, a refined Japanese serif (*mincho*) with elegant triangular *uroko* serifs. Used for: every Japanese word on the page (heirloom names in kana/kanji, the word かぐや, the closing line 月へ帰る), set alongside the Latin Zilla Slab so the two scripts sit as visual equals. Its presence is what keeps the holographic surface from drifting toward sci-fi — it grounds the page in *washi*, ink, and bamboo. - Body text: Zilla Slab 400, 17px, line-height 1.7, color near-charcoal-mauve, max ~58ch per line. Sparse. Two lines per heirloom. The page should feel under-written, like the catalogue ran out of words for what it was losing. **Palette — `palette: analogous`, a tight arc of cool blues sliding into violets and pale silvers, the colour-wheel neighbourhood of moonlight on paper. Minimum specified colours below.** - `#1C2541` — **Deep Indigo Night** — the page's ground colour; the sky over the bamboo grove just before the moon-court descends. Most cell backgrounds are this, very slightly varied. - `#2E4374` — **Periwinkle Twilight** — one analogous step toward blue-violet; used for cell borders, the manifest ledger panel, and the rising nav hairline. - `#5B6BA8` — **Wisteria Dusk** — the mid-tone; hover states, the *ma* gutters' faint inner glow, secondary captions. - `#8E94C9` — **Pale Lilac Vapour** — borrowed from the wisteria/iris (*fuji*, *ayame*) floral motifs; the iridescence's "cool" pole, drifting petal silhouettes. - `#C7C5DE` — **Moon-Paper Silver** — the iridescence's "warm" pole and the colour of most body text and the big slab numerals; the inside of the washi lantern. - `#E8E4F0` — **Lantern White** — near-white headings and the elixir's glow; used very sparingly, like the brightest patch on the moon. - `#A7B8D9` → `#C9BBD8` → `#B5C7D0` — **the holographic diffraction triad**, three near-adjacent pearlescent tints (cool blue / lilac / pale teal) that the iridescence layer cycles between as cells morph. Never used at full opacity; always 8–22%, always layered over the indigo. Saturation ceiling across the whole site is intentionally low — nothing is candy-bright; the rainbow is the rainbow *on the inside of a shell*, not on a screen. ## Imagery and Motifs **No stock photography. No 3D render. No Lottie. No icon font. No clip-art.** Every visual is hand-authored CSS / inline-SVG, in one of these asset families: 1. **The radiant bamboo (SVG ``).** A single tall bamboo stalk with three nodes, drawn as bezier paths; a soft `` of Lantern White bleeds out from one node — Kaguya's birth-light. The light pulses on a slow 6s breath. This figure also seeds the **floral-botanical motif**: from the bamboo's joints sprout faint, single-stroke sprays of **wisteria, iris, and bamboo-leaf** (*fuji*, *ayame*, *take*) drawn as thin Periwinkle/Lilac line-illustration — they drift slightly in a 9s sway, like a breeze through the grove, and recur as quiet corner-ornaments in every bento cell. 2. **The holographic film (CSS).** A `mix-blend-mode: soft-light` pseudo-layer over each cell: a `conic-gradient` of the diffraction triad, masked by an SVG `feTurbulence` displacement, its `--angle` custom property eased by scroll so the iridescence *travels* across the surface as you move — mother-of-pearl, never RGB-split. This is the literal meaning of *kaguya* (radiant) made into a material. 3. **The grain-overlay (CSS + tiny SVG noise).** A fixed full-viewport layer of `feTurbulence` fractal noise at ~6% opacity, *over everything* — the tooth of washi, dust in the moonbeam. It never moves; it makes the iridescence read analog, photographed, gently worn. 4. **The seven heirloom figures**, each a flat geometric SVG in 2–3 line weights, no shading except the holographic film: ① bamboo stalk; ② a jeweled branch — gold-wire branch hung with faceted teardrop "gems" drawn as simple polygons; ③ the fire-rat robe — a folded *kimono* silhouette with a faint ember-glow gradient that never fully ignites; ④ a five-faceted jewel rendered as five overlapping translucent diamonds in five analogous tints; ⑤ a spiral cowrie shell drawn as one continuous bezier; ⑥ the elixir box — a lacquer cube in 3-stroke isometric, lid ajar, Lantern-White vapour escaping; ⑦ the *hagoromo* — a long feathered celestial robe, each feather a thin bezier, the whole thing slowly *lifting* as you reach the final cell. 5. **The moon (CSS).** A single circle, Moon-Paper Silver with a faint craters-as-noise texture, parked in the bottom-right ascension-cell. It scales from 80px to viewport-filling across the scroll. In the last cell it covers the entire bento lattice — everything is gone; she has returned. 6. **The *ma* gutters** are themselves a motif — wide, unequal, faintly inner-glowing whitespace channels between cells, treated as deliberate silences, never filled. ## Prompts for Implementation Build kaguya.bid as **one HTML file, one CSS file, and two small ES modules** — `lattice.js` (scroll-driven cell morph: border-radius easing, iridescence `--angle` rotation, the rising nav hairline, the growing moon) and `botanica.js` (the slow sway of the floral line-sprays and the bamboo's breath-pulse) — plus **one inline ``** block holding: the `feTurbulence` grain filter, the holographic displacement filter, the bamboo ``, the seven heirloom shapes, the wisteria/iris/leaf strokes, and the moon's noise texture. **No framework, no router, no build step, no GSAP, no Three.js, no canvas, no WebGL.** Motion budget: CSS `@keyframes` for all idle loops (bamboo breath, petal sway, ember flicker, robe lift); `IntersectionObserver` + a single `requestAnimationFrame` loop for the scroll-linked cell morphing and the moon's growth. Honour `prefers-reduced-motion`: freeze all idle loops, disable the morph, but **keep the iridescence and grain** — they are material, not animation. **Narrative spine — a single quiet descent through seven heirlooms, then ascension:** 1. **Manifest-cell (full width, top).** The estate manifest, hand-typeset in Zilla Slab: *"The belongings of かぐや姫 — seven heirlooms — one night — no reserve — to be returned to the moon at dawn."* A single line. No buttons. Below it the bento lattice begins. 2. **Lot I — The Radiant Bamboo.** First bento cell, large. The huge thin slab "I" in the corner. Name in Shippori Mincho + Zilla Slab. Two lines: where she was found, how she shone. The bamboo `` breathing its light. 3. **Lots II–VI** — successive bento cells of varying span, each morphing as it centers: jeweled branch, fire-rat robe, five-color jewel, cowrie shell, elixir box. Each: a giant slab numeral, bilingual name, two contemplative lines (no estimates, no provenance tables, no condition reports), one CSS/SVG figure, a corner-spray of botanical line-work. The iridescence travels across each as it passes. 4. **Lot VII — The Hagoromo (celestial feathered robe).** The final heirloom cell. The robe figure slowly lifts off its hanger as the cell enters view — the only heirloom that *leaves* on screen. 5. **Ascension-cell (bottom-right, then everything).** The moon, which has been quietly growing in the corner all along, scales up until it fills the whole bento lattice. The cells fade beneath it. Last visible element: one line of Shippori Mincho — 月へ帰る ("returning to the moon") — and beneath it, faint, the only place the domain appears at full size: **kaguya.bid**, in Zilla Slab 300, then it too dims into the moonlight. **AVOID:** no countdown timers, no "BID NOW"/"PLACE BID"/"REGISTER" CTAs, no pricing or estimate blocks, no stat-grids, no testimonials, no logo walls, no email capture, no FAQ accordion, no cookie banner, no chatbot, no hero cover image, no carousel. The page sells nothing — it lets seven beautiful things go. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **An auction site with no auction mechanics.** Among the many `.bid` / auction-flavoured siblings in the corpus (hinagiku.bid as a *sunken* auction house, the PPUZZL.bid family, etc.), kaguya.bid removes every transactional organ — no gavel, no clock, no bid button, no reserve, no estimates. It is an *estate sale rendered as elegy*: the catalogue of things being given back. The "bid" is reframed as a farewell, not a transaction. This is structurally — not just stylistically — distinct from other `.bid` designs. 2. **Holographic kept at "shell-interior," not "Y2K screen."** The corpus's holographic (~11%) and y2k-futurism aesthetics lean loud — chrome, RGB-split, candy-bright. kaguya.bid uses iridescence at its most *analog*: low-saturation mother-of-pearl diffraction, only visible in motion, always buried under a 6% paper-grain layer. The hologram here is a *material property of washi*, the literal meaning of the word *kaguya* (radiant), not a sci-fi flourish. 3. **Bento-box as a tatami floor plan, pre-assembled, that morphs but never re-flows.** Bento-box layout sits at ~13% in the corpus and is almost always a tidy product/feature grid. Here it is an *obon/jubako* room of laid-out heirlooms — asymmetric, wide-unequal-gutter, with the `ma` whitespace treated as a deliberate compositional silence — and the cells *morph* (border-radius easing, iridescence rotation) on scroll while the grid itself stays rigid. No hero. The visitor lands *inside* the lattice. 4. **Slab-serif + Shippori Mincho as co-equal scripts.** Slab-serif typography is rare (~4%) and almost never paired with a *mincho*; here Zilla Slab's huge thin lot numerals and Shippori Mincho's *uroko* serifs share the page as equals, anchoring the holographic surface to ink-and-bamboo rather than letting it drift toward sci-fi. 5. **Tone: zen-contemplative *mono no aware* (~4% tone, ~3% floral-botanical motif).** Where most of the corpus is warm-inviting / pastoral-romantic / energetic, this page is hushed, under-written (two lines per heirloom), and built around the ache of beautiful things departing — closer to a tea ceremony at closing time than to any landing page. **Frequency analysis — patterns deliberately avoided:** skips the corpus-saturated hand-drawn (96%) and glassmorphism (70%) aesthetics; skips photography (98%) entirely for hand-authored CSS/SVG; skips card-grid / centered / full-bleed in favour of underused bento-box; skips the over-used cursor-follow / magnetic / spring / parallax pattern cluster in favour of `morph` (~11%) as the governing motion; uses analogous palette (~5%) and grain-overlay imagery (~7%) and slab-serif typography (~4%) and floral-botanical motifs (~3%) and zen-contemplative tone (~4%) — all underused. **Chosen seed/style:** `aesthetic: holographic, layout: bento-box, typography: slab-serif, palette: analogous, patterns: morph, imagery: grain-overlay, motifs: floral-botanical, tone: zen-contemplative`