# Design Language for renai.quest ## Aesthetics and Tone renai.quest reframes the Japanese word *renai* (恋愛 — romantic love) as a **futuristic-cutting-edge neomorphic** investigation: a sealed humid arcology in the late 22nd century where botanists have been hired by the city itself to grow love letters on living vines that climb the inside of obsidian skyscrapers. The aesthetic is an unprecedented marriage of **deep-burgundy** velvet hardware (think Bang & Olufsen vinyl decks coated in oxblood lacquer), **classic serif** typography (the kind set by hand on lead in 1898), and **city-urban nature-elements** — a dripping vertical farm grafted onto a brutalist transit tower. There is no whimsy. There is no pastel. There is no romance in the Hallmark sense; this is romance as a **clinical, cutting-edge research program** carried out by a future-state Tokyo love bureau in a humming server room scented with wet moss. The mood is **opulent-grand and zen-contemplative simultaneously**: oxblood-and-clay tactile surfaces appearing to be milled from a single block of warm metal, sitting beside fern fronds illuminated by sodium streetlamps. **Blur-focus** is the operating principle — at any moment exactly one element on the screen is in pin-sharp focus while every other surface dissolves into a soft chromatic out-of-focus haze, exactly as a 1940s Leica would render a face against a rainy Ginza alley. The feeling is "lab notebook of a future cardiologist studying yearning." It is not playful. It is not corporate. It is the **deliberate, slow-burning, archival** voice of someone documenting what love will mean in 2174 — measured in lumens, root systems, and the precise tilt-angle of a serif. ## Layout Motifs and Structure The page is composed of **seven diagonally-sliced sections** stacked vertically, each cut by a 7° clockwise rotation that bleeds the boundary between any two sections into a chromatic seam. This is not the standard "diagonal-band-as-decoration" trick — instead the *entire content rectangle* of each section is rotated, and the typography rotates with it, then a counter-rotation of -7° is applied to text spans so the words read horizontally while the surrounding burgundy chassis tilts. The result is that the eye traverses the page along a **gentle slalom**, never down a vertical column. Each diagonal section is a **single neomorphic plate** — a 1400px-wide oxblood slab with paired light-and-shadow soft-shadows (`box-shadow: 18px 18px 36px #1a060a, -18px -18px 36px #4a1820`), so the slab appears extruded from the page itself, lit by a single distant sodium lamp at the upper-left. The slab carries one inset neomorphic well per section (the "specimen tray") in which the actual content sits at -2px depth: photography of vines, a single classic-serif paragraph, or a slowly rotating 3D model of a transit tower with ferns climbing it. The **horizontal axis** within each diagonal slab follows a 12-column asymmetric grid where columns 1-5 carry an oversized serif numeral (the section number in roman, e.g. `IV`), columns 6-9 carry the body specimen, and columns 10-12 carry a vertical "field annotation" in 11px serif italic — a margin gloss in the manner of a Renaissance manuscript. The annotations rotate -90° so they read upward along the slab's right edge, like the spine of a leather-bound journal stood on end. There is **no header bar, no hamburger, no footer**. Navigation lives in a single fixed circular neomorphic dial bottom-right (88px diameter, oxblood, with a pulsing burgundy ember at 7 o'clock); rotating the dial via scroll-jack or pointer-drag advances through the seven diagonal chapters with a slow elastic ease (1.4s, cubic-bezier(.16,1,.3,1)) and a brief blur-focus transition where the entire viewport defocuses to 16px gaussian, the chapter-numeral resolves first, and finally the body refocuses 600ms later. ## Typography and Palette **Typography** is built around three serif voices — no sans-serif appears anywhere in the document. - **Display:** **Cormorant Garamond** (Google Fonts, 500 italic and 700 roman) for the seven oversized roman numerals (clamp(8rem, 18vw, 22rem)), set in 700 roman, optically-aligned hard against the slab's left bevel. The italic 500 is reserved for chapter titles in mixed-case (e.g., *"On the Cultivation of Longing in Vertical Gardens"*) at clamp(2.4rem, 5vw, 4.2rem). - **Body:** **EB Garamond** (Google Fonts, 400 and 400 italic) at 1.0625rem / 1.78 line-height with a generous tracking of 0.012em — the canonical classic-serif voice, used for every paragraph of the love-letter specimens. Old-style figures and small caps are enabled via `font-feature-settings: "onum" 1, "smcp" 1` for inline marginalia. - **Annotation:** **Cormorant Infant** (Google Fonts, 400 italic) at 0.6875rem with -90° rotation for the right-margin glosses, in a faded burgundy at 62% opacity. **Palette** is a tight five-color **deep-burgundy** family with two restorative accents drawn from urban nature. - `#3a0d14` — *Oxblood Lacquer* (primary surface; the neomorphic slab body) - `#1a060a` — *Sealed Wine* (deep recess shadow inside neomorphic wells) - `#5e1a26` — *Velvet Bleed* (the lighter neomorphic highlight, where the imaginary sodium lamp catches the slab's upper-left bevel) - `#f3e8d6` — *Oat Vellum* (typography on the slab; not white — this is the color of 1898 cotton-rag book paper that has aged 126 years in a sealed library) - `#7a8d4a` — *Sodium Fern* (the single restorative chlorophyll-under-streetlamp green; used only for the pulsing dial ember, the live vine illustrations, and the underline-draw on hovered serif italic words) - `#c9a96a` — *Brass Filament* (a one-stroke metallic accent; reserved for the section numeral leading edge, the dial's index mark, and the hairline keylines that bound each diagonal seam) There is **no pure black, no pure white, no gradient, no glass, no neon, no warm sand, no pastel**. Every value sits within a 14% luminance band of deep-burgundy, with Sodium Fern as the single chromatic exit valve. ## Imagery and Motifs Two image systems run in parallel, both rendered as a hybrid of inline SVG and dynamically-photographed-looking CSS. **Vertical-Garden Skyscrapers (city-urban + nature-elements fused).** Each diagonal section anchors a single **layered SVG illustration** of an obsidian transit tower — 8 floors, narrow vertical windows in `#1a060a`, brutalist concrete fluting in `#3a0d14`, and a fully grown wisteria-and-ivy vine descending from the rooftop arboretum, painted in `#7a8d4a` with deeper veins in `#5e1a26`. The vine is animated via SVG `path` `stroke-dasharray` so it visibly grows down the building over 14 seconds when its section first scrolls into view, then idle-sways via a 9-second `transform: rotate(0.6deg)` ping-pong. The buildings are deliberately **wrong-scaled** — too narrow, too tall, leaning 2° — making them feel like architectural sketches drafted by a future-Tokyo planning bureau, not stock cityscape photography. **Specimen Photography (blur-focus).** Each chapter contains exactly one rectangular CSS-driven "specimen photograph" of a love-letter artifact: a folded paper crane on a wet pavement, a key card embedded in moss, a transit ticket pressed into a glass case beside a fern leaf. These are constructed via stacked CSS layers — a base `radial-gradient` for the substrate (`#3a0d14` to `#1a060a`), an inline SVG of the artifact in `#f3e8d6` and `#7a8d4a`, and a foreground `backdrop-filter: blur(10px)` overlay that lifts only at the cursor (a 240px circular cutout follows the pointer, revealing the artifact in pin-sharp clarity through a window of un-blurred space). The rest of the specimen stays in soft-focus burgundy haze. This is the literal **blur-focus** principle as interaction. **Marginal Diagrams.** Throughout the right-margin annotations, tiny inline SVG diagrams appear in `#c9a96a` brass strokes (0.5px hairlines): a cross-section of a vine's xylem, a triangulation diagram of two figures meeting on a bridge, a plan-view of a circular rooftop garden. These are 32px square, fixed in size regardless of viewport — small, intricate, drawn in the style of a 19th-century botanical plate. **Brass-keyed Seams.** The seam between any two diagonal sections is bridged by a single 1px hairline of `#c9a96a` Brass Filament, broken at irregular intervals by 4px tick marks — like the silver ruling on a ship's chronometer. The hairline rotates with the diagonal cut. ## Prompts for Implementation Build as a **single-page futuristic love-archive** where the user is reading a sealed dossier from the year 2174, recovered from a Tokyo arcology's botanical love-research division. The page is one HTML document with embedded CSS and a small amount of vanilla JS (no frameworks). **Diagonal Section Skeleton.** Use `
` repeated seven times, each with `transform: rotate(7deg)` on the slab and `transform: rotate(-7deg)` on `.slab > .content`, so content reads horizontally inside a tilted chassis. Between slabs, insert a 96px `
` with a CSS `linear-gradient(98deg, #1a060a 0%, #3a0d14 50%, #1a060a 100%)` and a single `border-top: 1px dashed #c9a96a` on the rotated edge. Slab background uses paired neomorphic shadows (`18px 18px 36px #1a060a, -18px -18px 36px #4a1820`) on a `#3a0d14` body. The neomorphic specimen well is an inset shadow of the same vector pair. **Diagonal Slalom Scroll.** Bind the body scroll to a custom rotation accumulator. Each chapter occupies 100vh of natural height plus a 60vh "transit zone" where the next slab eases into view. The dial in the bottom-right corner reflects scroll progress as a pulsing `box-shadow: 0 0 28px 6px #7a8d4a` on the 7-o'clock ember; the ember pulses at 0.4Hz when stationary and accelerates to 1.6Hz during a chapter advance. **Blur-Focus Cursor Window.** Apply `backdrop-filter: blur(10px) saturate(0.8)` to a fixed full-viewport overlay element (`.haze`) sitting above all specimen photography but below typography. Use a CSS mask (`mask: radial-gradient(circle 240px at var(--mx) var(--my), transparent 70%, black 100%)`) updated via JS pointer events to cut a circular un-blurred porthole that follows the cursor. On touch devices, the porthole jumps to wherever the user taps and dwells for 1.4s. Typography stays sharp at all times; only the photography substrate blurs. **Vine Growth Animation.** Each chapter's vine SVG path uses `stroke-dasharray: 1400; stroke-dashoffset: 1400` initially. An IntersectionObserver triggers `stroke-dashoffset: 0` over 14s with `cubic-bezier(.4, 0, .2, 1)`. After completion, switch the path to a 9s ping-pong rotation (`@keyframes sway { 0%,100% { transform: rotate(-0.6deg) } 50% { transform: rotate(0.6deg) } }`). **Counter-Rotated Type.** All typography inside `.slab` lives within `.content { transform: rotate(-7deg); }`. To prevent kerning artifacts in Cormorant Garamond at large sizes, set `font-feature-settings: "kern" 1, "liga" 1, "swsh" 1, "onum" 1`. The serif numerals use `text-stroke: 0.5px #c9a96a` for the brass leading edge (Webkit-only, gracefully degrades on Firefox). **Margin Gloss Behavior.** Right-margin annotation `