# Design Language for kaguya.date ## Aesthetics and Tone The governing image: **a kintsugi bowl recovered from a moon-mission capsule** — a hand-thrown ceramic vessel, cracked, re-joined with bright gold lacquer, sitting on a launch-pad gantry under a tactical instrument readout. Two worlds collide and refuse to cancel each other out: the *wabi-sabi* of a 1,000-year-old folktale (Princess Kaguya, found inside a glowing bamboo stalk, returning to the Moon at dawn) and the *sci-fi-HUD* of a mission-control overlay tracking her ascent. Ash glaze meets reticle. Wood-fire kiln soot meets cyan telemetry. Nothing here is symmetrical, nothing is perfectly aligned — and yet a crisp, energetic instrument layer skates over the top, narrating the journey like ground control reading off altitude. - **Mood:** *energetic but reverent* — the propulsion of a countdown crossed with the patience of someone watching tea steep. Brisk, kinetic scroll motion; warm, slow, imperfect surfaces underneath. This is not a dating-app clone and not a sterile spaceport. It is closer to: a tea ceremony interrupted by a launch window, and both rituals proceeding at once. - **Inspiration touchstones:** Isamu Noguchi's Akari light sculptures (paper, asymmetry, glow); the patina on Voyager's golden record; Tarkovsky's *Solaris* control panels rendered in raku clay; the cut bamboo node as a structural seam; old NASA mission patches embroidered on raw linen; the moment in *Kaguya-hime* when the celestial procession descends on a bridge of light. - **Texture promise:** every "panel" should feel like it has *grain* — kiln-fire speckle, paper fiber, hairline crackle — overlaid with a *thin, sharp* HUD chrome of brackets, tick marks, and a single tracking reticle. Imperfection below, precision above. Gold lacquer is the only thing allowed to be loud. ## Layout Motifs and Structure A **hero-dominant** composition: the first viewport is ~110vh and does almost all the emotional work — an enormous off-center kintsugi-moon vessel, a colossal Garamond title set hard against the left margin, and a live-looking HUD frame wrapping the whole screen. Everything after the hero is a quieter coda, deliberately under-built so the hero stays the protagonist. - **The gantry spine:** a single vertical structural line is offset to roughly 38% from the left — never centered — like a launch-tower beam. Bamboo "nodes" (thin horizontal rule + a small bracketed label) interrupt it at irregular intervals, marking the four movements of the descent/ascent: `[ 01 · FOUND ]`, `[ 02 · RAISED ]`, `[ 03 · SUMMONED ]`, `[ 04 · RETURNED ]`. Content blooms off this spine asymmetrically — text left of it on one node, a clay-card right of it on the next. - **HUD over-frame:** a fixed, thin (1px) cyan instrument border insets ~22px from the viewport edges, with corner brackets, a top-left timestamp glyph string, a right-edge vertical altitude scale, and one slow-drifting circular reticle that loosely tracks the cursor (it lags, it never snaps — wabi-sabi precision). This frame stays on top of everything; the warm ceramic content scrolls *beneath* it like footage in a viewfinder. - **Parallax depth, 3 planes:** (1) far — a vast soot-and-paper gradient sky with a faint speckle of stars/kiln-sparks drifting slowly upward; (2) mid — the giant moon-vessel and bamboo silhouettes, moving at ~0.5×; (3) near — the Garamond display type and HUD ticks, moving at ~1.1× so headlines slide *past* the moon. On scroll, the moon-vessel's gold seams catch a moving glint. - **Asymmetry as law:** no element is horizontally centered. Margins are uneven by design (left margin tight, right margin generous). The hero title bleeds slightly off the left edge. One bamboo node is intentionally placed closer to the previous one than the rest — the "irregular kiln spacing." - **No conventional chrome:** no top nav bar, no hamburger, no footer link-farm, no pricing block, no stat grid. The HUD *is* the chrome. The only "navigation" is a tiny bracketed `[ ↑ RE-ENTRY ]` anchor at the very bottom that returns to the hero. ## Typography and Palette **Typography** (all Google Fonts): - **Display / hero title:** **"EB Garamond"** — a faithful, high-contrast classical Garamond. Set ENORMOUS (clamp up to ~12vw), tight tracking, in the ash-charcoal ink color, with one word (her name, *KAGUYA*) flowing in italic. This is the *garamond-classic* anchor — old-book gravity against the cold instrument layer. - **Sub-headlines / movement titles:** **"Cormorant Garamond"** (Medium & its italic) — slightly more decorative cousin of the body face, for the `FOUND / RAISED / SUMMONED / RETURNED` movement titles, large, leaned-in. - **Body / prose:** **"EB Garamond"** Regular & Italic, ~1.22rem, line-height ~1.75, comfortably long measure (~62ch) — the folktale is *read*, like a page. - **HUD labels / telemetry / brackets:** **"Share Tech Mono"** — a clean instrument monospace. Always small, UPPERCASE, wide letter-spacing (~0.18em): timestamps, altitude readouts, `[ 01 · FOUND ]` tags, the bottom anchor. This is the *sci-fi-HUD* voice — and it never appears at large sizes, so Garamond always wins the page. **Palette** — *analogous*, anchored in the warm yellow→amber→russet arc of fired clay and lantern light, with one cold cyan accent reserved exclusively for the HUD and one loud metallic gold reserved exclusively for the kintsugi seams: - `#1C140E` — **kiln soot** (near-black warm brown): primary text ink, deepest sky. - `#3A2A19` — **bamboo char**: secondary text, spine line, dark ceramic shadow. - `#A66A2E` — **fired amber** (mid analogous step): bamboo nodes, body accents, underlines. - `#D99A4E` — **lantern glow**: warm highlights, glaze rim-light, hover states. - `#F2E3C6` — **rice paper**: primary background / panel fill (warm off-white, never pure white). - `#E8C98C` — **raw clay**: card surfaces, secondary background bands. - `#C7A14B` → metallic gradient with `#F4D77A` — **kintsugi gold**: the only "shiny" color; ONLY the cracked-seam lines and the hero title's italic word. - `#2FB6C4` — **telemetry cyan**: ONLY the HUD frame, reticle, tick marks, timestamps. Never on content, never large. Cold counterpoint that makes the warm analogous body feel even warmer. (Eight colors total; the analogous spine is `#1C140E → #3A2A19 → #A66A2E → #D99A4E → #F2E3C6 → #E8C98C`, with gold and cyan as the two disciplined accents.) ## Imagery and Motifs - **The kintsugi moon-vessel** — the single hero element and the soul of the page. A *mixed-media* construction: a hand-thrown-bowl / full-moon hybrid rendered as a soft photographic-style ceramic surface (matte ash glaze, thrown-ring texture, faint crackle) **collaged** with crisp SVG line-work — a HUD reticle ringing it, a bracketed dimension label (`⌀ 3,474 km`), a tracking dot. Across its face run bright gold kintsugi seams (animated SVG path-draw on load, then a slow specular glint on scroll). It is *never* a cute cartoon moon and *never* a photo of the real Moon — it's a fired pot that happens to be lunar. - **Cut bamboo as structure** — the legend's origin object. Used as the literal node-markers on the gantry spine: a short segment of bamboo (line-drawn, with one realistic photographic node texture inset — mixed-media again) whose internode joints become the section dividers. One of them glows faintly amber from within — *Kaguya found inside*. - **Pressed-paper ghosts & kiln speckle** — extremely faint (4–9% opacity) drifting field of: paper-fiber flecks, kiln sparks rising, and torn-paper edges bleeding off panel borders. Slow upward parallax — embers from a wood-fire kiln, or stars seen from a launch pad. - **HUD instrument vocabulary** — corner brackets `⌐ ⌐`, a circular reticle with crosshair, an altitude ladder up the right edge (`+ALT 384,400 km` at the top, descending values), a monospace timestamp glyph string top-left, small `[ + ]` registration crosses scattered like a sensor overlay. All thin, all cyan, all *quiet* — a viewfinder, not a video game. - **Gold lacquer as the only "neon"** — wherever a normal design would put a glow or a gradient-button, this one puts a *crack repaired in gold*: link underlines are short gold seams, the active node's bracket is gold-filled, the hero word shimmers like wet lacquer. Repair, not shine. - **Texture-on-everything rule** — backgrounds get a subtle paper/clay grain (CSS noise or a tiled SVG fractal-noise filter at low opacity); the moon gets crackle; the HUD layer stays pixel-crisp on top. The contrast *is* the design. ## Prompts for Implementation - **Build the hero first and make it carry the page.** The opening section is ~110vh: full-bleed warm-soot sky → giant collaged kintsugi-moon vessel offset to the right-of-center → colossal EB Garamond title hard against the left margin reading something like *"She came down in a stalk of light —"* with *KAGUYA* in gold italic → the cyan HUD over-frame already drawn around the viewport. Everything below the hero is intentionally lower-energy: four short "movement" panels and a quiet bottom anchor. Do not pad the page with feature blocks. - **Open with a launch-sequence-but-make-it-tea-ceremony reveal.** On load: (1) the HUD frame draws itself — corner brackets snap in, the right-edge altitude ladder ticks up from 0 to 384,400 km with a fast `counter-animate`, the reticle fades in; (2) the kintsugi gold seams `path-draw` across the moon like lacquer being applied; (3) the Garamond title rises with a brisk staggered word reveal, the gold word arriving last with a soft specular sweep. Energetic pacing — ~1.6s total — then everything settles and goes still and warm. - **Parallax is the spine of the storytelling.** Three depth planes (far soot sky + drifting embers ~0.2×, mid moon/bamboo ~0.5×, near Garamond type + HUD ~1.1×). As the visitor scrolls the four movements (`FOUND → RAISED → SUMMONED → RETURNED`), the moon-vessel slowly *rises and brightens* (it's returning home); in the final movement it lifts toward the top of the viewport on a faint vertical "bridge of light" and the HUD altitude ladder counts back down to 0 as if she has arrived. Scroll = the legend playing out. - **The HUD must feel alive but never twitchy.** The reticle follows the cursor with heavy lag and easing (lerp ~0.06) — it drifts, overshoots gently, never snaps. The timestamp glyph string top-left flickers through characters slowly. Tick marks on the altitude ladder shimmer one at a time. This is the *wabi-sabi precision* — an instrument that is exact but unhurried. - **Texture and grain on every surface.** Layer a low-opacity SVG `feTurbulence` noise over backgrounds; give panel/card surfaces a "raw clay" warm tint and a 1px irregular edge; the moon gets a crackle overlay and a `mix-blend-mode: soft-light` gold-glint sweep that tracks scroll position. Keep the cyan HUD layer perfectly crisp on top of all of it. - **Type behavior:** the hero Garamond title is huge and bleeds slightly off the left edge — let it. Movement titles in Cormorant Garamond lean in (italic) and underline themselves with a short gold `underline-draw` (a kintsugi seam, not a line) on scroll-into-view. Body prose reveals in calm `fade-reveal` blocks. The only monospace is the HUD telemetry, always small and uppercase. - **Motion library:** brisk spring/stagger on the hero, slow lerp on the reticle, scroll-triggered parallax + path-draw + counter-animate for the journey. Avoid: card-flip grids, hover-lift tiles, tilt-3d everything, typewriter walls of text. - **AVOID entirely:** CTA-heavy layouts, "Sign up free" hero buttons, pricing tiers, three-up stat grids ("10k users / 99.9% uptime"), testimonial carousels, generic centered hero with subtitle + button, full-width photo backgrounds. There is no signup. This is a *story rendered as an instrument panel*, not a product page. ## Uniqueness Notes Differentiators from other designs in the set: 1. **Kintsugi ceramic + mission-control HUD is the controlling metaphor** — warm imperfect *wabi-sabi* clay underneath, sharp cyan *sci-fi-HUD* chrome on top, joined only by loud gold lacquer. Most sci-fi-HUD designs in the set go dark-neon/cyberpunk/dashboard; most wabi-sabi designs go quiet/muji/zen. This is *neither* — it's an energetic launch-countdown wearing a thrown-pot's skin. Holographic-cottagecore's stern cousin, basically: ceramic-retrofuturism. 2. **Hero-dominant on purpose, in a sea of card-grid/centered/full-bleed layouts** — one ~110vh hero does ~70% of the work; everything after is deliberately under-built. The frequency data shows hero-dominant at only ~10% and most sites pile on sections — this one refuses to. 3. **Garamond-classic display type at billboard scale against a monospace HUD** — EB Garamond / Cormorant Garamond as the *loud* voice (the rarest typography bucket, ~2%), Share Tech Mono kept tiny and disciplined as the *quiet* instrument voice — inverting the usual "mono shouts, serif whispers" hierarchy seen across the set. 4. **Analogous warm-clay palette with exactly two rationed accents** — the entire body lives on a single yellow→amber→russet analogous arc (analogous is only ~5% in the set); cold cyan is *quarantined* to the HUD and metallic gold is *quarantined* to kintsugi seams. No rainbow, no neon spray. 5. **Parallax used as literal narrative, not decoration** — three depth planes stage the *Tale of Princess Kaguya* as a scroll: she's found, raised, summoned, and the moon-vessel physically rises home in the final panel while the HUD altitude ladder counts to zero. Parallax is the most overused pattern bucket (~96%) — this design earns it by making it the plot. Chosen seed/style: **aesthetic: wabi-sabi, layout: hero-dominant, typography: garamond-classic, palette: analogous, patterns: parallax, imagery: mixed-media, motifs: sci-fi-hud, tone: energetic**. Avoided patterns from frequency analysis: leaned away from the saturated buckets — hand-drawn (96%) / glassmorphism (70%) aesthetics, card-grid (88%) / centered (86%) / full-bleed (93%) layouts, mono-dominant (94%) typography, warm-but-gradient-default (97% gradient) palettes, and cursor-follow (88%) / spring (86%) / magnetic (81%) / stagger (80%) as the *whole* interaction story — they appear here only in supporting, restrained roles under a hero-first, Garamond-led, analogous-clay-plus-HUD direction.