# Design Language for kaguya.bar ## Aesthetics and Tone kaguya.bar (named for Princess Kaguya, the bamboo-cutter's moon-child) is a **frutiger-aero bonbon bar** -- a glossy translucent cocktail lounge whose interior was designed in 2003 by a stylist who only watched anime and read Apple keynote slides. The mood is **energetic**: bubble-tap signage, magnetic candy chips that snap onto everything, and a chrome bamboo stalk holding up a neon menu. Inspirations: early-2000s Windows Aero glass, Frutiger-Aero stock photography (green hills + cobalt sky + soft bokeh blobs), Murakami-era pop animation backgrounds, the magnetic snap of fridge poetry tiles, the punch-bright candy palettes of Tokyo dagashi shops, and the silver-on-pastel UI of Sony VAIO laptops circa 2004. The site hums with optimism: rounded everything, glossy gradients, hover lifts, candy snaps. The art-deco hybrid display type pulls the energetic mood up into eclectic territory -- not pure 2003, but 2003 remembered through art-deco glasses. ## Layout Motifs and Structure A **hero-dominant** composition where the first 130vh occupies most of the visual weight, then the rest cascades quickly to a few short interaction zones. - **Hero (130vh):** A full-bleed pastel sky (cobalt -> mint -> peach) gradient with soft bokeh blobs drifting at low opacity. Centered, an oversized eclectic-hybrid wordmark "KAGUYA.BAR" -- the K and Y in art-deco geometric strokes, the rest in playful rounded sans, a deliberate mix of styles in a single word. Beneath, a row of five candy-chip buttons ("highballs," "spritzes," "tonics," "cordials," "soda") with magnetic snap behavior. - **Magnetic menu (90vh):** A frosted glass card centered horizontally. Drink names in eclectic-hybrid headline type; candy-chip ingredient tags drift across the card and snap to magnetic anchor points (gentle 280ms ease). - **Bonbon constellation (80vh):** A field of small candy-bright spheres (16-48px) scattered across the viewport. Each sphere is a drink "mood" tag (giggle, swoon, calm, glitter). On cursor proximity, spheres are attracted by a magnetic-pull force. - **Bartender's note (60vh):** A glass-card letter in pastel mint, with a soft inner shadow and a faint reflection at the bottom edge. - **Hours and address (50vh):** A floating glass tile with the bar's hours, lit by a single candy-pink neon underline. - **Sign-off (30vh):** A single line in art-deco geometric type: "open until the moon goes home." The hero dominates because it carries the entire brand promise; the rest of the page is short, lightweight, and quick to scan. ## Typography and Palette **Fonts (Google Fonts only):** - **Display (eclectic-hybrid):** Mix of "Bungee" weight 400 (geometric block letters with art-deco flair) and "Quicksand" weight 700 (rounded playful sans). The wordmark uses Bungee for "K" and "Y", Quicksand for the middle letters -- a deliberate eclectic hybrid in a single word. - **Sub-display:** "Bungee" at clamp(28px, 4vw, 52px), tracking 4%, for section titles. - **Body:** "Quicksand" weight 500 at 17px / 1.7 -- soft rounded letterforms keep the body friendly. - **Numerals (prices, hours):** "Bungee" tabular at 22px. - **Captions / small labels:** "Quicksand" weight 700 small caps at 11px tracking 12%. **Palette (candy-bright -- punch-saturated but cleanly resolved):** - `#dff2f5` -- sky pastel (primary background gradient stop top) - `#cef5d8` -- mint candy (gradient stop) - `#ffe2d4` -- peach candy (gradient stop) - `#f78ad0` -- bubblegum pink (primary accent, candy chips) - `#a872f8` -- grape pop (secondary accent) - `#3ec8b8` -- jade soda (tertiary accent, neon underline) - `#1a1830` -- aubergine ink (text) All accents are candy-bright but sit on a soft pastel sky, giving the palette its frutiger-aero clarity without overload. ## Imagery and Motifs - **Abstract shapes (bokeh + candy spheres):** Soft bokeh circles (60-220px) in candy colors drift slowly across the hero at low opacity. Candy-bright spheres (16-48px) populate the bonbon constellation section with magnetic interaction. - **Geometric shapes (art-deco accents):** Triangular sunburst chips, half-circle fans, and chevroned cocktail glasses appear as decorative accents -- always with rounded inner corners (4-8px) to keep the energetic-soft contradiction alive. - **Magnetic interactions:** Every interactive element (chips, spheres, tile corners) has a magnetic-pull behavior on cursor proximity: within 80px, the element translates 4-12px toward the cursor with 220ms ease-out. - **Frosted glass surfaces:** Cards use `backdrop-filter: blur(20px) saturate(160%);` with 1px translucent inner border and a 6px inner top highlight. The frutiger-aero glass. - **Soft drop reflections:** Below each glass card, a 24px-tall faded reflection (CSS gradient mask) suggests glass on a wet table. - **Pop-spark hover effect:** Hovering on any candy-chip releases a 4-sparkle burst (8px diamonds in jade soda) that animates outward over 320ms. ## Prompts for Implementation The site is a bonbon bar with magnetic candy on every surface. Build for energetic snap and glossy candy clarity. - The hero gradient is a single CSS `background: linear-gradient(180deg, #dff2f5 0%, #cef5d8 50%, #ffe2d4 100%);` with stacked radial bokeh `
` blobs at random positions. - Magnetic pull: each `.magnet` element has its position recalculated on `mousemove` (rAF-throttled). When cursor is within 80px, compute a 4-12px translation toward the cursor (proportional to proximity), apply `transform: translate(x, y)` with `transition: transform 220ms cubic-bezier(.2,.8,.2,1);`. When cursor leaves the zone, transform returns to 0. - Eclectic-hybrid wordmark: wrap each letter in `` and apply `font-family` per-letter. K and Y use Bungee; A, G, U, A use Quicksand. Mind kerning manually with `letter-spacing` overrides. - Pop-spark effect: on hover, spawn 4 absolutely-positioned `` elements at the chip's center, each animated via `@keyframes spark { from { transform: translate(0,0) scale(0); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; } }` with 320ms duration. The `--dx`, `--dy` are random within ±60px. - Glass cards use `backdrop-filter: blur(20px) saturate(160%); background: rgba(255, 255, 255, 0.45); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 28px; box-shadow: 0 16px 48px rgba(168, 114, 248, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.8);`. - AVOID grids of feature cards, pricing tiers, signup banners, stat counters. The only conversion is a single mailto link in the footer: "send a love note to the bar." - Storytelling beats: hero introduces the bar with its energetic name; candy-chip categories invite category selection; the menu surfaces drink options via magnetic snap; the mood constellation lets the user "feel" their cocktail; the bartender's note closes warmly. - Energetic voice: "every drink is a little jump." "the bar is a daydream we serve with ice." "do not be polite; come thirsty." ## Uniqueness Notes **Differentiators from other designs:** 1. **Frutiger-aero updated with magnetic candy interactions:** Frutiger-aero is normally photographic and static; the magnetic-pull behavior makes the candy elements physically alive, an energetic reframe of the aesthetic. 2. **Eclectic-hybrid wordmark in a single word:** Bungee + Quicksand mixed letter-by-letter in the same word is unusual; most "eclectic" type pairs them across different sections. 3. **Magnetic menu + bonbon constellation pairing:** Two different magnetic-interaction patterns (snap-to-anchor for menu chips, cursor-attraction for spheres) coexist on one page, expanding the magnetic motif into a vocabulary rather than a single trick. 4. **Hero-dominant 130vh that carries most of the brand:** Most sites distribute brand expression across many sections; here the hero alone delivers wordmark, mood, gradient, candy chips, and bokeh atmosphere. 5. **Candy-bright on soft pastel sky:** The frutiger-aero hallmark (saturated colors on soft sky) is upheld but the specific palette (bubblegum + grape + jade + peach + aubergine ink) is uniquely tuned for a Tokyo-dagashi-bar feel rather than the more common cobalt-sky-and-meadow-green frutiger combination. **Chosen seed:** frutiger-aero hero-dominant eclectic-hybrid candy-bright magnetic abstract-shapes geometric-shapes energetic -- planned seed from assignment. **Frequency-aware choices:** `frutiger-aero` (2%), `magnetic` pattern, `candy-bright` palette, and `eclectic-hybrid` typography are all uncommon. Avoids overused `playful` (despite the energetic tone, the discipline of magnetic interactions and eclectic-hybrid type sets it apart from generic playful sites) and `photography` patterns.