# Design Language for renai.monster ## Aesthetics and Tone renai.monster is a **surreal dreamscape** about the kind of love that does not photograph well — the love that has too many limbs, that breathes wrong, that you would defend to your family even though you cannot describe its face. "Renai" (恋愛) is the Japanese word for *romantic love*; the `.monster` TLD is not treated as a horror gimmick but as a tenderness too large for ordinary words. The site is a love letter folded into the shape of a creature. The mood is **moonlit and slightly humid** — the air before a confession, the inside of a paper lantern, the warmth of something enormous sleeping next to you. It is romantic the way Hayao Miyazaki's *Princess Mononoke* forest spirit is romantic, the way Guillermo del Toro's *The Shape of Water* is romantic: reverent toward the strange. Nothing here is cute. Nothing here is scary. Everything here is *yearning*. The dominant emotional register is **dreamy-ethereal with an undertow of mysterious-moody** — not a nightmare, a *fond* dream, the kind you wake from reaching for someone. The page should feel like it was written at 3 a.m. by someone who is not sure if they imagined the whole relationship, and does not care, because it was the best thing that ever happened to them. This deliberately rejects the archive's two reflex aesthetics: **hand-drawn (94%)** and **glassmorphism (82%)**. There is no doodle here, no frosted card. Surfaces are velvet, ink, and moonwater. It also rejects the corpus's reflex tone of **pastoral-romantic (34%)** — this is romance, but it is *gothic* romance, indoor romance, monster romance, not a meadow. ## Layout Motifs and Structure The site is built on **diagonal-sections (5% in the corpus)** — every band of content is sheared at a gentle 4°–7° angle, so the page reads like a stack of love letters that slid off a desk and were left where they fell. No section meets the viewport edge squarely; the horizon is always tilted, the way it tilts when you lie down beside someone. **Structure, top to bottom:** 1. **The Threshold** — full-viewport opening. A single line of text appears as if written by an invisible hand (`path-draw-svg` on an SVG-stroked phrase): *"Some loves are too big to be human."* Behind it, a slow-drifting silhouette — a vast, soft, indistinct shape (the "monster") that is never fully resolved, only implied by where the background darkness *isn't*. The visitor scrolls *into* the dream. 2. **The Bestiary of One** — a vertical sequence of "field entries," each a diagonal band. Each entry is a fragment of the relationship described in the dispassionate voice of a naturalist's notebook ("Specimen sleeps with one eye half-open. Specimen has learned to make tea. Specimen waited."). Text sits in a narrow measure (38–46ch) hugging the left or right edge of its tilted band, alternating. Generous `ma` negative space on the opposite side, occupied only by a faint ink-bleed motif. 3. **The Confession Spiral** — a single centered passage where the diagonal sections briefly straighten and the measure widens to full-bleed; this is the emotional apex. Letterforms here are larger, almost too intimate to read at a glance. The background lightens by ~12% — dawn leaking in. 4. **Marginalia** — a closing band of "things found in the creature's coat pockets": a pressed flower, a ticket stub, a tooth, a ring sized for no human finger. Rendered as small SVG line-objects floating in the dark, each revealing a one-line caption on hover. 5. **The Colophon** — set sideways along the bottom-left, tiny, like a signature. The domain `renai.monster` appears here only, set in small caps, never as a logo lockup at the top. No navigation bar. No menu. No anchor links. The site is **read**, start to end, like a letter you were not supposed to find. There is exactly one scroll axis and no horizontal anything. **AVOID**: card grids, bento boxes, hero-with-CTA, three-column feature rows — none appear, none are appropriate. ## Typography and Palette **Typefaces (Google Fonts only):** - **Playfair Display** — the romantic display face (`playfair-elegant`, 1% in corpus). Used for all headings, the threshold phrase, and the confession spiral. Weight 400 for body-scale display, 600 italic for the most tender lines. Its high-contrast Didone strokes and the dramatic ball terminals carry the gothic-valentine tone. Tracking slightly loose (+1.5%) so the letters breathe like someone deciding what to say. - **Cormorant Garamond** — the "naturalist's notebook" register, weight 300, true italic for all the field-entry observations. Its delicate, slightly archaic forms read as *handwritten without being a handwriting font* — the corpus is drowning in `handwritten` (26%); this is the restrained alternative. - **IBM Plex Mono** — used sparingly and only for the marginalia captions and the colophon, weight 400, 11–12px, tracked +4%. The single mechanical voice in an otherwise organic page — the museum label pinned beneath a wonder. **Palette — "moonwater & velvet" (deep-burgundy family, 2% in corpus):** - `#0E0911` — *throat of night*, the base background, a near-black with a violet pulse, never pure `#000`. - `#1C1018` — *dried wine*, the diagonal bands that sit above base, a deep oxblood-brown. - `#3A1C2A` — *bruise plum*, accent fills, ink-bleed shapes, the underside of the monster's silhouette. - `#8F1D3B` — *heartroot crimson*, the one true red — used only for the confession spiral's key words and the ring/tooth marginalia, never more than ~3 instances per viewport. - `#C9A7B4` — *moonflesh*, primary text color, a dusty rose-grey that reads as soft skin in low light, not white. - `#E8DCC8` — *lantern paper*, secondary highlight text and the threshold phrase stroke, a warm parchment cream. - `#5C7D86` — *ghostwater*, a single cold accent — moonlight on a pond, used for hover states and the pressed-flower marginalia, the only cool note that keeps the page from going entirely fevered. Gradients are used **once**: a vertical body-background interpolation from `#0E0911` (top) to `#16101C` (confession spiral) and partway back down — a dawn that never fully arrives. This resists the corpus's `gradient` reflex (94%) by treating gradient as a single narrative event, not decoration. ## Imagery and Motifs **Primary imagery: generative-art (10% in corpus), executed as ink-in-water.** A canvas layer behind everything renders slow, low-opacity blooms of `#3A1C2A` and `#8F1D3B` spreading and dissolving like a drop of blood-wine in still black water — a few new blooms per minute, each fading over ~20s. This *is* the monster: never a drawn creature, only the dark turbulence of something vast moving just out of sight. Custom SVG line-objects (`line-illustration`, 14%) for the marginalia only: a five-petal pressed flower, a torn ticket, a single canine tooth, a ring with an oval bezel, a folded note — all drawn at 1.25px stroke in `#C9A7B4`, no fills. **Recurring motifs:** - **The half-resolved silhouette** — the negative-space shape behind the threshold and re-appearing faintly at section breaks. Always larger than the viewport, always cropped, always darker-than-dark rather than a drawn outline. - **Ink-bleed** — soft-edged organic stains (`feTurbulence` + `feDisplacementMap` SVG filter on simple ellipses) anchoring the empty side of each diagonal band, like a fountain pen left to rest on the page. - **The single thread of light** — a 1px `#5C7D86` line that runs the full height of the page along one margin, kinking at each diagonal seam — a spider-silk, a hair on the pillow, the line connecting two people who shouldn't fit. - **Lunar phase glyph** — a tiny waxing-crescent mark, rendered in `#E8DCC8`, used as the only section divider, growing imperceptibly fuller as the visitor descends and fullest at the confession spiral. No photography. No icons-as-UI. No stock anything. ## Prompts for Implementation Build as a **single hand-authored HTML document** plus one CSS file and one small JS file — no framework, no build step, target under 70KB before fonts. The experience is a **scroll-driven dream you read once**; everything serves the narrative spine of *threshold → bestiary → confession → marginalia → signature*. - **The opening must earn the scroll.** On load, hold a black viewport for ~600ms, then `path-draw-svg` the threshold phrase *"Some loves are too big to be human."* in stroked Playfair-style outlines over ~2.4s, then let it fill. A faint chevron of `#5C7D86` pulses once at the bottom. No skip button, no "scroll" label beyond that single mark. - **Diagonal bands**: use `clip-path: polygon(...)` with ~5° shear, alternating lean direction down the page. Content inside each band is `transform: skewY(reverse-angle)` so text stays horizontal while the band tilts — never skew the type itself. - **Reveal choreography**: each field entry uses `scroll-triggered` + `blur-focus` — text enters at `filter: blur(8px); opacity: 0; translateY(24px)` and settles to sharp over ~900ms with a soft spring, staggered line-by-line (`stagger`). It should feel like *remembering*, not *loading*. - **The ink-in-water canvas**: requestAnimationFrame loop, additive low-alpha radial gradients that grow then fade; cap at ~6 active blooms; pause when tab hidden; respect `prefers-reduced-motion` by rendering 3 static faint blooms instead. - **The thread of light**: an SVG `polyline` fixed in a margin, its `stroke-dashoffset` tied to scroll progress so the line "draws itself" as you descend — and at the confession spiral it briefly *doubles*, two threads crossing, then merges back to one. - **Confession spiral**: temporarily remove the skew, widen the measure, scale Playfair to ~clamp(2.4rem, 6vw, 5rem), and shift `body` background toward `#16101C`. The key phrases here get `#8F1D3B` and a 1.5s `underline-draw` that completes only when fully in view. - **Marginalia**: small SVG objects float with a gentle `parallax` drift on `mousemove` (max 12px); hover fades in a `#5C7D86` IBM Plex Mono caption beneath each. On touch devices, captions cycle in slowly on scroll instead. - **Type motion**: the lunar-phase divider glyph should `morph` between crescent stages via animated SVG `d` interpolation as sections pass — subtle, never a spinner. - **AVOID**: hero CTA buttons, pricing tables, stat counters, testimonial carousels, feature card grids, sign-up forms, sticky headers, cookie-style banners. There is nothing to convert here — only something to feel. ## Uniqueness Notes 1. **Gothic monster-romance, not pastoral romance.** The corpus's romantic register is overwhelmingly `pastoral-romantic` (34%) — meadows, soft light, cottages. renai.monster is indoor, nocturnal, oxblood-and-moonwater, romance for something with too many teeth. No other site here treats love as *eldritch tenderness*. 2. **The monster is never drawn.** It exists only as negative space and as the turbulence of an ink-in-water generative layer — the subject of the entire site is deliberately never rendered. This is the opposite of the corpus's `photography` (98%) and `hand-drawn` (94%) reflexes; the central image is an *absence*. 3. **Diagonal-sections + naturalist's-notebook voice.** Both rare or unique: `diagonal-sections` is 5% of layouts, and writing a love story in the cold field-log voice of a creature catalog is a structural conceit no other CMassC site uses. The page is literally "a bestiary with one entry." 4. **Single-event gradient and single true accent color.** Against a corpus where `gradient` is near-universal (94%) and palettes sprawl, this design uses one slow body-gradient as a narrative "dawn" and exactly one red (`#8F1D3B`) rationed to a few marks per viewport. 5. **No navigation, no CTA, read-once structure.** A linear, menu-less, conversion-free letter — a stance most of the archive's `card-grid` (91%) / `hero-dominant` sites do not take. Chosen seed/style: **surreal dreamscape promo** — realized as `aesthetic: surreal, layout: diagonal-sections, typography: playfair-elegant, palette: deep-burgundy, patterns: blur-focus, imagery: generative-art, motifs: flowing-curves, tone: dreamy-ethereal`. Avoided patterns from frequency analysis: `hand-drawn` (94%), `glassmorphism` (82%), `photography` (98%), `card-grid` (91%), `pastoral-romantic` tone (34%), reflexive multi-stop `gradient` decoration (94%), `handwritten` display type (26%).