# Design Language for kaguya.day ## Aesthetics and Tone The governing image: **a wheatpaste mural of the moon princess on a wet harbour wall at low tide** — Kaguya-hime (the girl found inside a stalk of bamboo in *The Tale of the Bamboo Cutter*, who at the end of her one borrowed life is carried back up to the moon) rendered not as a porcelain courtly painting but as **street art** — fat-cap spray haloes, dripping outlines, torn poster edges, stencil-cut bamboo leaves — all of it submerged in the colours of deep water at night. The wall it lives on is **marble**: veined, cold, faintly luminous, the kind of stone you'd find at the bottom of the ocean if the ocean had a temple in it. `kaguya.day` is read literally and lovingly as **"one day of Kaguya"** — a pastoral-romantic almanac of a single borrowed day on Earth, told in hours: dawn in the bamboo grove, noon in the rice paddies, dusk on the water, the cold blue hour when the moon's envoys descend. The mood is **tender, slightly heartbroken, and proudly handmade** — a love letter scrawled in spray paint and ink, never a product page. Folktale meets graffiti zine meets a botanist's wet field notebook. Romantic in the old sense: longing, pastoral landscapes, things that bloom once and are taken away. Emotional register, in order: *quiet awe → countryside warmth → the ache of an ending → calm acceptance under a huge cold moon.* ## Layout Motifs and Structure A **hexagonal honeycomb grid** is the spine of the entire site — chosen specifically because it almost never appears in this collection (only ~3% of designs) and because a honeycomb of cells reads at once as **the cross-section of a bamboo stalk's chambers**, **a slice of marble's crystalline structure**, and **the faceted disc of the full moon**. No top nav bar, no footer link-farm, no card-grid: navigation *is* the comb. - **The comb-wall:** the viewport is a fixed (or near-fixed) field of pointy-top hexagons packed in offset rows, like cells in honeycomb or scales on a fish. On load they're matte **marble-grey blanks**; one by one they "wake up," each filling with one fragment of the day (a painted scene, a line of handwriting, a botanical sketch, a single huge numeral for the hour). - **The big cell:** one oversized "queen" hexagon, off-centre (golden-ratio placement, never dead-centre), holds the hero — the spray-painted Kaguya figure rising out of bamboo. Smaller hexes orbit it. - **Honeycomb of hours:** twelve to twenty-four small hexes form a ring/cluster representing the hours of her one day; hovering a cell tilts it in 3D toward the cursor and bleeds a soft bioluminescent glow into its neighbours. - **Bamboo seams:** the gaps between hexagons are rendered as thin **node-lines** — the way real bamboo is segmented — in a pale jade stroke, so the whole grid looks grown rather than drawn. - **Reading flow:** scrolling doesn't scroll a page so much as **drift the comb** — the honeycomb pans/parallaxes as a single immersive plane, revealing more cells (later hours, deeper water) toward the bottom, where the palette darkens to near-black and the moon-envoy hexes appear. - Hexagons that contain "torn poster" content have one or two ragged edges that visually break the strict comb — graffiti refusing to stay inside the lines. ## Typography and Palette **Typography — all Google Fonts:** - **Hero / display voice (the mural lettering):** **"Caveat"** set ENORMOUS (clamp up to ~13vw) — a loose, slanted handwritten brush that reads as spray-paint script; used for the site name "kaguya", the hour labels, and one or two longing phrases that overspill their hexes. (Acceptable alternate for an even rougher tag: **"Permanent Marker"**.) - **Narrative / poetic body:** **"Gloria Hallelujah"** — a rounded, gentle handwritten hand for the folktale fragments and field-notes; it keeps the *pastoral-romantic* warmth and reads like a diary kept in the bamboo grove. - **Botanical captions & tiny labels:** **"Shadows Into Light Two"** — a thin, airy script for plant names, moon-phase names, timestamps; small, set in jade ink. - **The one structural counter-voice:** **"Cormorant Garamond"** (italic) used very sparingly for a single epigraph from the tale — the only "courtly" classical note, so the handwriting around it feels even more like graffiti by contrast. **Palette — ocean-deep, with bioluminescent spray accents:** - `#06121F` — *abyss ink* (the deepest background, the cold blue hour, the bottom of the comb) - `#0E2A3F` — *harbour night* (mid background, the wet wall) - `#16455C` — *tide stone* (hexagon fill, marble shadow side) - `#3C7C8C` — *seafoam slate* (marble veining, structural lines) - `#E8E2D4` — *moon-marble* (the lit face of the marble, primary "paper" white-grey) - `#62F0C8` — *bioluminescence* (the spray-paint glow, the moon-envoy light, primary accent) - `#F2B7D0` — *night-bloom pink* (floral-botanical motif accent — wisteria/cherry done in pastel spray) - `#F7C548` — *bamboo-cut gold* (rare warm spark — lantern light, the cut edge of bamboo, the moon's rim) Rule: the warm tones (`#F2B7D0`, `#F7C548`) are *spray accents only* — drips, halos, single petals — never washes. The deep blues dominate ~80% of every screen; `#62F0C8` is the one electric thread running through it. ## Imagery and Motifs - **Marble-texture surfaces:** every hexagon is a slab of **veined marble** — generated with layered CSS/SVG turbulence (`feTurbulence` + `feDisplacementMap`) in deep teal-on-stone, with one faint internal glow seam. The marble is *cold and slightly wet-looking*, lit from a single high moon. This is the literal "wall" the street art lives on. - **Graffiti / wheatpaste layer:** the figurative content is painted **over** the marble — Kaguya as a hand-drawn (vector + texture) mural: bold uneven outlines, spray-halo behind her head, paint drips running off the bottom of her hex, torn-poster edges, a couple of "tags" (her name in script, a small crescent stencil) repeated like a writer's signature. - **Floral-botanical motifs:** **bamboo stalks, bamboo leaves, wisteria, susuki (pampas grass), single chrysanthemum and cherry blossoms** — all rendered as **stencil cut-outs and ink sketches**, scattered through the comb as decorative cells and as overlay sprigs that break hex edges. Bamboo is the structural plant (its segments echoed in the grid seams); flowers are the pastoral-romantic punctuation. - **The moon, three ways:** (1) a huge faint marble disc behind the whole comb; (2) a phase-cycle running across a row of small hexes (waxing → full → the envoys); (3) a single bright `#62F0C8` ring that follows the cursor faintly, like moonlight on water. - **Water & countryside:** painterly strips of rice paddy at dawn, a bamboo grove, a still bay at dusk — low-detail, almost woodblock-flat, occupying the larger hexes; mist done as soft noise. - **Texture stack everywhere:** subtle paper/wall grain, faint spray-mist noise, the marble veining — three layers of "this was made by a hand on a real surface." ## Prompts for Implementation - **Build the honeycomb first, content second.** Construct the hex grid with CSS `clip-path: polygon()` pointy-top hexagons in offset rows (negative top-margin per even row to interlock). Drive layout with a grid/flex scaffold or absolute placement on a fixed-aspect "comb" plane; the comb itself is one large element that translates/parallaxes on scroll rather than the document scrolling normally. - **Marble is procedural, not an image file.** Give each hex an SVG `filter` with `feTurbulence` (low baseFrequency, a few octaves) → `feColorMatrix`/`feComponentTransfer` tinted into the teal-stone range → composited over the base fill, plus one `radial-gradient` "moon highlight" near the top edge. Vary the turbulence `seed` per hex so no two slabs match. - **tilt-3d is the core interaction.** On pointer-move over the comb, each hex under/near the cursor rotates on X/Y (`transform: perspective() rotateX() rotateY()`) toward the pointer with a spring ease; its `box-shadow` and a `::after` `#62F0C8` glow intensify; neighbours catch a dimmer spill. Respect `prefers-reduced-motion` by swapping tilt for a gentle brightness lift. - **Entrance = the comb waking up.** First paint: all hexes are blank `#16455C` marble. Then stagger-reveal them (random-ish order radiating from the queen hex), each one fading in its painted/handwritten content with a tiny scale-pop, like cells filling with honey/light. The hero Kaguya hex blooms last and largest, her spray-halo drawing on via `path-draw-svg` (stroke-dashoffset). - **Handwriting should feel wet.** Animate key script lines (the site name, one or two longing phrases) with an `path-draw-svg` "being written" effect, ink-dark settling to its colour; let "Caveat" headings overspill their hexes and clip at the comb edges so they feel bigger than the wall. - **Drips & torn edges.** A handful of hexes have CSS paint-drip pseudo-elements (thin elongated `border-radius` blobs of `#62F0C8` / `#F2B7D0`) running down from their bottom vertex; "poster" hexes get a jagged `clip-path` on one side and a faint torn-paper shadow. - **Botanical sprigs as connective tissue.** Place inline SVG bamboo nodes along the hex seams; let stencil leaves and a wisteria strand drape across 2–3 cells, animating a slow sway (CSS `@keyframes` rotate, ~6–10s) — the only "breeze" on the page. - **Tell the day as a journey through the comb.** Top of the plane = dawn in the grove (warmer marble, gold sparks); middle = noon paddies & the bay; bottom = the cold blue hour, the moon huge, the envoy-hexes glowing `#62F0C8`, the figure already half-faded — an ending, not a sell. Pure narrative; no CTA bars, no pricing tiles, no stat grids. - **Sound-of-a-place, visually:** mist, moonlight cursor-ring, swaying bamboo, distant tide-strip — keep motion slow and continuous so the whole thing feels like a held breath at the end of a day. ## Uniqueness Notes Differentiators from other designs in this collection: 1. **"Wheatpaste mural of a moon princess on a marble harbour wall, laid out as honeycomb."** It fuses three things almost no other site here does at once: a true **hexagonal-honeycomb** structure (~3% of designs), a **graffiti/street-art** treatment (~4%), and **marble-texture** surfaces (~3%) — and it justifies the honeycomb three ways (bamboo chambers, marble crystal, moon disc) instead of using it as decoration. 2. **Ocean-deep palette doing the work of a night sky.** Most "ocean-deep" (~4%) palettes go spa-calm or seapunk-playful; here the deep teal-blues are a *nocturnal harbour at low tide* — melancholy, romantic — with a single `#62F0C8` bioluminescent thread as the only "neon," and warm pinks/golds restricted to spray-drip accents. 3. **Handwriting as graffiti, not as cottagecore.** The ~33%-common handwritten type here is wielded as **brush-script tags and drips** ("Caveat"/"Permanent Marker") over a hard marble wall — street lettering, not a craft-blog doodle — with one lone classical italic epigraph as deliberate contrast. 4. **A site that is one borrowed day, ending in loss.** Pastoral-romantic tone (~35%) is taken to its melancholic edge: the narrative literally fades the heroine out at the bottom of the comb as the moon's envoys arrive — a folktale ending, no conversion goal anywhere. 5. **Procedural marble + per-hex tilt-3d wake-up.** Marble is generated per cell via SVG turbulence (unique seed each), and the honeycomb "comes alive" cell-by-cell with springy 3D tilt and bioluminescent spill — a tactile, hand-on-stone feel rather than flat cards. Chosen seed / style: **aesthetic: graffiti, layout: hexagonal-honeycomb, typography: handwritten, palette: ocean-deep, patterns: tilt-3d, imagery: marble-texture, motifs: floral-botanical, tone: pastoral-romantic.** Avoided per frequency analysis: no `hand-drawn`+`glassmorphism` default skin, no `photography` imagery, no `card-grid`/`centered`/`full-bleed` default layout, no `warm`+`gradient` default palette, no `cursor-follow`/`spring`/`magnetic`/`stagger`/`parallax` used as the *only* idea — here `tilt-3d` (~25%) leads and the honeycomb/marble/graffiti combination carries the identity; `mono` typography avoided in favour of expressive handwriting.