# Design Language for renai.science ## Aesthetics and Tone renai.science is a **retro scientific atelier** -- a gilded laboratory notebook from a 1970s research institute that secretly studied the chemistry of romance. Picture a black leather-bound technical manual stamped in bullion gold, sitting on the desk of a lonely physicist who has been cataloguing love phenomena like radioactive decay curves. The aesthetic fuses **retro tech-publication gravitas** with the hush of a private observatory: brass instruments, oscilloscope glass, vintage IBM tutorial pamphlets, the credit sequence of a Tarkovsky film. The tone is **tech-tutorial** delivered with **opulent-grand** restraint. Copy reads like a deadpan vintage manual ("Section 3.2 -- Procedure for Reproducing Affection at Scale") while the visual register is luxe black-and-gold lacquer. Nothing winks. Nothing markets. The site simply documents experiments. The reader is treated as a graduate assistant being walked through Procedure 4 of an ongoing study, with the unspoken implication that the apparatus itself is the human heart. Inspirations: Whole Earth Catalog endpapers, IBM SELECTRIC service manuals (1972), gilt-edged Encyclopaedia Britannica spines, Bell Labs Technical Journal covers, the title cards of 2001: A Space Odyssey, vintage Hi-Fi vacuum-tube amplifier panels, a Cartier ledger. ## Layout Motifs and Structure **Timeline-vertical with central golden rail.** The entire page is structured as an instructional timeline: a single continuous vertical brass rail (4px wide, gradient `linear-gradient(180deg, #c9a14a 0%, #f4d27a 50%, #8a6a2a 100%)`) runs down the exact horizontal center of the viewport from top to bottom. Each "Procedure" docks alternately to its left or right with a numbered milestone node (a small gold-rimmed circle, 18px diameter, with engraved Roman numerals: `I.`, `II.`, `III.` ...). Grid: a **CSS grid `[edge 1fr] [rail 4px] [edge 1fr]`** wrapping the body content, with each Procedure spanning one of the two outer columns. Max content width 1080px, centered, with generous left/right gutters of 80px on desktop. Mobile collapses the rail to the left edge (24px from screen) and stacks all entries to its right. **Procedure block** = a single experiment. Each block is a tall card (min-height 60vh) constructed as a tactile artifact: - Header strip: a thin gold horizontal bar with the procedure number, title in monospace caps, and a tiny "Filed: 1974.03" date stamp. - Body: two-column inside the card on desktop -- left for narrative copy, right for an "Apparatus Diagram" (an organic-blob SVG illustration). - Footer: a "Reveal Hypothesis" trigger that flips the entire card 180deg around its Y-axis to expose the back side, where the dry conclusion is rubber-stamped in red onto cream paper. **Vertical reading rhythm.** Procedures alternate left/right of the rail. Between procedures, a thin animated **wave-form** trace (60px tall, full-width SVG sine) connects them, suggesting a continuously-monitored signal -- the heartbeat of the ongoing study. The wave is drawn live as the user scrolls past it, using `path-draw-svg` stroke-dashoffset animation. The page opens with a full-bleed **Title Card** (100vh) that shows only the institution mark: a circular gold seal centered on black, with the inscription `INSTITVTE FOR APPLIED ROMANTICS · EST. 1974 · VOL. III` rotating slowly around its rim. Beneath it, in tiny mono caps: `RENAI.SCIENCE / FIELD MANUAL / TURN PAGE TO BEGIN`. It closes with a **Bibliography Plate** -- a final card styled as the back endpaper of a hardcover book, listing fictional citations in a perfect monospace hanging-indent. No nav bar. No CTA. No pricing. No stat-grid. The timeline rail itself is the navigation: a slim sticky indicator (a tiny gold pin) slides down the rail as the user scrolls, displaying the current procedure number in superscript. ## Typography and Palette **Fonts (Google Fonts, all confirmed available):** - **Display / Procedure Titles:** `IBM Plex Mono` -- weight 700, uppercase, letter-spacing 0.18em, size `clamp(1.4rem, 2.6vw, 2.1rem)`. The titles read like punch-card labels: `PROCEDURE IV -- ON THE HALF-LIFE OF AFFECTION`. - **Body / Tutorial Copy:** `JetBrains Mono` -- weight 400, line-height 1.85, size 0.98rem. Paragraphs are deliberately narrow (max 58ch) to mimic the column width of a printed technical manual. - **Institution Mark / Annotations:** `Major Mono Display` -- weight 400, letter-spacing 0.32em, used for the gold seal, footnote markers (`*`, `†`, `‡`), and the "Filed:" date stamps. Size 0.72rem. - **Hypothesis Stamp (back of card):** `Special Elite` -- weight 400, simulating an off-register typewriter strike, size 1.05rem, with a 2deg rotation and red ink color. All four faces are monospaced or near-monospaced. No proportional sans, no humanist, no rounded shapes anywhere in the type system. The mono dominance reinforces the tech-tutorial register. **Palette (gold-black-luxury, 7 hex values):** - `#0a0908` -- **Obsidian Black**, primary background. Not pure black; a warm-leaning near-black to suggest leather binding. - `#13110f` -- **Bind Black**, secondary surface for procedure cards. A hair lighter than the page; differentiated only by its faint warmth. - `#c9a14a` -- **Bullion Gold**, primary accent. Used for the rail, milestone nodes, gold seal, all dividers. - `#f4d27a` -- **Gilt Highlight**, the lighter pole of every gold gradient. Used for the rail's center glow and rim-light on milestone nodes. - `#8a6a2a` -- **Aged Brass**, the darker pole of every gold gradient. Used for engraved shadows beneath gold elements. - `#e9e2cf` -- **Vellum Cream**, the only "paper" color. Appears exclusively on the back of flipped cards (hypothesis reveals) and on the bibliography plate. 91% opacity over a faint paper grain. - `#9a1c1c` -- **Stamp Crimson**, the single accent color. Used only for the rubber-stamp hypothesis text on flipped cards. Never appears anywhere else; it must remain rare to feel ceremonial. Every gold element uses a 3-stop linear gradient `Aged Brass → Bullion → Gilt → Bullion → Aged Brass` to simulate a polished metal surface catching light. ## Imagery and Motifs **Organic-blob apparatus diagrams.** Each procedure card contains an SVG illustration on its right half: an asymmetric organic blob (rendered with `` and 5-7 cubic Bezier handles, no perfect circles) that represents the "apparatus" of that experiment. The blob is filled with a subtle radial gradient from `#13110f` to transparent and stroked in 1.5px Bullion Gold. Inside the blob, hand-drawn-looking annotation lines (in gold) point to labeled regions with mono-caps captions: `(a) RECEPTOR`, `(b) DIFFUSION ZONE`, `(c) NULL CHAMBER`. The blobs morph slowly on hover (CSS `d` attribute interpolation via `@property`), their handles drifting like a slow lava lamp -- an organic, living instrument. **Wave-form connectors.** Between consecutive procedures along the central rail, a horizontal wave-form trace (sinusoid with slight phase noise) connects the bottom of one procedure node to the top of the next. The waveform is 60px tall, drawn in 1px Bullion Gold with a thin Gilt Highlight glow filter (`feGaussianBlur stdDeviation=1.2`). It is animated using `stroke-dasharray` to draw itself in as the user scrolls past, then continues to gently oscillate (vertical `transform` keyframe, 8s ease-in-out infinite) suggesting a still-live oscilloscope signal. **Card-flip mechanic.** Every procedure card has a "REVEAL HYPOTHESIS" trigger in its footer (a gold-rimmed pill, 11px mono caps). Clicking flips the entire card 180deg around its Y-axis using CSS `transform: rotateY(180deg); transform-style: preserve-3d`. The back face is rendered in Vellum Cream paper texture with a single rubber-stamped sentence in Stamp Crimson, off-center, slightly rotated. A second click flips it back. Only one card may be flipped at a time -- opening another auto-flips the previous closed. **Engraved details.** All gold elements carry a 1px-deep "engraved" effect: a `box-shadow: inset 0 1px 0 rgba(244,210,122,0.4), inset 0 -1px 0 rgba(138,106,42,0.6)` to suggest milled metal. Milestone nodes have an additional pinpoint Gilt Highlight specular reflection at their 10 o'clock position (single 2px pseudo-element). **Paper grain.** The Vellum Cream surfaces (back of flipped cards, bibliography) carry a CSS-noise overlay: `background-image: url("data:image/svg+xml...turbulence")` at 0.04 opacity to suggest vintage paper fiber. **Roman numerals.** All procedure indices are Roman, never Arabic. `I, II, III, IV, V, VI, VII, VIII, IX, X, XI, XII`. This single typographic convention reinforces the period-piece illusion more than any other element. **Footnote daggers.** Inline annotations use `†` (dagger) and `‡` (double dagger) rather than asterisks beyond the first; footnotes appear as a thin gold horizontal line plus a single mono-caps line at the bottom of each procedure card. **No photography. No icons. No illustrations of people. No emoji.** The only figurative imagery is the institution seal (geometric circular emblem) at the title card. ## Prompts for Implementation Build as a **vertical scientific timeline** delivered in the cadence of a vintage technical manual. Treat the page as a single continuous artifact (one HTML document, no pagination, no routing) where the user descends through Procedures I through XII. The act of scrolling **is** the act of turning manual pages. **Structure:** - Implement the central rail using a `position: sticky; top: 0; height: 100vh` approach is **wrong** -- the rail must extend the full document height. Use a single absolutely-positioned 4px-wide div anchored at `left: 50%` of a `position: relative` body wrapper, with `height: 100%`. The rail's gradient is the literal background-image of that div. - Each procedure card is a self-contained `
` with `transform-style: preserve-3d`, two child faces (`.front`, `.back`), and a JS-toggled `is-flipped` class. Use `IntersectionObserver` to add an `is-visible` class that fades the card in (translateY 24px → 0, opacity 0 → 1) over 600ms cubic-bezier. - Wave-form connectors are inline `` between `
` elements. Animate `stroke-dashoffset` from `pathLength` to `0` when the connector enters the viewport. Continue with an idle vertical oscillation keyframe afterward. - Apparatus blobs are inline `` per procedure. Each has unique `` cubic Bezier coordinates -- no two procedures share an apparatus shape. Hand-author 6 distinct blob shapes; they need not be procedurally generated. **Animation:** - All transitions use `cubic-bezier(0.22, 0.61, 0.36, 1)` -- a confident, mechanical easing that suggests precision instruments rather than playful springs. - Card flips: 700ms duration. Both faces use `backface-visibility: hidden`; the `.back` is rotated `rotateY(180deg)` by default. - Respect `prefers-reduced-motion: reduce` -- disable wave oscillation, disable blob morph, retain the card-flip but shorten to 200ms with a simple cross-fade fallback. - Cursor remains the default arrow except on the flip-trigger pill, which becomes `cursor: pointer`. **Sound: none.** A vintage manual does not chime. **Storytelling spine:** The 12 procedures are narrative chapters of a single fictional research program studying the phenomenology of love. Each procedure has: 1. A title in mono caps with a Roman numeral. 2. A "Filed:" date stamp from a fictional 1974-1976 timeline. 3. 3-5 paragraphs of deadpan tutorial-voice copy ("Procedure IV -- Apply 5ml of unrequited longing to the receptor membrane. Observe diffusion over a 72-hour interval."). 4. An apparatus blob diagram with 3 labeled regions. 5. A flip-revealed hypothesis stamped in Stamp Crimson. The cumulative effect is that of reading someone's lifework -- a tender, absurd, tightly-controlled obsession. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial cards, hero buttons, dark-mode toggle, mode switcher, social proof badges, photography, illustrated people, emoji, bright accents, modern sans-serif body type, rounded corners larger than 4px, drop shadows beyond the engraved metal effect, parallax-scroll backgrounds, sticky modals, popups, newsletter forms, footer link grids, breadcrumb nav, search bar, side drawers, mobile hamburger menu (use a single anchor link to the top), generic "About / Contact / FAQ" sections. **PREFER:** narrative immersion over interactivity, reading time over scroll time, restraint over abundance, monospace over everything, gold engraving over flat color, organic blob over geometric icon, Roman numerals over digits, "filed" dates over "published" dates, "Procedure" over "Section." ## Uniqueness Notes 1. **Central golden timeline rail with engraved milestone nodes** -- a brass-instrument vertical spine running the full document height, with Roman-numeraled, gold-rimmed, specular-highlighted milestone circles at each procedure. No other site in the collection uses a literal full-height metal rail as both decoration and navigation. 2. **Tutorial-voice love science manual** -- the entire site is written and presented as a 1974 research institute's field manual on the phenomenology of romance, with deadpan procedure copy, fictional filed dates, dagger footnotes, and a closing bibliography plate. The tech-tutorial tone is rigorously sustained; nothing breaks the manual fiction. 3. **Y-axis card-flip hypothesis reveals on every procedure** -- each of the 12 procedure cards flips 180deg around its Y-axis to reveal a Stamp-Crimson rubber-stamped hypothesis on Vellum Cream paper. A back face that exists ONLY for hypothesis reveals; the back face is never used for any other content type. 4. **Hand-drawn organic-blob apparatus diagrams** -- each procedure carries a unique cubic-Bezier organic blob illustration with three labeled regions in monospace caps, simulating the apparatus diagrams of a vintage scientific instrument manual. The blobs morph live on hover via animated SVG path interpolation. 5. **Inter-procedure wave-form oscilloscope traces** -- between every consecutive procedure, an animated sine-wave SVG trace connects them along the rail and continues to oscillate slowly afterwards, suggesting a continuously-monitored experimental signal. The wave-form is the connective tissue of the timeline. 6. **Gold-black-luxury palette with single Stamp Crimson accent** -- a strict 7-color system dominated by Obsidian Black and three-stop Bullion Gold gradients, with Vellum Cream reserved for paper backs and Stamp Crimson reserved exclusively for the hypothesis stamp. The crimson appears only when a card is flipped, making it ceremonial. 7. **All-monospace four-face type system** -- IBM Plex Mono + JetBrains Mono + Major Mono Display + Special Elite (typewriter). No proportional face anywhere; the entire site is set in monospace, an extreme commitment that no card-grid or photography-driven design in the collection attempts. **Chosen seed/style:** aesthetic: retro, layout: timeline-vertical, typography: tech-mono, palette: gold-black-luxury, patterns: card-flip, imagery: organic-blobs, motifs: wave-forms, tone: tech-tutorial. **Reference avoided patterns from frequency analysis:** Avoids `playful` aesthetic (72%), `card-grid` layout (75%), `centered` layout (66%), `warm` palette (84%), `gradient` palette (58%), `photography` imagery (82%), `mono` typography is reframed away from terminal/dark-mode tropes (79% of mono usage trends terminal; this design pulls mono into luxury/manual territory instead), `mysterious-moody` tone (27%), `professional` tone (17%), `scroll-triggered` patterns kept minimal (32%), `parallax` (24%) avoided. Embraces fully unused `gold-black-luxury` (0%), underused `tech-mono` (1%), `card-flip` (1%), `organic-blobs` (1%), `wave-forms` (1%), `tech-tutorial` (1%), `timeline-vertical` (4%), and `retro` (6%).