# Design Language for renai.dev

## Aesthetics and Tone

renai.dev — "renai" (恋愛, *the state of being in love*) rebuilt as a developer's diary that has slipped its banks and flooded into dream-logic. This is **surreal dreamscape** without the glitchy carnival cliché: a hushed, half-lit interior where a half-finished love letter floats face-down above a desk, the desk floats above a tide pool, and the tide pool reflects a ceiling that isn't there. The mood is **dreamy-ethereal crossed with the quiet melancholy of 4 a.m. unsent drafts** — tender, slightly disoriented, never twee. Think of the wet-on-wet edges of a Remedios Varo interior, the soft impossible architecture of a Magritte room, the patience of a long-exposure photograph of a sleeping house — all narrated in the second person, like the site is reading your own unsent message back to you.

Every surface behaves like it is underwater-adjacent: not actually submerged, but *remembered* through water. Cursors leave a faint refractive wobble. Headings settle into place the way silt settles. Nothing snaps; everything *arrives*. The tone of voice in copy is intimate, lowercase, fragmentary — sentences that trail into ellipses, then quietly resolve a paragraph later. The site is a feeling that hasn't decided whether it's a confession or a changelog, and it never resolves that tension on purpose.

This is explicitly **not** a dating-app landing page, not a SaaS pitch, not a product. It is an *experience* — a single dream you walk through once.

## Layout Motifs and Structure

**Primary structure: a vertical "descent through a dreamed house" — six floors, each a full-viewport scene, connected by an `immersive-scroll` that feels like sinking rather than scrolling.** No card-grid anywhere. No bento. No dashboard. The scroll metaphor is *gravity in a dream*: you fall slowly between floors, and each floor is a stacked, slightly-tilted plane (1.5°–3° rotation, alternating direction) so the building leans like it's exhaling.

- **Floor 0 — The Threshold (hero):** the unsent letter, face-down, suspended mid-air over a desk that has no legs. Just the letter, a single line of text rising through it like a watermark, and a faint pool of light on the floor below where its shadow *should* be but isn't quite. `ma-negative-space` dominates — 70% of the viewport is dim, breathing air. The site title "renai" is set very small, lower-left, as if hand-written in the margin.
- **Floor −1 — The Corridor of Drafts:** a horizontal-feeling band *inside* the vertical scroll — paragraphs of half-letters drift past at different parallax depths, some legible, some blurred to texture, like passing open doors.
- **Floor −2 — The Tide Pool Room:** the desk's reflection in water that occupies the whole floor; ripple rings expand from wherever the cursor touches; text appears *upside-down first* (in the reflection) then rights itself.
- **Floor −3 — The Inventory of Small Evidence:** not a stats grid — a slow vertical `timeline-vertical` of *objects* (a bus ticket, a screenshot timestamp, a borrowed hoodie), each one a single floating still life with one sentence of context. One object per screen-height. They are catalogued the way you'd catalogue commits, but they're memories.
- **Floor −4 — The Ceiling That Isn't There:** the layout inverts — content hangs from the *top* of the viewport, scrolling reveals sky-that-is-also-floor. A `layered-depth` parallax of translucent clouds that are actually crumpled paper.
- **Floor −5 — The Reply (closing):** the letter, finally, turns face-up. The whole accumulated text reassembles into one short message. Then the page very slowly fades to the dim of Floor 0 again — the dream loops, implying you could descend forever.

Navigation is `minimal-navigation`: a single slender vertical line down the right edge with six faint nodes (one per floor), each a tiny droplet shape. The droplet for the current floor swells gently and a depth-marker ("−2 / six") emerges beside it on hover, in mono. No top bar, no hamburger, no logo lockup, no footer, no links out.

## Typography and Palette

**Type system — Google Fonts only:**

- **Display / headings — `Fraunces`** (variable, optical-size + soft/wonky axes leaned toward the *soft* end, weights 300–500, frequently italic). Fraunces' inktrap-meets-old-style warmth gives headings the feel of a letter pressed too hard with a fountain pen — slightly bleeding, never sterile. Used at large sizes for the floating watermark text and floor titles, almost always in lowercase, often italic, letter-spacing `-0.01em`.
- **Body / narration — `Newsreader`** (variable, weights 300–400, italic available). A reading serif designed for screens that still feels like newsprint at 5 a.m. Long measure (66–72ch), generous leading (1.85), `text-wrap: balance` on short paragraphs. Lowercase-leaning, ellipsis-friendly.
- **Mono / margin notes & depth markers — `Spline Sans Mono`** (weight 400). Used *only* for the floor-depth indicators, timestamps in the Inventory, and tiny marginalia (like a developer's `// note to self`). It is the one "dev" tell in the whole design — small, quiet, monospaced truth in a sea of dream.

**Palette — a warm dim, water-soft, never neon:**

- `#14131B` — *Ink Midnight* — the base dim; the dream's ambient dark, faintly purple, never pure black.
- `#221F2E` — *Submerged Plum* — secondary surface / panel float color.
- `#F4ECDD` — *Letter Paper* — the warm cream of every page of the letter; the only true "light."
- `#E9DAC0` — *Aged Edge* — paper in shadow, deckled edges, the inventory objects' base tone.
- `#C97B6E` — *Sealing Wax Rose* — the one warm accent: the wax seal, the underline-draw on links, the swell of the active droplet. Used sparingly, like a heartbeat.
- `#7C93A8` — *Tide Glass* — the cool counter-tone: water reflections, blurred drafts, the cloud-paper of Floor −4.
- `#3D4C58` — *Wet Slate* — deep water shadow, the rotated-plane underbellies.
- `#9C8FB0` — *Lavender Silt* — mid-tone for settling-text transitions and faint grain.

Gradients exist only as **soft radial bloom** (warm light pooling) and **vertical water-fog** (Tide Glass dissolving into Ink Midnight) — never linear button gradients. A persistent 4–6% film grain (`grain-overlay`) sits over everything to keep it from feeling digital-clean.

## Imagery and Motifs

- **The Letter** — recurring hero object: a single sheet of `paper-aged` cream, hand-drawn in SVG with a true deckled (torn-deckle) edge built from ~40 bezier micro-bumps, a faint horizontal rule grid bleeding through at 6% opacity, and one wax seal (`#C97B6E`, with a pressed-thumb texture). It rotates slowly in 3D on `tilt-3d`, catches a moving specular sheen, and is the only element that ever shows handwriting (a looping script path-drawn live with `path-draw-svg`, in Sealing Wax Rose, never fully completing on Floors 0–4).
- **Water that remembers** — ripple rings (`ripple`) emanate from cursor contact on the Tide Pool floor; reflections are real CSS-transform mirrored copies with a Tide Glass tint and gaussian blur, wobbling on a slow sine.
- **Impossible interiors** — Magritte-flavored SVG line scenes: a doorway opening onto a doorway, a window with the same view inside and out, a staircase that descends from its own top step. Drawn in 1px Wet Slate strokes, never filled, floating untethered.
- **Crumpled-paper clouds** — Floor −4's "sky" is layers of scanned-looking crumpled `#F4ECDD` paper at varying blur/opacity, drifting on `parallax`.
- **The Inventory still lifes** — each small-evidence object (bus ticket, screenshot bezel, hoodie, a single earbud, a movie stub, a saved location pin) rendered as a soft `custom-illustration` in muted tones with a long, low cast shadow that falls *upward* — dream physics.
- **Settling text** — letters of headings begin slightly scattered/blurred and *settle* into alignment like silt finding the bottom (`stagger` + `blur-focus`), never bouncing.
- **No photography. No stock faces. No icons-as-bullets. No charts.** The only "data" visualization is the Inventory timeline, and it's hand-drawn, undated except in whispering mono timestamps.

## Prompts for Implementation

Build renai.dev as **one HTML document, one CSS file, one ES module** — no framework, no build step. It is a ~100-second guided fall through a dreamed house, narrated in second person. **There is no CTA, no signup, no email capture, no pricing, no testimonials, no stats grid, no logo wall, no contact form, no FAQ, no newsletter, no cookie banner, no nav menu, no footer, no outbound links.** If a section feels like it wants a button, delete the section.

**Scroll & motion engine:**
- The page is six `100svh` "floors" stacked vertically. Scrolling is normal (no scroll-jacking), but every floor has a `position: sticky` inner stage so scenes hold for ~1.2 viewport-heights before releasing — the *sink* feeling.
- Use `IntersectionObserver` + a small rAF loop. All entrances are **spring-eased toward rest** (overdamped — `cubic-bezier(.16,1,.3,1)` or a tiny spring sim with zero overshoot). Nothing bounces, ever. Things *arrive* and *settle*.
- A custom cursor layer: a faint Tide-Glass refractive blob (8–12px) that lags the real cursor by ~80ms with `spring` follow, and on the Tide Pool floor spawns `ripple` rings on `pointermove` (throttled). On other floors it leaves a 600ms-fading lavender-silt smudge.
- Persistent grain: a fixed full-screen `<canvas>` regenerating subtle noise at ~12fps at 4–6% opacity, plus a CSS `mix-blend-mode: overlay` paper texture.
- `prefers-reduced-motion`: kill the fall-stickiness, the cursor lag, the canvas grain animation (keep a static grain), and the ripples; reveal everything with a plain 400ms fade. The dream still reads as a quiet illustrated letter.

**Per-floor build notes:**
1. **Threshold:** SVG letter face-down, suspended; one line of Fraunces-italic text rising through it as a 9%-opacity watermark, slowly drifting +4px on a 14s loop. Light pool below it = a blurred radial bloom that does NOT match the letter's position (off by ~30px) — uncanny. Site title "renai" tiny, lower-left, Fraunces 300 italic.
2. **Corridor of Drafts:** 5–7 paragraph blocks of half-letter prose at parallax depths 0.2–0.8; the nearest is legible Newsreader, the farther ones progressively `blur-focus`'d into pure texture. They drift laterally as you scroll past — like walking a hallway of ajar doors.
3. **Tide Pool Room:** full-floor "water" = a Tide-Glass→Wet-Slate radial with an animated displacement-feel (SVG `feTurbulence` + `feDisplacementMap` on a faint copy of the room). Headings appear *mirrored & upside-down first* in the lower (reflection) half, then a duplicate rights itself in the upper half over 900ms. Cursor ripples here.
4. **Inventory of Small Evidence:** vertical `timeline-vertical` — a hairline Wet-Slate line; each node is one floating still-life illustration that fades+settles in, with one Newsreader sentence and a whispering Spline-Sans-Mono "timestamp" (e.g. `// 03:11 — you kept this`). Cast shadows fall upward. One object per screen-height; no more than six objects total.
5. **The Ceiling That Isn't There:** invert layout — text `position: absolute; top: 0` and content scrolls *down into* a sky of crumpled-paper clouds (3–4 parallax layers). Headings hang like dripping condensation, with a slow vertical Newsreader paragraph below.
6. **The Reply:** the letter rotates face-up (3D flip, slow, 1.6s, spring-to-rest); the accumulated fragments from earlier floors visually converge (`stagger` in) into one short final message in Fraunces; the wax seal `path-draw-svg` finally completes the looping signature in Sealing Wax Rose; then the whole viewport fades over 6s back to Floor-0 dim — implying an infinite re-descent. (Do NOT actually loop the scroll; just imply it visually.)

**Copy guidance:** lowercase, second person, fragmentary, ellipsis-tolerant; let one sentence's tail land in the next floor's head. The only uppercase/mono is depth markers and timestamps. Never explain the metaphor. Never say "scroll down."

## Uniqueness Notes

**Differentiators from other designs in this codebase:**

1. **Surreal as *hushed melancholy*, not glitch-carnival.** The corpus's rare surreal/dreamscape work tends toward vaporwave loudness or glitch-art chaos. renai.dev is the opposite register: dim, slow, water-soft, second-person intimate — a Varo/Magritte interior, not a TikTok filter. It folds the 5% surreal aesthetic into the 5% dreamy-ethereal tone instead of the energetic/edgy tones it usually pairs with.
2. **A "descent through a house," not a scroll-feed.** No card-grid (vs. 91% of the corpus), no bento, no dashboard, no hero-CTA. Six full-viewport "floors" you *sink* between via sticky-stage timing — `immersive-scroll` (only 13%) used as literal gravity. Layout even *inverts* (content hanging from the ceiling) on one floor, which I've not seen elsewhere here.
3. **The unsent love letter as the single recurring physical object** — face-down → corridor → reflected → catalogued → finally face-up — carrying a `path-draw-svg` signature that deliberately *never completes until the last floor*. A narrative payoff structure rather than sections.
4. **"Dream physics" details:** shadows that fall upward, light pools offset from their source, text that appears mirrored-then-rights-itself, the loop-implied ending. Small, consistent wrongnesses instead of decoration.
5. **Avoided overused patterns from frequency analysis:** no hand-drawn (94%) or glassmorphism (82%) aesthetic, no photography (98%) — all imagery is custom SVG illustration & line-work; no card-grid (91%) / full-bleed-grid / centered-hero composition; no typewriter-effect, no counter-animate, no tilt-as-product-card. Magnetic/cursor-follow is present but reskinned as a *refractive water blob*, not a hover-magnet.

**Chosen seed/style:** surreal dreamscape promo — *aesthetic: surreal, layout: immersive-scroll, typography: serif-revival (Fraunces/Newsreader) + tech-mono accent, palette: midnight-blue/warm-dim, patterns: spring + ripple + path-draw-svg, imagery: custom-illustration + paper-aged + grain-overlay, motifs: floating-elements + wave-forms, tone: dreamy-ethereal / mysterious-moody.*
<!-- DESIGN STAMP
  timestamp: 2026-05-11T08:27:04
  domain: renai.dev
  seed: seed
  aesthetic: renai.dev — "renai" (恋愛, *the state of being in love*) rebuilt as a developer's ...
  content_hash: c1d725d2a1d4
-->