# Design Language for koakuma.bar ## Aesthetics and Tone koakuma.bar is an **art-deco cocktail lounge submerged in the deep ocean** -- imagine the bar of a 1932 ocean liner sunk to 3,000 meters, lit by phosphorescent aurora bands rather than electric chandeliers. The aesthetic merges the geometric precision of classic Art Deco (Chrysler Building, the Normandie, Erté) with the deep-ocean palette of bathyspheric photography and the slow shimmer of the aurora borealis. The mood is *luxurious* in the way that something rare and inaccessible is luxurious -- not flashy, but quietly opulent. "Koakuma" (小悪魔 -- "little demon," but also Japanese slang for a flirtatious charmer) becomes a brand of nocturnal cocktails -- each section presents a cocktail named after a different aspect of the koakuma personality, served in stacked horizontal sections that descend like floors of a submerged ballroom. The user scrolls *down* through the depths. Inspirational anchors: the Queen Mary's first-class smoking room, James Cameron's deep-sea documentary cinematography, Aurora Borealis time-lapse photography over Lofoten, Tamara de Lempicka's "Self-Portrait in a Green Bugatti," and the underwater scenes of Bioshock's Rapture. ## Layout Motifs and Structure A **stacked-sections** composition where each section is a self-contained "floor" of the submerged lounge, separated by horizontal aurora-light dividers. Each floor is a full-viewport tableau -- the user descends through the depths by scrolling down, each section visually deeper, slightly cooler, slightly more pressurized. **Structural anatomy:** - **Floor 0 / Surface (100vw x 100vh):** A wide hero with deco geometric chevron frame, the wordmark "KOAKUMA" set in tall Futura caps with a ".bar" suffix below in finer letterspacing. Background: a bokeh-blurred ocean surface with sunbeams refracting downward. - **Floor 1 / The Foyer (100vw x 100vh):** Stacked horizontal bands of aurora light slowly pulsing -- pink, teal, indigo -- behind a single deco cartouche framing the introductory paragraph. A pair of stepped-fan ornaments flanks the cartouche. - **Floor 2-7 / The Cocktail Menu (each 100vh):** Six full-viewport sections, each presenting one "cocktail." Composition: a giant Futura numeral (I, II, III...) anchored to the left third, a deco-framed bokeh photograph of the cocktail in the right two-thirds, and a tasting note column in the center, set in elegant deco type. - **Floor 8 / The Hours (100vh):** A horizontal deco rule with the "Hours of Service" set in mirror-symmetric Futura, behind an aurora curtain that vertically descends. - **Floor 9 / The Depths (100vh):** Final section -- a dark abyssal field with a single pulsing aurora band at the horizon, and a tiny "fin." marker (period intentional) at center. Floor dividers: each section is separated by a 60px aurora-light band -- a slow gradient strip in teal/magenta that pulses with attention every 4.8s. Spatial rhythm: deliberate, processional. Each floor is a full breath. The pulse pattern punctuates between floors like the chime between elevator stops. ## Typography and Palette **Fonts (all Google Fonts):** - **Display (futura-geometric):** "Jost" -- a modern, geometrically-rigorous sans inspired by Futura. Used at clamp(72px, 14vw, 240px) for the wordmark and floor numerals, weight 400, letter-spacing 0.16em. Floor numerals are oversized at 320-480px. - **Deco cartouche labels:** "Jost" 700 at 18-22px, all caps, letter-spacing 0.32em. - **Tasting notes / body:** "Cormorant Garamond" 400/400i at 16-18px, line-height 1.62. The serif provides intimate balance against the geometric Futura headlines. - **Numerals (aged labels, vintages):** "Cormorant Garamond" 400i at 13-15px. - **Section breaks (rendered glyphs):** Geometric deco ornaments built from Jost letterforms (•|•) at 14px, all caps. **Palette (ocean-deep):** - `#04111F` -- Abyssal Black (deepest field, "floor 9") - `#0B2E4A` -- Midnight Ocean (primary body background) - `#1A5070` -- Tidal Indigo (mid-floor backgrounds) - `#D9B47C` -- Champagne Gilt (deco frames, primary highlight) - `#F3E4C2` -- Pearl Cream (tasting note text, light surfaces) - `#A8E6C2` -- Aurora Mint (aurora band primary) - `#E48BB8` -- Aurora Rose (aurora band secondary) - `#7E4FBE` -- Aurora Violet (aurora band tertiary) Gradient strategy: each floor uses a soft vertical gradient where the *bottom* of each floor blends slightly toward Aurora Mint/Rose, suggesting the next floor's light bleeding upward. The body has a subtle texture layer of caustic-light SVG turbulence at 7% opacity. ## Imagery and Motifs **Core visual motifs:** - **Aurora light bands:** Horizontal bands of soft gradient light (Aurora Mint -> Aurora Rose -> Aurora Violet) used as floor-dividers and behind cartouches. Each band slowly pulses opacity (0.55 -> 0.85 -> 0.55) on a 4.8s cycle. - **Deco chevron frames:** Every section's hero element is framed by a stepped chevron border in Champagne Gilt -- 4-layer stepped frame with each step a 6px deeper inset. - **Bokeh-background photography:** Cocktail photography rendered with heavy bokeh -- spheres of out-of-focus light surrounding each glass, in soft Champagne/Aurora hues. Cocktails appear in tall coupe and stemmed glasses, each a different silhouette. - **Aurora curtain:** A vertical gradient curtain that descends between major floors, simulating the visual experience of descending into a darker stratum of water. - **Sunbeam refraction:** Only on Floor 0 -- thin angled gradient slashes (1deg-3deg from vertical) suggesting refracted sunlight from the ocean surface above. They animate slowly, swaying ±2deg over 12s. **Decorative patterns:** - A small repeating deco-fan motif tiles the floor backgrounds (32px tile, 6% opacity, Champagne Gilt). - Stepped-fan ornaments flank every section header -- 5-ray fans built from Bezier curves in 0.5px Champagne Gilt strokes. ## Prompts for Implementation **Open with a slow submersion.** First 2200ms: the viewport begins as a pale ocean-surface blue (`#5C8FA8`) and *darkens* over 2.2 seconds to Midnight Ocean. As darkness sets in, the sunbeam refraction lines emerge (opacity 0 -> 0.4) and the bokeh hero cocktail rises into frame from below (translateY 120px -> 0, opacity 0 -> 1, easing cubic-bezier(0.22, 1, 0.36, 1)). **Pulse-attention pattern (featured):** This is the primary motion vocabulary. - Every aurora band pulses opacity (0.55 -> 0.85 -> 0.55) on a 4.8s ease-in-out loop, with a 0.4s offset between adjacent bands (creating a sequential wave of pulses). - Each floor numeral (I, II, III...) has a subtle pulse-glow on enter (text-shadow blur expanding from 0px -> 28px -> 12px in Champagne Gilt) over 1.6s when the floor enters view. - The "fin." marker on Floor 9 pulses once every 9 seconds with a tiny radial glow expanding 0 -> 24px and fading. **Stacked-section snap:** Use CSS `scroll-snap-type: y mandatory` on the body, with each floor section `scroll-snap-align: start`. This enforces the "elevator between floors" cadence. Each snap event triggers the next floor's aurora band to pulse once more aggressively. **Aurora gradient animation:** Each aurora band is a linear-gradient where the stops *move* via CSS variable interpolation: `--stop-1: 20%` <-> `40%` and `--stop-2: 60%` <-> `80%` over 9.6s. Combined with the opacity pulse, this creates a *flowing* aurora effect rather than a static gradient. **Bokeh hover choreography:** When the user hovers over a cocktail photograph, the bokeh circles subtly drift toward the cursor (10-12px offset using cursor-position math), and the chevron deco frame illuminates by raising its `box-shadow` glow from 12px Champagne to 32px Champagne over 240ms. **Storytelling beats (luxurious, contemplative, no CTAs, no pricing):** 1. Floor 0: surface descent intro. 2. Floor 1: foyer cartouche -- "Welcome to the lounge." 3. Floors 2-7: six cocktail tableaux, each titled with an oversized floor numeral and a poetic tasting note (3-4 lines of Cormorant Garamond italic). 4. Floor 8: hours of service displayed as a mirror-symmetric inscription. 5. Floor 9: abyssal "fin." -- a single period at center. **Anti-patterns to avoid:** No pricing menus (the cocktails are *tasting notes*, not a price list), no signup CTAs, no testimonials, no stat-grid blocks, no feature trios. The site is a guided descent. ## Uniqueness Notes **Differentiators from other designs in this collection:** 1. **Stacked-sections + ocean-depth metaphor:** The vertical-scroll-as-descent into a submerged lounge, with each floor a darker stratum, is a structural metaphor unique to this site. Stacked-sections (2% of layouts) combined with a pulse-attention pattern is genuinely rare. 2. **Aurora-lights motif (2% used) in an ocean-deep palette (2% used):** Both elements are uncommon and pairing them creates an aesthetic ("aurora seen from underwater") not attempted elsewhere in the collection. 3. **Bokeh-background photography (3% used) as the cocktail imagery vehicle:** Most photography in the collection is portraits or landscapes; bokeh-heavy product/cocktail photography reframed as deco specimens is a different visual register. 4. **Futura-geometric typography paired with deco frames:** This is a quietly classic Art Deco language (Futura was contemporary with the era) but most art-deco designs in the collection use ornate display faces; the geometric purity of Jost (Futura-style) is more architectural and less ornamental. 5. **Pulse-attention as primary motion vocabulary (4% used):** Instead of parallax (95%) or stagger (37%), the entire site's motion is driven by aurora-band pulses and numeral pulse-glows -- a slower, more meditative motion language suited to the lounge mood. **Chosen seed/style:** aesthetic=art-deco, layout=stacked-sections, typography=futura-geometric, palette=ocean-deep, patterns=pulse-attention, imagery=bokeh-background, motifs=aurora-lights, tone=luxurious. **Avoided overused patterns:** Refused parallax-as-primary (95%), avoided centered/card-grid baseline (95%/91%), declined mono typography (81%), and rejected mysterious-moody as the default tone (71%) in favor of luxurious-contemplative.