# Design Language for renai.moe ## Aesthetics and Tone renai.moe is a **surreal dreamscape** about the *physics of a crush* — the moment falling-in-love (恋愛, renai) stops obeying gravity. Not a dating service, not a waifu gallery, not a confession board: it is a wandering, slightly hallucinatory diorama of what infatuation *feels like* — clocks that run slow, a moon that fits in a coat pocket, a corridor of doors that all open onto the same warm room, a staircase that loops back to the first time you noticed someone. The `.moe` TLD signals tenderness and a little cuteness, so the surrealism here is **soft, not unsettling** — closer to a Studio Ghibli end-credits sequence or a Leonora Carrington painting reimagined in candy-jewel light than to Dalí's heat-cracked deserts. The dominant tone is **dreamy-ethereal**: hushed, floating, a touch wistful, narrated like a half-remembered dream you're describing to someone over tea. Everything drifts; nothing snaps. The visitor should feel they have walked *into* someone's heart-weather and are being shown around politely. Surreal sits at only ~6% of the archive and dreamy-ethereal at ~5% — and most surreal entries lean loud/glitchy. This one is the opposite: **slow, warm, gravity-optional surrealism** rendered with the materials of a jewel-box. ## Layout Motifs and Structure The site is a **layered-depth** composition (only ~11% of the corpus) — not flat sections stacked, but a *parallax diorama* with at least five named z-planes that the visitor descends through, like sinking gently into a music box. There is no card-grid, no bento, no nav bar beyond a thin floating crescent in the top corner that, when clicked, simply scrolls home. **The five strata — "descent into renai":** 1. **THE SKY-CEILING (z-far).** Full viewport. A deep violet-indigo dome with slow-drifting collaged constellations — cut-paper stars, a hand-torn moon, a paper airplane orbiting nothing. The wordmark `renai.moe` floats here in large serif-revival, letters spaced wide, a few of them tilted off-baseline as if loosened by the lack of gravity. A single line beneath: *"a small museum of the way it feels."* 2. **THE FLOATING ROOM (z-mid-far).** A room with no floor — a rug, a lamp, a chair, a teacup, all hovering at different depths, each on its own parallax speed so they slide past one another as you scroll. Text here drifts *between* the objects rather than in a column: short prose-poems about the early symptoms ("the phone got heavier," "tuesdays started to matter"). 3. **THE CORRIDOR OF DOORS (z-mid).** A horizontal-feeling band: a row of mismatched doors (a wardrobe door, a fridge door, a torii gate, a tent flap) all ajar, all leaking the same honey-gold light. Hovering a door makes it open a little wider and exhale a faint glow. This is the closest thing to a "links" section — but framed as *thresholds*, not buttons. 4. **THE SLOW CLOCK (z-mid-near).** A wall of clocks at impossible angles, hands moving at wrong speeds (one runs backward, one barely moves, one spins). Centered, a melting-but-gentle clock — not Dalí-grotesque, more like warm wax — over a short meditation on *crush-time dilation*. 5. **THE POCKET MOON (z-near).** The closing plane: a darkened pocket of a coat, and inside it, a tiny glowing moon. Final line, small, lowercase: *"you can keep this one."* A barely-there footer-crescent. Composition rules: heavy **negative space** between strata so each feels like its own held breath; objects bleed past viewport edges (full-bleed within each plane); the eye is led on a slow diagonal drift downward, never a hard grid. On scroll, planes move at 5 different rates (0.2× to 1.1×) for genuine depth. ## Typography and Palette **Typefaces (Google Fonts only):** - **Cormorant Garamond** — the **serif-revival** voice and the soul of the site. Used for the wordmark and all display lines, in weights 300 and 500 only, often at very large sizes with generous letter-spacing. Its high-contrast strokes and slightly fragile ball terminals read as *romantic but not saccharine* — a Belle Époque serif that wandered into a dream. Display lines may set individual letters at slight rotations (−3° to +3°) and tiny vertical offsets, as if the type itself is weightless. - **EB Garamond** — body and prose-poem text, weight 400, italic used freely for the dream-narration asides. It pairs as the calmer, more legible cousin of Cormorant so long passages stay readable while keeping the antique-romance register. - **Caveat** — used *sparingly* (one or two phrases total) as a handwritten margin-note overlaid on collaged objects — a name half-erased, a "later." It signals a real hand touched this. **Palette — jewel-tones (only ~3% of archive) on a midnight-violet ground:** - `#1A0B2E` — **midnight aubergine**, the page ground / sky-ceiling deepest value. - `#2D1B4E` — **deep iris**, secondary background, the floating room. - `#7B2D8E` — **amethyst velvet**, primary jewel accent (door frames, constellation lines). - `#C9447A` — **garnet rose**, the warmth of the leaking light at its richest, used for hearts/glow cores. - `#E8A23D` — **honey topaz**, the honey-gold exhaled by the doors and the pocket moon. - `#3FBFB0` — **dream teal**, a cool jewel counter-note (clock faces, far stars) so it isn't all warm. - `#F4E6D0` — **moon parchment**, the near-white for body text and paper-cut highlights. Light always feels *emitted* (glows, halos, soft bloom) rather than lit from outside — this is interior weather. ## Imagery and Motifs **Primary imagery: collage** (~7% of archive) — every visual element looks **cut from paper** with slightly rough, hand-torn edges and a faint drop shadow, layered like a paper-theatre set: torn-paper moon, scissored constellations, a teacup clipped from an old catalogue, doors that are obviously flat cut-outs standing on edge. A subtle **grain overlay** unifies everything into one dreamed-up surface. **Recurring motif: star-celestial** (~4%) — constellations that aren't real ones; they spell tiny things if you trace them (a heart, an arrow, an ellipsis). Shooting stars cross between strata at long random intervals. The pocket moon is the celestial motif brought down to palm-size — the whole site's thesis: *the cosmic made intimate.* **Secondary motifs:** floating everyday objects (chair, lamp, teacup, key, single shoe) always rendered as paper cut-outs; ajar doors leaking light; clocks at wrong speeds; the occasional paper airplane drifting through frame. **No photography. No icon sets. No stock illustration.** Decorative dividers are hand-torn paper strips, not lines. ## Prompts for Implementation Build as a **single static HTML document** — no SPA, no router, no build step beyond a Google Fonts link (Cormorant Garamond, EB Garamond, Caveat) and one CSS file. Aim for ~60–70KB HTML+CSS+JS before fonts. Use `IntersectionObserver` for plane reveals and `requestAnimationFrame` for the parallax — no scroll-hijacking, no heavy libraries. **Storytelling spine:** the page *is* a guided descent through someone's heart-weather, five strata (sky-ceiling → floating room → corridor of doors → slow clock → pocket moon). The visitor never reads "about/features/contact" — they read *symptoms, thresholds, time, keepsake*. Lean into a **full-screen narrative experience**: each stratum occupies roughly a viewport-and-a-half, separated by deep dark negative space. **Animation, in order of importance:** 1. **Parallax layered-depth** — 5 z-planes scrolling at 0.2×–1.1×; objects within a plane also vary slightly. This is the whole effect; get it smooth and gentle (lerp the offsets). 2. **Morph** — the central clock slowly, continuously deforms (CSS `clip-path` or SVG path interpolation) like warm wax breathing; door silhouettes morph subtly wider on hover; a heart-constellation morphs into an arrow-constellation on a long loop. 3. **Float/drift idle motion** — every cut-out object has its own slow `translate`/`rotate` keyframe loop (8–20s, eased, out of phase) so nothing is ever perfectly still — the gravity-optional feeling. 4. **Glow exhale** — doors and the pocket moon pulse a soft radial bloom on hover/scroll-in (box-shadow + filter). 5. **Constellation path-draw** — star lines draw themselves with SVG `stroke-dashoffset` when a stratum enters view; shooting stars at long random intervals. 6. Respect `prefers-reduced-motion`: freeze parallax to static depth, keep only the gentlest opacity fades. **AVOID:** CTA buttons, "sign up" / "get started," pricing tables, stat-grids, testimonial carousels, feature cards, hero-with-button. There is nothing to buy and nothing to convert — only a small museum to wander. Doors are thresholds, not calls to action. ## Uniqueness Notes Differentiators this design commits to (other CMassC sites should not duplicate these): 1. **Soft, gravity-optional surrealism for a love theme.** Surreal (~6%) and dreamy-ethereal (~5%) are both rare, and the corpus's surreal entries skew loud/glitchy; this one is hushed, warm, slow — "infatuation as interior weather, narrated like a half-remembered dream." A paper-theatre dreamscape on the subject of a crush is a position no other site in the corpus holds. 2. **Layered-depth diorama as the entire structure.** Only ~11% use layered-depth, and almost none use it as *the whole site* — five named z-planes (sky-ceiling, floating room, corridor of doors, slow clock, pocket moon) the visitor descends through, with continuous idle drift on every cut-out. Distinct from kanojo.love's flat single-column immersive-scroll. 3. **Hand-torn-paper collage + un-real constellations + jewel-tones on midnight aubergine.** Collage imagery (~7%), star-celestial motif (~4%), and jewel-tones palette (~3%) are each individually uncommon; combined into one paper-cut, emitted-light, candy-jewel night world they form a signature no other entry shares. Cormorant Garamond / EB Garamond display-serif romance reinforces it. 4. **Deliberately avoids the archive's defaults:** no card-grid, no bento-box, no glassmorphism, no photography, no hand-drawn line illustration, no CTA-heavy / pricing / stat-grid layouts, no cursor-follow gimmick — the only "interaction" is doors exhaling light as you pass. Chosen seed/style: `aesthetic: surreal, layout: layered-depth, typography: serif-revival, palette: jewel-tones, patterns: morph, imagery: collage, motifs: star-celestial, tone: dreamy-ethereal` (seeds.json: "surreal dreamscape promo"). Avoided overused patterns from frequency analysis: hand-drawn (94%), glassmorphism (82%), photography (98%), card-grid (91%), warm palette (98%), cursor-follow (89%), mono typography (94%).