# Design Language for kaguya.stream ## Aesthetics and Tone kaguya.stream is **a moon-viewing pavilion built around a single shaft of lunar light** — the visual world of the *Taketori Monogatari* (the Tale of the Bamboo Cutter) reimagined as a quiet, scroll-paced ascent. The name carries Princess Kaguya: a being found inside a stalk of glowing bamboo who, after a season among mortals, is reclaimed by the Moon and rises into the night sky on a bridge of cloud. The site is **not** a streaming product page; it is a slow nocturne — a *japanese-minimal* room at midnight where the only events are light moving across paper, bamboo nodes catching a glow, and a procession of celestial figures crossing from the bottom of the screen to the top. The tone is **zen-contemplative** with a held breath of melancholy. Everything is hushed. Nothing pulses, nothing shouts, nothing asks to be clicked. The page behaves like a *tsukimi* (moon-viewing) night: you sit, the light shifts, the bamboo creaks, and eventually something luminous departs. Where most sites are loud rooms full of cards, kaguya.stream is **ma** — negative space treated as the primary material, with ink, silver, and the faint indigo of a cleared night sky used sparingly, like a brushstroke you cannot take back. Reference touchstones: Heian-era *yamato-e* handscrolls unrolled right-to-left; the matte black of dried sumi ink on kozo paper; the specific cold-white of a full moon seen through high thin cloud; bamboo groves at 2 a.m. lit only by the sky. Filtered through this: a restrained, almost stark digital page where line-drawn imagery and enormous quiet do the storytelling. ## Layout Motifs and Structure The composition is a **vertical moon-viewing scroll** — but inverted from the usual web convention. The narrative *rises*: the bamboo cutter's hut is at the bottom, the Moon is at the top, and Kaguya's procession moves **upward** as you scroll **down**, so descending the page is experienced as watching her ascend. (Immersive-scroll sits at only 7% in the frequency analysis; this inverted-ascent reading of it is the site's structural signature.) - **The single column of ma.** Content lives in one narrow central column — roughly 46ch at most — flanked by wide, deliberately empty margins (`ma-negative-space` at 7%; here it is load-bearing). The emptiness is never decorated. It is the night. - **The light-shaft spine.** A single vertical gradient band — pale silver fading to nothing on both edges — runs the full height of the page, slightly off-center (about 42% from the left, the *rule of thirds* applied to a moonbeam). All key imagery aligns to this shaft. It is the only structural element that touches every section. - **Seven stations of the scroll.** The page is seven full-viewport panels, each a moment in the tale: (1) the glowing bamboo stalk, (2) the child found, (3) the seasons of growth, (4) the five impossible suitors, (5) the Emperor's longing, (6) the message from the Moon, (7) the ascent and the unread letter. Panels are separated not by hard cuts but by **slow crossfades of the background sky tone** — from near-black at the hut to a luminous off-white at the Moon. - **Right-to-left captions.** Where short text labels appear beside imagery, they are set in a vertical line that reads top-to-bottom (CSS `writing-mode: vertical-rl`), echoing handscroll calligraphy — used sparingly, one per panel at most. - **No navigation chrome.** No header bar, no menu, no footer columns. A single hairline progress mark — a thin silver crescent that fills as you scroll — sits in the lower-right margin. That is the entire UI. ## Typography and Palette **Fonts (Google Fonts only):** - **Display & section openings — *Shippori Mincho* (weights 400 and 600)** — a Japanese mincho serif with elegant, slightly dry brush-terminal serifs. Used for the seven panel titles and the largest pull-quotes, set generously large (clamp ~2.4rem → 4.4rem), letter-spacing slightly open, color near-white on the dark panels and near-black on the light ones. It carries the *yamato-e* handscroll voice without resorting to display gimmickry. Latin glyphs in this family share the same restrained brush logic, so English and any Japanese accents sit together honestly. - **Body & narration — *Cormorant Garamond* (400, and 500 italic)** — a high-contrast serif-revival face, very thin in the hairlines, almost moonlit itself. Used for the running tale text at a comfortable reading size (~1.0625rem, line-height ~1.85), with the italic reserved for the voices of the Moon people. *Serif-revival typography is at 5%; this pairing of a Japanese mincho with a delicate Latin garalde is the typographic differentiator.* - **Micro-labels & the crescent counter — *Zen Kaku Gothic New* (300)** — a calm, low-contrast Japanese sans, used only at tiny sizes (~0.7rem, tracking +0.18em, uppercase for Latin) for the vertical captions and the single progress label. It is the one quiet sans note against two serifs — never used for anything longer than three words. **Palette — a cleared night sky, ink, and moon-silver (8 values):** - `#0B0E14` — *sumi midnight*: the near-black of the opening panels, dried-ink-on-paper dark with a faint blue undertone. Primary background at the hut. - `#141A26` — *grove indigo*: the bamboo-grove dark used for mid-panel backgrounds and the deepest shadows in line art. - `#27344A` — *cloud-bridge slate*: the muted blue of the cloud the procession travels on; used for large soft shapes and section dividers. - `#8C9BB5` — *thin-cloud grey*: a cool desaturated blue-grey for secondary text on dark panels and the faded edges of the light shaft. - `#C9D2DC` — *moon-haze silver*: the pale silver of moonlight through high cloud; the light-shaft core, hairlines, and the crescent progress mark. - `#F4F1E8` — *kozo paper*: a warm off-white, the color of aged mulberry paper; the background of the final luminous panels and the color of the unread letter. - `#E8DCC0` — *lamp gold*: a single restrained warm note — the glow inside the bamboo stalk and the lantern of the bamboo cutter's hut. The *only* warm hue on the entire site; used at <2% coverage. - `#2A2620` — *brush umber*: a dark warm brown for ink line art rendered on the pale panels (true black would be too harsh on paper). Gradients appear only as **soft radial glows** (the bamboo's inner light, the moon's halo) and the **vertical light shaft** — never as the loud diagonal mesh gradients common in the corpus. ## Imagery and Motifs **No photography, no 3D renders, no stock art. Every visual is hand-built SVG `line-illustration` in a single-weight ink stroke — the *hakubyō* (white-drawing) tradition of monochrome Heian outline painting, translated to vector.** Strokes are uniform 1.5px on dark panels (silver) and 2px on light panels (brush umber), with `vector-effect: non-scaling-stroke` so they stay hair-fine at any size. Fills are rare and flat; most figures are pure contour. **The recurring motif vocabulary:** - **The glowing bamboo node.** A simple vertical bamboo segment with its characteristic ring-joints, lit from within by a soft `lamp gold` radial glow. Appears in panel 1 full-size, then recurs shrunken in the lower-right of every later panel as a quiet leitmotif — the origin she never forgets. - **Star-celestial figures.** The *tennin* (celestial maidens) of the Moon's procession, drawn as flowing single-line silhouettes with trailing *hagoromo* (feather-robe) ribbons — these are the only figures that **animate**, drifting slowly upward along the light shaft. *Star-celestial motifs sit at 3%; the Moon-procession reading is the motif differentiator.* - **The crescent and the full moon.** The progress indicator is a thin crescent that waxes to full as you reach panel 7. The actual Moon in the artwork is a single perfect circle of `moon-haze silver` with a faint halo — it grows larger panel by panel until it fills the top of the final screen. - **Cloud-bridge.** Stylized Heian-style *suyari-gasumi* (trailing mist bands) — horizontal ribbons of `cloud-bridge slate` with scalloped edges — that the procession walks on. They drift very slowly leftward, the only horizontal motion on the page. - **The five impossible objects.** Tiny line-drawn icons for the five suitors' impossible quests (the stone begging-bowl of Buddha, the jeweled branch of Hōrai, the fire-rat's robe, the dragon's rainbow jewel, the swallow's cowrie shell) — arranged as a single sparse horizontal row in panel 4, each one faintly crossed out. - **The unread letter.** A single folded rectangle of `kozo paper` with one vertical line of *Zen Kaku Gothic* text, slightly rotated, resting alone in the vast white of the final panel — the elixir-of-immortality letter the Emperor will burn on Mount Fuji. Texture: a barely-perceptible paper grain (SVG `feTurbulence`, opacity ~0.04) over the light panels only; the dark panels stay pure flat ink. ## Prompts for Implementation Build kaguya.stream as **a single-route, vertically-scrolled handscroll** — one HTML file, one CSS file, one JS module. Treat the page as a roughly 80–90 second moon-viewing: the reader scrolls down, and as they do, the night brightens from sumi-black to moon-white while a procession of line-drawn celestial figures drifts upward and Kaguya finally departs. There is **no** CTA, no pricing block, no stat grid, no testimonial row, no signup form, no feature cards, no logo wall. There is only the seven-station scroll and the tale. **Storytelling structure (seven full-viewport stations, top → bottom, sky tone brightening throughout):** 1. **The Glowing Stalk.** `sumi midnight` background. Centered in the light shaft: one tall bamboo segment, lit from within by a slow-breathing `lamp gold` radial glow (a 6-second ease in/out opacity loop — the *only* looping animation in the dark half). *Shippori Mincho* title fades up letter by letter: "*A light inside the bamboo.*" One vertical caption to the side. 2. **The Child Found.** Background lifts to `grove indigo`. The bamboo opens; a small seated tennin figure (3 inches tall, single-line) is revealed inside on `scroll-triggered` reveal. Narration paragraph in *Cormorant Garamond* draws in via an `path-draw-svg`-style clip reveal of the text block (the words appear as if brushed left-to-right). *Path-draw-svg is at 29% — used here, but only on the text masks and the figure contours, never as decorative flourish.* 3. **The Seasons.** Background `grove indigo` → `cloud-bridge slate` crossfade. Three months pass: the tennin figure scales up smoothly to adult Kaguya in three discrete `morph`-like steps tied to scroll position. Three faint moon discs at three sizes mark the growth. Sparse, slow `stagger` on the three growth captions. 4. **The Five Suitors.** Background holds at `cloud-bridge slate`. The five impossible-object icons enter in a single horizontal row, each on a slight `fade-reveal`, and one by one a thin silver line strikes through each as you scroll past — five small failures, no commentary. The Moon disc in the corner is now noticeably larger. 5. **The Emperor's Longing.** Background warms imperceptibly toward `thin-cloud grey`. A large *Shippori Mincho* pull-quote, the Emperor's words, centered in the shaft; the italic Moon-voice replies in smaller *Cormorant* italic below. The light shaft brightens its core. 6. **The Message from the Moon.** Background `kozo paper` begins to bleed in from the top edge downward (a `slide-reveal` of the pale layer over the dark). The full Moon disc, now huge, sits at the top of the viewport with a `cloud-bridge` of *suyari-gasumi* mist bands drifting in beneath it. The procession of 5–7 tennin figures appears at the bottom of the screen. 7. **The Ascent.** Full `kozo paper` background, paper grain active. As the reader scrolls the final station, the tennin procession — and Kaguya among them — drift slowly **upward** along the light shaft and off the top of the screen, their *hagoromo* ribbons trailing (a slow parallax-coupled translate, never a fast slide). Left behind, alone in an enormous field of white: the folded `kozo paper` letter, slightly rotated, one vertical line of text. The *Shippori Mincho* closing line fades in low and small: "*and the letter went unread.*" The crescent progress mark in the corner is now a full silver circle. Then stillness — nothing else animates. **Motion rules:** Everything eases slowly (durations 1.2s–6s, `cubic-bezier(0.22, 1, 0.36, 1)`-style ease-out, or gentle sine for loops). Scroll-coupled motion (the rising procession, the brightening sky, the growing moon, the waxing crescent) is the primary technique; discrete reveals are secondary; loops are reserved for the bamboo glow and the mist drift only. Honor `prefers-reduced-motion` by removing all loops and scroll-parallax and simply showing each station statically with the sky-tone crossfades disabled. No cursor-follow, no magnetic buttons, no tilt-3d, no springy bounces — those would break the hush. **Build hygiene:** semantic single `
` with seven `
`s; SVGs inline so strokes can be styled and animated by CSS; the light shaft as a fixed-position pseudo-element layered behind content; sky-tone crossfades driven by an `IntersectionObserver` toggling a `data-station` attribute on ``. One JS module, no framework. ## Uniqueness Notes Differentiators, each a deliberate move away from the patterns in the frequency analysis: 1. **Inverted-ascent scroll.** The narrative rises while the reader descends — scrolling *down* is experienced as watching Kaguya ascend *up* into the Moon. Immersive-scroll is only 7% of the corpus, and this reading of it — vertical motion semantically reversed — appears nowhere else. 2. **Ma as the primary material.** This is `japanese-minimal` (1% of the aesthetic frequency) with `ma-negative-space` (7%) treated not as breathing room around content but as the night sky itself — the empty margins *are* the artwork. Most of the corpus fills space with cards and grids; this site refuses both entirely (no card-grid at 89%, no hero-dominant CTA block). 3. **Hakubyō line-illustration over photography.** Where 98% of the corpus uses photography or gradient meshes, kaguya.stream is built entirely from single-weight ink-contour SVG in the Heian *hakubyō* white-drawing tradition — pure line, almost no fill, no raster imagery at all. 4. **Moon-silver-and-ink palette with exactly one warm note.** A near-monochrome cool palette (sumi black → grove indigo → moon-haze silver → kozo paper) with `lamp gold` as the single warm hue at under 2% coverage — a chromatic discipline the warm-gradient-saturated corpus (98% warm, 96% gradient) does not attempt. 5. **A folktale, not a pitch.** The page tells the *Tale of the Bamboo Cutter* end to end with zero conversion intent — no pricing, no stats, no testimonials, no signup. The only "UI" is a thin crescent that waxes to full as the story ends. Chosen seed/style: **japanese zen portfolio** — *aesthetic: japanese-minimal, layout: ma-negative-space, typography: serif-revival, palette: midnight-blue, patterns: path-draw-svg, imagery: line-illustration, motifs: star-celestial, tone: zen-contemplative*. Avoided patterns from the frequency analysis: hand-drawn (97%), glassmorphism (72%), photography (98%), card-grid (89%), full-bleed-as-CTA, warm-gradient palettes (98%/96%), cursor-follow (88%), magnetic (81%), spring (86%) — none of these appear here.