# Design Language for renai.club ## Aesthetics and Tone renai.club — *renai* (恋愛, "romance") rendered not as hearts and roses but as the **surreal physics of being in love**: the way a room tilts, the way clocks lose their nerve, the way one ordinary object (a teacup, a key, a folded note) suddenly becomes the most important thing in the universe. The site is a **surreal dreamscape promo** for an imaginary members' club whose only membership requirement is that you are, right now, thinking about someone. The mood is **dreamy-ethereal with a thin wire of melancholy running through it** — closer to a Leonora Carrington painting or a Murakami novel's quiet midnight than to Valentine's-Day commerce. Picture: a corridor that is also a riverbed; a moon that has been folded into an envelope; two chairs facing each other across a floor made of handwriting; a staircase that ascends into a peach-coloured fog and, three steps from the top, simply stops, because love is a thing you climb toward and never quite arrive at. Everything is **soft-focus but sharply intentional**. Colours bleed at their edges like watercolour on wet paper, yet the typography is crisp and the layout is rigorously composed — the contrast between blurred dreamstuff and exact lettering is the whole emotional engine. The tone never winks at the user; it is **sincere, hushed, a little embarrassed by its own tenderness**, the way real love letters are. No irony, no "swipe right" gags, no engagement-app cynicism. This is romance treated as a genuinely strange and enormous experience. Nothing here sells anything. There is no signup, no pricing, no "join now." The club does not exist. The site is the daydream of the club, and you are simply allowed to wander through it. ## Layout Motifs and Structure The spine is **immersive-scroll** (only 13% in the corpus) built as a sequence of **seven dream-rooms**, each one a full-viewport tableau. But the structure has a surreal twist that distinguishes it: **the scroll axis is not consistent**. Some rooms scroll downward as expected; one room scrolls *sideways* (the corridor-riverbed); one room the page appears to *fall* into (a brief upward-then-downward lurch); one room you scroll *into* (depth, a z-axis push through layered translucent planes). The navigation feels like moving through a building whose architect was dreaming. Within each room the composition uses an **off-kilter editorial grid** — think `magazine-spread` (6%) crossed with deliberate `broken-grid` (11%) misalignment: a 12-column structure where blocks are nudged 1–2 columns off where they "should" sit, and one element per room breaks the grid entirely (floats free, oversized, half off-screen). Generous **negative space** (`ma-negative-space`, 16%) gives every dream-object room to breathe; the page is mostly quiet pale field with one or two arresting things in it. Rooms in order: 1. **The Threshold** — wordmark "renai" hand-set enormous, lying flat on a floor of cursive handwriting that slowly drifts. A door, ajar, leaking peach light. 2. **The Letter Room** — a single folded paper note, room-sized, hovering. As you scroll it unfolds, and the unfolding reveals the next room behind it. 3. **The Corridor That Is A River** — *horizontal scroll*. A hallway where the carpet is moving water; reflections of two figures who never quite touch. 4. **The Stopped Staircase** — vertical scroll upward, into peach fog. The stairs end three steps early. You hang there. 5. **The Two Chairs** — scroll *into* (z-depth). Two empty chairs face each other across a floor of overlapping love letters; the camera pushes slowly between them. 6. **The Folded Moon** — a crescent moon being folded into an envelope by no visible hand; stamps that are tiny constellations. 7. **The Open Window** — the page "exhales": everything drifts upward and out a window into a watercolour dusk. A last line of handwriting appears on the sill. No header bar, no footer, no breadcrumbs. A faint progress indicator: a thin thread (literally a sewing thread) that lengthens down the left edge as you move, stitching the rooms together. ## Typography and Palette **Fonts (Google Fonts only):** - **Display / wordmark / room titles — *Cormorant Garamond*** (weights 300 and 500, italic available). A high-contrast literary serif with long, romantic ascenders. Used at huge sizes (clamp 4rem → 14rem) for the "renai" wordmark and room names. Set tight (`letter-spacing: -0.02em`), often in italic, frequently broken across two lines with the break mid-word for a fainting, swooning effect. Cormorant carries the love-letter literariness without tipping into wedding-invitation cliché. - **Body / captions / the handwriting-that-is-typeset — *Caveat*** (weight 400 and 700). A genuine handwriting face, used for every line of "handwriting" in the dream-rooms (the floor text, the note's contents, the windowsill line). Slightly larger than you'd expect (1.25rem base) so it reads as intimate, not decorative. - **Functional micro-text — *Spectral*** (weight 300, and 300 italic). The few necessary UI words (a "scroll" hint, the thread's tiny markers, any alt-text shown). Spectral's screen-tuned bookishness keeps even utilitarian text inside the literary world. This is a **serif-revival / handwritten pairing** — explicitly *not* the corpus-dominant `mono` (94%). No monospace anywhere. **Palette — soft, watery, dusk-toned, edges always bleeding:** - `#F4ECE4` — **Paper Cream**: the base field of every room (warm, slightly aged, like good letter stock). - `#E7C9B8` — **Peach Fog**: the colour the staircase climbs into; primary "atmosphere" tint. - `#D98C7A` — **Faded Rose**: accent — never pure red; love that has been carried in a pocket a while. - `#7E8FA6` — **Riverlight Blue-Grey**: the moving-water carpet, the dusk window, the melancholy wire. - `#3B3540` — **Ink Plum**: the text colour — not black, a bruised dark plum, the colour fountain-pen ink dries to. - `#C6B7C9` — **Lilac Mist**: secondary haze, the shadows inside the fog. - `#EEDFA0` — **Letter-Gold**: rare jewel-spark — the constellation stamps, the leak of light under the first door, the moon's edge. Gradients are **watercolour bleeds**, never the corpus-standard slick linear `gradient`: implemented as soft radial blooms with feathered, irregular edges (SVG turbulence-displaced masks), so colour always looks *soaked in* rather than ramped. ## Imagery and Motifs **No photography** (a deliberate rejection of the corpus's 98% photography reflex). Everything is **hand-built SVG plus CSS, in a soft surreal-collage register** — flat shapes with painterly edges, like cut-paper that someone breathed on. The recurring vocabulary: - **The folded note** — a paper rectangle with crease-lines; appears in every room at some scale (room-sized in The Letter Room; a confetti of tiny ones on the floor of The Two Chairs; a single one tucked in the moon's envelope). Its unfolding/refolding is the site's signature gesture. - **Handwriting-as-terrain** — cursive lines (Caveat, very pale, large) used as *flooring*, *water*, *fog texture*. Text you walk on, not read. - **The thread** — a single sewing thread, Faded Rose, that runs the left edge as progress and occasionally crosses into a room to "stitch" two drifting objects loosely together. - **Doubled-but-never-touching figures** — simple silhouette pairs (two chairs, two reflections, two coats on hooks). They face each other; there is always a small charged gap. - **The folded celestial** — a crescent moon, stars, a sun, each rendered as if made of paper and creasable. Constellations appear as postage stamps. - **Doors and windows ajar** — apertures leaking Peach Fog or Letter-Gold; the way light behaves around them is the only "glow" in the design (soft, watercolour-bloomed, never neon). - **Drifting** — almost nothing is still; objects sway, fog breathes, the handwriting-floor scrolls slowly underfoot, the thread sways. The whole site has the gentle motion of a room with an open window. Decorative grain: a very fine **paper-fibre noise overlay** at ~4% opacity over everything, so the screen reads as letter-stock, not glass. ## Prompts for Implementation Build renai.club as **one HTML file, one CSS file, one small JS module** — a single-route, immersive-scroll dreamwalk through the seven rooms described above. Target experience: an unhurried 70–90 seconds of drifting, with one quiet astonishment per room. **Storytelling and atmosphere are everything; conversion is nothing.** **Hard avoids** (these are corpus-overused or tonally wrong): no CTA buttons, no pricing block, no stat-grid, no testimonial row, no email signup, no contact form, no `card-grid` of features (91% of corpus — banned here), no `glassmorphism` frosted panels (82% — banned), no monospace typography (94% — banned), no stock photography (98% — banned), no slick linear `gradient` ramps (use watercolour bleeds instead), no `cursor-follow` cursor dot (89% — banned; the cursor is left alone, except see below), no `tilt-3d` card hover, no parallax-of-the-obvious-kind (we do *axis-changing* scroll instead of layered-depth parallax clichés). **Scroll architecture:** Use a scroll-snap-ish sequence of full-viewport sections, but vary the axis per the seven-room list. The horizontal corridor (Room 3) is implemented as a sticky section whose inner track translates on scroll. The "fall" lurch (Room 4 entry) is a brief eased overshoot. Room 5 ("scroll into") layers 4–5 translucent SVG planes and scales/translates them on Z as you scroll, so you appear to pass between the two chairs. Honour `prefers-reduced-motion`: collapse all axis-trickery to a calm vertical fade-through, keep the watercolour and the handwriting, drop the lurches. **The signature animation — the unfolding note (Room 2):** A room-sized folded paper. On scroll-progress through the section, it unfolds in three creases (CSS 3D transforms on nested elements, each crease a `rotateX`/`rotateY` with a paper-coloured backface), and the *inside surface* of the unfolded note IS the canvas onto which Room 3 fades. Reverse it on scroll-up. This is the moment the site is "about." **Motion vocabulary throughout:** everything drifts. Use long, soft, looping idle animations (8–20s, ease-in-out) — fog breathing (slow scale + opacity on the radial blooms), the handwriting-floor translating, the thread swaying, objects bobbing ±6–10px. Entrances are **slow watercolour bleeds**: new elements arrive by an SVG-mask that "soaks in" from one corner (animate the turbulence seed + mask scale), never a hard fade or slide. Room titles in Cormorant arrive letter-by-letter but *softly* — each glyph blooms in over ~120ms, staggered, like ink spreading. The thread "draws" down the left edge via `stroke-dashoffset` as you scroll (this is the one path-draw in the whole site). **The one cursor touch (in lieu of a follower dot):** when the pointer rests near one of the doubled figures, a faint thread of Faded Rose grows from the cursor toward the *other* figure — never connecting, retracting when you move. Subtle, slow, easily missed. Touch devices: omit. **Typography in motion:** the wordmark "renai" on Room 1 lies flat (perspective transform) on the drifting handwriting-floor; as you begin to scroll it lifts and rotates upright over ~80vh of scroll, as though standing up to greet you. Mid-word line breaks ("re-" / "nai", "co-" / "rridor") set in italic Cormorant for the swooning effect. **Room 7 exhale:** on final scroll, all on-screen objects ease upward and out the top of a window-shaped mask, fading as they go; the Paper Cream field warms slightly toward Peach Fog; one last Caveat line ("the door is still ajar") writes itself on the sill, slowly, then the page goes quiet. No "back to top," no footer links — the site simply rests. **Texture & finish:** fine paper-fibre noise overlay (~4% opacity, `mix-blend-mode: multiply`) sitewide; all colour transitions are watercolour-bloom radial masks with turbulence-displaced edges; the only "glow" is the soft Letter-Gold/Peach light bleeding around doors and windows. ## Uniqueness Notes Differentiators — each a deliberate departure from the frequency analysis: 1. **Axis-changing immersive scroll.** The corpus does `immersive-scroll` (13%) and `parallax` (90%) but almost always on a single, predictable vertical axis. renai.club changes the scroll *axis itself* per room — sideways corridor, falling lurch, push-into-depth — so the navigation dramatises dream-logic. I have not seen this axis-mutation approach in the reference corpus. 2. **Romance rendered as surrealism, not iconography.** "Love" sites default to hearts, roses, soft pink gradients, dating-app cynicism, or warm photography. renai.club treats *renai* as a Carrington/Murakami surreal experience — folded moons, handwriting you walk on, staircases that stop early. Surreal aesthetic sits at only 6%, dreamy-ethereal tone at 5%, and the combination *applied to romance* appears unique here. 3. **Handwriting-as-terrain + the unfolding-note-as-portal.** Caveat is used not as cute captions but as *flooring, water, and fog* — text as landscape. And the room-sized note that physically unfolds to reveal the next room (CSS 3D crease transforms) is a structural signature, not a decoration. No `card-grid` (91%), no feature cards anywhere. 4. **Watercolour bleeds instead of linear gradients; no glassmorphism, no monospace, no photography.** Three of the corpus's most reflexive moves — `gradient` ramps (94%), `glassmorphism` (82%), `mono` type (94%), `photography` (98%) — are all explicitly banned. Colour is SVG-turbulence "soaked in"; type is Cormorant/Caveat/Spectral; imagery is hand-built soft-collage SVG. 5. **Anti-conversion.** No CTA, no pricing, no stats, no testimonials, no signup, no `cursor-follow` dot, no `tilt-3d`. The "club" doesn't exist; the site is purely its daydream — directly against the CTA-heavy / stat-grid patterns the brief warns against. Chosen seed/style: **surreal dreamscape promo** — *aesthetic: surreal, layout: immersive-scroll, typography: serif-revival + handwritten, palette: muted (peach/rose/riverlight dusk), patterns: blur-focus + path-draw-svg (thread only), imagery: custom-illustration (soft surreal collage SVG), motifs: floating-elements + star-celestial (folded/papercraft), tone: dreamy-ethereal with a melancholy wire.* Avoided patterns from frequency analysis: card-grid (91%), glassmorphism (82%), mono typography (94%), photography (98%), linear gradient ramps (94%), cursor-follow dot (89%), magnetic (80%), tilt-3d (29%), hand-drawn aesthetic (94%) — and the warm/CTA-heavy commercial reflex generally.