# Design Language for renai.bar ## Aesthetics and Tone renai.bar — *renai* (恋愛, "romantic love") and *bar* — is **a surrealist after-hours dream-bar that exists only in the half-second before you wake up**. Imagine a counter that runs diagonally off the edge of the world, lit by a moon that has been dropped into a coupe glass, where every patron is the same person at different ages of one love affair, and the bartender pours nothing but liquid memory. This is not a romantic bar — it is the *idea* of one, rendered the way René Magritte and Leonora Carrington would paint a wine list: a velvet sky indoors, a doorway that opens onto an ocean of stationery, a clock whose hands are two long-stemmed cherries. The mood is **dreamy-ethereal, mysterious-moody, opulent-grand** — sumptuous but slippery, intimate but impossible. Inspirations: Magritte's daylit nocturnes, Carrington's animal-headed banquets, the deep-red velvet interiors of *In the Mood for Love*, Joseph Cornell's shadow boxes full of cordial glasses and star charts, Remedios Varo's alchemical interiors, the burgundy-and-candle palette of a Vienna *kaffeehaus* at 2 a.m. The site should feel like wandering through a series of impossible rooms in a building that is also a glass of wine that is also a sky. No urgency, no hard sell. The visitor is a guest who arrived in a dream and is in no hurry to leave. Surrealist aesthetic sits at ~6% in the frequency analysis; avant-garde at ~2%. renai.bar leans hard into both — surreal *composition* (impossible space, dream logic) wedded to avant-garde *typesetting* (text that behaves like furniture, captions that float free of their objects). ## Layout Motifs and Structure The spine is **diagonal-sections** (~5% in layout frequency — deliberately underused) crossed with **broken-grid** (~11%) and **layered-depth** (~11%). The entire page is composed along a single 14° diagonal — the "bar counter" — that descends from the upper-left to the lower-right across the full scroll. Every section is a parallelogram clipped to that angle, not a rectangle; content sits *on* the counter, slides *along* it, or floats *above* it like cigarette smoke. Structure, top to bottom along the diagonal: 1. **The Threshold** — full-bleed nocturne. A door (CSS-drawn, no image) standing in the middle of a velvet-red room; through the doorway, instead of another room, a swirl of falling love-letters and a single hanging moon. The wordmark *renai.bar* set across the door's lintel in mirrored serif — the second half "·bar" is upside-down, as if reflected in a puddle that isn't there. 2. **The Counter** — the diagonal asserts itself. A long parallelogram bar-top in lacquered burgundy; "drinks" are listed as prose-poems, each one a small surreal object (a glass of "the year we didn't speak," garnished with a key). Items are staggered along the slope; the cursor leaves a faint condensation ring wherever it rests. 3. **The Regulars** — a broken grid of shadow-box vignettes (Cornell-style), each a framed dream: a couple as two herons, a phone booth full of moths, a staircase that loops. Frames are tilted at small irregular angles (−4° to +6°); none align to a baseline. Hovering one slides the others gently aside, as if making room. 4. **The Back Room** — text-only interlude. A long Magritte-style caption ("Ceci n'est pas un rendez-vous") floating over deep void; behind it, a parallax field of distant candle-flames like a city seen upside-down. 5. **The Coat Check** — the diagonal flattens out. A quiet footer shaped like a marble checkroom counter; "hours" given as dream-hours ("open from the moment you close your eyes until the alarm"). A single brass bell that, when clicked, ripples the whole page like the surface of a drink. No bento boxes. No dashboard. No stat grid. The grid is *meant* to feel slightly wrong — like furniture arranged by someone who has only had bars described to them. ## Typography and Palette **Fonts — Google Fonts only, three families:** - **Playfair Display** — the primary voice (~1% in typography frequency — barely used). Used for the wordmark (96px, weight 700, with the ".bar" portion `transform: scaleY(-1)` mirrored), all section titles (italic 700, 48px), and the drink-poem first lines (italic 400, 28px). Playfair's high-contrast Didone curves give the velvet-opera-house feel; its dramatic thin hairlines read as candlelight catching glassware. - **Cormorant Garamond** — the body and the dream-captions (weights 300 and 400, italic and roman). Body copy at 17px / line-height 1.85, the Magritte captions at 22px italic 300, letter-spacing 0.04em. Cormorant's literary, slightly fragile texture makes the prose feel hand-set in a private press at midnight. - **Space Mono** — the *only* mono accent (~94% of designs use mono, so this is the concession to convention — used sparingly and against type). Used exclusively for the small "label" tags pinned to surreal objects ("[fig. 4 — the moon, decanted]"), drink "prices" rendered as nonsense glyphs (`◐ · ✶ · ◑`), and the dream-hours in the coat check. 11px, uppercase, letter-spacing 0.22em, opacity 0.7. It is the museum-placard voice — deadpan against the romance. **Palette (six colors, hex):** - `#2A0A14` — *oxblood velvet* — the dominant background; the inside of the dream-bar. Almost black-red. - `#5C1A2B` — *spilled bordeaux* — section parallelograms, the counter surface, frame interiors. - `#E8C9A0` — *candle cream* — primary text on dark; the warm light. Never pure white. - `#C9A227` — *brass & cherry-stem gold* — the bell, frame edges, hairline rules, the hanging moon's halo. - `#7B9EA8` — *dream-glass teal* — the impossible cold light through the doorway; condensation rings; the upside-down city's candle-stars. The single cool note, used like a draft of night air. - `#F2E4D0` — *fogged mirror* — the rare near-white, only for the mirrored wordmark reflection and the marble coat-check counter. Gradients are reserved for atmosphere only: a radial `#2A0A14 → #5C1A2B` glow behind the moon, a vertical `#2A0A14 → #1A0610` vignette at every section edge. No flat tech gradients. ## Imagery and Motifs **Primary imagery: collage** (~7% in imagery frequency) — specifically Joseph Cornell / Leonora Carrington dream-collage, but built *entirely without photographs or raster images*. Every "object" in renai.bar is constructed from CSS shapes, SVG line-drawings, and type. The site's whole visual world is: a door, a moon, falling letters, shadow-box frames, candle-flames, a brass bell, condensation rings, and text. Nothing else. **Recurring motifs:** - **The decanted moon** — `candle-atmospheric` (~5%) crossed with `star-celestial` (~4%). A perfect circle (`#F2E4D0` core, `#C9A227` halo via box-shadow) that appears in the doorway, again as the "garnish" in one drink, again as the dot of the "i" in *renai* on hover. It is always the same moon. - **Falling stationery** — slow drift of pale parallelograms (love letters, never readable) descending through the doorway and pooling at the bottom of section 1. CSS-only, ~14 elements, varied fall speeds. - **Mirror-without-glass** — the surrealist signature. The wordmark's ".bar" is vertically flipped. The coat-check counter shows a faint flipped echo of the section above it. Reflections exist where no mirror does. - **Magritte placards** — tiny `[fig. n — …]` tags in Space Mono pinned at angles to objects, captioning things that aren't what they're labelled. - **Cherry-stem clock hands, heron-couples, moth-filled phone booths, looping staircases** — the rotating cast of the shadow-box grid; each is a 2–4 line SVG sketch in `#C9A227` on `#5C1A2B`, never more detailed than a matchbook doodle. ## Prompts for Implementation Build renai.bar as **a single static page** — `index.html`, `style.css`, one small JS module (`dream.js`, ~5KB) — Google Fonts link the only external dependency. Total weight (excluding fonts) under 90KB. No images, no icon fonts, no frameworks. **The diagonal is the architecture.** Establish one CSS custom property `--counter-angle: 14deg`. Every section is a `clip-path: polygon(...)` parallelogram sheared to that angle; content inside is counter-rotated so text stays level while its container slants. The visitor should feel they are sliding down a long bar-top. **Storytelling, full-screen, scene by scene.** Each section is a *room in a dream*, occupying ≥100vh, entered with a slow `blur-focus` reveal (start `filter: blur(12px)` + `opacity: 0`, settle over 1.1s on scroll-trigger) — like a memory coming into focus. Transitions between sections cross-fade through near-black, as if blinking. There is a narrative arc: arrival at the threshold → settling at the counter → meeting the regulars (the love affair in fragments) → the back-room reckoning → the gentle exit at the coat check. The drink-poems, read in scroll order, tell one oblique love story. **Animation vocabulary:** `parallax` (the candle-flame field in the Back Room, the moon drifting independently of scroll), `cursor-follow` (a soft condensation ring + faint candle-glow trailing the pointer — `mix-blend-mode: screen` in `#7B9EA8` at low opacity), `ripple` (clicking the brass bell sends a full-viewport SVG ripple distortion outward, ~900ms, ease-out), `path-draw-svg` (the shadow-box sketches draw themselves with `stroke-dashoffset` when scrolled into view), `stagger` (drink items and falling letters enter in sequence), gentle `tilt-3d` on the shadow-box frames (max ±4° following the cursor). Everything slow, weighted, dreamlike — spring stiffness low, durations long (0.8–1.4s). Nothing snappy. `prefers-reduced-motion` collapses all of it to simple fades. **Hard constraints (these ARE the design):** - **No CTA.** No "Reserve". No booking widget. No email capture. No phone number. The "reservation" is implicit — you are already here, you arrived in a dream. - **No pricing block.** "Prices" are nonsense glyph-strings in Space Mono. Money does not exist in this bar. - **No stat grid, no logos-of-clients, no testimonials carousel.** - **No photographs.** Everything is drawn in CSS/SVG or set in type. - **No pure white, no pure black.** Darkest is `#1A0610`, lightest is `#F2E4D0`. Voice of the copy: prose-poetry, second person, present tense, faintly conspiratorial — Anaïs Nin writing a cocktail menu. The Space Mono placards are the only deadpan element; let them puncture the romance with museum-catalogue dryness. ## Uniqueness Notes Differentiators, each a deliberate departure from the frequency analysis: 1. **A page composed entirely along one 14° diagonal counter.** Diagonal-sections sits at ~5% in layout frequency, and where it appears it is usually one or two slanted dividers. renai.bar makes the diagonal the *single organizing axis of the whole document* — every section a sheared parallelogram, content sliding down a bar-top. This is the structural signature. 2. **Surrealist collage built with zero images.** Photography appears in ~98% of designs; collage imagery in ~7% and almost always photo-based. renai.bar has *no* raster images at all — its Cornell/Carrington dream-collage world (door, decanted moon, falling letters, shadow boxes, heron-couples) is 100% CSS shapes, SVG sketches, and type. The "mirror-without-glass" motif (a vertically-flipped wordmark, reflections where no mirror exists) is the surrealist conceit made literal in code. 3. **Romance rendered as dream-logic, not warmth.** Pastoral-romantic tone sits at ~34%; warm-inviting at ~22%; the overwhelmingly common register for "love" sites is cozy and bright. renai.bar refuses that — *renai* here is oxblood velvet, candlelight, an impossible bar at 2 a.m., Magritte placards captioning things that aren't what they say. Mysterious-moody + dreamy-ethereal, not friendly. 4. **Playfair Display as primary voice.** Playfair sits at ~1% in typography frequency; mono dominates at ~94%. renai.bar makes Didone opera-house serif the lead, with Cormorant Garamond for the literary body, and quarantines Space Mono to tiny deadpan museum placards — mono present, but subverted. **Avoided patterns:** card-grid (91%) — replaced by a tilted, deliberately misaligned broken grid of shadow boxes; hand-drawn aesthetic (94%) and glassmorphism (82%) — neither appears; CTA-heavy / pricing / stat-grid layouts — explicitly forbidden above; photography (98%) — none. **Chosen seed/style:** `surreal dreamscape promo` — aesthetic: surreal, layout: diagonal-sections, typography: playfair-elegant, palette: deep-burgundy, patterns: ripple, imagery: collage, motifs: candle-atmospheric, tone: dreamy-ethereal.