# Design Language for kaguya.dev ## Aesthetics and Tone **kaguya.dev** is **a moonlit cottage at the bottom of a blue night — the candlelit workshop of Kaguya-hime, the moon princess of the *Taketori Monogatari*, who was found as an infant glowing inside a stalk of bamboo and who, on `.dev`, has set up a small craft-room rather than a palace.** The framing is deliberately *domestic and small*: not a celestial throne, not a sci-fi moon-base, but a low-ceilinged room with a bamboo lattice for a window, jars of cut grass on the sill, a kettle going cold, half-finished letters on the table, and one tall taper candle that is the only real light in the building. Outside that window it is not a black void — it is **ocean-deep**: a dense, drinkable midnight-teal-and-indigo that behaves more like deep seawater than like outer space, with the moon dissolved into it like a coin at the bottom of a well. The tone is **warm-inviting** held *against* a cold-blue field — the candle does the warming, and everything the candle touches goes amber while everything past its reach stays in that aquatic dark. This is cottagecore reclaimed from its usual sun-bleached-meadow palette: same hand-loved, slightly-imperfect, "someone actually lives here" feeling — wonky shelves, dripped wax, pressed leaves, a recipe written in pencil — but staged at **night, indoors, by candlelight, in the deep blue**. Kaguya is treated as a quiet craftsperson, not royalty: she is "in" but you have arrived after dusk; the page reads like being let into her workshop while she finishes a letter she has to send back to the moon. Nothing here is glossy, neon, or futuristic. It is warm, hand-made, candle-soft, and faintly homesick — a cottage that happens to be on the moon, or under the sea, or both, depending on how the light falls. ## Layout Motifs and Structure A **masonry** layout — but pointedly *not* a Pinterest moodboard. The masonry here is **the workshop's wall: an apothecary shelf / windowsill / mantel where uneven-height objects have been set down by hand** — short jars beside tall candle-stubs beside a folded letter beside a flat pressed-leaf beside a wide shallow dish. Columns are deliberately few (2 on phones, 3–4 on desktop) and the "tiles" are *objects on a shelf*, each photographed from the front like a still-life, each a slightly different height because real things are. The masonry never auto-flows into a tidy machine grid; gravity is gentle and a little crooked. Vertical structure (it is *one continuous candlelit room*, read top to bottom — no CTA-stack, no pricing band, no stat row): 1. **The Window** — a tall bamboo-lattice frame fixed near the top: a real `` grid of bamboo culms with visible nodes, the **ocean-deep** night pressed against it, and the dissolved-coin moon hanging in the lower-left pane. The site title "kaguya" is written *on the glass* in handwriting, as if breathed-on and traced with a fingertip — slightly drippy, slightly backwards-feeling. 2. **The Candle** — a single tall taper, fixed (in spirit) to the page's left or center margin, whose flame is the page's only warm light source: a soft amber radial that physically scopes which masonry tiles are "lit" (warm, legible, slightly raised) and which sit in the cold blue (cooler, recessed, waiting). As you scroll, the candle "burns down" — a wax pool grows at its base as an **organic blob** of `#e8c98a` that drips and re-pools. 3. **The Shelf (masonry body)** — the apothecary wall: jars of cut grass and bamboo shoots, a teacup, a stack of letters tied with twine, pressed leaves under glass, a small dish of moon-dust, a paper crane, a thimble — each "object tile" a still-life with one or two lines of handwritten label-tag below it. This is where the site's actual content lives, costumed as keepsakes. 4. **The Letter** — a wider single tile near the bottom: an unfinished handwritten letter on cream paper, ink still wet on the last word, addressed (in the corner) toward the moon. This carries the longer prose / "about" text as a literal letter you're reading over Kaguya's shoulder. 5. **The Sill** — a thin footer ledge: a row of small pressed-leaf SVGs, a final candle-stub guttering low, the night going slightly lighter blue at the very bottom edge (almost dawn) — a quiet end-of-visit feeling rather than a sign-off block. There is no nav bar in the corporate sense; if navigation is needed it is **handwritten tabs poking out from behind the shelf** like bookmarks in a recipe box. ## Typography and Palette **Fonts — Google Fonts only, verified available:** - **Caveat** (Google Fonts) — the **handwritten** voice and the site's headline hand: an actual loose ballpoint cursive with real connecting strokes and uneven baseline. Used *huge* for the "kaguya" title traced on the window glass, and at mid-size for object-tile labels (the "label-tag" handwriting) and for the unfinished letter's body. Let it ride its variable weight a little so down-strokes thicken — it should feel like one specific person's hand on cheap paper. - **Gloria Hallelujah** (Google Fonts) — a secondary **handwritten** hand, rounder and more childlike, used *sparingly* for tiny marginalia: a crossed-out word, a "p.s.", a doodled arrow's caption, the "← from the moon" on the letter. The contrast of two distinct hands implies the room has been written-in more than once. - **Cormorant Garamond** (Google Fonts) — the quiet *typeset* counter-voice for body copy that needs to be calm and readable (the longer paragraphs not staged as handwriting): a slender, old-style serif with low contrast and small caps available — feels like the printed flyleaf of an old fairy-tale book, the *Taketori* text itself. Use at generous size and leading, ink-blue not pure black. - **Spectral** (Google Fonts) — optional utilitarian fallback serif for any dense fine print / captions where Cormorant gets too delicate; warmer, sturdier, still bookish. **Palette — ocean-deep night, warmed only by candle:** | Token | Hex | Role | |---|---|---| | Drowned Indigo | `#0c1b2a` | the deepest part of the night outside the window; page base | | Deep Teal Water | `#13384a` | the body of the "seawater night" — gradient partner to Drowned Indigo | | Tide Blue | `#1f5f73` | mid-water; recessed/unlit masonry tiles, the cold side of objects | | Moon-Dissolved | `#7fb7c2` | the pale dissolved-coin moon, faded handwriting on glass, cool highlights | | Sea-Foam Paper | `#dfe9e6` | cool cream — letter paper, label tags, pressed-glass plates (paper that's been in a cold room) | | Candle Amber | `#e8c98a` | THE warm light — flame core glow, wax pool blobs, lit-tile warmth, key highlights on lit objects | | Tallow Cream | `#f4e6c4` | the warmest near-the-flame cream — candle body, the hottest edge of a lit object | | Ink Indigo | `#08121d` | near-black ink for handwriting and serif body text — never pure `#000` | | Pressed-Leaf Green | `#5b7d5a` | the cut grass, bamboo shoots, pressed leaves — a muted, slightly grey botanical green | | Bamboo Pale | `#c7c79a` | the bamboo lattice culms / window frame — old, sun-starved bamboo | Rule of light: a pixel's warmth is a function of distance from the flame. Near the candle → `#f4e6c4`/`#e8c98a` on `#dfe9e6` paper. Far from it → `#7fb7c2`/`#1f5f73` on `#0c1b2a` water. The transition is the whole mood; honor it everywhere. ## Imagery and Motifs **No stock photography. No 3D render. No gradient-mesh hero. No icon set.** Imagery is **photography ~98% of the corpus** — kaguya.dev carries instead **organic-blobs imagery (~8%, uncommon)** and the **candle-atmospheric motif (~5%, uncommon)**, with everything hand-rolled as inline SVG, CSS gradients, and one `` for the flame. Three visual systems carry the page: **1. The Candle (candle-atmospheric).** The signature element: a tall taper drawn in CSS/SVG — `#f4e6c4` body with a soft vertical sheen, a wick, and a flame that is a small `` particle wisp (a teardrop of `#f4e6c4`→`#e8c98a`→transparent that flickers on a slow Perlin-ish jitter, *never* a hard loop). Around it: a large soft radial of `#e8c98a` at low alpha — the "warm reach" of the light, which is what mathematically decides which masonry tiles are lit. Below it: a growing **organic blob** of cooled wax (`#e8c98a`/`#f4e6c4`) that drips (`path` morphs) and re-pools as you scroll — the page's progress bar disguised as a candle burning down. A faint ribbon of `#7fb7c2` smoke if the cursor passes near the flame, as if disturbed. **2. The Bamboo Window & the dissolved Moon.** A tall SVG lattice: vertical bamboo culms (`#c7c79a`) with the characteristic swollen *nodes* and thin diagonal cross-binding, framing rectangular "panes" of the **ocean-deep** night (a `#0c1b2a`→`#13384a` radial). In the lower-left pane, the moon: not a crisp disc but a soft pale smear (`#7fb7c2` blurred radial) — *dissolved*, like a coin sunk in dark water — with the faintest ring of caustic light around it. One culm should have a hairline split with a sliver of `#e8c98a` glow inside it — the bamboo Kaguya was found in, still faintly lit. **3. The Shelf still-lifes (organic-blobs + cottagecore craft).** Every masonry tile is a hand-drawn SVG still-life of a small workshop object: a stout glass jar with cut grass; a chipped teacup; a stack of letters tied with twine; pressed leaves (`#5b7d5a`) under a thin `#dfe9e6` glass plate; a shallow dish holding a puff of moon-dust (an **organic blob** of `#7fb7c2` at low alpha); a folded paper crane; a thimble; a guttering candle-stub. Each object that falls inside the candle's warm radial gets a `#e8c98a` rim-light on its left edge and a longer warm shadow; each that's outside gets a cool `#1f5f73` cast and reads slightly transparent, *waiting to be lit*. Beneath each: a handwritten label-tag in Caveat, sometimes with a crossed-out earlier guess in Gloria Hallelujah. Recurring decorative grammar everywhere: **pressed botanicals** (flat leaf/grass silhouettes tucked in margins), **pencil marginalia** (arrows, asterisks, "the green one →"), **twine and wax-seal dabs**, and the **wax-blob** shape language — soft, asymmetric, never a perfect circle — used for the moon-dust, the wax pool, the cursor's glow, and section dividers (a dripped line of wax rather than a rule). ## Prompts for Implementation Build kaguya.dev as **one HTML document, one CSS file, one ES module, one inline SVG sprite (bamboo culm, node, leaf, jar, teacup, letter-stack, crane, thimble, candle, wax-blob, dissolved-moon), one `` for the flame, one favicon SVG (a candle flame, `#e8c98a` on `#0c1b2a`)**. No framework, no bundler, no raster images, no WebGL, no video, no analytics, no router. The page is **a candlelit room you are let into after dark — rendered once, read top to bottom, like turning the pages of a hand-made book by one weak light.** **The skeleton-loading sequence (signature, ~3% of corpus — make it count):** the page does *not* fade in finished. On first paint the screen is **ocean-deep dark and almost empty** — only the bamboo window's *outline* and the candle's *outline* are drawn, in faint `#1f5f73` strokes, like a pencil sketch waiting for color. Then, over ~1.1s, things "fill in" the way moonlight fills a bamboo stalk: the flame catches first (the `` wisp ignites), its warm `#e8c98a` radial spreads outward, and **each masonry tile resolves *in the order the light reaches it*** — nearest-the-flame objects bloom from grey skeleton-shapes (soft `#1f5f73` blobs with a slow shimmer sweep) into full warm still-lifes, the far-from-flame tiles staying as cool skeleton blobs longest, some still half-resolved at the very edges. The handwriting on the window glass writes itself last, stroke by stroke (SVG `stroke-dashoffset`), as if traced by a finger. Treat skeleton-loading not as a spinner but as **the lighting of the room** — content arrives because the candle reached it. **Scrolling & light:** scrolling burns the candle down — the wax pool blob grows and drips (`path` `d` morph + a couple of CSS-animated drip elements), the flame shortens slightly, and the *warm radius can be tuned to track scroll position* so different shelves "come into the light" as you descend, lit tiles brightening (`filter: saturate` up, warm `box-shadow` extending) and tiles leaving the light cooling back toward `#1f5f73`. Honor `prefers-reduced-motion`: keep the flame as a still soft glow, no drip morphs, no skeleton shimmer — but the warm-vs-cool tile palette stays, because that *is* the design. **Micro-interactions (warm, hand-made, never slick):** hovering an object tile = it leans into the light — a small `rotate(-1deg)` tilt, the warm rim-light brightens, the handwritten label-tag's ink darkens as if freshly gone-over; the cursor carries a tiny soft `#e8c98a` wax-blob glow that, near the candle, makes a thread of `#7fb7c2` smoke curl. Clicking a "handwritten tab" bookmark = a paper-flip and the shelf gently re-stacks (masonry re-layout with `spring`-ish easing). The unfinished letter's last word has a slow wet-ink shimmer, as if not dry. Pressed-leaf footer items rustle (a 1–2° wobble) on hover. **Voice in the copy slots:** headings are Kaguya's handwriting traced on glass or tied to objects ("the grass I cut today", "a letter I keep not finishing", "moon-dust — don't breathe in"); longer prose is the unfinished letter in Caveat, or calm Cormorant Garamond set like an old fairy-tale flyleaf. Faintly homesick, never saccharine. **AVOID:** CTA-heavy hero stacks, "Get Started" buttons, pricing tiers, three-up feature grids, stat counters, testimonial carousels, dashboards, hard neon, glassmorphism chrome, anything that breaks the "I'm standing in someone's candlelit workshop at night" spell. ## Uniqueness Notes This design's deliberate departures from the 280 designs already in the registry, and from the seed's defaults: 1. **Cottagecore staged at night, indoors, by candlelight, in an ocean-deep blue — not a sunlit meadow.** Cottagecore appears in only ~10% of the corpus and is near-universally warm-earth, daytime, pastoral-romantic. kaguya.dev keeps the hand-loved, "someone actually lives here," wonky-shelf craft feeling but transplants it to a cold midnight-teal field (`#0c1b2a`/`#13384a`) lit by a single taper — the rare **ocean-deep** palette (~4%) and the uncommon **candle-atmospheric** motif (~5%) carrying a *domestic* scene rather than the usual spa or sci-fi register. The candle vs. cold-blue temperature gradient *is* the whole layout logic. 2. **Masonry as an apothecary shelf of hand-drawn SVG still-lifes — never a Pinterest image wall.** Masonry is uncommon (~8%) and almost always a photo-tile moodboard. Here every "tile" is a costumed object (jar, teacup, letter-stack, pressed leaf, moon-dust dish) drawn as inline SVG, with handwritten label-tags, and a tile's appearance is governed by its distance from the candle — lit tiles warm and raised, unlit tiles cool and recessed and literally "waiting to be lit." 3. **Skeleton-loading reframed as *lighting a room*.** Skeleton-loading is rare in the corpus (~3%) and almost always a generic content-placeholder shimmer. kaguya.dev makes it the page's opening *event*: an ocean-deep near-empty room with only pencil-outline window and candle, then the flame catches and content resolves tile-by-tile *in the order the candlelight reaches it*, the window handwriting tracing itself last. The skeleton blobs are part of the wax-blob shape language, not borrowed UI furniture. 4. **A literary frame (the *Taketori Monogatari* / Princess Kaguya) read as a small craftsperson's workshop, not a celestial palace** — no thrones, no moon-base, no sci-fi; just a homesick moon-girl who keeps cutting grass and not finishing a letter home, told entirely in two distinct handwriting hands plus an old-fairy-tale serif. 5. **Two named handwriting hands (Caveat + Gloria Hallelujah) plus a typeset counter-voice (Cormorant Garamond / Spectral)** — the room has been written in more than once; marginalia and crossings-out are a designed layer, not decoration. Handwritten typography (~33%) is common, but the *layered, who-wrote-this* use of it here is not. Avoided overused patterns from the frequency analysis: no glassmorphism (~70%), no card-grid/centered marketing skeleton (~88%/86%), no photography (~98%), no warm/gradient default palette (~98%/~97%) — the only warmth here is one candle on a deep-blue night, no cursor-follow magnetic spring hover-zoo as the *point* (the cursor's only job is to carry a small wax glow), and no parallax storytelling clichés beyond the candle physically burning down as you read. Chosen seed/style: **aesthetic: cottagecore, layout: masonry, typography: handwritten, palette: ocean-deep, patterns: skeleton-loading, imagery: organic-blobs, motifs: candle-atmospheric, tone: warm-inviting**