# Design Language for hinagiku.bar ## Aesthetics and Tone **Hinagiku** is the Japanese word for "daisy" — and this is a phantom seafloor cocktail lounge that grows like a coral garden somewhere between a 1990s aquarium screensaver, an Art Deco ocean-liner smoking room, and a tide-pool dashboard from a research submersible that nobody remembers commissioning. The aesthetic is **seapunk**: chrome dolphins, holographic kelp, CRT-cyan waves, low-poly seashells, gradient lagoons — but filtered through the warm hospitality of a neighborhood bar that knows your name. It is not cold tech and not kitsch-overload; it is *warm-inviting* in tone, like being handed a chilled coupe glass by a bartender whose apron is woven from sea-glass. The mood: **bioluminescent calm with a pulse.** Picture the lobby of the SS Normandie sunk gently to a depth where the windows glow ethereal blue and the brass fittings have gone soft with verdigris. Everything is slightly out of focus until you lean in — the world *blurs and focuses* as you move through it, the way light bends through six feet of clear seawater. Generative ripple-fields drift behind the content like caustics on a pool floor. The Art Deco geometry (sunbursts, stepped ziggurats, fan motifs) is rebuilt out of grid-lines and wave-forms, so it reads simultaneously as a 1925 Paris Exposition pavilion *and* a wireframe rendering of a reef. Reference touchstones: vintage dive-watch dials, Trapper Keeper dolphin-and-grid airbrush art, the caustic shimmer in old SGI demos, kombu and nori translucency, the engraved menu cards of a transatlantic liner's first-class bar, soft-focus Vaseline-on-the-lens 1930s glamour photography, and the gentle UI of a tide-clock that doubles as a cocktail dashboard. ## Layout Motifs and Structure A **dashboard** layout — but a *warm* one, an "instrument panel for a floating bar" rather than a SaaS analytics screen. The viewport is divided into a clear modular grid of glowing panels, each one a "gauge" reporting on some aspect of the bar: tonight's tide level, the house pour, the temperature of the lagoon, the rotating daisy-of-the-week, reservations, the music drifting from the gramophone-shaped speaker. Structure: - **Persistent left rail (the "console")** — a narrow vertical strip with an Art Deco stepped-fan header, a column of thin engraved grid-lines, and small chrome toggle "knobs" for navigation (Menu / The Garden / Visit / The Tide Log). On narrow screens it collapses to a horizontal brass bar across the bottom, like a submarine control strip. - **Main canvas: a 12-column fluid grid** holding 4–7 **gauge panels** of varying span (a 8-col "feature" panel for the signature cocktail, paired 4-col panels for atmosphere readouts, a full-width strip for the live "tide" ribbon). Panels have soft rounded-rect corners, faint inner glow, and a 1px cyan grid-line frame with Deco corner-notches. - **The Tide Ribbon** — a full-bleed horizontal band, roughly one-third down, where a generative sine-wave field scrolls slowly left, drawn in layered translucent cyans. Cocktail names surface and submerge in it like flotsam. - **Depth gradient** — the page has an implied vertical descent: lighter ethereal blue at the top (the "surface"), deepening toward a dim teal-navy at the footer (the "bed"), where the brand mark settles like an anchor. - Negative space is treated as *water*: never empty, always faintly rippling. Avoid: hero-banner-then-cards-then-CTA funnels, three-column pricing, stat-grids with big numbers and "+" signs, testimonial carousels. The gauges may *look* like stats but they report ambience, never metrics. ## Typography and Palette **Display / headings — Art Deco display:** **"Poiret One"** (Google Fonts) for the largest titles and the wordmark — its hairline geometric strokes and circular bowls are pure 1925 Deco and they shimmer beautifully with a subtle text-shadow glow. **"Limelight"** (Google Fonts) as a secondary Deco display for panel titles and the menu headers — high-contrast, theatrical, marquee-like. **Body / UI text — humanist sans:** **"Commissioner"** (Google Fonts), a soft, slightly humanist grotesque, for descriptions, the tide log, and all readable copy — it keeps the bar *warm* and legible against the cool palette. **Accent / labels / numerals — mono:** **"Major Mono Display"** (Google Fonts) for the small console labels, gauge tick-marks, coordinates, and timestamps — gives the dashboard its instrument-panel precision without going full terminal. Palette — **ethereal-blue** core, warm verdigris-brass accents, soft-focus highlights: - `#0a1f33` — **Abyss Navy** — deepest background, the seabed at the footer - `#13334d` — **Twilight Fathom** — primary panel background - `#2b6f8c` — **Tidepool Teal** — mid-tone, panel borders, secondary text - `#6fd6e8` — **Caustic Cyan** — the signature glow, grid-lines, active states, ripple highlights - `#bdeef2` — **Sea-Glass Mist** — soft pale cyan for body text on dark, the "surface" gradient top - `#e9d8b6` — **Verdigris Brass (light)** — warm metallic accent on knobs, Deco notches, the wordmark - `#c98f5a` — **Sunken Bronze** — warm secondary accent, hover fills, the "warm-inviting" handshake against all that blue - `#f7efe0` — **Coupe Ivory** — near-white for the rare light panel and high-emphasis Deco text Default state is the dark seabed; one or two panels may invert to Coupe Ivory like a backlit aquarium tank. ## Imagery and Motifs - **Generative-art ripple/caustic field** — the hero backdrop and the Tide Ribbon are live `` (or layered animated SVG) generative systems: interfering sine waves rendered as translucent contour bands in Caustic Cyan over Twilight Fathom, drifting and re-forming forever. No two loads identical. This is the soul of the page. - **Grid-lines as ornament** — thin 1px cyan rules everywhere: forming Deco sunburst fans (radial grid-lines from a corner), bathymetric "depth contour" lines behind panels, isometric floor-grids receding under content, and tick-mark scales along panel edges. The grid is decorative, not utilitarian. - **Art Deco × seapunk hybrid emblems** — a stepped-ziggurat daisy (Hinagiku petals arranged as a Deco fan), a chrome-gradient dolphin reduced to three elegant arcs, a coupe glass whose stem is a stylized seahorse, a sunburst made of wave crests. Rendered as inline SVG with cyan stroke + brass fill, faint glow. - **Soft-focus / blur-focus imagery** — any photographic or rendered imagery (a single hero pour, a coral cluster) sits behind a strong blur by default and sharpens only on hover/scroll-into-view, like focusing dive goggles. Default page state is gently defocused; interaction is the act of *looking closely*. - **Knobs, dials, gauges** — small skeuomorphic-lite brass dials with cyan needles for "controls," but understated, line-drawn, never noisy. - **Bubbles & flotsam** — sparse, slow-rising bubble particles and the occasional drifting kelp frond crossing the viewport edge — restrained, atmospheric, never a snow-globe. - **Texture** — a faint film grain + a subtle horizontal-scanline shimmer over the darkest areas, evoking both CRT seapunk and underwater light flicker. ## Prompts for Implementation - Build it as a **single immersive full-screen "instrument panel"** that the visitor inhabits, not a scrolling brochure. The first paint should feel like surfacing into a glowing underwater room: the generative caustic canvas already alive, panels fading and *focusing* in with a stagger, the Deco wordmark "Hinagiku" assembling stroke-by-stroke (path-draw SVG) while the tagline types in Major Mono Display. - **Blur-focus is the primary interaction grammar.** Off-focus panels carry `filter: blur(3–6px)` and reduced opacity; the panel under the cursor (or scrolled to center) animates to `blur(0)` + full opacity + a brightening of its cyan grid-frame. Implement with `transition: filter .5s ease, opacity .5s ease`. The whole page can carry a baseline `blur(0.4px)` so it always feels like looking through water. - **The generative caustic field**: a `` summing 3–5 sine waves with slowly drifting phase/frequency, sampled to draw translucent contour bands; tint Caustic Cyan over Twilight Fathom; respect `prefers-reduced-motion` by freezing to a single beautiful still frame. The Tide Ribbon reuses the same engine at higher amplitude with cocktail names anchored to wave troughs that rise/sink. - **Animation vocabulary:** stagger panels in on load; spring-ease everything; subtle parallax — panels drift a few px opposite the cursor as if buoyant in current; brass knobs rotate with a slight overshoot on toggle; grid-line ornaments draw themselves (stroke-dashoffset) on first reveal; bubbles rise on independent timers. Keep it *calm* — long durations (.4–.8s), gentle easing, nothing frantic. Warm-inviting, not energetic. - **Content sections (as gauge panels, not funnel blocks):** the Signature Pour (the big feature panel — name in Limelight, tasting notes in Commissioner, an SVG seahorse-stem coupe that focuses on hover); The Garden (the rotating list of seasonal cocktails surfacing in the Tide Ribbon); Visit (hours, the address rendered as map-style depth-contour grid-lines with a glowing pin, a "make a reservation" link styled as a brass dial you turn); The Tide Log (a quiet feed of notes from the bar — new arrivals, the record playing — in mono, like a ship's log). A persistent left "console" rail for nav. - **AVOID:** CTA-stacked landing layouts, pricing tables, big-number stat grids, "Trusted by" logo walls, popup modals, carousels of testimonials, generic card-grid-then-footer. The dial/gauge styling is *atmosphere reportage*, never KPIs. - Type treatment: Poiret One huge and airy with `letter-spacing: .15em` and a soft cyan `text-shadow` glow; Limelight for marquee panel titles; Commissioner at comfortable reading size with generous line-height for warmth; Major Mono Display tiny, uppercase, wide-tracked for all labels/coords/timestamps. - Palette discipline: dark seabed default (`#0a1f33`→`#13334d` vertical gradient implying descent), Caustic Cyan `#6fd6e8` reserved for glow/active/grid-lines, warm Sunken Bronze `#c98f5a` and Verdigris Brass `#e9d8b6` for the human/inviting metallic touches, at most one Coupe Ivory `#f7efe0` light panel as a lit aquarium. ## Uniqueness Notes Differentiators from other designs in this collection: 1. **Seapunk-meets-Art-Deco fusion as the core concept** — not a clean aquarium spa and not a vaporwave grid, but a sunken ocean-liner cocktail lounge where 1925 sunburst geometry is literally reconstructed from bathymetric grid-lines. Seapunk (3%), art-deco-display typography (4%), and grid-lines motifs (2%) are all rare here, and this welds all three. 2. **Blur-focus as the page's primary interaction grammar** — the entire site is intentionally soft-focus, "underwater," and *focusing* a panel is the main verb. blur-focus appears in only ~5% of designs and almost never as the controlling metaphor rather than a decorative touch. 3. **A "warm dashboard"** — dashboard layout (33%) reframed as a hospitable instrument panel reporting ambience (tide, pour, the record playing) instead of metrics; gauges and brass dials with zero KPIs, zero stat-grids, zero pricing — paired with warm-inviting tone, which almost never co-occurs with dashboard layouts. 4. **Live generative caustic field** as the literal soul of the page (generative-art imagery, ~6%) — interfering-sine-wave canvas drawing translucent contour bands, doubling as the "Tide Ribbon" that surfaces cocktail names. 5. **Ethereal-blue seabed with warm verdigris-brass counterpoint** — the cool ethereal-blue palette (~6%) deliberately offset by Sunken Bronze and Verdigris Brass for the "neighborhood bar" warmth, avoiding the cold sterility of typical blue tech sites. Chosen seed: **aesthetic: seapunk, layout: dashboard, typography: art-deco-display, palette: ethereal-blue, patterns: blur-focus, imagery: generative-art, motifs: grid-lines, tone: warm-inviting** Avoided per frequency analysis: no hand-drawn/glassmorphism aesthetic, no photography-led imagery, no card-grid/full-bleed/centered default layout, no warm/gradient default palette as the *whole* story (warmth is a deliberate accent against ethereal-blue), no mono-only typographic crutch (mono is confined to instrument labels), and explicitly no parallax-heavy/cursor-follow/magnetic over-reliance — parallax here is reduced to a few px of gentle buoyancy in service of the underwater feel.