# Design Language for transactology.org ## Aesthetics and Tone transactology.org is the front matter of an imaginary discipline — **transactology, the formal study of the transaction as a unit of meaning**: every handshake, every receipt, every promise-then-fulfillment, every "I gave you X, you gave me Y." The site presents itself as the public-facing ledger of this discipline: part research department, part audit office, part the inside cover of a clothbound accounting manual from 1962 that someone has photocopied a few too many times. The aesthetic is **neubrutalist ledger** — not the candy-colored neubrutalism of startup landing pages, but the *austere* end of it: thick hairlines that are actually 2px and 3px black rules, hard right-angle boxes with offset solid-color drop shadows (no blur, ever), and the visual grammar of **double-entry bookkeeping** — two columns, debits left, credits right, everything must balance. The mood is **dry, exact, faintly bureaucratic, and quietly funny** — the humor of a footnote taken too seriously, the comedy of a man in a green eyeshade explaining why your love life is a series of unsettled accounts. Texture comes from **risograph-style misregistration**: the "ink" colors print slightly off their boxes, like a two-color riso pull where the red plate shifted 1.5px. Nothing glossy. Nothing soft. Nothing warm. The page should feel like card stock — matte, slightly toothy, the off-white of an old index card, not the cream of a wedding invitation. The tone of voice in any text: clipped, declarative, audit-memo register. "Entry recorded." "Account in arrears." "See ledger 4, line 12." It never sells. It *files*. ## Layout Motifs and Structure The entire site is built on a **literal double-entry ledger spread** — a single wide page divided down the exact center by one heavy vertical rule (the "fold" of the ledger book). This is a **split-screen / broken-grid hybrid**: the two halves are NOT mirror images; the left column is the *Debit* side (what was given, what is owed, the question), the right column is the *Credit* side (what was received, what settles it, the answer). They scroll at different cadences so the eye is forced to ping-pong across the center fold — that ping-pong IS the navigation. - **Header band:** a ruled masthead like the top of a ledger page — `TRANSACTOLOGY` in slab caps far left, a fake "LEDGER NO." stamp far right, a thin row of column headers between them: `DATE | PARTICULARS | FOLIO | DEBIT | CREDIT`. These column headers are decorative but they pin the grid for everything below. - **The body** is a vertical run of **"entries"** — each entry is a full-width horizontal slab that straddles the center fold, with its left portion in the debit column and right portion in the credit column, joined by a hand-numbered **folio reference** sitting exactly on the fold line inside a small black square. - **Offset shadow blocks:** every framed element (entry slab, pull-quote, the masthead stamp) sits 6px up-and-left of a solid-fill shadow rectangle in one of the two ink colors. No element is ever centered for "balance" in the visual sense — balance here is *accounting* balance, stated numerically. - **Margins are real margins** — a 64px ruled gutter on the outer edges with tick marks every 8px, like a draughtsman's border, and tiny rotated page-edge labels ("recto" / "verso"). - **Footer:** a "TOTALS" rule — a double underline (the accountant's "this is final" mark), with two summed columns that, of course, are equal. Below it, in 9px mono: `Audited. Filed. Closed.` - No hamburger menu. No sticky nav. No hero image. Navigation is a left-margin column of **folio tabs** — little black index-tabs labeled `F.01`–`F.07`, each jumping to one ledger entry. ## Typography and Palette **Fonts (Google Fonts only):** - **Display / masthead / entry headings — `Zilla Slab`** (weights 500, 700): a sturdy, slightly mechanical slab serif with squared serifs — reads like the title strip on a manila folder. Set in `letter-spacing: 0.04em` ALL CAPS for the masthead, sentence case at 700 for entry titles. - **Body / particulars / footnotes — `Spectral`** (weights 400, 400 italic, 600): a screen-tuned transitional serif with real italics for the "see ledger" cross-references and Latin-y aside phrases. Generous leading (1.7) so each entry reads like a paragraph in a manual. - **Numerals / column data / folio tabs / the running "ink stamp" elements — `Spline Sans Mono`** (weights 400, 600): tabular figures are essential — every debit and credit amount must align decimal-on-decimal. Also used for the tick-mark labels, the `LEDGER NO.` stamp, and the footer's `Audited. Filed. Closed.` **Palette — two inks on card stock (high-contrast monochrome + duotone "plates"):** - `#F4F1E8` — **Index Card** — the paper. Slightly desaturated bone, the color of a card that's been in a drawer. - `#161412` — **Ledger Ink** — near-black with a hair of brown. All rules, all body type, all boxes. - `#B23A2E` — **Debit Red** — the riso "red plate." Used on the LEFT column only: the debit-side shadow blocks, the "owed" amounts, the F-tabs on entries that don't balance yet. Prints 1.5px misregistered. - `#2E5E4E` — **Credit Green** — the riso "green plate." Used on the RIGHT column only: credit-side shadow blocks, the "settled" amounts, the TOTALS double-rule. - `#C9C3AE` — **Faint Rule** — a dim olive-grey for the 8px tick grid and secondary hairlines, so the draughtsman's border whispers instead of shouts. Rule of color: **red and green never touch the center fold from the wrong side.** The fold itself is always Ledger Ink. This is the discipline's one law. ## Imagery and Motifs No photography. No illustration in the conventional sense. The "imagery" is **diagrammatic and clerical**: - **The seven ledger entries** are each illustrated by one **transaction diagram** — a flat, 2-color SVG schematic: two labeled nodes (Party A, Party B) connected by arrows labeled with what crosses (`→ 1 promise`, `← 1 apology`, `→ 3 favors`, `← silence`). These are drawn like the entity-relationship sketches in an old systems-analysis textbook: rectangles, single-weight strokes, no rounding, arrowheads filled solid. - **Rubber stamps** as recurring marks: a tilted `RECEIVED`, a `PENDING` ring, a circular `AUDITED ✓` — each rendered as an SVG with deliberately broken ink coverage (gaps in the stroke, a smeared corner). - **The fold line** is decorated at intervals with **small black squares holding folio numbers** — these are the visual "stitches" of the ledger book. - **Tick-mark borders** on every margin — 8px draughtsman ticks in Faint Rule, with `0`,`10`,`20`… mono labels every 80px down the outer edge, as if the page were a measuring strip. - **The "carried forward" arrow** — a long thin elbow-arrow that appears at the bottom-right of long entries: `c/f →` curling to the next page. Its counterpart `b/f ←` ("brought forward") opens the following entry. This is the only ornament that ever crosses pages. - **Marginalia in italic Spectral** — tiny pencil-grey asides hanging in the outer gutter: "*cf. the gift economy*", "*this entry disputed*", "*ink smudged in original*". - **Watermark:** a faint, huge `Æ` (the discipline's monogram — Account & Entry) bled to 4% Ledger Ink behind the whole spread, only visible in the gaps between entries. ## Prompts for Implementation Build as **one HTML document, one CSS file, one small ES module** — no framework, no build step. The page is a **single ledger spread, scrolled top to bottom**, ~7 entries long, narrating "a year in transactions" of an unnamed person — but told entirely in audit-memo language so the *story leaks through the bookkeeping*. Entry 1: "Opening balance." Entry 7: "Closing the books." In between: a quietly devastating little arc rendered as debits and credits. - **The center fold is the hero.** A single `2px solid #161412` vertical line, dead center, full height, with the folio-square "stitches" placed along it via JS at the vertical midpoint of each entry. Everything else hangs off this line. - **Two-cadence scroll (the ping-pong):** debit column (left) and credit column (right) translate at very slightly different rates on scroll — `transform: translateY()` driven by `scroll` with a small delta (left lags ~12px, right leads ~12px at most), then they *snap into alignment* when an entry reaches center viewport, accompanied by a hard `RECEIVED` stamp fade-in on that entry's folio square. Do NOT use smooth parallax drift — it should feel like pages being squared up against a desk, abrupt and satisfying. - **Riso misregistration:** render every colored shadow block twice — once as a `::before` in the true position (Ledger Ink, low opacity) and once as a `::after` offset 1.5px in the ink color — `mix-blend-mode: multiply` to fake the overprint. On hover of an entry slab, the misregistration *increases* to 3px then settles back (a CSS transition, no spring physics). - **Stamp interactions:** clicking a folio tab `F.0n` doesn't smooth-scroll — it `scrollIntoView({behavior:'instant'})` and slams a `RECEIVED` stamp onto the target, the stamp drawn with an SVG `stroke-dasharray` "broken ink" pass. Hovering the stamp shows a 9px mono datestamp tooltip. - **The running tally:** a thin sticky strip at the very top (below masthead) shows `RUNNING BALANCE: 0.00` in tabular mono; as you scroll past each entry it `counter-animate`s the figure (debits add, credits subtract) — and it always returns to `0.00` at the footer. The animation is integer-stepped, not eased — numbers should *flip* like a mechanical counter. - **Marginalia reveal:** the italic gutter asides start at `opacity: 0`; they fade in only when their entry is in view, staggered ~80ms each, as if being penciled in. - **Carried-forward thread:** the `c/f →` / `b/f ←` elbow-arrows are one continuous SVG path between consecutive entries; on scroll-into-view, draw the path with `path-draw-svg` (stroke-dashoffset) so the "amount carried forward" visibly travels down the fold to the next page. - **Type detail:** all amount cells use `font-variant-numeric: tabular-nums` and a fixed decimal column; negative/owed amounts are shown in Debit Red on the left, settled amounts in Credit Green on the right, and the footer TOTALS get the accountant's **double-underline** (`border-bottom: 4px double #2E5E4E`). - **AVOID:** any CTA, pricing table, stat-grid of big numbers-as-marketing, testimonials, signup forms, cards-in-a-grid layout, blurred drop shadows, gradients, glassmorphism, cursor-follow blobs, spring/elastic motion, hand-drawn doodles, stock photography, dark-mode neon. This is matte card stock and two inks. Keep it that way. - **Reduced motion:** if `prefers-reduced-motion`, drop the ping-pong and counter flipping — the spread simply renders fully balanced, every stamp already inked, every total already tallied. The joke still lands; it's just already filed. ## Uniqueness Notes Differentiators from other designs in this codebase: 1. **Layout grammar IS double-entry bookkeeping.** The split-screen isn't decorative — left is literally Debit, right is literally Credit, the center line is the ledger fold, and the running tally must mathematically return to zero at the footer. No other site in the corpus uses an accounting structure as its actual layout law (and the codebase is saturated with card-grid + full-bleed + centered; this rejects all three for a ruled two-column ledger). 2. **Neubrutalism in its austere register, not its candy register.** The corpus's neubrutalism (and the broader neon/dopamine trend) is loud and colorful; this is two muted riso inks on bone card stock — neubrutalist *boxes and offset shadows* with the chromatic restraint of a 1960s accounting manual. Hard shadows, zero blur, zero gradient — directly against the 93% "gradient" and 85% "glassmorphism" conventions. 3. **Riso misregistration as the texture system** instead of grain-overlay/noise/paper-aged photo textures — colors are *meant* to print 1.5–3px off their boxes, faked with double pseudo-elements and `mix-blend-mode: multiply`. Almost nobody in the corpus does deliberate overprint misregistration. 4. **Motion is "squaring up papers," not physics.** Integer-stepped counters, instant scroll-jumps, hard stamp fades, dashoffset path-draws — explicitly NO spring/elastic/cursor-follow/smooth-parallax, the four most overused patterns (78–89%). The one approved animation family is `path-draw-svg` and `counter-animate`, both underused. 5. **Bone monochrome + 2 ink plates** rejects the 98% "warm" / 93% "gradient" palette convention; the only warmth is the faint brown in the near-black ink and the drawer-aged card stock. 6. **Voice is audit-memo deadpan** — "Entry recorded. Account in arrears. Audited. Filed. Closed." — narrative delivered through bookkeeping euphemism, a tone register not present elsewhere. Chosen seed: **neubrutalism raw edges blog** (vocabulary: aesthetic `neubrutalism` · layout `broken-grid` + `split-screen` · typography `slab-serif` + `tech-mono` · palette `monochrome` + `duotone` · patterns `path-draw-svg` + `counter-animate` · imagery `vector-art` (clerical diagrams) · motifs `grid-lines` + `sharp-angles` · tone `professional`). Avoided overused patterns per frequency analysis: hand-drawn, glassmorphism, photography, card-grid, full-bleed, centered, warm palette, gradient, mono-as-only-type-voice cliché, cursor-follow, parallax drift, spring, magnetic, stagger-as-default, tilt-3d.