# Design Language for transactology.xyz ## Aesthetics and Tone transactology.xyz presents itself as a **rediscovered antiquarian treatise** — an imaginary 1880s scholarly volume titled *Transactology: Being An Inquiry Into The Nature, Ceremony, And Aftermath Of The Exchange Between Parties* — opened on a reading lectern and turned page by page as the visitor scrolls. The "discipline" of transactology is treated with deadpan academic seriousness: it studies what actually happens in the half-second a thing changes hands — the handshake, the ledger stroke, the receipt, the regret, the trust extended on credit. The tone is **scholarly-intellectual with a dry, almost comic gravity**: lots of "fig. IV", "§ 12", "vide infra", marginal glosses, errata slips, a bookplate, a censor's stamp. Visually it is **letterpress on rag paper**: warm cream stock with a faint deckle edge and visible laid lines, ink that sits *into* the page (a subtle inset/emboss on the heavy display type, as if struck by metal type), copperplate-engraving line art rather than photographs, and the colour restraint of a book printed in two inks plus the paper. Nothing glows. Nothing is glossy. The only "screen" affordances permitted are a thin reading-ribbon bookmark and a page-edge gilt that catches a sliver of warm light. Think Edward Tufte's *envisioning information* married to a Bodleian Library reading-room and the title page of an 18th-century Encyclopédie — but the subject matter is the mundane miracle of two people agreeing to swap. ## Layout Motifs and Structure The site is **one bound book scrolled as a continuous codex**, not a stack of marketing sections. The viewport is the open spread; the page is always paper-coloured edge to edge with generous, asymmetric **scholarly margins** — a wide outer margin (≈ 28% of width) reserved exclusively for marginalia, figure numbers, and gloss notes, and a narrower gutter side. This is an **editorial-flow / single-column body with a populated margin column**, never a card grid. Structural movements (each is a "chapter", set off by a half-title page that is mostly empty paper with a centred chapter numeral in Roman): 1. **Title Page** — the full mock title page: long descriptive title, "engraved" device of two clasped hands over a balance, fictitious publisher's imprint, year, a Latin epigraph about exchange. Sits full-bleed; the reading-ribbon hangs from the top. 2. **Frontispiece Plate** — a single large copperplate-style engraving (SVG line art): a market scene, hatched, captioned "Frontispiece. — The Common Exchange, as practised by all peoples." 3. **§ I — Anatomy of the Transaction** — body prose with a labelled fold-out diagram of "the four moments" (Offer · Assent · Conveyance · Acknowledgement) drawn as an engraved clockface; margin holds the fig. numbers. 4. **§ II — The Ledger** — a two-page ruled-ledger spread; debit and credit columns; a running sum that *casts up* (animates) as you scroll the column. 5. **§ III — On Trust & Credit** — heaviest text chapter; pull-quotes set as **drop-cap initials** inside engraved cartouches; footnotes that actually live at the foot of the "page" with rules above them. 6. **§ IV — A Taxonomy of Receipts** — a plate of small engraved specimens (chit, tally stick, IOU, bill of sale, gift tag) arranged like a naturalist's display drawer. 7. **Colophon** — the closing leaf: who set the type, in what fictional face, the press, the binding, an errata slip pinned at an angle, and the bookplate ("Ex Libris — the Reader"). A persistent **running head** sits at the very top of every "page" in small caps ("TRANSACTOLOGY · § II · THE LEDGER · 17") and a **page number** at the lower outer corner that increments with scroll. No fixed navbar, no buttons, no hero-with-CTA. ## Typography and Palette **Fonts — all Google Fonts:** - **Display / title page / chapter numerals / drop-caps — `Cormorant Garamond`** (use weights 300–600, and `Cormorant SC` small-caps for running heads). Set very large and airy on the title page with tight leading; this is the "engraved" face — apply a 1px light text-shadow plus a 1px inset dark to mimic ink struck into paper. - **Body text — `EB Garamond`.** The whole treatise body, footnotes, captions. Generous measure (≈ 62–68 characters), `1.62` line-height, old-style figures, real small-caps for the running heads, ligatures on. Footnotes one step down with hanging superscript reference marks. - **Marginalia / figure labels / ledger column heads / errata slip — `IM Fell English` (or `IM Fell English SC` for the all-caps labels).** A genuinely 17th-century-flavoured face with inky irregularity — used small in the margin column, slightly grey, for "fig.", "§", "vide supra", and the ledger's "Dr." / "Cr." headers. Its rough, antique texture is the period signature. - **Numerals in the ledger sums & tally figures — `EB Garamond` lining figures, tracked.** Kept plain so the cast-up animation reads clearly. **Palette — two inks plus the paper, with a gilt accent:** - `#F2E9D6` — *Rag Paper*: the dominant background. Warm cream, low chroma. - `#E6DAC0` — *Foxed Margin*: a slightly deeper aged tone for the outer margin column and half-title leaves, so the margin reads as "older paper". - `#241C12` — *Iron-Gall Ink*: the near-black brown-black for body text and engraved line art. Never pure `#000`. - `#7C2C20` — *Vermilion (Second Ink)*: the rubricated red — chapter numerals, the censor's stamp, the reading-ribbon, errata corrections, the cartouche outlines. Used sparingly, the way a two-colour press would. - `#8C7A4E` — *Tarnished Gilt*: muted gold for the page-edge gilt highlight, the bookplate border, the balance-and-hands device. Slightly metallic via a faint linear gradient, never a glow. - `#5A5140` — *Pencil Gloss*: greyed brown for marginalia text and hairline rules, so the margin recedes behind the body. Texture: a tiled subtle paper grain (very low-opacity noise), faint horizontal "laid lines" every ~22px on the margin column, and a soft inner shadow at the page edges so the spread feels like an open book under a lamp. ## Imagery and Motifs **No photography. No 3D renders. No stock illustration.** All imagery is **hand-authored SVG line engraving** — black hatching on the paper, in the manner of a steel-plate engraving: cross-hatched shading, fine contour lines, stippling for midtones. Recurring motifs: 1. **The Device** — two clasped hands above a balance scale, enclosed in an engraved oval rope-border; appears on the title page and shrinks into a colophon mark. The "agreement" emblem of the whole site. 2. **The Four Moments clockface** — an engraved clock whose four cardinal points are Offer / Assent / Conveyance / Acknowledgement; a single hand sweeps between them as that chapter scrolls. 3. **The Ledger rule** — double red-and-black column rules, a "carried forward / brought forward" bracket, and a final double-underline under the cast-up total. 4. **Manicules (☞)** — little engraved pointing-hand symbols in the margin beside especially important sentences, the historical "look here" mark. 5. **The errata slip** — a small rectangle of slightly whiter paper, pinned at a 3° tilt with a tiny engraved pin, listing "for X read Y" — appears in the colophon and as a playful 404/empty state. 6. **Pressmarks & ornaments** — fleurons / printer's flowers as section dividers; a watermark-style faint emblem visible when light "passes through" the half-title leaves; the censor's oval stamp in vermilion across the title page corner, half-legible. 7. **Tally stick, chit, IOU, wax-seal** — the engraved "specimen drawer" of receipt types in § IV, each in its own ruled compartment with a handwritten-looking label tag. ## Prompts for Implementation Build transactology.xyz as **one HTML file, one CSS file, one ES module** — no framework, no build step. The whole experience is **turning the pages of one imaginary scholarly book**, top to bottom, in a roughly 90-second read; the "what is this" is delivered *as the treatise itself*, never as a marketing blurb. - **The page is paper, always.** `body` is `#F2E9D6` with a tiled grain texture; content lives in a centred "leaf" max-width ≈ 1180px with the asymmetric margin grid (`grid-template-columns: 1fr minmax(0, 64ch) 22rem` roughly — body in the middle, marginalia column on the outer side, mirrored on alternate "leaves" if you want a true verso/recto rhythm). - **Ink-into-paper type.** On the big `Cormorant Garamond` display, layer `text-shadow: 0 1px 0 rgba(255,255,255,.35), 0 -1px 0 rgba(36,28,18,.25)` and a hair of `letter-spacing`. Body `EB Garamond` stays crisp and plain. - **Scroll = page turning.** Use `scroll-snap` lightly on the half-title leaves only. As each chapter enters, its half-title numeral does a slow `fade-reveal` (opacity + 8px rise, ~700ms, ease-out) — no springs, no bounce, no parallax-scroll theatrics; this is paper, it does not wobble. - **Engraved line art draws itself.** Each SVG plate (the Device, the clockface, the frontispiece) reveals with a `path-draw-svg` stroke-dashoffset animation when scrolled into view — the engraving "inks in" line by line over ~1.6s, then the hatching fills with a quick `fade-reveal`. - **The ledger casts up.** In § II, as the credit/debit columns scroll past, individual line figures fade in one by one (`stagger`, ~90ms each), and the running total at the foot `counter-animate`s up to its final value, then a vermilion-then-black double rule draws underneath it. - **The clock-hand chapter.** In § I, bind the engraved clock-hand's `rotate` to that section's scroll progress so it sweeps Offer → Assent → Conveyance → Acknowledgement; each label brightens from `#5A5140` to `#241C12` as the hand reaches it. - **Marginalia behaves like a true margin.** Margin notes are `position: sticky` within their paragraph block so a gloss stays beside the line it annotates; manicules (☞) sit in the margin and nudge ~4px toward the text on hover (`magnetic`, tiny, slow). - **The reading-ribbon.** A thin vermilion ribbon (≈ 14px wide) hangs from the top of the leaf down past the fold; on scroll it lengthens slightly and casts a soft shadow — purely atmospheric, not a progress bar pretending to be UI chrome. - **Page edge gilt.** The right edge of the "leaf" has a 3px `Tarnished Gilt` linear-gradient strip that subtly shifts its highlight position as the cursor moves vertically — the only `cursor-follow` touch, and it is *quiet*. - **404 / empty state = an errata slip.** "For this page, read: it was never set." Pinned at a tilt on bare paper. Tiny, dry, in character. - **AVOID entirely:** hero sections with buttons, pricing tables, stat-grid card rows, testimonial strips, "trusted by" logo walls, FAQ accordions, sticky navbars, email-capture bars, cookie banners, neon, glassmorphism, gradient meshes, dark mode, big shadows, glossy 3D, anything that breaks the conceit that you are reading a 140-year-old book about the act of exchanging things. ## Uniqueness Notes Differentiators from other designs in this codebase: 1. **A fictional academic discipline rendered as an actual book, not a brand site.** The corpus is saturated with hero/CTA/card-grid marketing layouts (card-grid ≈ 93%, full-bleed ≈ 85%, centered ≈ 80%). transactology.xyz has *no* such layout at all — it is a codex with verso/recto leaves, a running head, page numbers, footnotes-at-the-foot, and a colophon. The "product explanation" is the treatise's own argument. 2. **Two-ink letterpress restraint where the corpus runs warm-gradient.** Palette frequency shows `warm` ≈ 98% and `gradient` ≈ 93%; nearly everything leans on glowing warm gradients. This design is a strict two-inks-plus-paper job (iron-gall ink + vermilion + tarnished gilt on rag cream), with ink that embosses *into* the page rather than radiating off it. No gradient mesh, no glow, no glass. 3. **A populated outer margin column as primary architecture.** Most "asymmetric" layouts in the corpus are broken-grid decoration; here the wide foxed-paper margin exists to hold real marginalia, manicules (☞), figure numbers and glosses that stay sticky beside the lines they annotate — a genuine scholarly-edition information structure, not a visual flourish. 4. **Engraving-as-imagery, hand-authored.** While `photography` ≈ 98% across the corpus, this site contains zero photography and zero stock art: every illustration is hand-built SVG steel-plate engraving (cross-hatched, stippled) that inks itself in via `path-draw-svg`. The recurring "clasped hands over a balance" device, the Four-Moments clockface, and the specimen-drawer of receipt types are bespoke. 5. **Period-correct typographic system.** `Cormorant Garamond` + `EB Garamond` + `IM Fell English` (a genuinely 17th-century face, near-absent from the corpus) used with old-style figures, true small-caps running heads, drop-cap cartouches and hanging footnote marks — a deliberate antiquarian stack rather than the near-ubiquitous `mono`/`humanist` pairing (mono ≈ 93%). Chosen seed / style: **`classic serif revival book`** — aesthetic: editorial / dark-academia-adjacent print revival; layout: editorial-flow single-column with populated outer margin; typography: serif-revival + garamond-classic (Cormorant Garamond / EB Garamond / IM Fell English); palette: muted two-ink letterpress (rag cream, iron-gall ink, vermilion, tarnished gilt); patterns: path-draw-svg + stagger + counter-animate + fade-reveal (no spring/parallax/cursor theatrics); imagery: hand-drawn line engraving (no photography); motifs: book-scholarly + vintage; tone: scholarly-intellectual with dry gravity. Avoided patterns from the frequency analysis: glassmorphism (85%), hand-drawn-cartoon aesthetic (94%), card-grid (93%), full-bleed marketing hero (85%), warm gradient palette (98% / 93%), mono typography (93%), photography imagery (98%), cursor-follow/parallax/spring/magnetic motion clichés (89% / 89% / 83% / 78% — only one whisper-quiet gilt cursor touch retained), dark-mode neon, bento-box, dashboards.