# Design Language for renai.wiki ## Aesthetics and Tone renai.wiki is **the marginalia of a Victorian commonplace-book kept by an obsessive cataloguer of love** — a hand-bound folio in which every entry about romance (the slow burn, the unsent letter, the second meeting, the quarrel-and-reconcile, the long-distance ache) has been pressed flat, annotated in three inks, and sealed with a wax disc. The aesthetic is **victorian-ornate filtered through the cool restraint of an archive**: the engraved borders, the foliate rules, the fleurons and the printer's flowers of a 19th-century keepsake-book — but rendered with gallery air around everything, none of the claustrophobic clutter the Victorian style usually carries. Think a conservator's reading room at dusk: warm lamp, cold parchment, gold leaf that has gone matte with age, a faint smell of iron-gall ink. The tone is **scholarly-intellectual with a held-breath of pastoral-romantic underneath** — the prose of a curator who is plainly, quietly in love with the subject but would never say so; captions are dry, dates are precise, and yet the whole thing aches. Nothing is cute. Nothing is "wedding website." This is romance as *taxonomy* — entries, cross-references, see-also lines — and the emotion lives in the gaps between the catalogue rows, the way it lives in the white space of a real diary. The mood word is **vellum**: thin, translucent, lamp-warmed, slightly cockled at the edges. Everything sits on vellum. Everything could be lifted off the page with tweezers. ## Layout Motifs and Structure The site is **a single vertical folio of seven leaves** — `editorial-flow`, not card-grid (card-grid is at 91%; this site refuses it). Each leaf is a full-bleed parchment field, and on each leaf the content is set as **an illuminated manuscript page: a single broad text column, slightly off-centre toward the gutter, framed on three sides by an engraved foliate border, with a wide outer margin reserved entirely for marginalia.** - **The gutter rule.** Every leaf has an implied book-gutter running vertically at the 38% mark. The main text column hugs the gutter side; the outer margin (the remaining ~50% of leaf width on wide screens) holds *only* marginal notes, see-also references, and a single pressed-specimen illustration per leaf. This asymmetry is fixed and never flips — like a right-hand page in a real codex. - **The dropped initial.** Each leaf opens with a **historiated drop-cap** — a single huge letterform (the first letter of that leaf's title) set as an SVG, occupying roughly 4 lines of body height, foliated with engraved tendrils that spill one curl out into the margin. - **No top nav. No hamburger. No footer bar.** Navigation is **a vertical "spine ribbon"** pinned to the extreme left edge: seven thin engraved tick-marks, one per leaf, like the sewn signatures visible on the spine of an unbound book. Hovering a tick draws a 1px gold rule outward and reveals the leaf's short title in small caps. That ribbon is the *only* chrome. - **Bottom of each leaf:** a hand-set **"see also" rule** — a centred row of three fleuron glyphs (✦ ❧ ✦ style ornaments) with two cross-reference links between them, styled as catalogue entries ("→ Leaf IV · The Unsent Letter"). - **Wax seal as scroll-progress.** Bottom-right corner of the viewport holds a small circular wax-seal SVG; as you scroll through the folio it slowly *fills* with deeper crimson, like wax pooling, reaching full saturation at the last leaf. This is `layered-depth` only in the gentlest sense — the parchment, the engraved border slightly "above" it (a 1px drop), the pressed specimen slightly "above" that with a soft contact-shadow. Three planes, no more. ## Typography and Palette **Type system — Google Fonts only, three voices, never blended:** - **Display / drop-caps / leaf titles — `Cormorant Garamond`** (weights 300, 500, 600; also `Cormorant SC` small-caps for the spine ribbon and see-also lines). This is the *engraver's* voice — high-contrast, thin hairlines, long elegant ascenders. Leaf titles set at 300 weight, 64–104px, very tight tracking (`-0.01em`). The historiated drop-cap is also Cormorant Garamond at ~600 weight, drawn as outline SVG so tendrils can be welded onto it. - **Body / catalogue prose — `EB Garamond`** (regular 400, italic, 500). A faithful old-style book face: this carries every paragraph, every entry description, every date. Set generously — 19px, line-height 1.72, measure capped at ~62 characters so it reads like a printed page, not a screen. - **Marginalia / annotations — `Caveat`** (the only handwritten voice, weight 400 and 600). Margin notes are set in Caveat at 17–20px, in the *iron-gall* ink colour, rotated a hair (−1.5° to +2°), as though pencilled in by the cataloguer years after the entry was typeset. Used sparingly — 1 to 3 margin notes per leaf, never a wall. **Palette (warm parchment base, three inks, one seal):** - `#F3EAD7` — **Vellum** — the parchment field, the base of every leaf. Faintly uneven (very low-opacity grain overlay). - `#E8DBBE` — **Aged leaf** — slightly deeper parchment for the engraved border fill and the margin band. - `#2B2118` — **Sepia-iron ink** — primary text; near-black but browned, never pure `#000`. - `#5E4632` — **Walnut** — secondary text, dates, captions, the engraved border line-work. - `#4A5D52` — **Verdigris** — the "annotation" accent: see-also links, the foliate tendrils on drop-caps, the spine-ribbon ticks. An aged-copper green, like oxidised gilt. - `#8E2B2B` — **Garnet wax** — used *only* for the wax seal, the scroll-progress fill, and the single most important word in each leaf's opening line. Crimson is rationed; it appears maybe four times per leaf. - `#B89A52` — **Tarnished gilt** — hairline rules, the 1px reveal on the spine ribbon, the inner keyline of the engraved border. Matte gold, never shiny. Contrast pairing locked: Sepia-iron `#2B2118` on Vellum `#F3EAD7` for all body; Garnet `#8E2B2B` and Verdigris `#4A5D52` reserved as the only colour events. ## Imagery and Motifs **No photography. No 3D. No stock illustration. Everything is hand-built SVG, line-engraved, two-tone (walnut line-work on aged-leaf fill), in the manner of 19th-century steel engravings and printer's-flower catalogues.** - **Engraved foliate borders** — each leaf's three-sided frame is a unique repeating SVG vine: acanthus on Leaf I, ivy on Leaf II, wheat on Leaf III, laurel, myrtle, fern, and forget-me-not on the rest. Drawn at 0.75px stroke, walnut, with the occasional tiny berry or seed-head in verdigris. - **Historiated drop-caps** — seven of them, one per leaf, each a Cormorant capital with tendrils, a small engraved bird or moth or key tucked into the counter of the letter. - **Pressed specimens** — the single margin illustration per leaf is a "pressed" botanical or object specimen, line-engraved and labelled like a herbarium sheet with a tiny catalogue number ("no. 42"): a pressed pansy ("thoughts"), a sprig of rosemary ("remembrance"), a folded paper boat, a stopped pocket-watch, a knotted ribbon, a single glove, a bee. - **Fleurons & printer's flowers** — the see-also dividers and any list bullets are real typographic ornaments (❧ aldus leaf, ✦, ⁂ asterism), set in walnut. - **The wax seal** — a circular SVG seal, garnet, with a faint embossed monogram "恋" (the kanji for *love*, the "renai" 恋愛) at its centre — the one place the Japanese root of the domain surfaces, pressed quietly into wax. - **Cockled-edge mask** — every leaf's parchment field has a very slightly irregular top and bottom edge (an SVG path with gentle undulation) so the "page" looks hand-cut, never machine-trimmed. - **Ruled guidelines** — extremely faint horizontal baseline rules behind body text on 1–2 leaves, like the ruling pricked into a real manuscript page. ## Prompts for Implementation Build renai.wiki as **a single HTML page, one CSS file, one ES module** — no framework, no build step, no service worker. The page is a slow turn through a seven-leaf folio about romance. There is **no CTA, no pricing block, no stat grid, no testimonial row, no contact form, no email signup, no FAQ accordion, no logo wall, no cookie banner, no chatbot.** There is only the folio. **Storytelling structure — seven leaves, vertical scroll, ink-bleed reveals:** 1. **Leaf I — *Frontispiece*.** The folio's title page. Centred: a large engraved cartouche holding the words "renai · wiki" in Cormorant 300, with the line beneath in EB Garamond italic: "a commonplace-book of romance, kept by a hand that will not name itself." A single garnet word: *kept*. The spine ribbon and wax seal fade in. Below, a one-line table-of-contents in small caps. 2. **Leaf II — *The First Meeting*.** Drop-cap "F", acanthus border, margin specimen: a pressed forget-me-not, no. 01. Body prose: a curator's entry on first encounters — typeset like a dictionary headword with etymology, then a paragraph of dry-tender description. Garnet word: *recognition*. 3. **Leaf III — *The Slow Burn*.** Drop-cap "S", ivy border, margin specimen: a half-burnt taper, no. 17. The body text here is set with the faint ruled baselines visible. Margin note in Caveat: "this entry was revised four times." 4. **Leaf IV — *The Unsent Letter*.** Drop-cap "U", wheat border, margin specimen: a folded paper boat, no. 24. The catalogue entry describes letters never sent; one short paragraph is set in EB Garamond italic and *struck through with a single thin walnut rule* — text the cataloguer crossed out but did not delete. 5. **Leaf V — *The Quarrel & The Mending*.** Drop-cap "Q", laurel border, margin specimen: a knotted ribbon, no. 33. Two short entries side by side in the column (the only place the column splits), one headed "rupture", one headed "repair", a thin gilt rule between them. 6. **Leaf VI — *The Long Distance*.** Drop-cap "L", myrtle border, margin specimen: a stopped pocket-watch, no. 41. Body prose on absence and time-zones; a margin note gives a list of cities in Caveat with tiny verdigris dots. 7. **Leaf VII — *Colophon*.** Drop-cap "C", forget-me-not border. The closing page of any fine book: who set the type ("set in Garamond, ruled by hand"), the catalogue's claimed extent ("vii leaves, 44 specimens, one wax seal"), and a final line — "the book is left open; the next entry is yours" — with no input box, no button, just an engraved blank ruled line waiting. The wax seal reaches full garnet saturation. The 恋 monogram in the seal does a single slow "press" animation as the leaf settles. **Motion (restrained, all `prefers-reduced-motion` aware):** - **Ink-bleed reveal** — as each leaf enters viewport, its body text fades up *and* its colour eases from a 0.6-alpha wash to full sepia, as though wet ink drying. ~600ms, gentle ease-out, slight stagger between paragraphs. - **Drop-cap draw** — the historiated initial's tendrils `path-draw-svg` (stroke-dashoffset) over ~900ms when its leaf is reached. - **Border unfurl** — the engraved foliate frame draws itself on, top edge then sides, like a vine growing — only on first reach. - **Spine ribbon** — `underline-draw` 1px gilt rule on hover, small-caps title fades in beside it. - **Wax seal** — scroll-linked radial fill (garnet pooling outward from centre); on the colophon, one `pulse`-like "press" (scale 1 → 1.04 → 1) with a soft contact-shadow deepening. - **Margin notes** — settle in with a 4px drop and a tiny rotation, ~220ms, slightly after their paragraph (as if added later). - Parallax is *minimal*: the engraved border drifts ~6px slower than the parchment on scroll; the pressed specimen ~10px. Nothing else moves with the page. (Parallax is at 90% in the corpus — this site uses the barest possible dose.) Bias the whole thing toward **a quiet reading room**: lamp-warm, paper-still, every interaction the size of a turned page, never a clicked button. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **Victorian-ornate is at 1% in the frequency analysis — almost nobody uses it.** This site claims that empty room, and further bends it: the usual Victorian website is *busy* (crammed borders, jewel tones, gilt everywhere). renai.wiki uses the Victorian engraving vocabulary — fleurons, foliate frames, historiated drop-caps — but spaces everything out with archive-gallery air, so it reads as a *conservator's reading room*, not a Christmas card. 2. **A genuine `editorial-flow` / illuminated-manuscript layout, not `card-grid`.** Card-grid is at 91% and full-bleed at 87%; this site refuses the grid entirely. Content is set as a single off-centre text column with a fixed book-gutter and a half-width marginalia band — the page geometry of a real codex right-hand leaf. The asymmetry never flips. 3. **Romance handled as taxonomy, not sentiment.** Tone is `scholarly-intellectual` (8% in corpus) layered over a held-back `pastoral-romantic` (the 34% convention) — but inverted: the romance lives in the *restraint*. Dry catalogue entries, precise dates, "see also" cross-references, a struck-through-but-not-deleted paragraph. The emotion is in what the cataloguer won't say. This is the opposite of every "warm-inviting / friendly" romance site. 4. **No photography at all** (98% of corpus uses photography) — everything is hand-built two-tone steel-engraving SVG: foliate borders, historiated drop-caps, pressed-specimen plates, fleurons, a wax seal. 5. **A scroll-linked wax-seal progress indicator with a 恋 monogram** — the domain's Japanese root (renai 恋愛, "romance") surfaces in exactly one place, embossed into wax, never spelled out — and the seal *fills with crimson* as the folio is read. Garnet is rationed to ~four appearances per leaf; the rest is parchment, sepia, walnut, verdigris, matte gilt. 6. **Typography rationed across three historically-coherent voices** — Cormorant Garamond (the engraver), EB Garamond (the printed book body), Caveat (the cataloguer's later pencil) — never blended, each with a defined job, no `mono` anywhere (mono is at 94% in the corpus; this site has none). **Chosen seed / style:** `victorian decorative bakery` — *aesthetic: victorian-ornate, layout: editorial-flow, typography: garamond-classic, palette: sepia-nostalgic, patterns: path-draw-svg, imagery: line-illustration, motifs: vintage, tone: scholarly-intellectual* **Avoided patterns from frequency analysis:** card-grid (91%), full-bleed-everything (87%), photography (98%), mono typography (94%), glassmorphism (82%), hand-drawn aesthetic (95%), heavy parallax/cursor-follow/magnetic/spring stacks (79–90%), warm-gradient palettes (94%), CTA/pricing/stat-grid blocks (excluded entirely).