# Design Language for kaguya.bar ## Aesthetics and Tone **kaguya.bar** is a *salvaged lunar-tide observation bar* — picture a 1990s aquarium-screensaver fever-dream that has been dredged up from the seafloor, rinsed in silver-gelatin developer, and re-opened as a tiny twelve-stool drinking room where the only thing on tap is moonlight. The name borrows Kaguya-hime, the bamboo-cutter's foundling who turns out to be a princess of the Moon and must, weeping, return to it; this site is the bar she left her glowing kimono draped over on the way out. The aesthetic is **seapunk** — chrome dolphins, holographic kelp, low-poly bivalves, CRT-cyan caustics, gradient lagoons, the whole Tumblr-1992-undersea-rave vocabulary — but it has been *desaturated and aged*: instead of acid teal and hot magenta, everything is pulled toward **cool grays, pewter, fog-silver, and a single bruised seafoam accent**, as if the seapunk holograms were photographed on a 1970s Tri-X negative and the print was left in a damp Meiji-era curio cabinet for fifty years. The mood is **whimsical-creative** — playful, a little absurd, fond of its own silliness (the bar's "moon" is a hand-cranked paper lantern; the "tide gauge" is a brandy glass) — but it carries the soft melancholy of last call and of someone you love going back to the sky. Reference touchstones: hand-tinted Yokohama-shashin photographs, the grain of Apollo-era Hasselblad plates, a defunct planetarium gift shop, a screensaver nobody remembers installing, the chrome Wordart of a 1996 dolphin GeoCities page rendered entirely in graphite. ## Layout Motifs and Structure The page is a **dashboard** — but explicitly a *warm, derelict, hand-built* dashboard: an "instrument console for watching the Moon from a bar," not a SaaS analytics screen. The viewport is a single non-scrolling (or barely-scrolling) **bridge of glowing gauges**, each one a salvaged porthole reporting on some aspect of tonight: the Moon's phase, the tide level, the house pour, the temperature of the lagoon outside, the rotating "ghost of the week," reservations, the song drifting from a conch-shaped speaker. - **The Console Rail (left, ~88px → 320px on expand).** A narrow vertical strip of toggles, a slowly rotating brass moon-phase dial, the kaguya.bar wordmark stacked vertically, and a tiny live clock running on *lunar* time (synodic day). It is the spine of the page; everything else is a panel docked to it. - **The Gauge Field (the body).** A modular but *deliberately imperfect* grid — panels are 1px-ruled rectangles that don't all line up, like gauges retrofitted by different hands over the years. Each panel has a thin chrome bezel, a faint inner shadow (the "glass"), a hand-lettered label plate, and one piece of content: a hand-tinted vintage photo, a low-poly SVG seashell rotating slowly, a caustic ripple field, a tide curve, a paragraph of bar-room copy. - **The Big Porthole (center, dominant).** One oversized circular gauge — the "Moonside Window" — holds the hero: a desaturated vintage photograph of the Moon (or of water, or of a face turned skyward) under a slow caustic-glass overlay, with the Kaguya-hime fragment of copy set in expressive variable type curving around the rim. - **The Tide Ribbon (bottom edge, full width, ~64px).** A perpetual generative... no — a perpetual *sine-wave caustic* strip that pulses with the page's heartbeat; the current "tide level" rides it as a small chrome buoy. - **No vertical scroll narrative, no stacked sections.** If anything is below the fold it is one short "after hours" coda panel. The experience is *standing at the bridge*, watching gauges breathe — not scrolling a story past your face. Empty space inside panels is generous; the grid is busy, the panels are calm. ## Typography and Palette **Fonts (Google Fonts only):** - **Display / wordmark / hero — *Bricolage Grotesque* (variable, opsz + wght axes).** This is the **expressive-variable** voice: a contemporary grotesque with a wide optical-size range and a slightly off-kilter, almost hand-cut quality. Set the kaguya.bar wordmark at the largest optical size and heaviest weight so the terminals swell; let the hero headline animate its `wght` axis subtly on load (a slow "breath" from ~480 to ~680). Used for: wordmark, the Big Porthole headline, panel numerals. - **Secondary display / label plates — *Big Shoulders Display* (variable).** Tall, narrow, condensed, a little industrial-signage — perfect for the engraved "label plates" riveted to each gauge ("MOON · PHASE", "TIDE", "HOUSE POUR", "TONIGHT'S GHOST"). Tracked wide, uppercase, in pewter. - **Body / UI / copy — *Spline Sans* (humanist-ish grotesque, soft, neutral).** Calm, legible, gets out of the way for the bar-room prose and gauge readouts. - **Accent / "console" monospace — *Spline Sans Mono*.** For the lunar clock, the synodic-day counter, tide numbers, and the tiny "system" labels on the Console Rail. CRT-styled with a 1px cyan-gray glow. **Palette — cool-grays with a single live accent (no warm gradients, no neon):** - `#0E1216` — **Fathom Slate** — deepest background, the unlit water behind the gauges. - `#1B2228` — **Console Iron** — panel fills, the body of the dashboard. - `#2C353C` — **Wet Pewter** — bezels, rules, the 1px grid lines. - `#5A6B73` — **Fog Silver** — secondary text, gauge tick marks, the desaturated mid-tones of the vintage photos. - `#AEBCC0` — **Moon-Print Gray** — primary text, the highlight tone of a silver-gelatin print. - `#E6ECEC` — **Lantern Paper** — the brightest near-white, used sparingly: the wordmark glow, the "moon" disc, key headlines. - `#7FD7C4` — **Bruised Seafoam** — *the one accent*: the live element. The Tide Ribbon, the pulse rings, active toggles, the buoy, the hover state. Seapunk's teal, but muted and almost overcast, like seafoam under a gray sky. - `#C6A77E` — **Tarnished Brass** — minor secondary accent only: the rotating moon-phase dial, rivet heads, the hand-cranked-lantern hardware. Aged metal, never gold. Photographs are rendered in cool grayscale (`grayscale(1)` + a slight cool tint via `sepia` inverted toward blue, or a `Fog Silver → Moon-Print Gray` duotone), then dusted with a fine **grain overlay** so every image reads as a printed plate, not a screen image. ## Imagery and Motifs - **Vintage photography, cool-toned and hand-tinted, as the primary imagery.** The Big Porthole and several gauge panels hold *real-looking aged photographs*: the Moon through a wet window, a 1900s Yokohama harbor at dusk, a woman in a kimono with her back turned, lantern-light on dark water, an empty bar at 3am, an Apollo-era plate of the lunar surface. All desaturated to silver-gelatin grays, grain-dusted, vignetted, and given a subtle **hand-tint** (a breath of Bruised Seafoam in the highlights of one photo, Tarnished Brass in another) the way Meiji-era photographers brushed watercolor onto albumen prints. This is the soul of the page — the seapunk holograms are *photographs of holograms*. - **Seapunk vocabulary, in graphite.** Low-poly SVG seashells, a faceted chrome dolphin curled like a comma in one small gauge, holographic kelp fronds, a wireframe bivalve that opens and closes — all rendered in Wet Pewter / Fog Silver gradients with a thin Lantern Paper rim-light, never in color. Chrome, but tarnished chrome. - **The Moon, obsessively.** A hand-cranked paper-lantern "moon" in the Console Rail; a brass moon-phase dial that actually tracks tonight's real phase; a crescent etched into the wordmark's negative space; moon-pull tide curves; a "Kaguya is on the line" indicator that lights Bruised Seafoam when... nothing, it's a bar, it's a joke. - **Caustics & sine waves.** Thin animated contour bands — interfering sine waves drawn as translucent Bruised-Seafoam lines over Fathom Slate — drift behind the Big Porthole and ride the bottom Tide Ribbon. Slow, hypnotic, screensaver-paced. - **Pulse-attention as the page's heartbeat.** This is the chosen *pattern*: a soft, periodic **pulse ring** that emanates from one gauge at a time — the "live" one, whichever the cursor isn't on — a single expanding Bruised-Seafoam ring that fades, like sonar, like a buoy bell, like the bar's pulse checking it's still alive. Active toggles pulse; the Tide buoy pulses on the beat; the "last call" panel pulses faster as the page's lunar clock nears its synodic midnight. - **Hand-lettered plates & rivets.** Every panel label is on an engraved-looking metal plate held by four tiny rivet circles. Faint scratches and water-stain SVG textures on the panel "glass." - **Decorative micro-motifs:** tide tick-marks, a tiny rope coil in a corner, a conch-shell speaker icon, a bamboo-stalk divider (one nod to the bamboo cutter), a constellation of pin-prick stars in the Fathom Slate gaps. ## Prompts for Implementation Build kaguya.bar as **a single-route, near-fullscreen "lunar-tide bar bridge"** — one HTML file, one CSS file, one JS module. The user arrives *standing at the console*; nothing scrolls into view, things *breathe* into view. Treat it as a 60-second amble around a derelict bar that watches the Moon. **No CTA, no pricing block, no stat-grid, no testimonial row, no contact form, no email capture, no feature cards.** There is only the gauge field, the porthole, the tide, and the bar-room prose. **Structure (one screen, layered, dashboard):** 1. **Cold open (≈1.5s).** Black (`Fathom Slate`). A single Bruised-Seafoam **pulse ring** expands from dead center — *the bar's heartbeat starting*. On the second pulse the Console Rail slides in from the left; on the third, the gauge panels **stagger** into place (each fading + a 6px settle, 70ms apart), bezels catching a quick rim-light sweep. The Big Porthole's photograph develops last, like a print in a tray — start at `opacity:0; filter: blur(8px) brightness(0.4)`, resolve to the cool-gray grain. 2. **The Console Rail (persistent, left).** Vertical kaguya.bar wordmark (Bricolage Grotesque, max optical size, Lantern Paper with a faint glow). Below it: the **brass moon-phase dial** (SVG, slowly rotating to tonight's real phase computed in JS from the date), a hand-cranked paper-lantern "moon" the user can click to make it swing and brighten, a tiny **lunar clock** in Spline Sans Mono running on synodic time, and 3–4 toggles (each pulses Bruised-Seafoam when active): "Caustics", "Tide Sound (off, it's a joke)", "Tint Plates", "After Hours". 3. **The Gauge Field (center & right).** A CSS Grid of 1px-ruled, slightly-misaligned panels. Suggested gauges: - **MOON · PHASE** — the brass dial repeated large, with a one-line readout ("Waning gibbous. She's three days from leaving."). - **TIDE** — a slow sine curve (SVG path, animated `stroke-dashoffset`), a chrome buoy riding it, a number in mono. - **HOUSE POUR** — a hand-tinted photo of a single glass, one paragraph of whimsical prose about what's being served (something silvery, served in a thimble, "garnished with a sliver of the moon we keep in the back"). - **TONIGHT'S GHOST** — a rotating low-poly SVG creature (dolphin → bivalve → kelp), 1px wireframe, with a deadpan caption. - **THE STORY** — three short lines of the Kaguya-hime tale, the bamboo, the light inside the stalk, the return to the sky — set in expressive variable type with the `wght` axis drifting line to line. - **RESERVATIONS** — a panel that just says "Walk in. We kept a stool." with a pulsing seafoam dot. 4. **The Big Porthole (center, dominant ~46vh circle).** Oversized circular gauge: the hero photograph (Moon through wet glass) under a live **caustic** overlay (a `` or layered animated SVG of interfering sine waves in translucent Bruised-Seafoam). Curving around the rim, the hero line in Bricolage Grotesque, animating its weight axis on a slow loop: *"a bar at the bottom of the night, where the moon comes down for one drink before she goes home."* A thin chrome bezel with four rivets; a faint reflection sweep. 5. **The Tide Ribbon (bottom edge, full width).** A perpetual sine-caustic strip in Bruised-Seafoam over Fathom Slate; the "current tide" buoy rides it; it **pulses on the page heartbeat** (the same beat that drives every pulse-ring). As the lunar clock approaches synodic midnight, the beat quietly speeds up and the ribbon glows a touch brighter — *last call*. 6. **After Hours (the only thing below the fold, if at all).** One short coda panel: the lights in every gauge dim to Fog Silver, the photographs fade to near-black, one last pulse ring expands and *doesn't fade* — it just hangs there, a seafoam circle on black. Caption in mono: "she's gone back up. we'll wipe the glass. come again on the next full moon." **Motion & feel:** - **Pulse-attention is the signature** — one pulse-ring at a time, ~3.2s period, easing `cubic-bezier(.22,1,.36,1)`, from a gauge the cursor is *not* hovering; active toggles and the tide buoy pulse on the same clock; `prefers-reduced-motion` → keep one slow static glow instead of expanding rings. - **Stagger** for the gauge-field entrance; **blur-to-focus** for every photograph ("developing"); slow continuous rotation for SVG seashells and the brass dial; the caustic canvas runs at a lazy ~20fps screensaver pace. - **Cursor:** a faint Bruised-Seafoam ripple on click anywhere (a "drop in the water"); panels lift 3–4px and brighten their bezel on hover (`hover-lift`), but *do not* pulse while hovered — they pause, deferring their pulse to a neighbor. - **Sound:** none. (The "Tide Sound" toggle exists only to print "(off, it's a joke)" — whimsical-creative.) - **Texture everywhere:** a fixed fine grain overlay (SVG `feTurbulence` or a tiled PNG-data-URI) at ~5% opacity; faint water-stain and scratch SVGs on panel "glass"; a pin-prick starfield in the Fathom Slate gaps between gauges. - All copy is bar-room intimate, a little funny, quietly sad — never marketing. ## Uniqueness Notes Differentiators, each a deliberate departure from the frequency analysis and from sibling sites: 1. **Desaturated, aged seapunk in cool-grays — "seapunk on Tri-X."** Seapunk sits at only 3% of designs, and what little exists leans on the canonical acid-teal/hot-magenta palette. kaguya.bar refuses the neon entirely: the whole undersea-rave vocabulary is rendered in pewter, fog-silver and graphite with a *single overcast seafoam accent*, as if photographed on 1970s black-and-white film and hand-tinted in a Meiji curio cabinet. cool-grays palette is also rare (3%) — the pairing of seapunk + cool-grays is, as far as the corpus shows, unclaimed. 2. **A bar that watches the Moon (Kaguya-hime as architecture, not decoration).** The dashboard is literally an "instrument console for watching the Moon from a drinking room" — a brass moon-phase dial that tracks tonight's real phase, a lunar (synodic) clock, a tide ribbon driven by moon-pull, a "she's three days from leaving" readout. The Bamboo-Cutter tale is load-bearing structure, not a quote pasted on top. 3. **Pulse-attention as the page's literal heartbeat — sonar, not splash.** pulse-attention is at 3% and is normally a one-off "look here" micro-interaction. Here it is the *clock of the whole page*: one expanding seafoam ring at a time, every gauge taking turns, the tide buoy and active toggles beating in time, the beat speeding up toward "last call." The site has a pulse you can watch. 4. **Vintage photography rendered as silver-gelatin plates, hand-tinted.** vintage-photography is at 3%; most photographic sites use full-color or warm-duotone stock. kaguya.bar treats every image as a *physical aged print* — cool grayscale, heavy grain, vignette, and a brushed breath of seafoam-or-brass in the highlights — so the "seapunk holograms" read as photographs *of* holograms, decades old. 5. **No scroll narrative, no marketing furniture.** Against the 96%-parallax / scroll-storytelling corpus, this is a single near-static "bridge" you stand at and watch breathe — and against the CTA/pricing/stat-grid defaults, there is none of it: just gauges, a porthole, a tide, and bar-room prose with a deadpan, quietly heartbroken voice. Chosen seed: **aesthetic: seapunk, layout: dashboard, typography: expressive-variable, palette: cool-grays, patterns: pulse-attention, imagery: vintage-photography, motifs: vintage, tone: whimsical-creative** Avoided overused patterns from frequency analysis: hand-drawn (96%) and glassmorphism (70%) aesthetics — replaced with desaturated seapunk; warm (98%) + gradient (97%) palettes — replaced with cool-grays and a single muted accent; photography (98%) as glossy stock — replaced with aged silver-gelatin plates; parallax (96%) / cursor-follow (88%) / spring (86%) / magnetic (81%) / stagger-as-only-trick — pulse-attention leads instead; pastoral-romantic (35%) / warm-inviting (27%) tone — replaced with whimsical-creative; mono-only and humanist-default typography — replaced with expressive variable Bricolage Grotesque. Also deliberately distinct from sibling sites already using seapunk + dashboard (e.g. ethereal-blue / generative-art / grid-lines / warm-inviting variants): this one is cool-gray, vintage-photographic, vintage-motif, whimsical, and pulse-driven.