# Design Language for renai.one ## Aesthetics and Tone renai.one is a **surreal dreamscape about the impossible geometry of falling in love** — a site built like a sequence of seven rooms inside a sleeping mind, where the architecture of romance keeps rearranging itself. "Renai" (恋愛) is the Japanese word for romantic love; ".one" is the absurd arithmetic of two people insisting they are a single thing. The whole site treats that arithmetic literally and surreally: staircases that loop into themselves, a moon that is also a doorway, two shadows that cast a third, a horizon line that folds like a letter. This is **René Magritte and Leonora Carrington collaborating on a love letter** — not romantic in the rose-petals-and-script-font sense (that convention is at 34% pastoral-romantic in the corpus and this site refuses it entirely), but romantic in the *uncanny* sense: the vertigo of recognising a stranger, the dream-logic where the rules of distance stop applying. The tone is **dreamy-ethereal** (6% in the corpus) crossed with **mysterious-moody** (11%) — hushed, slow, slightly unstable underfoot. Copy speaks in short oneiric statements, never marketing. Nothing here sells, persuades, converts, or counts. There is no product. renai.one is a 90-second drift through a lucid dream where love has been given a body and a floor plan, and both keep changing. The mood word the whole design answers to is **suspended** — the feeling of the half-second before you fall asleep, or the half-second before someone says your name. ## Layout Motifs and Structure The site is an **immersive-scroll** (14% in the corpus) sequence of **seven dream-rooms**, each one a full-viewport stage, but the scroll behaves wrong on purpose — it is **not a clean vertical column** (centered/full-bleed columns are at 82%/87% and feel like a hallway; this site feels like a house with no straight corridors). Instead the seven rooms are arranged on a **drifting diagonal armature**: each room enters from a slightly different edge of the screen — room one rises from the floor, room two slides in from the left wall, room three descends from the ceiling, room four tilts up from a corner, and so on, so the cumulative motion traces a slow falling spiral. The page never lets you forget it is a dream you are sinking through, not a document you are reading down. Structural rules: - **The Horizon Seam.** A single hairline runs across every room at a different height — sometimes at the bottom (a floor), sometimes at eye level (a sea), sometimes at the very top (almost a ceiling). It is always the same line, repositioned. In the final room it folds in the middle, like the crease of a letter being closed. - **The Recurring Door.** Every room contains exactly one door-shape — a tall rounded arch — but it is never used as a door: in room one it frames the moon, in room two it lies flat on the ground as a pool, in room three it is the silhouette of the second figure, in room four it is a window with the same room visible inside it (a Droste recursion, 2 levels deep, then it goes dark). The door is the site's spine. - **Two-and-then-three.** Wherever a figure appears it is rendered as a flat shadow-shape. Wherever there are two shadows, they overlap to cast a *third* shadow in the overlap zone — slightly darker, slightly warmer. This is the ".one" made visible: 1 + 1 = 3, and the 3 is the room you are standing in. - **No navigation chrome at all.** No top bar, no logo cluster, no hamburger, no footer, no progress bar. The only orientation cue is a faint **constellation of seven dim stars** fixed in the corner of the viewport; as you pass each room one star quietly brightens. Seven stars, seven rooms, and when all seven are lit they form a shape that is almost — not quite — a heart. - **Forbidden zones.** No card-grid, no bento-box, no hero-with-CTA, no pricing tier, no stat counters, no testimonial carousel, no email capture, no contact form, no FAQ accordion, no logo wall, no cookie banner, no chatbot bubble. ## Typography and Palette **Fonts (Google Fonts only — two voices, never blended):** - **Display / room-titles — `Fraunces` (variable, opsz 144, wght 300–600, SOFT axis high, ital available).** Used for the single line of dream-text in each room, set very large (clamp 2.6rem → 6vw → 5.5rem), low weight, optical size cranked to maximum so the serifs go soft and liquid — letters that look like they were written in water. Occasional words slip into the italic axis mid-sentence, the way a sentence in a dream loses its footing. Letter-spacing `-0.01em`, line-height `1.15`. - **Body / captions / the faint constellation labels — `Spectral` (serif, weights 200 / 300 / 400, with italics).** A quiet, slightly literary serif at light weights for the rare two- or three-line passages of oneiric prose. Set at `1.05rem`, line-height `1.85`, generous, airy, never justified. Micro-labels (the star names in the constellation, if shown at all) are `Spectral` italic at `0.7rem`, letter-spacing `0.18em`, low opacity. - No monospace anywhere. No grotesk sans. No handwritten font. (Mono is at 94% in the corpus — this site is one of the few that omits it entirely, on purpose: dreams have no terminals.) **Palette — "dusk inside the eyelid":** - `#0E1430` — **deep dream-indigo**, the base of every room, the colour the inside of closed eyes goes when you press them. - `#1B2347` — **midnight slate**, secondary ground, used for the lower half of rooms with a low horizon. - `#E8C8A0` — **lamplit sand**, the warm light that leaks under a door; used for the recurring door-shape's glow and for the single brightest figure-edge. - `#D98B8B` — **muted rose-clay**, a desaturated dusty rose — the *only* warm-pink in the whole site, used sparingly for the third (overlap) shadow and one petal-shaped accent. This is the romantic colour, kept almost to a whisper. - `#7FA8C9` — **dim periwinkle**, the colour of the constellation stars and the horizon hairline; cool, distant, faintly luminous. - `#F4EEE4` — **moon-bone**, near-white, used only for the moon-disc in room one and the folded letter-crease in room seven, so the brightest thing on screen appears exactly twice. Gradients are used, but only as **slow soft vertical washes between indigo and slate** — never as the loud rainbow gradient-mesh the corpus over-uses (94% gradient). The contrast is deliberately **low-key and nocturnal**, not high-contrast. ## Imagery and Motifs Everything is **SVG, hand-built, flat with soft-edged blurs** — no photography (98% in the corpus uses it; this site uses zero), no 3D renders, no stock illustration, no glassmorphic cards. The visual vocabulary is a small set of dream-objects, each appearing in a different impossible role per room: - **The Moon-Door.** A `#F4EEE4` disc the size of a tall arch, sometimes a full circle (room one, framed by the door), sometimes a thin crescent lying on the floor like spilled milk, sometimes eclipsed by a figure's head so the two share one outline. Renders with a 40px feGaussianBlur halo at 12% opacity. - **The Flat Figures.** Two simple shadow-silhouettes — not detailed people, just elongated soft-cornered shapes, one slightly taller. They are never shown touching; they are shown *overlapping* (so the third shadow appears) or shown back-to-back with one continuous outline, or shown as one figure with two shadows pointing different directions (impossible light, two suns). - **The Third Shadow.** In any overlap of the two figures, a `#D98B8B`-tinted, `#0E1430`-deepened patch — the only place the rose colour lives at any size. It pulses, very slowly (8s ease-in-out), like breathing. - **The Folding Horizon.** The periwinkle hairline that crosses every room. In the last room it animates a fold at its midpoint over ~2s on scroll-in, the two halves rotating toward each other like an envelope closing, and behind the fold a tiny `#E8C8A0` square (a stamp, a kiss) is revealed. - **The Staircase That Returns.** In one mid-sequence room, a Penrose-style impossible staircase drawn as flat parallelogram steps in two indigo tones, looping endlessly upward-into-itself. A single flat figure-shadow climbs it on a slow loop and never gets higher. - **The Constellation.** Seven dim periwinkle stars fixed in a viewport corner, connected by hairlines so thin they're barely there. They light one at a time as rooms pass; the final lit shape rhymes with — but is not quite — a heart, deliberately slightly off, because dream-symbols never resolve cleanly. - **Petals That Are Not Petals.** Occasionally a few `#D98B8B` soft-edged ovals drift across a room — they could be petals, could be moths, could be torn paper. Never named. Slow, sparse, never confetti-dense. ## Prompts for Implementation Build renai.one as **one HTML file, one CSS file, one ES module** — no framework, no build step. Treat the whole page as a **90-second descent through seven rooms of a lucid dream about love**. There is no CTA, no pricing, no stat grid, no testimonials, no contact form, no email signup, no FAQ, no logo wall. There is only the room sequence. **Storytelling structure (seven rooms, immersive-scroll, each entering from a different edge):** 1. **Room One — The Moon Behind the Door.** Deep indigo. The recurring rounded arch sits centred; through it, the `#F4EEE4` moon-disc, full, haloed. The first dream-line in Fraunces, soft and large: *"You arrive somewhere you have never been and the light already knows your name."* The room rises gently into view from the bottom (translateY 8vh → 0, opacity 0 → 1, ~1.2s, cubic-bezier soft). First constellation star lights. 2. **Room Two — The Door Lying Down.** Slides in from the left wall. The arch is now flat on the floor as a still pool; one flat figure-shadow stands at its edge, and the pool reflects *two* figures. Dream-line in Spectral, two lines, quieter: *"There were two of you before there was one of you. The water remembered first."* Second star lights. 3. **Room Three — The Other Outline.** Descends from the ceiling. The arch is now the silhouette of a second, taller figure; the two flat figures stand close, and where they overlap the **third shadow** appears for the first time, breathing slowly in `#D98B8B`-tinted dark. Fraunces line: *"To meet someone is to discover a room you both were already standing in."* Third star. 4. **Room Four — The Window That Is This Room.** Tilts up from the bottom-left corner. The arch is a window in the wall; inside the window is this same room, smaller, with the same window inside *that* — Droste, 2 levels, then the third level goes to flat `#0E1430`. The dream-line, half in italic: *"Love is the only mirror that keeps the warmth in the reflection."* Fourth star. (Use nested SVG `` with scale ~0.42 and translate, two iterations, third filled solid.) 5. **Room Five — The Staircase That Returns.** Enters from the right wall, slightly rotated. The impossible Penrose staircase in two indigo tones; one flat figure climbs it on a slow infinite loop (CSS `@keyframes` along an offset-path, ~14s linear, never arriving). The other figure waits at the bottom. Spectral, three lines: *"Some days the climbing is the staying. / You go up and up / and the going is enough."* Fifth star. 6. **Room Six — Two Suns, Two Shadows.** Rises diagonally from the bottom. One figure, but two light-sources off-frame, so it casts two shadows in different directions — and where the two shadows cross, again the warm third patch. A few `#D98B8B` petal-ovals drift across, slow and sparse. Fraunces: *"You learned to be lit from more than one direction at once. This is what they meant."* Sixth star. 7. **Room Seven — The Folding Horizon.** The final room slides up from the floor and settles. The periwinkle horizon hairline runs across the middle; on scroll-in it **folds at its midpoint** over ~2s, the two halves rotating toward each other like an envelope closing; behind the fold a tiny `#E8C8A0` square (a stamp / a kiss) is revealed and glows once. The moon reappears, a thin crescent, resting on the fold. Last dream-line, Fraunces, smaller and centred, like a signature: *"And the two of you went on being one of you — which is to say, more."* The seventh star lights; all seven brighten together for a held beat into the almost-heart shape; then a slow fade to deep indigo. End. No footer, no links, nothing after. **Motion & interaction notes:** - **Scroll is the only input.** Each room is a `position: sticky` / scroll-snap stage; intersection observers trigger the per-room entrance animations. Entrances are slow (1–1.4s), eased soft, never bouncy, never elastic, never spring-overshoot (corpus over-uses spring at 84% — this site uses pure long ease-out only; dreams don't bounce). - **The third shadow breathes** continuously wherever it appears: a 8s `ease-in-out` opacity/scale pulse, ~0.92 → 1.0 → 0.92. - **Parallax, but sleepy:** background indigo wash drifts at ~0.2×, moon at ~0.4×, figures at ~0.7×, foreground petals at ~1.1×. Subtle. The point is drift, not a 3D diorama. - **Cursor:** a faint `#7FA8C9` glow trails the pointer at ~14% opacity with heavy lag (~0.18 lerp) — like the moon following you through the window of a moving train. No magnetic buttons (there are no buttons). No tilt-3d cards. - **Reduced-motion:** all entrances become instant cross-fades, the staircase loop and breathing pulse freeze on a chosen frame, the horizon fold renders pre-folded. The dream still reads as a sequence of seven still rooms. - **Sound:** none. Silence is part of the dream. - **Type entrances:** each Fraunces dream-line fades up word-by-word with a tiny stagger (~60ms), and one word per line gets a slow drift into the italic axis and back (use `font-variation-settings` transition on `ital` / `slnt` over ~1.2s) — a word losing its footing, then recovering. ## Uniqueness Notes Differentiators, each a deliberate departure from the frequency analysis: 1. **Surreal as the *primary* aesthetic, not a garnish.** Surreal sits at 7% in the corpus, and where it appears it's usually a glitchy or vaporwave flavour. renai.one is genuine Magritte/Carrington dream-logic — impossible architecture, recurring transformed objects, oneiric one-line copy — applied to a romance domain that the corpus would normally render as 34%-pastoral-romantic rose-petal kitsch. The romantic content is delivered entirely through *uncanniness*, not sweetness. 2. **A romance site with almost no warm colour and zero photography.** The palette is nocturnal indigo with two tiny warm accents (lamplit sand, a whisper of rose-clay) and exactly two near-white objects total. The corpus is 98% warm-palette and 98% photography; this site is cool, dark, and 100% hand-built flat SVG. The single rose colour is rationed so hard it only ever appears as the "third shadow" — love made visible as a consequence, never as decoration. 3. **The scroll is intentionally non-linear.** Where 82–87% of the corpus is a clean centered/full-bleed vertical column, renai.one's seven rooms each enter from a different screen edge so the cumulative motion traces a slow falling spiral — the page *feels* like sinking into sleep, not scanning a document. Combined with the immersive-scroll layout (14%) and dreamy-ethereal tone (6%), this is a corner of the design space the corpus barely occupies. 4. **No monospace, no spring physics, no buttons, no chrome.** Mono type (94%), spring animation (84%), and card-grids (91%) are near-universal in the corpus; this site omits all three. Navigation is a seven-star constellation that quietly lights up — the only UI element on the entire page. 5. **The ".one" is the structural conceit, not just the name.** 1 + 1 = 3 is enacted literally in the overlapping-shadow motif, in the Droste window, in the folding horizon-as-envelope — the domain's arithmetic is the design's grammar. Avoided overused patterns from the frequency analysis: hand-drawn aesthetic (95%), glassmorphism (82%), photography imagery (98%), card-grid layout (91%), full-bleed/centered columns (87%/82%), warm palette (98%), loud gradient-mesh (94%), mono typography (94%), spring/magnetic/cursor-follow defaults (84%/79%/89%), tilt-3d cards (30%), CTA/pricing/stat-grid sections (forbidden outright). Chosen seed/style: **surreal dreamscape promo** — *aesthetic: surreal, layout: immersive-scroll, typography: serif-revival, palette: midnight-blue, patterns: fade-reveal, imagery: geometric-abstract, motifs: star-celestial, tone: dreamy-ethereal*