# Design Language for renai.moe ## Aesthetics and Tone renai.moe is an **editorial** scholarly journal of botanical philosophy — a long-form immersive-scroll site that publishes essays on the *grammar of leaves*, the *semantics of stems*, and the *moral epistemology of plants*. The aesthetic merges the rigor of academic publishing (footnotes, hanging indents, small-caps section openers) with the night-saturation of dark-neon palette: a monospace tech-mono primary face on deep midnight, with electric magenta and acid-green accents reserved for leaf-illustrations and citation anchors. The tone is **scholarly-intellectual** — the page reads as a referee-reviewed paper but its visual nightscape suggests these botanical observations were made by lamplight at 3am. Inspiration draws from *Cabinet* magazine's late issues, the dark-mode reading experience of *Robin Sloan*'s newsletter, the lab-notebook reproductions in *The Botanical Companion*, and the hand-drawn botanical illustrations of Ernst Haeckel rendered in neon. Visiting feels like opening a dissertation at midnight under a single green-shaded library lamp. ## Layout Motifs and Structure The architecture is **immersive-scroll** — a single long vertical journal-essay divided into five sections (*I. Of Leaves*, *II. Of Stems*, *III. Of Roots*, *IV. Of Flowers*, *V. Of Fruit*). Body text sits in a 680px reading column with hanging-indent paragraphs and a 220px right-margin reserved for footnotes set in tech-mono italic. Each section opens with a full-bleed parallax botanical illustration (a leaf-veining cross-section, a stem-anatomy diagram, etc.) drawn in hand-drawn ink on neon background, scrolling at 0.7× the page speed. Section roman numerals are set in tech-mono at 144pt magenta, half-bleeding off the left edge of the viewport. The page scrolls in a long vertical movement with **parallax** patterns governing the section opener illustrations and the footnotes (footnotes slide in from the right at 1.2× page speed, opposite to the illustration parallax). ## Typography and Palette **Typography** is led by JetBrains Mono Variable (the **tech-mono** brief): JetBrains Mono Bold 144pt for section roman numerals, JetBrains Mono Italic 84pt for section titles (e.g., "*II. Of Stems*"), and JetBrains Mono Regular 17px / 1.7 for body text. A secondary face, Source Serif 4 Italic at 14px / 1.6, appears only in footnote marginalia ("see Lévi-Strauss, *La Pensée Sauvage*, p. 117") and pull-quotes — italic serif as a scholarly counter-voice to the monospace primary. Numbers are tabular figures. Citation anchors are rendered as small acid-green numerals raised as superscripts. **Palette** is **dark-neon** — midnight with botanical neon highlights: - `#06070D` — midnight library (page ground) - `#0E1018` — secondary surface (footnote zone, slightly lifted) - `#1A1F2A` — code/quote panel ground - `#E8E1D4` — bone cream (body text) - `#FF3DA8` — neon magenta (section roman numerals, key emphasis) - `#39FF14` — acid green (citation anchors, hover-state, leaf veining highlights) - `#9D7DFF` — electric violet (pull-quote underline accent) - `#4A5B70` — slate gray (microcopy, marginalia secondary) Neon accents are scarce: magenta only on section numerals, acid-green only on citation anchors, violet only on pull-quote underlines. ## Imagery and Motifs Imagery is built around **hand-drawn** botanical illustrations — each section opener hosts one large hand-drawn ink illustration (a leaf cross-section, a stem-bundle diagram, a root system, a flower anatomy, a fruit cross-section) drawn in cream `#E8E1D4` line-art on the midnight ground, with selective acid-green highlights tracing the veining or anatomical structure. Illustrations are rendered as SVG paths so they can scale crisply and animate stroke-draw on viewport entry. **Leaf-organic** motifs are woven through the body type as well: paragraph dingbats are tiny leaf-glyphs, hanging-indent markers are tiny stem-curls, and the page's section-divider rules are drawn as undulating ivy-vines in 1px cream. Decorative furniture includes hand-lettered cataloging numerals in the bottom-right of each illustration ("Pl. II. Fig. 4"), and a single hand-drawn microscope diagram in the footer. No photographs. ## Prompts for Implementation Build an immersive-scroll botanical-philosophy journal. Each section is `padding-top: 14vh; padding-bottom: 14vh;` with a full-bleed illustration container at `position: sticky; top: 0; height: 70vh; overflow: hidden;` containing the SVG illustration. The signature animation: the illustration parallax-scrolls at 0.7× the page scroll using `transform: translate3d(0, calc(var(--scroll) * 0.7), 0)`, while footnotes in the right margin parallax at 1.2× (faster than page) so the eye is in two simultaneous motions. Botanical SVG illustrations animate on viewport entry with `stroke-dasharray` reveal — each path's stroke draws from 0 to full length over 1.6s ease-out, giving the impression the illustrator is drawing live. JetBrains Mono Bold 144pt section numerals are positioned with `left: -40px;` so they half-bleed off the left edge. Citation anchors are `` elements with acid-green color and a hover-state that draws an underline using SVG `stroke-dasharray` animation. Avoid CTA stacks, pricing menus, signup walls, stat grids, blog-post-grid layouts — this is a peer-reviewed paper, not a CMS. The footer is a JetBrains Mono Italic line in cream: "renai.moe — Vol. III, Fasc. 2, 2026 — referee accepted." ## Uniqueness Notes - **Differentiator 1:** Editorial aesthetic + dark-neon palette + tech-mono typography — a register collision (academic + nightlab + monospace) that is almost unprecedented in the registry. - **Differentiator 2:** Hand-drawn botanical illustrations animated via SVG stroke-draw on viewport entry — narrative use of `stroke-dasharray`, not the typical fade-in. - **Differentiator 3:** Two-direction parallax (illustration 0.7×, footnotes 1.2×) producing simultaneous eye-motion in opposite directions — a rare dual-axis use. - **Differentiator 4:** Leaf-organic motifs woven into typographic micro-furniture (dingbats, hanging-indent markers, section rules) rather than appearing as standalone illustrations. - **Differentiator 5:** Scholarly-intellectual tone delivered through monospace body + italic serif footnotes — a true two-voice editorial structure with mono primary and serif counter-voice. - Planned seed: aesthetic=editorial, layout=immersive-scroll, typography=tech-mono, palette=dark-neon, patterns=parallax, imagery=hand-drawn, motifs=leaf-organic, tone=scholarly-intellectual. - Avoids overused patterns flagged by frequency.sh: `playful` aesthetic (28%), `photography` imagery (89%), `corporate` aesthetic (24%) — none used here.