# Design Language for hinagiku.bar ## Aesthetics and Tone hinagiku.bar (Japanese "hinagiku" meaning "daisy") is a retro-futuristic neighborhood bar imagined as if it were designed by the in-house art department of an Osaka department store in 1978 -- but glimpsed through a CRT television set tuned to a forgotten satellite station broadcasting from 2089. The mood is **warmly friendly**, like the corner counter where the bartender already knows your name, yet the world outside the window is monorails, magnetic levitation, and a sky tinted by terraforming dust. The aesthetic borrows from Japanese kissaten (coffee shop) signage of the Showa era, vintage Pioneer hi-fi catalogs, and pulp paperback covers for stories that imagined "the year 2000." Colors hum with analog optimism. The split-screen format lets the past and the imagined future co-exist on the same counter: a tumbler of whisky on the left, a holographic daisy on the right, both lit by the same neon. The tone never strains for cool -- it leans in, makes eye contact, slides you a coaster, and asks how your week has been. ## Layout Motifs and Structure A **persistent split-screen** divided vertically into two complementary halves (50/50 on desktop, stacked on mobile). The dividing line is not a hard rule but a thin **chrome bevel** with a faint inner shadow, as if two adjacent screens of an old picture-in-picture broadcast. - **Hero split (100vh):** Left half (#f6e8c8 cream) holds the daisy mark in vintage geometric outline, the wordmark "hinagiku.bar" in Commissioner at clamp(56px, 9vw, 132px), and a quietly bouncing tagline that enters with a soft spring (translateY 28px -> 0, scale 0.92 -> 1, cubic-bezier(.34,1.56,.64,1)) on first paint. Right half (#1f2a44 midnight) holds a single rotating geometric abstract bouquet -- circles, hexagons, and arcs -- assembled into a daisy silhouette that quietly turns 360deg over 64s. - **Counter strip (90vh):** A horizontal "bar counter" cross-section runs across both halves, the bartender's mise en place rendered as flat geometric icons (decanters as cylinders, ice as cubes, citrus wheels as concentric rings). Each icon bounce-enters as it scrolls into view (stagger 80ms). - **Menu split (140vh):** Left holds the drink list as a vintage typewritten card with bouncing chip-tags for ingredients. Right holds an animated cocktail glass diagram, its liquid rising and falling in a 3s loop, geometric bubbles bouncing upward. - **Hours panel (60vh):** A flip-clock made of CSS-only flap-cards, with hours and a friendly handwritten "see you tonight" message that bounces in. - **Footer split (40vh):** Left a stylized 1970s phone receiver bouncing on its cord; right a softly animated neon sign reading "hinagiku" in script vector form. Vertical rhythm: 8px baseline grid. Margins clamp(24px, 4vw, 96px). The two halves never share content -- always complement. ## Typography and Palette **Fonts (Google Fonts only):** - **Display:** "Commissioner" (variable, weight 700, optical size set for display use) at clamp(56px, 9vw, 132px). Tracking -2%. Commissioner's flared terminals give the wordmark a retro-Showa warmth while staying versatile across the rest of the site. - **Sub-display / section heads:** "Commissioner" weight 500 at clamp(28px, 4vw, 56px), tracking -1%. - **Body:** "Commissioner" weight 400 at 18px / 1.7. Long-form runs at 17px / 1.75 with hanging punctuation. - **Accent / numerals (drink prices, hours):** "Commissioner" tabular figures, weight 600, slightly tighter line height. - **Italic mood lines:** "Commissioner" italic, weight 400, used sparingly for the bartender's notes. **Palette (analogous, warm side of the wheel):** - `#f6e8c8` -- counter cream (primary background, left half) - `#f0c97a` -- vintage amber (highlights, glow under chrome bevel) - `#e08a3c` -- whisky orange (CTAs, drink categories) - `#c4502a` -- burnt copper (hover/active, accent lines) - `#8a2a2a` -- cherry brandy (small marks, taglines) - `#1f2a44` -- midnight navy (right-half background, deep contrast anchor) - `#cdb892` -- toasted oat (secondary surfaces, dividers) All analogous warm hues from cream through amber to deep cherry, with the navy as a single cool anchor to make the split feel intentional. ## Imagery and Motifs - **Geometric-abstract daisy iconography:** Daisies reduced to concentric circles, hexagonal petal arrays, and arc-segment leaves. Always 2px stroke, never filled, in burnt copper on cream or amber on navy. - **Vintage Showa-era ephemera:** Matchbook covers, coasters, paper napkins, and old streetcar tickets, drawn as flat geometric collages -- never photo-real. Each piece bounces gently into place. - **Retro-futurist instruments:** A reel-to-reel tape, a vacuum-tube radio, a soda siphon, and a hovering serving tray, all rendered in the same flat geometric vocabulary. - **Bouncing chip-tags:** Small pill-shaped tags for cocktail ingredients (yuzu, sansho, mezcal) bounce-enter with overshoot, sit, then settle. - **Vintage signage motifs:** Sun-ray bursts, scalloped marquee borders, and asterisk-style stars from 1970s Japanese display ads, used as section dividers in toasted oat. - **Neon-tube wireframes:** A neon "OPEN" sign in the corner uses a soft `box-shadow: 0 0 16px 4px rgba(240,201,122,0.65)` glow, animated to flicker every 9s. ## Prompts for Implementation The page is a long, continuous **counter** the user walks along. Build it as a vertical scroll where the split persists -- both halves scroll together but with subtle parallax (left at 1x, right at 0.94x) so the counter feels deep. - Use CSS grid `grid-template-columns: 1fr 1fr` on `
`; mobile collapses to `1fr` with the right column appearing as a sticky 28vh banner. - The chrome bevel divider is a 2px-wide pseudo-element with `linear-gradient(180deg, #cdb892, #f0c97a 30%, #cdb892 70%, #8a2a2a)` and a 1px inner inset shadow. - Bounce-enter: define a single keyframe `@keyframes bouncein { 0% { transform: translateY(28px) scale(0.92); opacity: 0; } 60% { transform: translateY(-4px) scale(1.02); opacity: 1; } 100% { transform: translateY(0) scale(1); opacity: 1; } }` and apply with IntersectionObserver, never on scroll position math. - All motion respects `prefers-reduced-motion: reduce` by switching to a 200ms opacity-only fade. - The geometric daisy bouquet on the hero right uses a single SVG with `` for its 64s rotation. No JS required. - The flip-clock uses pure CSS 3D transforms on `.flap` elements; the JS only swaps the digit text once per minute. - The whole experience is **storytelling first**: as the user scrolls, the bartender narrates the night in short Commissioner-italic lines pinned to the left half, while the right half illustrates each line with one new geometric vignette. Avoid CTA-heavy layouts, pricing blocks, and stat-grids. There is no signup form. There is, instead, a hand-lettered "tell us your favorite drink" link that opens `mailto:`. - Keep the warm friendliness in microcopy: "we're glad you came," "first round's on us in spirit," "come back wet from the rain, we'll dry your coat." ## Uniqueness Notes **Differentiators from other designs:** 1. **Split-screen as bar counter, not as duality:** Most split-screen layouts argue two opposing ideas. This one stages a single warm scene across two stacked screens -- counter on the left, the dreamed-of future of that counter on the right -- so the split feels like a window seat in a bar, not a philosophical contrast. 2. **Commissioner as the entire type system:** A single variable font carries display, body, numerals, and italics, with optical-size and weight axes doing all the work. No second font is loaded; the typographic rhythm comes from axis tuning alone. 3. **Geometric-abstract daisy vocabulary:** The flower is never illustrated literally; instead a kit of circles, hexagons, and arcs is reused everywhere (icons, dividers, hero mark) so the daisy emerges from the same geometric grammar as the cocktail icons. 4. **Bounce-enter as the entire motion language:** Every entrance uses the same spring curve and the same 28px travel, building a single mechanical-watch tempo across the page instead of mixing animation styles. 5. **Warm-analogous palette anchored by a single cool navy:** The site reads as warm-on-warm, with navy reserved exclusively for the right half -- a discipline that makes the future feel just a few degrees cooler than the past. **Chosen seed:** retro-futuristic split-screen Commissioner analogous warm friendly bar -- planned seed from assignment. **Frequency-aware choices:** Avoided the overused `playful` aesthetic and `photography` imagery. Leans into the underused `retro-futuristic` aesthetic, `geometric-abstract` imagery, and `bounce-enter` pattern. Commissioner is rarely used as a sole type system, which keeps the typographic identity distinct from sites using Inter, Space Grotesk, or Cormorant.