# Design Language for koakuma.bar ## Aesthetics and Tone koakuma.bar is a **blobitecture cocktail lounge** — the conceit is that "koakuma" (小悪魔, *little devil*: the affectionate Japanese word for someone delightfully mischievous, never malicious) has opened a sunset bar that exists somewhere between a Zaha Hadid pour-spout and a 1929 Miami hotel terrazzo floor. The whole site is built like a **single fluid room with no straight walls** — every surface curves, every panel is a soft-bodied blob with a frosted glass skin, and warm low-angle light pours through all of it. The `.bar` TLD is taken literally: this is a *bar*, and the page is its evening — you arrive at golden hour, the sky goes peach then magenta then indigo as you scroll, and the aurora-colored back-bar lights come up. The tone is **optimistic-bright** and a little flirtatious — the little-devil persona is the bartender who remembers your name, slides you something you didn't order but absolutely wanted, and winks. Nothing here is dark, nothing is "edgy" — it is *warm*, *generous*, *coaxing*. The mood references: the moment a low sun turns a glass of Aperol into stained glass; inflatable-pool-toy physics applied to architecture; the way a lava lamp's blob detaches and re-forms; Memphis-era playfulness sanded smooth and dipped in honey light; the soft pneumatic curves of a Pierre Paulin "Tongue" chair. It should feel like the page itself is **slightly squishy** — that if you pressed it, it would give, then bounce back. Crucially: this is NOT the corpus-default warm-gradient glassmorphism. It is *blobitecture first* — the glass is a material applied to genuinely organic, asymmetric, deformable forms, not to rectangles with rounded corners. Think "frosted gummy candy carved into a bar," not "SaaS card." ## Layout Motifs and Structure The skeleton is a deliberate, classical **Z-pattern** (only 4% of the corpus uses it) — chosen because a Z is how the eye actually crosses a *room*: top-left (you walk in), sweep right (the back bar), diagonal down-left (the stools), sweep right again (the door / the goodbye). koakuma.bar uses the Z as a *narrative camera path*, not a wireframe. **The Z, blob by blob:** - **Top-left node — "The Entrance":** an oversized art-deco wordmark "koakuma" set in a fan-shaped sunburst arch, sitting on a peach blob that bleeds off the left edge. A single line of copy: *"the little devil's sunset bar — pull up a stool."* No nav menu in the corner; instead a small floating **coaster-shaped blob** with three dots that morphs open into a menu on hover. - **Top-right node — "The Back Bar":** a tall vertical stack of **glassmorphic bottle-cards** — each one a frosted blob containing a "house pour" (these are content sections: *the story*, *the room*, *the hours*, *the regulars' wall*). The cards are not aligned to a grid; they overlap and lean like real bottles, each one floating with its own slow morph cycle. - **The diagonal — "Crossing the Floor":** the connective tissue. A literal hand-drawn-feeling **diagonal river of light** (a CSS-clipped blob ribbon) runs from upper-right to lower-left, and the page's three "story" paragraphs are set *along this diagonal*, each on its own small blob, so reading them physically walks your eye across the Z's middle stroke. Aurora-colored light leaks along the ribbon's edge. - **Bottom-left node — "The Stools":** a horizontal row of **morphing seat-blobs** — each represents a "moment" at the bar (a poem fragment, a cocktail name + one-line description, a tiny illustrated garnish). They squish on hover like sitting down. This is the closest thing to a "menu" the site has, but it reads as ambient texture, not a price list. - **Bottom-right node — "Last Call":** a single wide sunset-indigo blob, the sky at its darkest, with the wordmark again (smaller, glowing) and *"come back tomorrow — the door's never really locked."* The colophon hides inside a tiny olive-on-a-pick blob. **Spatial rules:** - **No rectangles anywhere.** Every container is a `border-radius` blob (asymmetric, e.g. `42% 58% 63% 37% / 41% 44% 56% 59%`) or an SVG path. Even the body background is a stack of blobs, not flat color. - **Z-axis layering:** foreground stool-blobs, mid-ground bottle-cards, background sky-blobs + aurora. Parallax is gentle and *liquid* — layers don't slide, they *drift and wobble*. - **One page, vertical scroll, but the eye moves in Z's** — each Z-leg is roughly one viewport. - **Negative space is "air in the room"** — generous, peach-tinted, never empty-feeling. ## Typography and Palette **Typefaces (Google Fonts only — all real, all on Google Fonts):** - **Poiret One** — the **art-deco-display** face for the koakuma wordmark, section titles, and the "house pour" names. It's a hairline geometric deco type with circular bowls and that unmistakable 1920s elegance; set the wordmark in lowercase, letter-spacing +120, with the "o"s slightly enlarged so they read as little portholes / cocktail glasses. - **Marcellus** — a refined deco-adjacent serif (Trajan-ish, but softer), used for the long-form "story" paragraphs along the diagonal and for pull-quotes. Weight 400 only. Generous line-height (1.85). This is the "spoken" voice of the bartender. - **Jost** — a clean geometric sans (Futura-lineage, fully on Google Fonts), used for all UI text: the coaster menu, hours, captions, the stool-blob descriptions, the colophon. Weights 300 and 500. Lowercase by default, with small-caps tracking for labels. Type behavior: section titles in Poiret One get a subtle **morph on entry** — the letterforms arrive slightly "melted" (skew + blur) and settle. Body text never animates while reading. **Palette — sunset-warm (only 2% of the corpus; the corpus default is generic "warm gradient", this is a *specific named sunset*):** - `#FFE8CC` — **Bar Air** — the dominant background tint, a pale warm cream-peach, like sun through a paper lantern. - `#FF9E6D` — **Aperol Hour** — primary blob fill, a juicy coral-orange, the color of the drink at 6:45pm. - `#FF6F91` — **Magenta Pour** — secondary blob fill / the deepening sky, a confident watermelon-pink. - `#E0457B` — **Last Call** — accent + the darkest sunset stage, a deep rose-magenta for the bottom-right node. - `#5B3A8C` — **Indigo Awning** — the night creeping in at the page's foot; used for the final blob and for deep shadows under cards (shadows are *plum-tinted*, never gray). - `#FFD15C` — **Liquor Gold** — the deco line-work, wordmark glow, sunburst rays, and the aurora's warm band. - `#7BE0D6` — **Aurora Mint** — the *cool* note in the aurora ribbon and back-bar glow; the only cool-leaning hue, used sparingly so the warm palette stays warm. Pairs with a faint `#9D8DF1` periwinkle in the aurora gradient. - Glass surfaces: `rgba(255, 232, 204, 0.45)` to `rgba(255, 158, 109, 0.25)` fills, `backdrop-filter: blur(20px) saturate(180%)`, 1px inner highlight in `rgba(255,255,255,0.6)` along the top-left curve only (light comes from upper-left). Gradients are always **multi-stop sunsets** along a blob's longest axis: cream → coral → pink → rose → indigo, never a flat two-color ramp. ## Imagery and Motifs **Primary imagery: glassmorphic-cards** — but rethought as *blown-glass barware*. Every "card" is a frosted, slightly iridescent blob with: a thin Liquor-Gold rim that catches light only on the upper-left arc, a soft plum drop-shadow, faint internal "bubbles" (tiny radial-gradient dots, like carbonation rising), and a subtle warm noise/grain so the glass reads as *real frosted glass*, not flat translucency. **Recurring motifs (aurora-lights — only 3% of corpus — as the signature):** - **The back-bar aurora:** behind the bottle-cards, a slow-shifting band of light — gold → mint → periwinkle → coral — rendered as 2–3 huge blurred SVG blobs with `mix-blend-mode: screen`, drifting and morphing on a 20–40s loop. This is the "neon" of the bar but it's *soft* — auroral, not signage. - **Hand-drawn deco garnishes:** a small custom set of single-line illustrations in Liquor Gold — an orange wheel, a sprig of mint, a luxardo cherry on a pick, a lemon twist, an olive, a paper umbrella, a sugar-rimmed coupe, a stemmed glass with a star — drawn with the geometric confidence of a 1920s menu engraving but with playfully wobbly, "little-devil" terminals (a tiny curl, like a tail). - **Sunburst / fan rays:** the classic art-deco sunburst, used behind the wordmark and as a faint background motif at each Z-node — but the rays are *slightly bent*, following the blob curvature, so deco-rigor meets blob-softness. - **A tiny mascot, used once:** "koakuma" appears as a single small motif — a round peach blob with two tiny gold horns and a curl of a tail and a wink — tucked near the colophon. Never overused; it's the signature stamp, not a character. - **Carbonation bubbles** drifting upward through the whole page at low opacity, slow, parallaxed — the room is effervescent. - **No photography.** Nothing photographic. Everything is gradient, blob, or single-line gold illustration. (The corpus is 98% photography — this site has zero, deliberately.) ## Prompts for Implementation Build as a **single self-contained HTML document** — one `