# Design Language for kaguya.monster ## Aesthetics and Tone kaguya.monster is **a 1958 lunar-observation kiosk run by a homesick moon-creature, rebuilt as a quiet web page about leaving**. The conceit: in the bamboo-cutter tale, Princess Kaguya is found inside a glowing stalk, raised on Earth, and then — to everyone's grief — taken back to the Moon by a celestial procession that erases her memories of Earth. This site is what she would have built **if she'd had a workbench, a soldering iron, and a mid-century industrial design degree before they came for her**. It is not a fairy-tale illustration site and not a glassmorphism moonlight-dashboard. It is a *kiosk*: warm plywood, a curved Eames-shell panel, a brushed-aluminum dial, a single round porthole-screen, and pinned to the corkboard behind it — the actual reason for the kiosk's existence — a hand-labeled chart of "things I will forget on the way up." The aesthetic is **mid-century modern**, the real thing: 1948–1962 American/Scandinavian industrial design, the era of the Eames lounge, the Braun SK4, Saul Bass title sequences, atomic-age textbook diagrams, and *Sunset* magazine garden spreads. Rounded plywood corners. Hairline rules. Generous breathing room. Tapered "Sputnik" legs implied in the way panels float on thin shadows. Everything has the calm confidence of a well-made object from before the screen got loud. There is **no neon, no glassmorphism blur, no hand-drawn doodle border** — those are the cohort's reflexes (glassmorphism 70%, hand-drawn 96%), and the kiosk refuses all three. The only "glow" on the page is the moon itself, and it is a soft printed glow — a halftone-dot bloom, not a CSS box-shadow. The tone is **approachable-casual** — the moon-creature talks like a kind shop teacher who knows you're a little sad and isn't going to make a thing of it. Short sentences. Plain words. The occasional dry joke about gravity. "The Moon is fine. It's just very far, and the trip is one-way for the memory, not the body. Sit down, I made tea." Where most "celestial" sites go breathless and mystical (mysterious-moody 3%, dreamy-ethereal 3%), kaguya.monster stays **grounded, warm, and matter-of-fact about the impossible** — which is what makes the ending land. The page never raises its voice. It just slowly, gently, scrolls toward goodbye. Inspirations that are actually load-bearing: - **Charles & Ray Eames, "Powers of Ten" (1977 / 1968 rough cut)** — the calm narrator zooming through scale; the kiosk's scroll *is* a powers-of-ten zoom from a Tokyo bamboo grove out to the lunar surface. - **Dieter Rams' Braun radios (SK4, T3, 1955–1958)** — honest materials, one perfect dial, nothing extra. The site's controls look like this. - **Saul Bass title cards (Vertigo, Anatomy of a Murder, 1958–59)** — flat color, cut-paper shapes, type that *is* the image. - **Atomic-age elementary-school science posters** — the orbit diagram, the phases-of-the-moon strip, the cutaway of the bamboo stalk, all drawn in three flat inks with a registration-misprint charm. - **Studio Ghibli's *The Tale of the Princess Kaguya* (2013)** — but only the *restraint* of it: the pale ground, the unfilled space, the sense that the most important things happen in the margins. Not the brushstroke style — the *quiet*. Critically: **mid-century is at 10% in the cohort**, **earth-tones palette at 2%**, **star-celestial motif at 2%** — this combination is nearly unclaimed, and it is the opposite of the neon/glassmorphism mean. ## Layout Motifs and Structure A **ma-negative-space** composition (6% in the layout frequency analysis — almost everyone reaches for card-grid or full-bleed). *Ma* (間) is the Japanese principle of the meaningful interval: the page is mostly empty, and the emptiness is the point — it is the sky between the kiosk and the Moon, the distance Kaguya has to cross, the space where forgetting happens. Content sits in small, deliberate islands surrounded by wide quiet margins. Nothing fills the viewport edge-to-edge. Ever. The page is a **single descending column of "powers-of-ten" plates**, each plate a self-contained mid-century object floating on a thin shadow, with ~120vh of breathing space and a vertical hairline (1px, `#3A2E22` at 18%) connecting each plate to the next like the spine of a field notebook. Nine plates, each a chapter, each one zoom-step closer to the Moon: 1. **The Kiosk (10⁰m).** Hero: a flat cut-paper rendering of the observation kiosk — plywood panel, curved Eames shell in `#C26B3E`, a brushed-aluminum dial, the round porthole-screen showing a sliver of moon. Wordmark `kaguya.monster` set in the screen's reflection. A one-line greeting below: *"hi. this kiosk is about going home. take your time."* 2. **The Bamboo Grove (10²m).** A flat atomic-age diagram of a bamboo stalk, one segment glowing — the discovery. Misregistered three-ink print look. 3. **The House on Earth (10⁴m).** A *Sunset*-magazine-style cutaway of a low mid-century house with a tatami room and a sliding door open to a garden. Tiny figures. Warm light. 4. **The Years (10⁶m).** A horizontal phases-of-the-moon strip used as a *timeline of a life on Earth* — childhood waxing, full, then waning. Eight moons, captioned in plain language. 5. **The Letter (10⁷m).** The plate where the moon-creature explains, in shop-teacher voice, what the celestial procession does to memory. A single corkboard with one pinned index card. 6. **The Chart of Things I Will Forget (10⁸m).** The emotional center. A hand-labeled mid-century data card: rows like *the smell of rain on the road*, *how my mother says my name*, *the weight of a cat*. Each row, on hover, very slowly fades its ink (a `micro-interaction` — see below). You cannot un-fade them. 7. **The Procession (10⁸·⁵m).** Flat Saul-Bass cut-paper silhouettes of the celestial retinue descending — no faces, just robes and lanterns, in flat `#E8C97A` and `#3A2E22`. 8. **The Crossing (10⁹m).** Mostly empty. A tiny kiosk far below, a tiny figure rising, vast quiet sky. *Ma* at maximum. One line of type: *"this is the part that's far."* 9. **The Lunar Surface (10⁹·⁵m) / Colophon.** Arrival. A flat regolith plain, Earth a small blue marble low on the horizon. The moon-creature signs off: *"made it. it's quiet here. the kiosk's still warm if you want to scroll back."* Colophon, credits, the seed line, in tiny brushed-aluminum-label type. Grid: a strict **8pt baseline grid** (mid-century industrial discipline) with a **golden-section primary column** — content column ~62% width, the remaining ~38% is the *ma* margin, alternating left/right plate-to-plate so the eye drifts gently down a zigzag of quiet. No card-grid. No bento. No hero-dominant slam. No sidebar. The navigation is one element: a small brushed-aluminum **dial** fixed bottom-right that you can turn (drag or scroll-near-it) to jump between the nine plates — its needle is a tiny crescent. Plate transitions are **"focus-pull" events**: as a new plate enters viewport, its halftone-dot texture resolves from coarse (12px dots) to fine (2px dots) over ~600ms — like a slide projector finding focus — and the connecting hairline draws downward to meet it. ## Typography and Palette **Fonts — Google Fonts only, three families, used with industrial-design restraint.** - **Fredoka** (variable, weights 400/500/600). The page's primary voice — all body text, the moon-creature's speech, captions, the chart rows. Fredoka is a **playful-rounded** geometric sans (3% in the typography frequency vocabulary — nearly unused) with soft, friendly, slightly chunky terminals; it reads like the lettering on a 1958 children's science kit or a Fisher-Price dial. It keeps the page warm and *approachable-casual* without tipping into hand-drawn cutesy. Body set at 18px / 30px line / 0.005em tracking / weight 400, color `#3A2E22` (warm dark walnut). The moon-creature's direct speech at 20px, weight 500, slightly looser, in `#5C3A28`. - **Bricolage Grotesque** (variable, opsz axis, weights 600/700/800). The display face — wordmark, plate titles, the big "powers of ten" scale labels. Bricolage Grotesque is a **grotesque-neo** with subtly flared, almost-mechanical joints that echo mid-century industrial signage (think Braun product nameplates, airport wayfinding circa 1962). Plate titles at 40px (mobile) / 64px (desktop), weight 700, tracking −0.02em, color `#3A2E22`, often set as flat cut-paper shapes (filled, with a 2px `#FBF4E3` inner inset like a screenprint). The scale labels (`10⁰m`, `10²m`...) at 14px, weight 700, tracking 0.12em, uppercase, in brushed-aluminum `#9A968C`. - **DM Mono** (regular, 400). Used only for the brushed-aluminum equipment labels — the dial's tick numbers, the colophon credits, the tiny "calibrated 1958" stamps, line numbers on the chart. 12px, weight 400, letter-spacing 0.06em, color `#9A968C` on the aluminum panels, `#7A766C` on plywood. Its tabular figures align the chart rows and the dial ticks cleanly. **Three families, no fourth. No serif, no handwriting, no display-bold slam.** **Palette — "earth-tones" (2% in the cohort), the real mid-century chord.** Not muddy beige — the *confident* earth palette of a 1958 textile sample book and a Heath Ceramics tile: walnut, terracotta, oat, sage, and one aluminum grey, with the Moon as the single luminous pale. Nine values: - `#FBF4E3` — page background. Warm oat paper, not white. The whole page is printed on this. - `#F2E6CC` — secondary panel fill (plate backgrounds, the corkboard's paper card). - `#E8C97A` — soft gold ochre. The Moon's printed glow, the procession lanterns, the discovered bamboo segment. - `#C26B3E` — terracotta / burnt sienna. The Eames shell, the house's roofline, primary accent. The page's warm heartbeat. - `#7E8B5C` — dusty sage green. The garden, the bamboo leaves, the "still on Earth" marker on the timeline. - `#3D5A6C` — slate teal-blue. The sky between plates, the Earth-marble on the last plate, the cool counterweight to all the warmth. - `#9A968C` — brushed aluminum. The dial, the equipment labels, hairlines on metal. - `#5C3A28` — warm chestnut. The moon-creature's speech, secondary text on plywood. - `#3A2E22` — warm walnut near-black. Primary ink, plate titles, the corkboard pins. No pure black (`#000`). No pure white (`#FFF`). No neon. No gradient mesh — the only "gradient" allowed is a **halftone-dot density ramp** (CSS radial-gradient masked into a dot pattern) used for the Moon's glow and the focus-pull transitions, so even the soft passages feel *printed*, never digitally glossy. A faint **3% paper-grain tile** (200×200px PNG, ~1.4KB) multiply-blended over everything keeps the oat ground from going flat. One reserved chromatic event: on the final plate, the Earth-marble is the *only* place `#3D5A6C` appears at full saturation and it is no larger than 40px — a tiny cool blue dot in a warm world, the thing being left behind. ## Imagery and Motifs **Primary imagery: bokeh-background (5% in the cohort) reimagined as printed lunar bloom, plus star-celestial motif (2%) as atomic-age diagram.** **Bokeh-background, made of paper:** The Moon — present in some form on every plate, growing plate-to-plate — has a glow rendered as **out-of-focus halftone dots**: 4–6 layered radial fields of ochre `#E8C97A` dots that grow larger and softer toward the edges, blurred 40–90px, mix-blend `multiply` so it tints the oat paper rather than lighting it. It drifts on a slow 80s Lissajous loop (≤8% displacement). This is the only soft-focus element on the page and it is unmistakably *ink*, not light. Behind the deep-zoom plates (8 and 9), a sparse field of the same dots, smaller and dimmer, stands in for stars — a *bokeh starfield* that is really a misregistered print. **Star-celestial motif as 1958 science poster:** - The phases-of-the-moon strip (plate 4) is a literal atomic-age classroom diagram — eight flat circles, each a different lit fraction, drawn in `#3A2E22` outline with `#E8C97A` fill, captioned in DM Mono with the registration-misprint offset baked in (a 1px `#C26B3E` ghost behind each circle). - The orbit diagram appears as a recurring small **mark** in the bottom-left margin of every plate: a thin ellipse with a dot on it, the dot's position advancing one notch per plate — a quiet progress indicator that doubles as the moon-creature's "where we are." - The celestial procession (plate 7) is rendered as **Saul Bass cut-paper silhouettes** — flat shapes only, no rendering, no faces: robes as trapezoids, lanterns as small `#E8C97A` circles on `#3A2E22` poles, all overlapping in a flat frieze. No mysticism. Just shapes descending. - Decorative dingbats throughout: a tiny crescent `☾`, a four-point atomic star `✦`, a single bamboo-node tick `╫` — used as section dividers and bullet marks, set in `#9A968C`, never more than 14px. **Micro-interactions (4% in the patterns frequency analysis — deliberately chosen over the cohort's parallax/cursor-follow/spring/magnetic quartet which sits at 80–96%):** every interaction on this page is small, physical, and mid-century-tactile: - The brushed-aluminum **dial** clicks with a 6° detent feel as you turn it; the needle is a tiny crescent; releasing it eases to the nearest plate with a short, slightly-overdamped settle (no bouncy spring — these objects are *heavy*). - Hovering a plate title flips its cut-paper inset shadow from "raised 2px" to "pressed in 1px" — like a real screenprinted panel catching the light. - On the **Chart of Things I Will Forget** (plate 6), hovering a row very slowly (1.8s) bleeds its ink from `#3A2E22` to `#3A2E22` at 22% alpha — it *fades while you watch it*, and there is no hover-out recovery: once a row has faded, it stays faded for the session. A tiny DM Mono counter in the corner reads `forgotten: N / 12`. This is the page's one moment of real weight, delivered as a micro-interaction, not a modal. - The orbit-dot in the margin **advances with a single tick** (a 120ms step, no easing — a mechanical clack) each time a new plate locks into focus. - Buttons and the colophon links get a 1px **underline that draws in left-to-right over 280ms** on hover (`underline-draw`, 16% in cohort) — restrained, used only on actual links. **No photography. No 3D renders. No raster illustration.** Everything pictorial is **flat SVG cut-paper** in the nine palette inks, with the halftone-dot texture as the only "shading." The kiosk, the house, the bamboo, the procession, the lunar plain — all built from filled SVG shapes with hairline outlines, deliberately a little misregistered (1px color-ghost behind key shapes) so the whole page reads as a beautifully-printed 1958 booklet someone left in a kiosk on the Moon. ## Prompts for Implementation - **Build it as one long vertical scroll narrative — a "Powers of Ten" zoom from a bamboo grove on Earth out to the lunar surface.** Nine plates, each ~120vh, each a self-contained mid-century object floating on a thin shadow inside wide *ma* margins. The story is told by *scrolling* — there is no "explore" UI, no tabs, no accordion. Just descent. - **Negative space is structural, not decorative.** Keep the content column at ~62% width, alternate the empty *ma* margin left/right plate-to-plate, and on plate 8 ("The Crossing") let the emptiness take over almost the entire viewport — a tiny kiosk far below, a tiny rising figure, vast quiet sky. The silence is the design. - **Lock everything to an 8pt baseline grid.** Mid-century industrial design is precise; the warmth comes from materials and color, not from sloppy spacing. Hairlines are 1px. Shadows are thin, soft, and low (`0 8px 24px -12px rgba(58,46,34,0.22)`) — objects *float just barely*, like Eames furniture on tapered legs. - **All imagery is flat SVG cut-paper in the nine palette inks.** Render the kiosk, the bamboo stalk, the mid-century house cutaway, the phases strip, the Saul Bass procession, and the lunar plain as filled SVG shapes with hairline outlines and a deliberate 1px color-ghost offset behind key shapes (the registration-misprint look). The *only* shading is a halftone-dot pattern. No gradients except the halftone density ramp. No box-shadow glows — the Moon's "glow" is out-of-focus ochre halftone dots, blurred and `multiply`-blended. - **The single navigation element is a brushed-aluminum dial, fixed bottom-right.** Drag or scroll-near-it to turn; it has a detent feel (6° steps), a tiny crescent needle, and an overdamped settle to the nearest plate. No nav bar. No hamburger. The dial *is* the menu. - **Animation = micro-interactions only.** Plate-enter "focus-pull" (coarse 12px halftone dots resolving to fine 2px over ~600ms, like a slide projector focusing); the orbit-dot in the margin advancing one mechanical tick per plate; plate-title cut-paper insets flipping raised↔pressed on hover; link underlines drawing in over 280ms. NO parallax layers, NO cursor-trailing particles, NO bouncy spring physics, NO magnetic buttons — those are the cohort's reflexes; this kiosk is made of heavy, well-damped objects. - **The emotional payload is the "Chart of Things I Will Forget" (plate 6).** Build it as a mid-century data card with ~12 plain-language rows in DM Mono / Fredoka. Hovering a row slowly (1.8s) bleeds its ink to 22% alpha and *it does not come back* — store faded rows in sessionStorage; a small counter reads `forgotten: N / 12`. This is the only place the page asks anything of the visitor's heart, and it does it with one CSS transition, not a popup. - **Voice: a kind shop teacher who knows you're a little sad.** All copy is approachable-casual, short sentences, plain words, the occasional dry joke about gravity. The moon-creature is matter-of-fact about the impossible. End on: *"made it. it's quiet here. the kiosk's still warm if you want to scroll back."* - **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, "Get Started" buttons, testimonial carousels, feature-card triplets, hero-with-two-buttons. There is nothing to buy and nothing to sign up for. This is a place, not a funnel. ## Uniqueness Notes - **A "Powers of Ten" Eames-zoom as the narrative spine.** Nine plates that are literal zoom-steps (10⁰m → 10⁹·⁵m) from a Tokyo bamboo grove to the lunar regolith — the scroll *is* the journey home. No other site in the cohort uses a scale-zoom as its structure; the dominant patterns are card-grids (88%) and full-bleed heroes (93%). - **Mid-century industrial design done as actual 1958 craft, not "retro" pastiche.** Eames shell, Braun dial, Saul Bass cut-paper, 8pt grid, halftone-dot printing — and a brushed-aluminum *physical dial* as the only navigation. Mid-century aesthetic is 10% in the cohort and almost always shows up as flat-color "memphis-adjacent" decoration; this commits to the materials and the restraint. - **Earth-tones palette (2% in the cohort) as the real mid-century chord** — walnut, terracotta, oat, sage, slate-teal, aluminum — with zero neon, zero glassmorphism, zero pure black/white, and the Moon rendered as *printed ochre halftone bloom* rather than a CSS glow. The single full-saturation cool accent (a 40px blue Earth-marble on the last plate) is the entire chromatic surprise, and it is the thing being left behind. - **The emotional mechanic is a non-recoverable micro-interaction.** The "Chart of Things I Will Forget" fades rows permanently on hover (sessionStorage-backed, with a `forgotten: N/12` counter) — grief delivered as one CSS transition. Micro-interactions are 4% in the cohort precisely because most sites default to parallax/cursor-follow/spring/magnetic (80–96%); this page refuses all four. - **Star-celestial motif (2%) reframed as an atomic-age science poster** — phases-of-the-moon strip, orbit-diagram progress mark, registration-misprint ghosting — instead of the usual mystical sparkle. Bokeh-background (5%) reframed as out-of-focus halftone *ink*, not bokeh *light*. - **Chosen seed/style:** aesthetic: mid-century, layout: ma-negative-space, typography: playful-rounded, palette: earth-tones, patterns: micro-interactions, imagery: bokeh-background, motifs: star-celestial, tone: approachable-casual. - **Avoided patterns from frequency analysis:** glassmorphism (70%), hand-drawn aesthetic (96%), photography imagery (98%), card-grid (88%), full-bleed (93%), centered (86%), warm-gradient palette (97–98%), parallax (96%), cursor-follow (88%), spring (86%), magnetic (81%), stagger (80%), mono-only typography (94%) — and pastoral-romantic / mysterious-moody tones in favor of the unclaimed approachable-casual (4%).