# Design Language for renai.moe ## Aesthetics and Tone renai.moe is staged as a **lost 1973 Tokyo love-advice magazine**, recovered from the back-room shelf of a Jinbocho second-hand bookshop and faithfully scanned at 600 DPI with all of its grain, foxing, and ink-creep intact. "Renai" (恋愛) is the Japanese word for romance, and the .moe TLD plants this firmly in a sweet, slightly dorky internet-corner sensibility — but the surface refuses any glossy, contemporary "dating-app" treatment. Instead, the page reads like the Sunday-morning **omiai column** of a Showa-era women's magazine: warm Garamond running heads, soft burnt-orange spot inks, and tiny pen-and-ink illustrations of couples sharing umbrellas under tilework eaves. The mood is **friendly without being saccharine** — the friendliness of an older, gently teasing aunt who tells you, over barley tea, that yes, the boy you mentioned does sound nice, and have you considered writing him a postcard? Where the rest of the .moe catalogue tilts toward neon, watercolor, or cyberpunk, renai.moe is **un-digital-feeling**: the scroll behaves like turning oversized magazine spreads, the type sits on a paper-grain backdrop that is genuinely textured (not a CSS approximation of texture), and every interactive moment is small, papery, and slightly imperfect. Nothing pulses. Nothing glows. The cursor leaves a faint pencil smudge and that is the most aggressive animation on the page. The aesthetic vocabulary is deliberately **grainy-textured** as a load-bearing material — not as decoration on top of a clean digital canvas, but as the canvas itself. Every surface, every illustration stroke, every type column has visible halftone dot-screen, paper fiber, or graphite stipple. This is the visual signal that the page is a **document** rather than an interface. ## Layout Motifs and Structure **The Two-Page Spread.** The page is composed as a series of full-viewport **magazine-spread** plates. On viewports >= 960px the layout is a true two-page spread with a visible **gutter shadow** down the center (a 1px dark line flanked by 12px of soft inner-page shadow that suggests the spine of a perfect-bound magazine). On narrower viewports the spread folds into a single column but retains the marginalia and folio numbers. **The 12-column Editorial Grid with Asymmetric Bias.** Each spread uses a 12-column grid (6 per page) with **deliberate left-right asymmetry**: the verso (left) page often runs a single tall illustration column with a 4-column body, while the recto (right) page runs a 5-column body with a 1-column **rubi-style sidebar** of running commentary in 11px Garamond italic. This breaks from the centered/card-grid majority of the catalogue and announces editorial intent on first scroll. **Spread Composition Sequence.** The page contains exactly **seven spreads**: 1. **Cover Spread (恋愛 Issue 01).** A monumental wordmark in Garamond at clamp(6rem, 14vw, 11rem), set in burnt-orange ink that has bled microscopically into the paper grain; below it, a single hand-drawn line illustration of a tram crossing a Tokyo intersection at dusk. 2. **Masthead Spread.** Mock magazine masthead with issue number, date (always "May 1973"), and a fictional "Editor-in-Chief" colophon. Folio numbers begin counting from page 02/03. 3. **Featured Letter ("Dear Renai").** A long-form love-advice letter typeset in two narrow Garamond columns with **drop-cap initials** rendered as line-illustration vignettes (e.g., a drop-cap "I" that doubles as a streetlamp). 4. **City-Urban Foldout.** A panoramic horizontal-scroll foldout depicting a **continuous line-drawn cityscape** (Shinjuku-style mid-rises, neon signs in Japanese, telephone wires, cyclists) that the reader scrolls left-to-right by 240vw before the page resumes vertical flow. 5. **Astrology / Compatibility Chart.** A two-page chart with hand-inked grid lines and tiny illustrated zodiac figures in burnt-orange spot color; rows and columns are labeled in Japanese and translated in italic Garamond captions. 6. **Photo-Essay-as-Line-Drawing.** Six full-bleed line illustrations of urban couples (no photographs anywhere on the page) presented without captions, in a 3x2 spread. 7. **Closing Editor's Note + Folio.** A short signed editor's note set ragged-right, with a hand-drawn signature, paper-tear effect at the bottom edge, and the final folio "14/15". **Margins and Gutters.** Outer margin: 7.2vw. Inner margin (gutter side): 4.8vw. Top folio band: 4.6rem. Bottom folio band: 3.2rem. These are not arbitrary — they replicate the trim ratios of a 1970s B5 Japanese magazine. ## Typography and Palette **Display Face: "Cormorant Garamond"** (Google Fonts, weights 300, 400 italic, 500). This is the page's voice. Used for the masthead wordmark at clamp(6rem, 14vw, 11rem) with weight 300 and letter-spacing -0.015em (display Garamonds set tight at large sizes); also used for spread headlines at 3.4rem weight 500. Italic 400 carries every pull-quote, sidebar, and caption. The face is chosen for its **high stroke-contrast and elegant ball-terminals**, which read as 1970s phototypeset Garamond when paired with halftone grain. **Running Body: "EB Garamond"** (Google Fonts, weights 400, 400 italic, 500). Used at 1.05rem / 1.78 line-height for letter columns and editorial body. Slightly more robust on screen than Cormorant — the textbook trick of using two Garamonds (one display, one text) is intentional and authentic to mid-century editorial practice. **Japanese Companion: "Shippori Mincho"** (Google Fonts, weights 400, 600). For Japanese characters — the masthead 恋愛, the sidebar Japanese terms, the cityscape neon-sign labels. Shippori Mincho's brush-derived strokes harmonize with Garamond's Western humanist roots without resorting to a generic gothic. **Rubi/Caption Detail: "Cormorant Garamond" italic 400 at 0.72rem**, letter-spacing 0.04em — the unmistakable "magazine sidebar voice". **No grotesks. No monos. No condensed sans.** The total absence of geometric or technical typefaces is itself a differentiator in a catalogue where 79% of designs use mono and 19% use humanist sans. **Palette (ink on paper, exactly six pigments):** - `#c25a1f` — **burnt orange primary**, the spot ink. Headlines, drop-caps, illustration accents, the masthead wordmark. - `#8a3a14` — **deep burnt sienna**, used only for hover states and the gutter-shadow spine. - `#f3ead8` — **aged paper cream**, the global background. Subtly warm, not white. - `#e6d6b6` — **paper shadow**, the slightly darker grain visible at margins and behind illustrations. - `#2a2118` — **iron-gall ink near-black**, all body text. Never #000; the page must never feel digital-pure. - `#6b6048` — **smudge gray-olive**, secondary text, folio numbers, paper-fiber speckle. The palette is **monochrome-with-spot** in the literal printer's sense — five neutrals plus one burnt-orange spot color — placing it in the unused intersection of the catalogue (burnt-orange 0%, sepia-nostalgic 2%). ## Imagery and Motifs **Core Motif — Pen-and-Ink Line Illustration.** Every illustrative element is drawn as **single-weight 0.6px to 1.4px black strokes** with deliberate hatching for shade. No fills, no gradients, no photographs anywhere on the page. Illustrations are inline SVG so the line-weight scales crisply. Subjects: trams, pedestrian crossings, telephone wires, paper umbrellas, a couple sharing taiyaki, cyclists at a kissaten window, a cat watching from a fire-escape. Each illustration has **3-7 spot-color burnt-orange flat-fill regions** (a single article of clothing, a lantern, a postbox) — the classic two-color magazine print look. **City-Urban Cityscape Foldout.** A 2400px-wide SVG line-drawing of an imagined Tokyo midblock — six buildings, one tram, four pedestrians, neon signs reading 喫茶 (kissaten), 写真館 (photo studio), 恋愛 (renai), and 文房具 (stationery shop). The drawing scrolls horizontally inside its spread; **a faint parallax** moves background buildings 0.7x and foreground figures 1.15x of the scroll delta. **Halftone Dot-Screen Grain.** The defining surface treatment. A tiled SVG noise pattern at 60% opacity with a clipped halftone dot pattern (4px grid, dot radius modulated by underlying lightness) overlays the entire ``. This creates a **genuine print-grain feel** — not a Photoshop "noise" filter, but a halftone screen that gets denser in the burnt-orange regions, exactly as offset printing does. **Paper Fiber Texture.** A second tiled SVG layer at 8% opacity adds short, randomly-rotated 1-3px tan strokes — the visual signature of long-fiber Japanese paper. Visible most clearly in the wide outer margins. **Folio + Marginalia.** Every spread has running heads in italic Garamond ("renai.moe — Issue 01 — May 1973") and folio numbers in the outer corners. Marginalia includes tiny hand-drawn arrows pointing at body paragraphs, faint pencil tick-marks, and one or two mock "stet" or proofreader's marks per spread. **Drop-Cap Vignettes.** Eight drop-cap initials are rendered as small line-illustration vignettes 4em tall, each spelling out a word from the body that follows them. The "I" is a streetlamp; the "T" is a tram pole; the "R" is a postbox. **The Pencil-Smudge Cursor.** The only cursor effect: a 14px diffuse gray-olive smudge that fades over 600ms, leaving an extremely faint trail on hovered elements (using mix-blend-mode: multiply against the paper background). ## Prompts for Implementation - **Build the page as seven full-viewport spreads inside a single long scroll**, with the Cityscape Foldout spread implemented as a horizontal-scroll-within-vertical-scroll using `position: sticky` on the spread container and translateX driven by `scrollProgress` within its 240vh sticky window. The vertical scroll resumes once the foldout is fully revealed. - **The gutter shadow is non-negotiable on >=960px.** Use a vertical 24px-wide gradient strip down the center of each spread: `linear-gradient(90deg, transparent, rgba(0,0,0,0.13) 48%, rgba(0,0,0,0.21) 50%, rgba(0,0,0,0.13) 52%, transparent)`. This single visual element does more to sell the magazine metaphor than anything else; do not omit it on desktop. - **Halftone overlay must be SVG, not CSS noise.** Generate a 200x200 SVG tile with a `` of black dots on a 4px grid, dot radius computed from a Perlin-noise displacement map. Apply via CSS `background-image` on ``, `background-size: 200px 200px`, opacity controlled by a CSS variable so the foldout spread can dial it down to 40% (printed centerfolds use lighter screens). - **Paper-fiber texture is a second SVG tile** — 400x400 with 80-120 short tan strokes at 6% opacity. Layer beneath the halftone via `background-image: url(fibers), url(halftone)`. - **All line illustrations are inline SVG** with `stroke-width: 1px` (drawn at 1.4px and slightly hand-jittered using `stroke-dasharray: 0.4 0` to emulate ink uptake — this works in current browsers via tiny-dash trick). Burnt-orange spot fills go on a single `` per illustration. - **Spring animation is the only motion vocabulary.** No linear easings, no `ease-in-out`. Use cubic-bezier(0.34, 1.56, 0.64, 1) for all transforms, with one custom slower spring `(0.16, 1.05, 0.32, 1)` for spread reveals. Spreads enter with a **page-turn translation**: 14px lift in Y, 2deg rotation around the gutter-side edge, settling over 820ms. - **Drop-caps animate on enter** by drawing their SVG paths with `stroke-dasharray` / `stroke-dashoffset` over 1200ms, then the spot-color fills fade up over the following 400ms. - **The Cityscape Foldout** uses three layered SVG groups for parallax (background-buildings 0.7x, mid-figures 1.0x, foreground-tram 1.15x) and emits subtle parallax on horizontal scroll progress only. - **Body type is set in EB Garamond at 1.05rem, line-height 1.78, max column width 28em.** Justify with `hyphens: auto` and `text-justify: inter-word` — 1970s magazines were almost always justified. - **No CTAs. No pricing. No stats. No "Get Started" buttons.** This is a magazine, not a product page. The closing folio's only interactive element is a single line of pencil-italic Garamond reading "press any key to close the magazine" — which, when pressed, animates a 320ms forward page-turn and gently fades the page out before scrolling back to the cover. - **Pencil-smudge cursor:** track pointermove on the document, append a `
` with a 14px radial-gradient smudge at each event position, opacity 0.18, fading via CSS animation over 600ms then auto-removed. Throttle to 30fps. Suppress entirely when `prefers-reduced-motion: reduce`. - **Storytelling-first prompt for downstream implementation:** every visible piece of body copy must read as if it belongs in a 1973 Tokyo love-advice column. Avoid product copy, marketing voice, or modern internet idiom. The language should be **warm, lightly archaic, second-person, and unhurried** — example tone: "When the streetcar passes the Kanda bookshop at five past seven each evening, the boy in the gray sweater always looks up. Have you considered, dear reader, whether you might look up too?" ## Uniqueness Notes 1. **Magazine-spread as the literal page architecture, not a metaphor.** The catalogue contains a handful of designs at 5% magazine-spread frequency, but none implement a true two-page spread with a visible gutter-spine shadow, alternating verso/recto asymmetric grids, and folio numbers at the trim corners. renai.moe makes the spread the load-bearing primitive, not a styling flourish on a normal centered column. 2. **Burnt-orange spot ink + cream paper — a palette unused in 684 designs (burnt-orange at 0%).** The two-color print-shop monochromatic palette (one spot color over neutrals, no gradients, no warm-photography tones) places renai.moe in genuinely empty territory in a catalogue where 84% of palettes are "warm gradients" and 58% use gradients at all. We use exactly zero gradients except the gutter shadow. 3. **Garamond-classic typography stack with no grotesk anywhere — combined frequency ~0%.** With Cormorant Garamond + EB Garamond + Shippori Mincho and not a single sans-serif, mono, or display-grotesk on the page, this design occupies a typographic seat that the catalogue's 79% mono / 19% humanist majority leaves entirely vacant. 4. **City-urban motif rendered as a horizontal-scroll line-illustration foldout.** city-urban motif is 0% in the catalogue and line-illustration imagery is 1%. Combining them in a true magazine-foldout spread (sticky horizontal scroll inside vertical scroll) is structurally distinct from any centerfold or panoramic-hero treatment elsewhere. 5. **Genuinely textured surface — SVG halftone + paper-fiber, not a CSS noise filter.** The grainy-textured aesthetic is at 0% in the catalogue. We implement it as two layered SVG pattern tiles (halftone dot-screen + paper-fiber strokes) that get denser under spot-color regions, replicating the physics of offset printing rather than the digital trope of "noise overlay". 6. **Pencil-smudge cursor as the only motion vocabulary outside spring page-turns.** No glow, no pulse, no scroll-triggered fade-in. The single cursor effect leaves a faint papery trail that respects the magazine metaphor — a deliberate refusal of the catalogue-wide scroll-triggered animation pattern (32% frequency, the most-used pattern of all). 7. **Avoided patterns from frequency analysis:** no card-grid (75%), no centered layout (66%), no full-bleed photography (82% imagery), no playful aesthetic (72%), no warm-gradient palette (84% combined), no mono typography (79%), no scroll-triggered reveal (32%), no mysterious-moody tone (27%). Each of these was a deliberate refusal in favor of the chosen seed. [Document chosen seed/style: aesthetic: grainy-textured, layout: magazine-spread, typography: garamond-classic, palette: burnt-orange, patterns: spring, imagery: line-illustration, motifs: city-urban, tone: friendly]