# Design Language for renai.reviews ## Aesthetics and Tone renai.reviews is **The Illuminated Almanac of the Heart** — a Victorian-ornate critic's ledger in which every love, courtship, infatuation, and quiet companionship is reviewed, annotated, and bound in tooled leather. Picture a marble-topped clerk's desk in a 1890s reading room: a brass-clasped folio lies open, its pages thick as card, every entry written in copperplate and stamped with a wax seal bearing a heart impaled by a quill. This is not the rose-and-ribbon Valentine Victoriana of greeting cards; it is the **ledger-and-letterpress Victoriana of an actuarial society for romance** — solemn, ornamented, faintly absurd in its precision. The mood is *scholarly-intellectual* tipped toward the *opulent-grand*: a learned society that has, with total seriousness, appointed itself the Royal Reviewers of Affection, and publishes its findings in a gilt-edged annual. Victorian-ornate sits at a mere **1% in the aesthetic frequency analysis** — this site claims that near-empty room and furnishes it with engraved borders, drop-capital initials, ruled ledger columns, and oxblood marbled endpapers. The tone never winks too hard: the humour lives in the *contrast* between baroque ceremony and the tender, ordinary subject matter — a first date reviewed with the gravity of a parliamentary report; a long marriage given "four stars and a footnote." Everything is hushed, candlelit, smelling faintly of beeswax and old paper. The visitor should feel they have been admitted, after-hours, to consult the records. ## Layout Motifs and Structure The composition is a **magazine-spread** built as a bound folio — two-page openings, a central gutter shadow, ruled margins, and running heads. (Magazine-spread is at 6%; the *folio-as-book* interpretation, with a literal binding seam, is rarer still.) The page is **not** a card-grid and **not** a stat-block dashboard; it is a sequence of *plates* you turn through. - **The binding gutter.** A persistent vertical band down the centre of the viewport — a soft inner shadow with a faint stitched-thread SVG — divides every section into recto and verso. On scroll, content on the verso (left) and recto (right) drift at fractionally different parallax rates, as a real spread's pages do when a book is lifted. - **Ruled ledger margins.** Every plate is framed by a double rule (a thick line and a hairline, 3px / 1px) in faded sepia, with ornamental corner brackets (engraved acanthus curls) at all four corners. Inside, content sits in a generous *ma*-style margin so the ornament has room to breathe — `ma-negative-space` energy inside a Victorian frame. - **The seven plates** (vertical scroll, slide-reveal page-turns): 1. **Frontispiece** — the masthead, an engraved emblem, the society's motto. 2. **The Charter** — what this almanac reviews, set as a illuminated preamble with a drop capital. 3. **The Rubric** — how affection is graded (the five-star wax-seal scale), shown as an engraved chart, *not* a pricing table. 4. **Specimen Entries** — three sample reviews laid out as ledger rows: subject, verdict, footnote, marginalia. 5. **The Marginalia Drawer** — pull-quotes and reader annotations slid in from the page edges like loose slips of paper tucked into a book. 6. **The Colophon** — typeface and printing notes, set as a real colophon. 7. **The Bookplate** — a closing *ex libris* panel; a quiet line, a pressed-flower flourish, no email capture, no CTA wall. - **Page-turn transitions.** Section changes animate as a slow page-curl: the outgoing plate's right edge lifts and rotates ~12° on a `transform-origin` at the gutter, casting a moving shadow, before the next plate settles flat. ## Typography and Palette **Fonts (Google Fonts only — a Victorian press kept three metal faces: a display fat-face for headings, a workhorse old-style for text, an italic for marginalia):** - **Display & Masthead — *UnifrakturMaguntia*** (a true blackletter, used sparingly): for the society's emblem motto and the single largest masthead word only — at 1–2 occurrences total, set very large, letter-spaced wide. Used as an *engraving*, not body type. - **Headings & Plate Titles — *Playfair Display* (wght 700–900, italic available)**: high-contrast, Didot-adjacent fat-face — the voice of 19th-century title pages. Plate numbers ("PLATE THE FOURTH") set in Playfair small-caps with hair-thin spacing. - **Body & Ledger Text — *EB Garamond* (wght 400/500, with its true italic and small-caps)**: warm old-style serif for all running text, review bodies, charter prose. Drop capitals are EB Garamond at ~5 lines tall, sitting inside an engraved SVG initial-box. - **Marginalia & Annotations — *IM Fell English Italic*** (or *IM Fell English* roman for captions): a digitised 17th-century English type with deliberate ink-spread and irregularity — used for handwritten-feeling margin notes, footnote markers, "see also" slips. Its imperfection is the point. - **Numerals & Folios — *EB Garamond* old-style figures**, with running folio numbers ("xiv", "xv") in lowercase roman numerals at the outer bottom corners. **Palette — oxblood ledger, candle-warm vellum, gilt rule. Anchored in `deep-burgundy` (3% in the corpus) over warm parchment, with verdigris and gold as the only accents:** - `#2A1A14` — **Bistre Black** (ink, primary text, engraved lines) — not pure black; a brown-black like aged iron-gall ink. - `#F4E9D6` — **Candle Vellum** (page ground) — warm, slightly uneven; the base of every plate. - `#EADBC0` — **Endpaper Buff** (recessed panels, ledger row stripes). - `#6E1B23` — **Oxblood** (the binding colour; rules, drop-cap boxes, the wax-seal scale, masthead block). - `#8C2F2F` — **Garnet** (hover state for links, secondary ornament fill). - `#3F5E4C` — **Verdigris** (annotation ink, "approved" marks, small botanical flourishes) — the green of tarnished brass clasps. - `#B68A3E` — **Gilt** (the edge of every page, the rule highlight, the embossed emblem) — used as thin lines and small fills only, never large flats. - `#C9B79A` — **Dust** (hairline rules, dividers, disabled/quiet text). Marbled endpaper texture (oxblood + gilt swirls) appears only on the Frontispiece and Bookplate panels as a tiled SVG. ## Imagery and Motifs **No photography, no 3D renders, no stock illustration. Every visual is an SVG "engraving" — built from hairlines, cross-hatching, and stipple — as though pulled from a copperplate.** - **The Society Emblem.** A heart pierced diagonally by a quill pen, ringed by a laurel-and-ribbon cartouche, the motto on the ribbon ("AMOREM • RECENSEMUS" — *we review love*). Rendered in Bistre on Gilt, line-drawn, ~2px strokes with cross-hatch shading. Appears at the Frontispiece, shrinks to a tiny mark in the running head thereafter. - **The Wax-Seal Rating Scale.** Five wax seals (Oxblood blobs with a deckled SVG edge), each impressed with a different device — bud, half-bloom, full rose, rose with thorn, pressed-and-kept rose — standing for the five grades of affection. Empty grades show only the *outline* of an un-pressed seal. This is the site's signature interface element; it replaces any star-rating cliché. - **Engraved Corner Brackets & Rules.** Acanthus-leaf corner curls, fleuron section dividers (the printer's ❦), and double-ruled frames — all SVG, all in Dust/Gilt/Oxblood. A fleuron sits between every paragraph cluster. - **Drop Capitals.** Illuminated initial letters in an engraved box: the letterform in Bistre, the box filled with a tiny line-drawn vignette relevant to the plate (clasped hands, a candle, an open letter, a pressed flower). - **Marginalia Slips.** Loose-paper SVGs — slightly torn top edge, faint blue rule lines, a pin or wax dab — that slide in from the page edges carrying IM Fell italic annotations. - **Bookworm Holes & Foxing.** Subtle: a few faint brown foxing spots and one or two tiny "wormhole" dots per plate, as gentle paper-aged texture. Never enough to obscure text. - **The Quill Cursor.** The mouse cursor trails a faint Verdigris ink hairline that fades over ~600ms — as if you are signing the ledger as you read. ## Prompts for Implementation Build renai.reviews as **a single-route, vertically-scrolled bound folio** — one HTML file, one CSS file, one JS module. Treat the visit as a ~70-second consultation of an after-hours archive: a librarian has unclasped the brass lock and turned the lamp toward you. There is **no CTA stack, no pricing block, no stat-grid, no testimonial carousel, no email signup, no contact form** — there is only the sequence of seven plates and the act of turning them. **Storytelling structure (seven plates; slide-reveal page-turn transitions; the binding gutter always visible):** 1. **Frontispiece.** Fade up from near-black to candle-lit vellum as if a lamp is being raised. The UnifrakturMaguntia motto word looms, the engraved Society Emblem inks itself in via `path-draw-svg` (the quill drawn last, like a signature). A single line of EB Garamond italic beneath: the year and the society's name. 2. **The Charter — "Of What We Keep Account."** A drop capital blooms; the preamble prose types in slowly (`typewriter-effect`, gentle, with the IM Fell ink-spread feel) explaining that this almanac reviews not products but *affections* — first meetings, slow burns, reconciliations, partings, the long quiet ones. Fleurons stagger in between sentence-clusters. 3. **The Rubric — "The Scale of Regard."** The five wax seals press down one by one (scale-from-0, slight squash/`elastic`, a soft thud), each labelled in Playfair small-caps with an EB Garamond gloss. Hovering a seal lifts it a hair (`hover-lift`) and reveals its engraved device enlarged in the margin. Make absolutely sure this reads as an engraved *chart*, never a price card. 4. **Specimen Entries.** Three ledger rows reveal on scroll (`slide-reveal`, staggered): each row has a SUBJECT column (e.g., "A Correspondence Conducted Entirely by Postcard"), a VERDICT column (a wax-seal grade + a Playfair phrase), a BODY column (EB Garamond review prose), and a MARGINALIA slip pinned to the outer edge in IM Fell italic. Ledger rows alternate Vellum / Endpaper-Buff stripes; a hairline rule between each. 5. **The Marginalia Drawer.** The plate tilts very slightly; loose-paper annotation slips slide in from both page edges (`slide-reveal` from x-offset), each a reader's note or a pull-quote, lightly rotated, casting paper shadows, a wax dab or pin holding each. They settle with a faint paper rustle (silent if no audio). 6. **The Colophon.** Set as a genuine printer's colophon, centred, in EB Garamond: the typefaces named (UnifrakturMaguntia, Playfair Display, EB Garamond, IM Fell English), the "press," the binding, the paper — a fleuron, then the year in roman numerals. 7. **The Bookplate (ex libris).** The page-curl turns one last time to a near-empty verso: a small engraved *ex libris* cartouche, one quiet line ("Bound for the curious, the smitten, and the reviewing kind."), a single pressed-flower SVG flourish, and the folio number. The lamp dims back toward black. End. No form, no button, no upsell. **Motion & technical notes:** all transitions slow and weighty (`spring`/`elastic` with low stiffness); `path-draw-svg` for every engraving's reveal; `parallax` only as the gentle recto/verso drift across the gutter; `cursor-follow` as the fading Verdigris quill-ink trail; `stagger` for fleurons and ledger rows; respect `prefers-reduced-motion` by replacing page-curls with simple cross-fades and freezing the cursor trail. Type renders with `font-feature-settings` for old-style figures and true small-caps where the face supports them. Texture (foxing, marbled endpaper, paper grain) is SVG/CSS only — no raster images. ## Uniqueness Notes Differentiators, each a deliberate departure from the frequency analysis: 1. **Victorian-ornate at 1% — and the *ledger* dialect of it, not the Valentine dialect.** The corpus's scant Victoriana leans decorative-romantic; renai.reviews instead builds an *actuarial society for love* — engraved rules, ledger columns, copperplate gravity. A near-empty room, furnished oddly. 2. **The wax-seal rating scale replaces every star-grid and stat-block.** Frequency shows `card-grid` at 91% and stat/dashboard layouts everywhere; this site's central interface is five impressed wax seals on a folio page — a rating system rendered as engraving, not UI chrome. 3. **The folio binding gutter as a layout primitive.** Magazine-spread is 6%, but a literal centre-binding with stitched-thread SVG, recto/verso parallax drift, and physical page-curl transitions is not present in the reference designs I read. 4. **Quill-ink cursor trail + blackletter used as engraving, not type.** `cursor-follow` is at 89% but almost always a glow/dot/magnetic blob; here it is a fading sepia-green ink hairline — you are signing the ledger as you read. UnifrakturMaguntia appears 1–2 times only, as an engraved mark, never as readable text. 5. **No CTA economy whatsoever.** Seven plates, an ex-libris close, a dimming lamp — and nothing to click, buy, or submit. The experience is a consultation, not a funnel. Avoided overused patterns from the frequency analysis: hand-drawn aesthetic (95%), glassmorphism (82%), card-grid layout (91%), warm-gradient palettes-as-default (94%/98%), mono typography (94%), tilt-3d (30%), generic full-bleed hero-dominant openings. Chosen seed: **victorian decorative bakery** — reinterpreted from "bakery" to "the Society's bindery and press," keeping the seed's ornate-Victorian core while swapping the subject to a critic's almanac of the heart.