# Design Language for renai.plus ## Aesthetics and Tone renai.plus is **the inside of a daydream that someone is having about a person they have not yet met.** "Renai" (恋愛) is the Japanese word for romantic love — not the noun *koi* (a crush, a spark) and not the noun *ai* (settled, familial devotion), but the *verb-shaped* in-between: the act of falling, the long suspended ache of it. The site renders that specific feeling as a **surreal dreamscape** — a Magritte sky crossed with a Leonora Carrington interior, where physics is polite but optional and every object is slightly in love with the object next to it. The mood is **dreamy-ethereal with a low warm pulse underneath** — like lying on your back on a summer evening with your eyes half-closed, watching the ceiling fan turn, thinking about someone. Nothing here is urgent. Nothing here is for sale in the obvious sense. The whole page behaves like the moment *just before* you say something out loud — held breath, swimming light, a door left ajar onto a corridor that shouldn't exist. Visual touchstones: René Magritte's *The Lovers* (the veiled kiss) and *Golconde* (raining figures); Leonora Carrington's egg-yolk-and-teal dream rooms; the floating-stone weightlessness of *Laputa*; Hayao Miyazaki's "ma" — the held empty beat; the chalky pastel-on-bruise palette of a Kettle's Yard still life; Toshio Saeki's clean line over a strange scene, drained of his menace and refilled with longing. Imagine a perfume advertisement directed by someone who has read too much Bachelard. **Surreal sits at 7% in the corpus, dreamy-ethereal at 6% — this site claims that quiet, half-lit room and refuses to share it with the hand-drawn-and-glassmorphism crowd.** ## Layout Motifs and Structure The composition is built on a layout the corpus barely touches: **organic-flow** (6%) with **layered-depth** (12%) — never a card-grid (91%), never a centered hero-and-columns, never a dashboard. The page is **a single continuous dreamscape that you fall *down* through**, vertically, the way you fall down through the layers of falling asleep. There are no "sections" with edges; there are *altitudes* — strata of a sky that change colour and density as you descend. - **The Falling Axis.** Scroll is downward motion through a vertical world. Five altitudes, each blending into the next with no hard seam — only a gradient of mood. Top altitude: pale waking morning. Bottom altitude: a deep velvet blue-violet, the colour of the inside of an eyelid in a dark room. Between them, the light *bruises* warmer and stranger. - **Floating bodies, never aligned.** Content blocks — a stanza of text, a single line, a small drawn object — float at irregular positions, slightly off any grid, the way furniture floats in a Carrington room. Each one drifts a few pixels on a slow sine loop, independently, at different periods, so the page is never quite still — it *breathes asynchronously*. - **The recurring door.** A single drawn door appears at three altitudes — open a different amount each time (ajar / wide / a sliver) — always opening onto a *different* small painted scene (a beach, a kitchen at night, a train window). It is the structural rhyme of the whole page: love as a series of doorways you keep finding. - **Ma, the held beat.** Between altitudes, generous voids — a full viewport of nothing but sky and one drifting object. The corpus calls this `ma-negative-space` (16%); here it is the *connective tissue*, not a decorative pause. - **No navigation chrome.** No sticky header, no menu, no breadcrumb. A small drawn moon in the corner is the only persistent element; it waxes as you scroll down. That is the entire UI. - **Mobile:** the falling axis is native to a phone. Altitudes get taller; floating bodies stack into a looser vertical drift; the door appears twice instead of three times. The breathing never stops. ## Typography and Palette **Fonts (Google Fonts only — a serif that yearns, a sans that whispers, a mono that pins one true thing to the page):** - **Display & altitude-titles — *Fraunces* (Variable, opsz 144, wght 300–600, SOFT 100, ital 1).** Set large and *italic*, optical size cranked high so the serifs go soft and liquid, weight kept light so it reads like handwriting that learned manners. Used for the wordmark "renai.plus" and the few line-long phrases that anchor each altitude. At italic + SOFT 100 it stops being a serif and becomes *a sigh in type form*. Letter-spacing slightly loose. It drifts on the same slow sine as everything else. - **Body & drifting stanzas — *Spectral* (wght 300 / 400, ital available).** A serif designed for screens, with a warm low-contrast calm. Used for the longer dream-prose passages. Generous line-height (1.85), measure kept narrow (~46ch) so each line floats rather than packs. Occasionally a single word slips into italic mid-sentence, like a thought catching. - **Marginalia & the one true line — *Space Mono* (wght 400, sometimes italic).** The dreamscape's reality anchor: tiny monospace captions floating beside the drawn objects ("door, ajar, 4:11am"), the moon's phase percentage, the altitude markers down the left edge ("alt. 02 — the bruising hour"). Mono at 7% — used here as the *one sober voice* in a room full of dreamers, which is exactly the renai feeling: you are being absurd and you know it and you do not care. **Palette — chalky pastel laid over a slow bruise, ending in eyelid-dark:** - `#F2EDE4` — **paper-white-warm** — the waking-morning altitude; the colour of light through a thin curtain. - `#E9C9C0` — **blush-chalk** — a powdery, slightly dusty pink; the colour of the recurring door's frame; the colour of saying it. - `#C9A4B8` — **dust-mauve** — the transitional bruise, where pink starts to remember it is also purple. - `#7C6A9C` — **dusk-iris** — mid-descent; a soft saturated lilac-violet, the colour of the hour the streetlights come on. - `#2E2748` — **eyelid-violet** — the bottom altitude; deep blue-violet, almost black, the inside of a closed eye in a dark room. - `#1A1628` — **near-night** — used only for the absolute floor of the page and for fine line-work over pale altitudes. - `#E8B04B` — **yolk-gold** — the single warm accent: the moon, the lamplight inside the night-kitchen door, the one word that glows. Used sparingly — gold should feel like a found thing, not a brand colour. - `#9CC2B5` — **seafoam-quiet** — secondary accent, only inside the "beach" door and as the faint outline of drawn clouds — a cool exhale against all that warm bruising. Contrast is deliberately *soft* on pale altitudes (paper-white with near-night line-work, never pure black) and *deep but never harsh* on dark ones (eyelid-violet with blush-chalk text). The whole page should feel like it is lit by one weak bulb and a lot of feeling. ## Imagery and Motifs **Everything is hand-built SVG line-and-wash, in the cool clean line of a Magritte object dropped into a Carrington colour field. No photography (98% of the corpus — declined here entirely). No 3D renders. No stock illustration. No glassmorphic cards.** Each motif is drawn with a single confident contour and filled with one chalky flat wash, occasionally with a soft grain overlay so it reads like gouache on toothy paper. **The Dreamscape Vocabulary (recurring objects, each appears 2–4 times at different altitudes, slightly changed each time):** - **The Door.** A plain panelled door, free-standing, no wall. Appears ajar / wide / a sliver. Each opening shows a tiny painted scene: a flat seafoam beach with one cloud; a night kitchen lit yolk-gold; a train window with violet hills sliding past. The door is *the* motif — love as the recurring offer of a threshold. - **Raining figures.** Far up, in the morning altitude, a thin scatter of small bowler-hatted silhouettes (a Magritte *Golconde* quote) — but here they are *falling*, slowly, the literal "falling" in falling in love. They never land. By the bottom altitude only one remains, much larger, still falling. - **The veiled pair.** Two simple head-and-shoulder shapes, faces draped in soft cloth (a quote of *The Lovers*), almost touching. They appear once, near the middle, and the cloth *lifts a millimetre* as the user's cursor approaches — then settles back. Never resolves. - **Floating stones / a small island.** A clump of rock with a tree and a single lit window, drifting (a Laputa quote). It is where the wordmark sits at the top, and it descends slightly through the page as you scroll, as if the whole island is sinking into evening with you. - **The waxing moon.** Bottom corner, persistent, the only "UI." Drawn as a thin crescent at the top of the page; fills to a heavy gold full moon at the floor. Captioned in mono with a fake phase percentage that ticks up with scroll. - **The half-open envelope / the unsent line.** A small drawn envelope, flap lifting, with one mono line of text escaping it like a moth — appears twice. The closest thing this site has to a "message," and it is deliberately *unfinished*. - **Slow clouds & a single bird.** Faint outline clouds drift across every altitude at different depths (parallax layers). One small bird crosses the entire page, top to bottom, very slowly, the whole time you are there — a thread stitching the dream together. Texture: a fine paper-grain overlay everywhere (low opacity), so even the flat washes feel hand-laid. On dark altitudes, a faint scatter of dust-mote specks catching the gold light. ## Prompts for Implementation Build renai.plus as **one HTML file, one CSS file, one JS module — a single vertical fall through a five-altitude dreamscape**, roughly a 70–90 second descent if you scroll at a thinking pace. Treat the whole page as a held breath. There is no CTA, no pricing block, no stat grid, no testimonial row, no feature matrix, no contact form, no email signup, no "sign up to renai.plus" button. There is only the fall, the doors, the moon, and a handful of lines of dream-prose. If a stakeholder asks "where is the conversion path" — there isn't one; the *experience itself* is the point. The domain name is allowed to simply *be* present, painted into the floating island at the top, and never explained. **The descent (five altitudes, no hard seams — only colour and mood blending):** 1. **alt. 00 — waking.** Paper-white-warm sky. The floating island drifts in carrying the "renai.plus" wordmark in soft italic *Fraunces*. Far above, the thin scatter of raining bowler-figures begins. One mono caption floats by: `the long word for falling`. Almost nothing happens. Let it be quiet for a full screen. 2. **alt. 01 — the door, ajar.** Background blends toward blush-chalk. The first Door appears, only ajar, showing the seafoam beach with one cloud. A short *Spectral* stanza floats beside it — three or four lines about the moment before. The veiled pair is visible far below, waiting. 3. **alt. 02 — the bruising hour.** Dust-mauve into dusk-iris. The veiled pair, centred-ish, faces draped — cursor approach lifts the cloth a millimetre, then it settles. The half-open envelope drifts past, its one mono line escaping like a moth: `i kept writing and not sending it`. The single bird crosses through this altitude. 4. **alt. 03 — the door, wide.** Deep dusk-iris going violet. The Door again, now wide open, showing the yolk-gold night kitchen — warmest light on the whole page. A longer *Spectral* passage, the emotional centre. The raining figures have thinned to two. 5. **alt. 04 — eyelid.** Eyelid-violet into near-night. The Door a third time, just a sliver, showing the train window with violet hills sliding by — the only animated *interior* (CSS keyframe of hills panning). The last raining figure, large, still falling, never landing. The moon is full and gold in the corner. One final mono line, very small, near the floor: `renai (恋愛), v. — see also: still falling`. Then the page simply ends in near-night. No footer, no links, no "back to top." **Animation & interaction (favour the longest, gentlest forms in the corpus, decline the punchy ones):** - **Asynchronous breathing.** Every floating body — text blocks, drawn objects, clouds — drifts on its own slow sine loop (8–22s periods, small amplitude, 4–14px). Nothing is ever perfectly still. This is the heartbeat of the whole thing. - **Parallax depth** (90% common — used here for *atmosphere*, not flash): clouds, the bird, the island, and dust motes all scroll at different rates, building real layered depth. Subtle. Never gimmicky. - **Scroll-driven colour blend.** The page background is one tall gradient; as you scroll, the *mood layer* (a semi-transparent colour wash over everything) cross-fades through the five altitude tones. Reveal of each new floating body via slow `fade-reveal` + a few pixels of upward drift (`stagger` the lines of each stanza, ~120ms apart) — never bounce, never elastic, never typewriter. - **The cloth-lift.** Cursor proximity to the veiled pair lifts the drawn veil ~3px with a long ease (700ms), settles back over 1.2s when the cursor leaves. The one truly interactive moment — and it deliberately *never resolves*. - **The waxing moon.** Scroll progress drives the moon's crescent → full morph (SVG path interpolation) and its mono phase-percentage caption. It is the only "progress bar," and it is disguised as the sky. - **The crossing bird.** One small bird `path-draw-svg`-style traverses the entire page height over the full session, on a lazy bezier — slow enough that you only notice it moved if you look back up. - **Reduced motion:** if `prefers-reduced-motion`, kill the breathing and parallax; keep the colour-altitude blend and fade-reveals; the moon still waxes. The dream becomes a still painting — which is also fine. - **Sound:** none. Silence is part of the held breath. (If a faint optional ambience toggle is ever added, default off, and make it a single warm low drone — never music.) ## Uniqueness Notes Differentiators, each a deliberate departure from the patterns the frequency analysis flags as saturated: 1. **Surreal-dreamscape, not hand-drawn-cute or frosted-glass.** Hand-drawn is at 95% and glassmorphism at 82% — the two default skins of the corpus. renai.plus is neither: it is a Magritte-meets-Carrington *surrealist painting you scroll through*, a class that sits near the bottom of the aesthetic chart (surreal 7%, dreamy-ethereal 6%). The line-and-wash SVG is illustration, but it is *cool, clean, strange* — the opposite of the warm doodly hand-drawn norm. 2. **Vertical *fall*, not card-grid or centered hero.** The corpus is 91% card-grid, 87% full-bleed, 82% centered. This site has no cards, no grid, no centered hero, no sections-with-edges — only five seamless *altitudes* of a sky you descend through. Organic-flow (6%) + layered-depth (12%) over a literal falling metaphor: as far as the corpus shows, this exact structure is unclaimed. 3. **The recurring door as load-bearing motif.** No tropical fish, no leaves, no circuit traces, no bowler hats *as decoration* — instead one drawn door appearing three times, opening a different amount onto a different painted scene each time. A single repeated object carrying the entire narrative is rare in a corpus that leans on motif *grids*. 4. **No conversion path, on purpose.** No CTA, no pricing, no stats, no testimonials, no signup — the experience is the deliverable. The brief explicitly biases toward full-screen narrative over CTA-heavy layouts, and this design takes that to its limit: the user arrives, falls, and leaves, having felt something. 5. **Mono as the sober voice in a dreaming room.** Space Mono (mono is at 94% — but almost always as "tech" texture) is recast here as the *one anchored, slightly self-aware caption voice* floating beside the surreal objects — `door, ajar, 4:11am` — which is itself the renai feeling: knowing you're being absurd and staying anyway. A deliberate re-contextualisation of the most overused typographic register in the corpus. Chosen seed / style: **surreal dreamscape promo** *(aesthetic: surreal, layout: organic-flow, typography: serif-revival, palette: pastel, patterns: fade-reveal, imagery: line-illustration, motifs: floating-elements, tone: dreamy-ethereal)*. Avoided patterns from the frequency analysis: hand-drawn (95%), glassmorphism (82%), photography (98%), card-grid (91%), full-bleed (87%), centered (82%), warm gradient (94/98%), cursor-follow / magnetic / spring (the punchy default trio), typewriter-effect, counter-animate, dashboard, bento-box. Borrowed sparingly and re-purposed: parallax (atmosphere, not flash), ma-negative-space (connective tissue, not decoration), mono (the sober caption voice), path-draw-svg (the one crossing bird).