# Design Language for renai.quest ## Aesthetics and Tone Dark-academia rendered in the spatial discipline of Japanese ma (negative space) - imagine the library of Trinity College Dublin emptied of nine-tenths its books, leaving each remaining volume a single isolated artifact in vast silence. The tone is nostalgic-retro: a longing for a past that may never have existed, somewhere between a Wes Anderson library scene and an Andrei Tarkovsky tracking shot through Solaris's library. The mood is "candlelight at 4am in a manor library where the dust has not been disturbed in fifty years and the only sound is a clock ticking three rooms away." The site is a quest - hence each section is staged as a discovered chamber, encountered after long corridors of stillness. The visual language refuses to scream, refuses to engage, refuses to convert. It assumes the reader has time and breath. Inspirations: Edward Gorey, Aubrey Beardsley, the typographic restraint of Robin Kinross's Hyphen Press editions. ## Layout Motifs and Structure Ma negative-space composition where 70% or more of every viewport is empty - the design is more silence than substance. Content arrives in small, dense islands placed asymmetrically: a paragraph in the upper-left, an illustration alone in the center, a folio number alone in the bottom-right. No symmetric balance ever. Each "chamber" (section) is one full viewport, separated by 80vh of pure negative space - the reader literally walks through empty halls between rooms. Grid lines (1px solid, hairline) appear faintly across each chamber as a 12-column structural skeleton, becoming visible only on hover - a reminder that the discipline exists beneath the silence. Content blocks lock to grid intersections but with intentional "broken" placements - a paragraph that starts on column 3 and ends on column 7, against type. Folio numerals run in the bottom-right of every chamber. ## Typography and Palette Display and body face: Libre Baskerville (Google Fonts) - the digital revival of John Baskerville's transitional serif, used at all sizes for a unified scholarly tone. Headlines at clamp(40px, 6vw, 88px) with -1% tracking, italic for chapter titles. Body at 18px/1.85 with optical kerning enabled. Accent capitals (folio numbers, chapter heads) in EB Garamond (Google Fonts) at 13px tracked to +12% all-caps. Inline emphasis ONLY through italic - never bold, never color. Drop caps three lines tall in Baskerville italic. Palette (high-contrast): - #0A0A0A ink-black (primary text, near-black with very subtle warmth) - #FAF7F0 vellum-cream (background, the page itself) - #1F1F1F shadow-charcoal (secondary text) - #8B0000 oxblood-leather (accent, folio numbers, drop caps) - #C9A961 brass-tarnished (rare highlight, like gilt on an old binding) - #2E2E2E carbon-rule (grid lines, hairlines) ## Imagery and Motifs Duotone-photograph illustrations: high-contrast black and vellum-cream, all imagery treated as photogravure plates lifted from a 19th-century botanical encyclopedia. Subjects are scholarly: a single feather quill, a stack of three books with one open, a brass compass, an empty chair facing a window. Each image carries a 2px stippled border imitating intaglio plate marks. Grid-lines motif: faint hairline rules in carbon-rule color form a constant 12-column scaffold, occasionally interrupted by a single ornament (a fleuron, a printer's mark) at a column intersection. Asterism dingbats (three asterisks in triangle formation) separate paragraphs. Marginal manicules (the pointing-hand dingbat) appear next to footnotes. NO photography of people, NO product shots, NO decorative SVGs - only stipple-engraved plates. ## Prompts for Implementation Build the site as a slow walk through five sequential library chambers, with long empty corridors between them. Hero: full viewport. The title appears letter-by-letter in Baskerville italic, fading in over 200ms per character with a 80ms stagger - the text materializes as if being inked onto a page. Scroll-triggered animation pattern: every text block reveals only when the scroll reaches its anchor, using a scroll-triggered IntersectionObserver with threshold 0.4. Reveal is a 1200ms ease-out fade combined with a 1ch leftward translation, mimicking ink settling onto vellum. Between chambers there must be at least 80vh of pure cream emptiness with a single hairline grid-line bisecting the void - the reader scrolls through silence. The grid system is visible only on cursor-stillness for 2 seconds: the 12-column hairline rules fade in at 8% opacity, fade out when the cursor moves. NO CTAs, NO pricing, NO stats grids, NO mailing list signups. Each chamber closes with a single asterism centered in 30vh of space. Cursor is a hairline crosshair - 1px lines that span the viewport horizontally and vertically, intersecting at the cursor position; movement is dampened with 60ms lag for an aged feeling. ## Uniqueness Notes - Ma-negative-space layout (4% corpus) combined with hud-overlay-style hairline grid that reveals on cursor stillness - the structural skeleton-on-hover behavior is unique in the dataset. - Duotone-photo imagery (2% corpus) treated as 19th-century photogravure plates rather than modern duotone - the visual reference is intaglio, not Instagram. - Baskerville-refined typography (2% corpus) used as the ONLY typeface family across all sizes - extreme typographic restraint absent from the corpus. - Chosen seed: aesthetic: dark-academia, layout: ma-negative-space, typography: baskerville-refined, palette: high-contrast, patterns: scroll-triggered, imagery: duotone-photo, motifs: grid-lines, tone: nostalgic-retro - Avoided patterns from frequency analysis: parallax (94%), card-grid (90%), photography imagery in modern sense (90%), warm palette (93%), mono typography (81%), mysterious-moody tone (70%) - none used; ma-negative-space (4%) and nostalgic-retro tone (3%) chosen.