# Design Language for transactology.dev ## Aesthetics and Tone transactology.dev is presented as **the field manual of a 19th-century naturalist who studies *transactions* the way Linnaeus studied flora** — a leather-spined survey volume in which every kind of exchange (a database commit, a wire transfer, a handshake, a stolen kiss, an honest mistake rolled back) is pinned, labelled, cross-sectioned and annotated in the margins. The discipline is fictional; the rigor is not. The mood is **skeuomorphic-scholarly**: a real ledger desk under a brass lamp, foxed rag paper, the smell of india ink and machine oil, but every plate animates and every annotation can be pulled apart with the cursor like a sliding rule. Tone is **scholarly-intellectual** with a dry, deadpan wit — the voice of a curator who has catalogued ten thousand transactions and finds the human ones no less precise than the atomic ones. Nothing shouts. Nothing sells. The site reads like a museum vitrine you are allowed to *open*. There is reverence for the subject and a quiet pleasure in nomenclature: every section header is a Latinate binomial ("*Transactio atomica*", "*Reversio poenitens*"), every diagram has a tiny engraved scale bar, every page corner is dog-eared in CSS. Inspiration: Ernst Haeckel's *Kunstformen der Natur* plates; the engraved cutaway diagrams in a Victorian *Encyclopaedia of Useful Knowledge*; old double-entry account books with red rule lines; the typecase of a letterpress shop; the patina of a brass theodolite. The web-native twist: this is a **manual that disassembles itself** — pull a label, the diagram explodes into layers; turn a page, the ink "dries" in. ## Layout Motifs and Structure A **vertical timeline spine** runs the full document — a single hand-ruled red column-line down the left third of every screen, exactly as in a ledger, with brass page-edge tabs clipped to it. This is the only navigation. The site is **seven cataloged "specimens" stacked vertically**, each occupying roughly one viewport, each entering as a fresh manual page settling onto the desk. Within each specimen the composition is a **two-leaf spread**: a left *plate* (the engraved diagram of that transaction type, drawn as layered SVG) and a right *catalog entry* (the binomial name, the prose description set in narrow measure, marginalia in a smaller hand). The plate and the entry are connected by **leader lines** — thin dotted SVG strokes that draw themselves from a labelled point on the diagram to the corresponding word in the text when that paragraph scrolls into view. Negative space is treated as **margin** — generous, ruled, occasionally inhabited by a pencilled side-note or a coffee-ring stamp. No card grid, no hero banner, no bento boxes. The only "grid" is the faint blue ledger ruling that underlies every page (a repeating linear-gradient), and red rule lines that mark column edges. Page corners curl. A brass paperclip holds the timeline tabs. The footer is a librarian's date-stamp grid showing (fictional) acquisition dates. ## Typography and Palette **Type system — Google Fonts only:** - **Display / binomial headers:** `Cormorant Garamond` (weights 500–700, often italic) — the engraver's old-style serif, used for the Latinate specimen names at large size with generous tracking. Real scholarly-plate energy. - **Body / catalog prose:** `Spectral` (regular 400, italic 400, semibold 600) — a transitional serif with a print-warm color on screen; set in a narrow 58–62ch measure to mimic a manual column. - **Marginalia / annotations:** `Caveat` (the only handwritten face) — used *sparingly*, at small size, in the pencil-grey ink, for side-notes, corrections, and "see also" arrows. Never for paragraphs. - **Captions, scale bars, plate numbers, the date-stamp footer:** `IBM Plex Mono` (400 / 500) — the typewriter/specimen-label voice, all-caps with wide letter-spacing for "PLATE IV", "SCALE 1:1", catalog numbers, and the dog-eared running heads. **Palette — sepia-nostalgic, ink-on-rag:** - `#EFE6D2` — *Foxed Rag* — the paper field, warm aged cream - `#E3D6B8` — *Tea-Stain* — secondary paper, used in margins and curled corners - `#1F1A14` — *Iron-Gall Ink* — near-black warm brown for all primary text and engraved linework - `#5A4632` — *Walnut Sepia* — secondary ink, captions, plate hatching - `#9A3328` — *Vermilion Rule* — the ledger red: column lines, leader-line accents, the "DEBIT" mark, errata corrections - `#2E4A3C` — *Verdigris* — aged-brass-gone-green, used for active timeline tabs and one cool accent in diagrams - `#B98A3C` — *Brass Lamp* — warm metallic highlight on tabs, paperclip, scale bars, hover glints - `#7C8676` — *Pencil Grey-Green* — the soft graphite tint reserved for `Caveat` marginalia only ## Imagery and Motifs Everything is **hand-engraved SVG line-art** — no photographs, no flat icons, no gradient meshes. The visual core is **seven plates**, one per specimen, each a layered cutaway diagram: 1. **PLATE I — *Transactio atomica*.** A glass ampoule containing four marbles labelled BEGIN / WRITE / WRITE / COMMIT, drawn with stipple-shaded glass; pull the COMMIT label and the ampoule seals with an animated wax drop. 2. **PLATE II — *Reversio poenitens* (the rollback).** A clockwork escapement that visibly *un-winds* — gears engrave themselves turning backward, a tiny hand erasing a ledger line. 3. **PLATE III — *Permuta duplex* (double-entry).** Two facing ledger pages joined by a beam-balance; the scale tips, settles level, and a vermilion rule snaps under the equal columns. 4. **PLATE IV — *Consensus distributus*.** A ring of five engraved lighthouses passing a lit lamp around; one goes dark, the lamp re-routes. 5. **PLATE V — *Transactio humana* (the handshake).** Two anatomical-plate hands clasping, with leader lines to terms like "intent", "consideration", "regret-window". 6. **PLATE VI — *Erratum honestum* (the honest mistake).** A blot of ink spreading, then a margin-note in `Caveat`: "corrected — see Plate II". 7. **PLATE VII — *Transactio incompleta* (the dangling commit).** A bridge engraved mid-span, ending in open air, with a dotted leader trailing off the page edge. Recurring decorative motifs: **hand-ruled blue ledger lines** under everything; **brass page-tabs** on the spine; **dog-eared corners** (CSS clip-path triangles with a fold-shadow); **coffee-ring stamps** placed asymmetrically as texture; **engraved scale bars** ("├──┤ 1 cm") beside each plate; **errata carets** (`‸`) where text is "corrected"; a **letterpress-style colophon ornament** at the very end. A faint paper-grain noise overlay sits at ~5% opacity across the whole document. ## Prompts for Implementation Build as **one HTML document, one CSS file, one ES module** — no framework, no build step. The page is a slow, ~90-second read through a seven-plate field manual on a lamplit desk. There is **no CTA, no pricing table, no stat grid, no testimonials, no email capture, no logo wall, no cookie banner, no FAQ, no chatbot**. The "conversion" is curiosity satisfied. **Page substrate:** `body` gets the Foxed Rag color, a repeating `linear-gradient` for the blue ledger ruling (≈28px rhythm, very low opacity), two `Vermilion Rule` 1px column lines, and a tiled SVG/`feTurbulence` paper-grain layer at ~5%. A soft radial vignette in the upper-left simulates the brass lamp. **The spine (only nav):** a fixed left rail showing seven `IBM Plex Mono` tabs ("PL·I" … "PL·VII") clipped onto a vertical `Vermilion Rule` line, held by an SVG brass paperclip at the top. Active tab fills `Verdigris`; on hover a `Brass Lamp` glint sweeps across it. Clicking smooth-scrolls to that specimen. The active tab updates via `IntersectionObserver`. **Per-specimen entrance (`scroll-triggered` + `path-draw-svg` + `fade-reveal`):** as a specimen enters, its plate's SVG strokes draw themselves on with `stroke-dashoffset` animation (ink being engraved), staggered layer by layer; the catalog prose does an ink-"drying" fade — starts at ~30% opacity in `Walnut Sepia`, settles to full `Iron-Gall Ink` over ~700ms; the binomial header in `Cormorant Garamond` italic slides up 12px and tracks out. Honor `prefers-reduced-motion` by skipping the draw and just showing finished plates. **Leader lines (the signature interaction):** thin dotted SVG strokes connecting labelled diagram points to words in the text. When a paragraph scrolls to center, its leader line draws (path-draw). On hover of a labelled diagram point, the matching word in the prose gets a vermilion `underline-draw` and the leader line thickens to `Brass Lamp`. On hover of a labelled word, the diagram point pulses faintly. **"Disassemble" interaction:** each plate has 2–4 draggable labels (`magnetic` / `elastic` springiness, small travel). Dragging a label pulls its layer of the diagram out a few px with a fold-shadow, exposing the layer beneath; release and it springs (`spring`) back home with a soft settle. This is the "manual that takes itself apart" — keep it subtle, never gratuitous. **Page-turn between specimens (`parallax`):** as you scroll from one specimen to the next, the outgoing page lifts at its dog-eared corner and parallax-slides up ~8%; the incoming page settles down with a 1px fold-shadow sweeping across. A faint `ripple` of paper-grain follows the fold. **Marginalia:** `Caveat` side-notes in `Pencil Grey-Green` appear in the outer margin, slightly rotated (−1.5° to 2°), entering with a quick `fade-reveal`. One or two carry an errata caret `‸` that, on hover, reveals the "corrected" text with a tiny strike-through animation. **Footer:** a librarian's date-stamp grid — `IBM Plex Mono`, faint, showing fictional "ACQUISITION" dates and a catalog signature, plus a single letterpress colophon ornament drawn in SVG. No links farm, no newsletter — just the closing stamp of the volume. **Cursor:** a small engraved-nib cursor glyph; near draggable labels it becomes an open-hand engraving. Keep cursor work minimal — this is a reading desk, not a playground. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **A fictional academic discipline as the entire frame.** Not "a site about transactions" but *transactology* — a made-up natural science with binomial nomenclature, numbered plates, scale bars and errata. The content architecture (seven cataloged "specimens") is the taxonomy itself. No other design treats its subject as a museum collection to be cross-sectioned. 2. **Skeuomorphism used straight and scholarly, not retro-kitsch.** Skeuomorphic appears in only ~4% of the corpus, and where it does it tends toward glossy app chrome. Here it's a *paper-and-brass ledger desk* — ruled rag paper, iron-gall ink, dog-eared corners, coffee rings — rendered with restraint. The skeuomorphism *is* the information design. 3. **Leader lines + draggable "disassemble" layers as the core interaction.** Instead of cursor-follow / tilt-3d / card-flip (the 89% / 32% / 10% conventions), the signature moves are SVG leader lines linking diagram to prose and labels you can physically pull to delaminate an engraving — interactions native to a technical plate, not a marketing page. 4. **Sepia-nostalgic + Vermilion ledger-red + Verdigris** — an ink-on-rag palette anchored by ledger red and aged brass, deliberately avoiding the warm-gradient (98%/93%) and glassmorphism (85%) defaults; no neon, no mesh, no frost. 5. **Timeline-vertical "spine" as the only navigation**, presented as brass page-tabs on a ruled red line — no top nav, no hamburger, no hero, no card-grid, no stat-grid, no CTA blocks. **Chosen seed/style:** *aesthetic: skeuomorphic, layout: timeline-vertical, typography: slab-serif/serif-revival, palette: sepia-nostalgic, patterns: path-draw-svg, imagery: isometric-icons (engraved line-plates), motifs: book-scholarly, tone: scholarly-intellectual* — derived as a custom combination biased toward underused vocabulary (skeuomorphic 4%, timeline-vertical 6%, sepia-nostalgic 3%, book-scholarly 4%, path-draw-svg 49% used here as draftsman's engraving rather than logo reveals). **Avoided overused patterns** (per frequency analysis): hand-drawn aesthetic (94%), glassmorphism (85%), photography imagery (98%), card-grid (93%), full-bleed (85%), warm/gradient palette (98%/93%), cursor-follow (89%), parallax-as-default, mono-typography-as-default (used here only for labels, not body), pastoral-romantic and warm-inviting tones.