# Design Language for renai.science ## Aesthetics and Tone renai.science is the *laboratory of longing* — a surreal dreamscape where the chemistry of attraction is studied like a soft science with no controls and infinite variables. "Renai" (恋愛) means romantic love; "science" promises rigor it cannot keep. The site leans into that contradiction: precise grid paper smeared with watercolor, lab notation hovering over a melting horizon, a heartbeat plotted as a sine wave that refuses to repeat. The mood is **oneiric, intimate, slightly off-kilter** — the feeling of remembering a conversation that mattered too much, where the room tilted and time pooled. Not cold clinical science; not gauzy romance-novel kitsch. Something in between: a Magritte interior where the window shows a different sky than the door, a Tarkovsky long take of two coffee cups going cold. Inspiration: René Magritte's displaced objects, Leonora Carrington's dream-creatures, vintage 1960s psychology journal plates, Hilma af Klint's diagrammatic mysticism, the soft fade of overexposed Polaroid film. Tone words: tender, curious, surreal, hushed, a little melancholic. The visitor should feel they've wandered into someone's private notebook where feelings are pinned like specimens but still gently breathing. ## Layout Motifs and Structure A **vertical dream-journey** — full-screen acts that drift downward like pages of a field notebook turned by a slow hand. The governing metaphor is the *lab page that dissolves*: each section begins as ruled grid paper with margin annotations and ends with the grid bleeding into watercolor cloud. - **Asymmetric float layout**: content never centers. Paragraphs sit at odd left/right anchors, as if dropped, with generous negative space (ma) breathing around them. A faint baseline grid is visible but things deliberately ignore it — text blocks rotated 1–2°, captions hanging in the margin like marginalia. - **The Specimen Cards**: occasional framed "observations" — a single sentence, a date, a small surreal illustration — pinned with a drawn pushpin shadow, slightly askew. These are the only card-like elements and they appear rarely, not in a grid. - **Floating annotation layer**: hand-drawn arrows, brackets, circled words, and curved connector lines link ideas across the page, drawn in via SVG path animation as you scroll — like watching someone think. - **Horizon strips**: between acts, a thin band where the page-paper meets a watercolor sky-gradient — a literal horizon line that the next section's content rises from. - **No dashboard, no bento, no stat-grid.** The structure is a sequence of contemplative full-bleed scenes, each one a held breath. ## Typography and Palette **Typefaces (all Google Fonts):** - **Headlines / display:** *Fraunces* — its soft "wonky" optical axis and gentle serifs feel both editorial and a little dreamlike; used large, italic for emotional emphasis. - **Body / lab-notation:** *Spectral* — a refined screen serif with a quiet, journal-paper warmth for longer reading. - **Margin annotations / captions / data labels:** *Caveat* — a flowing handwritten script for marginalia, arrow labels, and "researcher's notes," giving the page its personal-notebook intimacy. - **Micro-labels / coordinates / timestamps:** *IBM Plex Mono* — sparse monospace for the pseudo-scientific apparatus (figure numbers, coordinates, "fig. 7b"), tiny and tracked-out. **Palette:** - `#F4EFE6` — *paper bone*: warm off-white grid-paper base - `#1C1B22` — *ink near-black*: primary text, drawn lines (soft, never pure #000) - `#2E5E5A` — *viridian observation*: deep teal-green for annotations, brackets, lab ink — the "science" color - `#C7506B` — *rose flush*: muted dusty rose for emotional highlights, the heartbeat line, italic emphasis — the "renai" color - `#E8B04B` — *amber lamp*: warm gold accent for circled words and small glows, used sparingly - `#A9C4D6` — *dream haze*: pale watercolor blue for the horizon gradients and cloud bleeds - Watercolor gradients blend `#A9C4D6` → `#C7506B` → `#F4EFE6` at the horizon strips, kept low-saturation and grainy. A subtle paper grain / fiber texture overlays everything at ~6% opacity. Faint blue ruled grid lines (`#A9C4D6` at 12%) sit beneath the upper portion of each act and fade out toward its lower edge. ## Imagery and Motifs - **Surreal botanical-anatomical hybrids**: line illustrations of hearts that are also seed pods, lungs that branch into coral, a clock whose hands are eyelashes — rendered in single-weight viridian ink like 1960s journal plates, occasionally washed with a rose watercolor stain. - **Floating displaced objects** (Magritte logic): a coffee cup hovering, a key, a folded note, a tuning fork, a single matchstick — drifting slowly in parallax layers across the dream-sky backgrounds. - **The non-repeating heartbeat line**: a continuous SVG path that runs through the whole site as a subtle through-line, drawn as you scroll — a sine/ECG hybrid that never quite makes the same wave twice. - **Hand-drawn apparatus**: brackets, braces, arrows, dotted measurement lines, circled words, "n=2" scribbles, asterisks — the visual grammar of someone annotating their own life. - **Watercolor clouds & stains**: soft irregular blooms of `#A9C4D6` and `#C7506B` that act as section dividers and behind-text washes, with visible paper-bleed edges. - **Pinned specimens**: pressed-flower silhouettes, ticket stubs, a fingerprint, a constellation diagram — small, askew, with a faint drop shadow as if physically placed. - **Constellations of small dots** connected by thin lines — both "data points" and "stars," ambiguous on purpose. ## Prompts for Implementation - Build as a **single-page vertical narrative** of 5–7 full-viewport acts: an opening ("The Hypothesis" — a hovering question over a melting horizon), a middle of "observations" / "field notes" / surreal vignettes, and a quiet closing ("Inconclusive. Beautiful.") — each act a held, immersive scene, not a marketing module. - **Scroll choreography**: as the user scrolls, SVG annotation paths (arrows, brackets, the heartbeat line, circled words) *draw themselves* with `stroke-dashoffset` animation, staggered. Floating objects (cup, key, note) drift on layered parallax at different rates. Watercolor stains gently bloom (scale + opacity) into view. - **The dissolving grid**: each act's background starts as crisp ruled grid paper at the top and, via a mask/gradient, melts into a grainy watercolor sky at the bottom — so the page literally transitions from "science" to "dream" and back, act after act. - **Cursor as pen**: a soft, slightly trailing custom cursor like a fountain-pen nib; near interactive words it leaves a faint ink-bleed circle (rose) that fades. - **Type as feeling**: key emotional phrases set in large *Fraunces* italic that subtly waver — a slow, organic transform (≤2° rotation, sub-pixel drift) as if breathing. Margin notes in *Caveat* appear with a quick "writing" reveal. - **Texture & grain everywhere**: a tiling paper-fiber PNG or CSS noise at low opacity over the whole page; watercolor edges should look bled, never hard-clipped. - **Easing**: slow, eased, gentle — long durations (0.8–1.6s), soft cubic-bezier curves, generous stagger. Nothing snappy or punchy. Respect `prefers-reduced-motion` by holding the final composed scene. - **AVOID**: CTA-heavy layouts, pricing blocks, stat-grids, dashboard tiles, hero-with-signup-form, card grids, testimonial carousels. There is no product to sell here — only an atmosphere to inhabit. - Sound is optional and off by default: if added, a faint room-tone / pencil-scratch loop with an obvious mute control. ## Uniqueness Notes Differentiators from other designs in this batch: 1. **The "dissolving lab page" mechanic** — backgrounds that morph between ruled grid paper and watercolor sky within each act — is a structural concept, not a decorative one; I've not seen another design literally transition between two visual languages per section. 2. **Dual symbolic palette** where one color (`#2E5E5A` viridian) carries "science" and another (`#C7506B` rose) carries "love," used consistently in annotations vs. emotional emphasis — a semantic color system rather than a mood palette. 3. **Surreal botanical-anatomical hybrid illustrations** (heart-seed-pods, eyelash-clocks) in 1960s-journal-plate line style — a specific, weird illustration vocabulary distinct from the common photography/gradient-mesh defaults. 4. **The non-repeating heartbeat SVG through-line** that threads the entire scroll as a single drawn path. 5. **Marginalia-driven layout** — content anchored asymmetrically with handwritten *Caveat* annotations, drawn arrows, and circled words as the connective tissue, instead of a card grid. Chosen seed/style: **surreal dreamscape promo** (with a "lab notebook / pseudo-science journal" overlay). Avoided patterns from frequency analysis: no glassmorphism (82%), no hand-drawn-as-the-whole-aesthetic cliché despite using hand-drawn *accents* (95% — kept to marginalia only, paired with surrealism so it doesn't read as the dominant style), no card-grid (91%), no centered layout (82%), no warm-gradient-only palette, no photography-driven imagery (98%), no dashboard. Used underused territory: surreal (7%), watercolor (8%), editorial-flow / asymmetric float, Fraunces + Spectral + Caveat typography pairing.