# Design Language for renai.day ## Aesthetics and Tone renai.day is a **surreal dreamscape** built around a single, impossible idea: that love (恋愛 — *renai*) is not a feeling you have but a *place* — a small private country with its own weather, its own physics, its own twenty-four-hour day. The site is that country, rendered as a slow descent through rooms that should not connect: a corridor that opens onto a tidal pool, a tidal pool whose floor is a ceiling, a window that looks out onto another window. Think Leonora Carrington's painted interiors, Remedios Varo's machinery of devotion, the soft impossible architecture of a half-remembered dream where you *know* this hallway and have never walked it. The mood is **dreamy-ethereal** — tender, a little uncanny, never twee. There are no hearts unless a heart is doing something strange (beating outside a chest, growing on a vine, used as a doorknob). The word *renai* is never translated on the page; it is the name of the country, and you learn what it means by being inside it. Romance here is treated as something vast and slightly frightening — the way a calm sea is frightening — rather than something pink. The emotional register is closer to longing than to courtship: this is the architecture of *thinking about someone all day*, the way an ordinary Tuesday becomes a cathedral when there is a person in it. ## Layout Motifs and Structure The page is one continuous vertical descent, but the spine is built from **diagonal-sections** (only 5% in the archive) — each "room" of the dreamscape is a full-bleed panel whose top and bottom edges are slanted, slightly different angles, so the seams between rooms are wedges of color rather than flat horizons. You are always falling slightly to one side. Within that, **layered-depth**: each room has three planes — a deep painted backdrop, a mid-ground of furniture/objects, and a near plane of drifting motes — that parallax against each other at different rates. **The descent — twenty-four hours of the country of renai, in seven rooms:** 1. **00:00 — THE ARRIVING ROOM.** Near-black indigo. A single door, ajar, light leaking warm-gold from behind it. The wordmark *renai.day* is small, set into the door's frame like a hotel-room number. One line of serif text floats: *"a day here is longer than a day."* 2. **04:00 — THE CORRIDOR THAT BREATHES.** A long perspective hallway, walls papered in a faint repeating motif of clasped hands. As you scroll the walls expand and contract very slowly, as if the corridor is inhaling. Doors line it; each door, on hover, shows a different sky through its keyhole. 3. **07:00 — THE TIDAL POOL (FLOOR/CEILING).** The room flips: what reads as a shallow lit pool is also, by a trick of the diagonal seam, the ceiling of the room before. Objects float in it — a teacup, a single shoe, an envelope, a clock with no hands. Text drifts up like bubbles, breaks at the surface. 4. **12:00 — THE NOON GREENHOUSE.** The brightest room. A glass conservatory where the plants are growing *organs* — a vine of small steady-beating hearts, a fern whose fronds are ears, a flower that is an open hand. This is the room where the site says the most: a short prose passage about what it is like to carry a person around inside an ordinary day. 5. **17:00 — THE WAITING PARLOR.** Long warm shadows. Two chairs face each other; one is occupied by an empty coat that holds its shape. A window shows late-afternoon gold. The room is about anticipation — the held breath before someone arrives. 6. **21:00 — THE ROOM OF SMALL LIGHTS.** Indigo again, but full of floating warm points — candles, fireflies, distant windows — that drift and gather toward the cursor like they recognize it. The text here is the quietest, almost a whisper. 7. **23:59 — THE DEPARTING ROOM / loop.** A mirror of the first. The same door, now closing, light narrowing to a gold thread. Footer information lives carved into the doorframe. The thread, fully closed, fades to indigo — and a single line invites the scroll back to 00:00. The day in the country of renai never actually ends; it just goes around. No top navigation. A thin vertical clock-spine pinned to the left edge — a 24-hour tick mark that fills as you descend, the only "you are here." ## Typography and Palette **Typefaces (Google Fonts only):** - **Cormorant Garamond** — the primary voice. An **elegant-serif** with extreme, almost watery contrast and long elegant ascenders; at large sizes (room titles, the prose passage) it looks hand-cut, slightly liquid, perfectly at home in a dream. Weights 300 and 500. Room time-stamps ("12:00 — THE NOON GREENHOUSE") are Cormorant Garamond 500, small-caps, wide letter-spacing (+0.18em). - **Spectral** — a warmer, sturdier serif for the few longer reading passages (the greenhouse prose), set generously leaded. It keeps the long-form text legible without ever breaking the period feel. Weight 400, italic used for the "overheard" whisper lines. - **Cousine** — a soft slab-ish monospace, used *only* for the vertical clock-spine ticks and footer/legal text in the departing doorframe. It is the one cold, mechanical voice in the building — the clock that the dreamy serifs are ignoring. **Palette — `deep-burgundy` core, candlelit (deep-burgundy is only ~2% in the archive):** - `#1A0E1F` — **Midnight Plum** — the indigo-black of the arriving/departing/small-lights rooms. The base of the whole document. - `#3B1B2E` — **Bruised Wine** — mid-tone burgundy for corridor walls, parlor shadows, the diagonal seam wedges. - `#7C2A3A` — **Old Velvet** — the saturated upholstery red; chairs, the empty coat, the heart-vine fruit. - `#E8C77E` — **Leaking Gold** — the warm light from behind doors, the small lights, the noon glow. The only true brightness; used sparingly so it always reads as *light*, never as a surface. - `#F4E9D6` — **Lampshade Cream** — primary text color and the conservatory glass-light; warm paper, never pure white. - `#5B7A6E` — **Greenhouse Sage** — the muted, slightly unreal green of the organ-plants. Cool relief against all the wine and gold. - `#9A6B7D` — **Dawn Mauve** — for the tidal-pool light and the 04:00 corridor sky-through-keyholes; a dusty rose that bridges burgundy and the gold. Gradients are radial and atmospheric (light pooling from a doorway, a window) — never the diagonal banner-gradient. Heavy use of multiply/overlay blend so colors feel *lit from within* rather than painted on. ## Imagery and Motifs **Primary mode: custom-illustration / mixed-media** — hand-painted-looking interior scenes (the rooms) with a fine ink line on top, in the lineage of mid-century surrealist painters. Each room backdrop is a single illustrated scene. Over everything sits a faint **grain-overlay** and a soft vignette, so the whole site feels like a series of oil paintings photographed under low light. **Recurring motifs (the country's heraldry):** - **Doors, ajar.** The connective tissue. Every room has one. Light always leaks gold from behind them. Doors are the only "links." - **Clasped / open hands** — woven into the corridor wallpaper, growing on the noon flower, printed faint behind text. Hands stand in for touch without ever drawing two people. - **Hearts doing strange jobs** — a heart as a doorknob, hearts as fruit on a vine, a heart beating in a bell-jar. Never a heart as decoration. - **Floating domestic objects** — teacup, single shoe, hand-less clock, sealed envelope — drifting in the tidal-pool room, slightly too slow. - **The empty coat that holds its shape** — the parlor's centerpiece; presence-as-absence. The site's quiet emblem of *waiting for someone*. - **Small warm lights** (`star-celestial` energy, but domestic) — candles, fireflies, far windows — gathering toward the cursor in the 21:00 room. - **The diagonal seam itself** — the wedge of `Bruised Wine` between rooms is treated as a motif: a crack of dusk that the next room's light spills through. ## Prompts for Implementation Build as a **single static HTML document** — no SPA, no framework, no build step beyond a Google Fonts link (Cormorant Garamond, Spectral, Cousine) and one CSS file. Aim for ~70KB HTML+CSS+JS before fonts and the room illustrations. Vanilla JS only: `IntersectionObserver` for room entrances and the clock-spine fill, `requestAnimationFrame` for the three-plane parallax and the cursor-gathered lights. Plain native scroll — **no scroll-hijacking**, no smooth-scroll libraries; the dream should respond to a real wheel. **Storytelling spine — non-negotiable:** the page *is* one full day inside the country of renai, descending through seven rooms (arriving → breathing corridor → tidal pool → noon greenhouse → waiting parlor → room of small lights → departing/loop). Build the rooms in order, top to bottom, each a `
` with slanted top/bottom edges (`clip-path: polygon(...)` with slightly different angles per room). The narrative — the *feeling of carrying a person through an ordinary day* — must be legible to someone who reads only the floating lines and never hovers anything. **Animation = atmosphere, never UI flourish:** - **Parallax** (90% in the archive — used here, but for *depth-of-room*, not page decoration): each room's backdrop / mid-ground / mote-plane translate at ~0.2 / 0.5 / 1.0× scroll speed. - **Breathing corridor:** room 2's walls scale on a slow 8s ease-in-out loop (`transform: scaleX()` on the wall planes), independent of scroll. - **Tidal-pool drift:** floating objects in room 3 bob on long, irregular sine paths; text "bubbles" rise on scroll-into-view and pop (a tiny `scale` + fade) at a "surface" line. - **Heart-vine:** in room 4, each fruit-heart has its own slightly-offset CSS `@keyframes` pulse — they should *not* be in sync; an orchard of small unsynchronized heartbeats. - **Cursor-gathered lights:** room 6's warm points lerp a fraction of the way toward the cursor each frame, with spring-y overshoot, then drift back when it leaves. - **Door light:** every door's gold leak gently flickers (a subtle `opacity` + `filter: blur()` wobble), like a real flame is behind it. On hover, a door's keyhole reveals a different sky (room 2) — a small `clip-path` reveal, no flip. - **The loop:** at the bottom, the closing gold thread narrows to nothing, fades to `Midnight Plum`, and a single Cormorant line fades in offering the return to 00:00 (anchor link to top, or a soft auto-scroll only on click). - Honor `prefers-reduced-motion`: freeze parallax, breathing, drift, and gathering; keep only slow opacity crossfades between rooms. **AVOID:** CTA buttons, sign-up forms, pricing blocks, stat-grids, testimonial carousels, feature cards, app-store badges, "hero + three columns." There is nothing to buy and no one to sign up — there is only a country to walk through. Avoid the archive's default card-grid + centered hero entirely. Avoid pink. Avoid literal couple photography. Avoid glassmorphism and hand-drawn-doodle aesthetics — this is painted, lit, and a little haunted. ## Uniqueness Notes Differentiators this design commits to (other CMassC sites should not duplicate these): 1. **Romance as *architecture you walk through*, not romance as feeling or product.** The entire site is a seven-room surrealist building representing one 24-hour day, descended via diagonal-edged sections with a vertical 24-hour clock-spine. No other site in the corpus treats its subject as a literal walkable country, and `diagonal-sections` (5%) + `layered-depth` three-plane parallax is a rare structural pairing. 2. **Candlelit `deep-burgundy` (~2% in the archive) with surrealist oil-painting interiors.** Wine, midnight-plum, leaking-gold, lampshade-cream — lit-from-within via multiply blending. The dominant archive read is warm/pastel/glassy; this is dim, velvety, and uncanny. The "hearts doing strange jobs" rule (heart-as-doorknob, hearts-as-fruit) is a deliberate refusal of the corpus's hearts-as-decoration default. 3. **Elegant-serif-driven (Cormorant Garamond + Spectral), with mono confined to a single clock.** Against an archive that is 94% mono-typography, renai.day is almost entirely watery high-contrast serif; the one mechanical voice (Cousine) exists only as the indifferent clock the dreamy text is ignoring. 4. **The empty-coat-that-holds-its-shape and the looping day.** Presence-as-absence as the site's emblem, and a narrative that explicitly never ends — 23:59 mirrors 00:00 and invites the loop. No conversion funnel, no destination; the structure itself argues that thinking about someone is a place you keep returning to. Avoided overused patterns from the frequency analysis: no glassmorphism (82%), no hand-drawn doodle aesthetic (94%), no card-grid (91%), no centered hero-dominant default, no warm/gradient banner palette (94–98%) — replaced with painted radial light-pooling. Chosen seed/style: **surreal dreamscape promo** — expressed as `aesthetic: surreal, layout: diagonal-sections, typography: elegant-serif, palette: deep-burgundy, patterns: parallax, imagery: custom-illustration, motifs: floating-elements, tone: dreamy-ethereal`.