# Design Language for renai.xyz ## Aesthetics and Tone renai.xyz (恋愛 — "the falling-in-love kind of love") is **a dream you half-remember at 4:11 a.m., in which two people you've never met are in love and you are the weather between them**. The site is a single, slow, full-screen **surreal dreamscape** — not a romantic website (no hearts, no soft-focus couples, no cursive "forever"), but a *dream-logic essay on what wanting-someone feels like from the inside*. The reference points are Leonora Carrington's painted interiors where the furniture has organs, René Magritte's daylight-at-midnight, Tarkovsky's floating sleepers in *The Mirror*, and the specific physical sensation of a phone going warm in your hand because you've been holding it waiting for one message for two hours. The mood is **tender and slightly wrong** — like a love letter written in the second person to someone whose name keeps changing. Warm where you don't expect warmth (the shadows are peach), cold where you do (the "heart" is a glass anatomical model full of weather). It is sincere — this is not ironic detachment about romance — but it refuses sentimentality by routing every feeling through an impossible image: longing rendered as a staircase that only goes up, jealousy as a second moon, the first text-back as a door opening in a field with no house attached to it. Surreal sits at ~8% in the 534-design corpus and almost never appears as the *governing* logic of a page — usually it's a decorative blob or a glitch accent. Here surrealism is the **epistemology**: the page argues that love is genuinely surreal — that being in love is the only universally available altered state — and so a literal layout would be a lie. ## Layout Motifs and Structure The page is a **vertical descent through nine dream-rooms**, but the descent is *physically inverted*: scrolling down moves the viewer **upward** through the rooms (the scroll-position-to-spatial-position mapping is reversed via a CSS `transform: translateY()` driven by scroll, so the rooms stack and the camera rises through them like a slow elevator with no shaft). This is **immersive-scroll** (14%) crossed with **layered-depth** (12%) — two underused-relative-to-the-big-three tokens — and it deliberately refuses **card-grid** (91%) and **dashboard** (34%) entirely. There is not one card on this page. **The room system (each room = 100vh, full-bleed, no gutters):** 1. **The Antechamber** — A field at dusk. A single ordinary door, freestanding, no walls, slightly ajar. Title room: "renai.xyz" set on the door itself. Below the fold-hint: the words "come in" mowed into the grass as a slightly darker green path. 2. **The Hallway That Is Also a Throat** — A corridor in warm peach light; the walls breathe (subtle 6s scale-pulse). This is the room about *anticipation* — text here is the inner monologue of waiting. 3. **The Two-Moon Window** — A bedroom with a window showing two moons, one of which is jealous. Room about *the first complication*. 4. **The Glass Heart Room** — A plinth holds an anatomical heart made of clear glass; inside it, weather (a tiny cloud, occasional lightning, a single bird). This is the centerpiece room. It is the closest the page comes to a "hero," and it has no headline and no button. 5. **The Staircase That Only Goes Up** — An Escher-adjacent stair, painted in dawn colors, that loops. Room about *escalation / vertigo*. 6. **The Telephone Garden** — A meadow where the flowers are rotary-phone cradles; one rings (a faint pulsing glow + a barely-audible SVG-drawn sound-ring). Room about *the message arriving*. 7. **The Mirror With Your Back In It** — A vanity mirror that reflects the back of the viewer's head. Room about *being seen / being changed*. 8. **The Long Table Set For Two, In A Boat** — Self-explanatory; the boat is on grass, not water. Room about *the ordinary future imagined too soon*. 9. **The Door Again, From Outside, Closing Slowly** — The Antechamber's door, seen from the other side, swinging shut over 40 seconds whether you scroll or not. The colophon is the doormat. A thin **horizon line** (1px, color #C9483A, the "thread of fate" red) runs across every room at the same vertical position — the only fixed element — so that as the rooms change the line stays, a single red thread stitching the whole dream together. (This nods to the East Asian "red thread of fate," 운명의 붉은 실, without being literal about it.) No nav. No menu. No progress bar except the red thread implicitly is one. No footer except the doormat. ## Typography and Palette **Fonts — three voices, all Google Fonts only:** - **Display & room-titles — *Fraunces* (Variable, opsz 9–144, wght 100–900, SOFT and WONK axes engaged).** Fraunces is chosen because its "wonk" axis lets the serifs visibly *misbehave* at large sizes — the italic `g` curls back on itself, the `a` leans — which is exactly the controlled-wrongness the dreamscape needs. Room titles are set huge (clamp 3.5rem–9rem), italic, opsz maxed, wonk pushed to ~30, in #2A1F33. They should read like words seen in a dream: legible, but the letters are *doing something*. - **Body & inner-monologue — *Newsreader* (Variable, opsz 6–72, italic available).** A literary serif with a soft optical-size response; set at 1.25rem / 1.7 for the second-person prose. The prose is the spine of the page — short paragraphs, lots of line breaks, set in a 34ch measure, centered in each room or floated to wherever the dream-image leaves room. Italic Newsreader is used for the "remembered" lines (things the narrator is quoting from the beloved). - **Captions, the doormat colophon, and the "come in" path-label — *Spline Sans Mono* (Variable, wght 300–700).** The single mono voice (mono is 94% in the corpus — unavoidable, but here it is *minimized* to ~3% of the page's text, used only for the cold administrative bits: the colophon, image-credits-style captions like "fig. iv — the glass heart, contents: one cloud", and timestamps). The contrast of clinical mono against the swooning serifs is the point. **Palette — "warm shadows, cold heart" (warm-leaning, but the gradients are atmospheric, not the corpus's default sunset-gradient):** - `#F4E3D7` — **Dawn Plaster**: the dominant ground, a warm off-white that reads as plaster wall lit from a low sun. - `#E8B79A` — **Peach Shadow**: the impossible warm shadow color; used for the breathing-hallway walls and all shadow fills (shadows on this page are peach, never gray). - `#2A1F33` — **Aubergine Midnight**: near-black with violet in it; all display type, the door's silhouette, the deep ends of rooms. - `#7C9B8E` — **Sleeping Sage**: the dusk-field green, the "come in" path, the meadow. - `#C9483A` — **Thread Red**: the 1px horizon line of fate; appears NOWHERE else as a fill, only ever as a 1px line, so when you do see it your eye snaps to it. - `#A8C0D8` — **Glass-Heart Blue**: cool, slightly desaturated; the anatomical heart, the two moons, the cold edges. The page's only cool color and it lives almost entirely in Room 4. - `#D9B45A` — **Dream-Brass**: a muted antique gold for the telephone-flowers, the boat's fittings, the mirror frame; the "object" color. Backgrounds within rooms are very soft 2-stop gradients between Dawn Plaster and Peach Shadow at slightly different angles per room (so transitions between rooms feel like the light changing, not like a slide deck). High-contrast is reserved for type-on-plaster only. ## Imagery and Motifs **No photography. No stock romance imagery. No 3D product renders. No emoji. No icon set.** Every visual is one of: (a) a hand-built **inline SVG tableau** per room, drawn in a flat-with-soft-shadows storybook-gouache style; (b) a **CSS-and-SVG procedural element** (the breathing walls, the weather inside the glass heart, the closing door); or (c) **typography as image** (the "come in" path, the room titles set so large they become the picture). **Recurring motifs (the dream's vocabulary, deployed like leitmotifs):** - **The Door** — opens the page (ajar, from inside), closes the page (swinging shut, from outside). Same door, redrawn. It is the page's only literal "navigation" metaphor. - **The Red Thread** — the 1px #C9483A horizon line; the only continuous element. Occasionally a room's SVG tableau will let the thread "snag" on something (a flower-phone's dial, the mirror's edge) — i.e., the SVG is drawn so the line appears to pass behind or catch on an object — but the line itself never changes. - **Weather-where-it-shouldn't-be** — a cloud inside the glass heart; a single moon multiplied; light coming from a wrong angle. Every room contains exactly one "weather event" that doesn't belong indoors. - **The Wrong Reflection** — surfaces reflect things they can't (the mirror shows the back of your head; the boat's hull, on grass, shows water). - **Furniture-as-organ / organ-as-furniture** — the Carrington move: the heart is on a plinth like sculpture; the staircase has a pulse; the table is in a boat. Objects behave like bodies and bodies behave like rooms. - **Path-draw SVG** for every line in every tableau on first reveal — the dream *draws itself* as you arrive in each room (the door's outline, the staircase's risers, the heart's chambers all stroke-in over 1.2–2s). ## Prompts for Implementation Build renai.xyz as **one HTML file, one CSS file, one ES module** — no framework, no build step, no service worker, no analytics, no cookie banner. The page is a ~6-minute slow ascent through nine dream-rooms. There is **no CTA, no signup, no pricing block, no stat-grid, no feature-grid, no testimonial carousel, no FAQ, no logo wall, no team section, no contact form, no chatbot, no newsletter capture, no "as seen in", no hero-with-button**. If a stakeholder asks "where's the call to action" the answer is: the door is ajar; that's the invitation; there is nothing to buy. **Structure & motion:** - Lay the nine rooms out as nine stacked `
` elements, each `min-height: 100vh`, full-bleed. Reverse the felt direction of travel: bind a scroll listener (rAF-throttled, or `scroll-timeline` where supported) that translates the rooms-container so scrolling *down* visually rises *up* through the stack. Keep this subtle — the viewer should feel a quiet wrongness ("am I going up?") not motion sickness. Provide `prefers-reduced-motion`: in that mode, rooms simply stack normally with no inversion and tableaux appear fully-drawn (skip the path-draw). - The **red thread** (`` 1px line, `#C9483A`) is `position: fixed`, full viewport width, at ~58vh. It is the only fixed element. Never animate it. - Each room's SVG tableau **path-draws on entry** via IntersectionObserver: `stroke-dasharray`/`stroke-dashoffset` transition, 1.2–2s, staggered per sub-path (the **stagger** pattern, ~70% in corpus — used here, but in service of "the dream assembling," not a list of features animating in). Fills fade in after the strokes complete (fade-reveal). - **The breathing hallway (Room 2):** the corridor walls (two CSS pseudo-elements or two SVG rects) do a 6s `ease-in-out` infinite `scaleX(1 → 1.015 → 1)` so the hallway inhales. Pair with the prose, which is the narrator's held breath. - **The glass heart (Room 4):** an SVG anatomical-heart outline filled with a `clipPath`; inside the clip, a tiny CSS-animated cloud drifts left↔right (12s), and every ~9s a 2-frame "lightning" flickers (a quick opacity pop on a jagged path). A single bird (one path, ~14 keyframes) crosses the heart's interior once per minute. No text in this room except a Spline Sans Mono caption: `fig. iv — the heart. contents: one cloud, weather permitting.` - **The telephone garden (Room 6):** flowers whose blossoms are rotary-phone cradles (SVG). One blossom "rings": a pulsing `box-shadow`/glow + concentric SVG ripple rings drawn outward (the **ripple** pattern, ~14%) every 4s. Optional, gated behind a user gesture and default-off: a faint single-tone WebAudio "ring." Never autoplay sound. - **The mirror (Room 7):** the mirror's "reflection" is an SVG of the back of a head + shoulders, rendered slightly blurred (`filter: blur(0.5px)`) and *very* subtly parallaxing opposite the scroll (so it feels like it's *almost* tracking you). This is the only cursor-aware moment on the page: the reflected head turns ~3° toward the cursor (magnetic/cursor-follow, both ~80%+ in corpus — used exactly once, and unsettlingly). - **The closing door (Room 9):** the door (SVG `` with `transform-origin` at its hinge edge) rotates from open to shut over 40s on an `ease-in` curve, *time-driven not scroll-driven*, starting when Room 9 enters view. When it's shut, the page is over; the doormat (colophon) is the last thing visible. The colophon, in Spline Sans Mono: domain, year, the line `made of: nine rooms, one door, a red thread, and weather kept indoors.` **Tone of the prose:** second person, present tense, short. It should sound like someone narrating a dream they're embarrassed to be moved by. No headlines that summarize ("Find Love Here") — instead, lines that *are* the experience ("The hallway is warm because you've been here a while. You tell yourself you'll leave if nothing happens by the time the light moves off the third tile."). ## Uniqueness Notes Differentiators from the 534-design corpus: 1. **Surrealism as the governing epistemology, not an accent.** Surreal is ~8% of the corpus and almost always a blob/glitch garnish. Here every layout and content decision is generated by dream-logic — the page literally argues that love is the universal altered state, so a literal layout would be dishonest. Nine fully-imagined "dream-rooms," each a single SVG tableau, is a structure that does not exist elsewhere in the corpus. 2. **Inverted scroll-to-space mapping: scrolling down rises up.** A subtle reversal of the immersive-scroll convention — the camera ascends through stacked rooms as you scroll down. Combined with the "no cards at all" rule, this rejects the corpus's two most overused layouts (card-grid 91%, dashboard 34%) outright. 3. **A 1px fixed "red thread of fate" as the only persistent element — and the page's only use of its accent color.** #C9483A appears nowhere as a fill, ever; it exists solely as one 1px line spanning every room. A single hue, reserved for a single hairline, is a discipline absent from the gradient-soaked corpus (gradient ~94%). 4. **A romance domain that contains zero romance clichés** — no hearts-as-decoration (the one "heart" is a glass anatomical model full of weather), no couples, no cursive, no pink-and-red Valentine palette; the palette is "warm shadows, cold heart" (peach shadows, aubergine midnight, one cool blue quarantined to one room). It refuses warm-inviting/pastoral-romantic (the two most common romance-adjacent tones at 22% and 34%) in favor of *tender-and-slightly-wrong*. 5. **Cursor-follow / magnetic used exactly once, weaponized.** Those patterns are at ~80%+ saturation; here the only cursor-aware moment is a mirror that reflects the back of your head and turns 3° toward your pointer — one unsettling beat instead of pervasive playful reactivity. Mono type, likewise at 94%, is deliberately starved down to ~3% of the page (only the clinical colophon and "fig." captions). 6. **Time-driven, non-scroll narrative closure.** The final room's door swings shut over 40 seconds regardless of scroll input — the dream ends on its own clock, not yours. Almost nothing in the corpus surrenders pacing control to wall-time like this. Chosen seed/style: **"surreal dreamscape promo"** (from seeds.json) — realized as `aesthetic: surreal, layout: immersive-scroll + layered-depth, typography: serif-revival (Fraunces/Newsreader) with a minimized mono voice, palette: warm atmospheric (non-default, peach-shadow/aubergine), imagery: custom-illustration (per-room SVG tableaux), motifs: flowing-curves + the-door + the-red-thread, tone: dreamy-ethereal crossed with tender-uncanny*. This intentionally claims underused-relative slots (surreal 8%, immersive-scroll 14%, layered-depth 12%, custom-illustration 4%, dreamy-ethereal 7%) while metabolizing the unavoidable overused tokens (gradient, mono, cursor-follow, stagger) into near-invisibility or single-use weaponization. Avoided patterns from the frequency analysis: card-grid (91%), dashboard (34%), photography (98% — none used), hand-drawn-as-aesthetic (95% — this is painted-storybook, not doodle), glassmorphism (82% — the only "glass" is one literal anatomical heart, not a UI treatment), warm-inviting/pastoral-romantic tones, and the typical multi-stop sunset gradient.