# Design Language for renai.bar ## Aesthetics and Tone renai.bar is a **retro** futuristic dive bar — a fictional Shinjuku 1976 establishment that imagined itself in 2076 and kept its menu the same since. The aesthetic collides 1970s Japanese pub kitsch (terracotta walls, hand-stenciled signage, anchor-line neon) with **futuristic** motifs from late-Showa sci-fi paperbacks (orbital ring graphics, copper satellite-arc dividers, retrofuturist starbursts). The tone is **raw-authentic** — there is nothing polished here; the page reads like a hand-printed bar menu typed on a 1976 Olivetti typewriter and updated by sticking new printouts on top. Inspiration draws from the *Yokocho* alley signage of Omoide Yokocho, the album covers of Yellow Magic Orchestra, the typewriter futures of Italo Calvino's *Invisible Cities*, and the warm lens-flare cinematography of Wong Kar-wai's *In the Mood for Love*. Visiting feels like stepping behind a curtain into a six-seat bar where nothing has been thrown away in fifty years. ## Layout Motifs and Structure The architecture is a strict **f-pattern** — content follows reading-eye logic: a horizontal bar-name across the top, a horizontal "tonight's special" stripe beneath, then a long vertical menu column on the left margin with right-margin marginalia in handwritten Caveat. The page is divided into four chapters: *the bar*, *the menu*, *the regulars*, *the closing time*. Each chapter resets the f-pattern with a thick terracotta horizontal rule above. The menu items are listed in a vertical column with prices in 1976-yen written by hand in red ink, struck-through-and-rewritten where the bar updated them over the years. A floating Lottie animation in the bottom-right corner shows a slowly rotating neon "OPEN" sign that the user can click to toggle to "CLOSED" — a small jukebox toy. **Lottie-animation** patterns appear sparingly: only on the neon OPEN sign, a flickering chochin (paper lantern) in the masthead, and a slowly spinning satellite-arc divider between chapters. ## Typography and Palette **Typography** is led by Source Serif 4 (the **serif-revival** brief), used in the deliberately worn register of 1970s Japanese bar menu printing: Source Serif 4 84pt Bold for the bar name "renai.bar" set with a hand-drawn underline, Source Serif 4 22px Regular for menu items, Source Serif 4 14px Italic for prices and marginalia. A secondary face, Caveat 19px, appears in handwritten updates and marginalia ("the cook quit but the recipe stayed"). A monospace third face, Special Elite (a typewriter face) at 12px, handles regular-customer log entries. Numbers are tabular oldstyle. **Palette** is **terracotta-warm** with neon-flare accents: - `#1A0B0E` — bar-back midnight (deep page ground) - `#3D1F0F` — dark terracotta (secondary surface, deep wall shadow) - `#A0421C` — terracotta wall (primary tint) - `#D4734E` — warm clay (secondary, menu card ground) - `#F2D7B5` — vintage paper cream (menu paper, body text) - `#E63946` — neon OPEN red (single high-saturation accent) - `#FFD466` — chochin lantern amber (lens-flare highlights) - `#5C3B47` — bordeaux wine (secondary handwritten ink) The neon red appears only inside Lottie OPEN/CLOSED toggles — the menu itself is brown-on-cream like every dive bar ever. ## Imagery and Motifs Imagery is built around **lens-flare** — anchor points across the page emit soft warm lens-flare halos: a six-rayed flare radiates from the chochin in the masthead, a smaller four-rayed flare drifts from the OPEN sign, and a tiny diagonal streak flare appears at each menu-item bullet. Flares are rendered as overlapping radial-gradients with `mix-blend-mode: screen` so they bleach the warm terracotta where they touch. **Futuristic** motifs from late-Showa sci-fi appear as thin copper orbital rings and satellite-arc dividers — a 220px copper SVG arc separates each chapter, drawn in 1.5px stroke with three concentric arcs and a single planetary dot. Decorative furniture includes a hand-drawn renai-glyph 恋 stamped at the page footer, scuff marks and stains in the corners (small SVG sketch elements), and a "first opened: 1976" plaque graphic in faux gold. ## Prompts for Implementation Build a retro-futuristic dive-bar page on a strict f-pattern. The signature animation is **lottie-animation**: the chochin paper lantern in the masthead has a 4s Lottie loop of slow side-to-side sway with a subtle flicker; the neon OPEN sign has a 1.2s Lottie loop of three-frame flicker on (bright, dim, bright) with a click toggle to CLOSED state; the satellite-arc dividers have a 12s Lottie loop of one orbital dot tracing the arc. The page header bar-name "renai.bar" is set in Source Serif 84pt Bold with a hand-drawn underline that animates on first scroll: SVG `stroke-dasharray: 800; stroke-dashoffset: 800 → 0;` over 1.4s. Menu items in the body column display prices in two layers — the current price set right-aligned in italic, with an older price struck-through-and-rewritten in hand-drawn red ink (SVG path) above. Lens-flare halos are CSS radial-gradients positioned absolutely at anchor points: `radial-gradient(circle at center, rgba(255, 212, 102, 0.55), rgba(255, 212, 102, 0) 60%)` with `mix-blend-mode: screen`. Avoid CTA stacks, pricing menu wizards, signup ladders, stat grids — this is a hand-printed bar menu, not a product. The footer is a Caveat hand-lettered line: "renai.bar — open from late, closed when it rains, since 1976." ## Uniqueness Notes - **Differentiator 1:** Retro 1970s Japanese pub kitsch collided with late-Showa sci-fi futuristic motifs — almost no other design in the registry pairs `retro` aesthetic with `futuristic` motifs. - **Differentiator 2:** Prices displayed as struck-through-and-rewritten hand-drawn red ink layers — a true menu-aging detail not seen elsewhere. - **Differentiator 3:** Lens-flare halos used as functional menu-item bullets — not decorative photo overlays. - **Differentiator 4:** Lottie animations applied only to three small narrative elements (chochin, OPEN sign, satellite-arc), not as the entire page motion language — restrained narrative motion. - **Differentiator 5:** Strict f-pattern with a handwritten Caveat marginalia voice — the page reads as two parallel texts (menu + bartender's notes). - Planned seed: aesthetic=retro, layout=f-pattern, typography=serif-revival, palette=terracotta-warm, patterns=lottie-animation, imagery=lens-flare, motifs=futuristic, tone=raw-authentic. - Avoids overused patterns flagged by frequency.sh: `playful` aesthetic (28%), `photography` imagery (89%), `corporate` aesthetic (24%) — none used here.