# Design Language for transactology.net ## Aesthetics and Tone transactology.net is **a live transaction terminal that never stops scrolling** — the site presents itself as if you had SSH'd into the world's quietest clearing-house at 3 a.m. and left `tail -f` running on the ledger. The discipline of *transactology* — the study of how value moves between two parties — is rendered here not as marketing copy but as a **session log you are reading in real time**: prompts, returned rows, pipe characters, exit codes, the soft cursor blink between thoughts. The mood is **mysterious-moody and grounded-earthy at once** — not the cold neon of cyberpunk, but the warm-phosphor calm of a CRT left on overnight in a back office: amber and green text on a near-black field, the faint scanline hum, the dignity of a machine doing honest accounting while everyone sleeps. Nothing here flashes or sells. The tone is that of a patient operator walking a new hire through the anatomy of an exchange — `man transaction(7)` read aloud. Information arrives the way it arrives in a real shell: a command is "typed," the screen pauses, then the output unspools line by line, monospaced, aligned to columns. The emotional register is **quiet authority** — the confidence of plain text that has never needed a gradient. Where transactology.com is an exploded axonometric blueprint, transactology.net is the **command-line companion volume**: same subject, opposite instrument. Flat, textual, luminous, and unhurried. ## Layout Motifs and Structure The entire page is **one terminal pane** — a single fixed-width "console" column, `max-width: 76ch`, centered in a black field, with a thin 1px phosphor-green border and a faux title-bar reading `transactology@net:~/ledger$`. There is **no card grid, no bento box, no hero image, no section blocks** in the conventional sense. Instead the page is a **continuous transcript** divided into "commands" — six or seven of them — each one a `$ prompt` line followed by its rendered output. You scroll *down the transcript*, not *through sections*. - **The Prompt-and-Output Rhythm.** Each topic is introduced as a typed command: `$ explain offer`, `$ trace escrow --verbose`, `$ diff promise settlement`, `$ whoami`. The command "types itself" character by character on scroll-into-view (typewriter effect, but justified — the prose is the payload, not a gimmick). Then the output renders: sometimes a paragraph wrapped to 76 columns, sometimes an ASCII table with pipes and dashes, sometimes a small box-drawing diagram, sometimes a numbered list rendered like `ls -l` output. - **ASCII box-drawing as the only "graphics."** Diagrams are built from `┌ ─ ┐ │ └ ┘ ├ ┤ ┬ ┴ ┼ ╱ ╲ ▸ ◂ ●` — Unicode box-drawing and block characters laid out in monospace. A transaction is drawn as two named nodes connected by a `══▶` arrow with an `[escrow]` box hanging beneath it on a `│` stem. The exploded view of "settlement" is a small `tree`-style indented listing. - **The status line.** A persistent bottom bar (CSS `position: sticky; bottom: 0`) styled like a vim/tmux status line: `-- TRANSACTOLOGY -- col 1 | reading: §3 escrow | uptime 00:14:22` — the uptime counter actually ticks, and `reading:` updates to whichever command-section is in view. - **Left gutter line-numbers.** Like an editor, every line of the transcript carries a faint right-aligned line number in the 4ch left gutter — `0001`, `0002` … reinforcing that this is *one document*, not a deck of panels. - **No top navigation bar.** Navigation, if any, is a `$ ls sections/` command near the top whose output is a clickable list — anchors that smooth-scroll down the same transcript. The page is `ma`-quiet: lots of black breathing room between command blocks, like the empty lines an operator leaves between thoughts. ## Typography and Palette **Fonts — Google Fonts only, two monospaced voices plus one humanist for the rare "human aside":** - **The terminal body — *JetBrains Mono* (weights 400 / 500 / 700).** Everything that lives "inside the shell" — prompts, output prose, tables, box-drawing, line numbers, the status bar. JetBrains Mono is chosen for its tall x-height, unambiguous `0/O` and `1/l/I`, generous box-drawing coverage, and the way ligatures (`->`, `=>`, `|>`, `!=`) can be selectively enabled for the diagram arrows. Set at 16px / `line-height: 1.65`, `letter-spacing: 0`. - **Headings and the title-bar / large command echoes — *IBM Plex Mono* (weights 500 / 600), UPPERCASE, `letter-spacing: +0.14em`.** Used only for the faux window title bar, the `MAN TRANSACTOLOGY(7)` masthead line, and the section command echoes when they're shown large. The slightly more mechanical, drafting-table feel of Plex Mono distinguishes "chrome" from "content." - **The human aside — *Newsreader* (weight 400, plus 400 italic).** Appears at most twice: a short epigraph at the very top and a short coda at the bottom, set as if a person — not the machine — wrote a margin note in pen on the printout. Rendered in low-contrast warm grey, narrower measure, italic. The contrast of one serif voice against the monospace ocean is the entire "warmth budget" of the design. **Palette — warm phosphor on deep near-black; restrained, never rainbow:** - `#0A0E0A` — **Terminal Black.** The page background. Not pure `#000`; a hair of green warmth so it reads like glass with a faint glow behind it. - `#0F140F` — **Console Field.** The bordered pane interior, one notch lighter than the page so the console "floats." - `#7FE3A1` — **Phosphor Green.** Primary text inside the shell — output prose, the prompt `$`, box-drawing strokes. The classic P1-green of an old monitor, slightly desaturated so long reading doesn't sting. - `#E0B341` — **Amber Echo.** Secondary / emphasis — typed commands, highlighted column headers in tables, the blinking cursor block, active anchor in the `ls sections/` list. The amber/green pairing nods to dual-phosphor terminals. - `#5C6F5C` — **Dim Moss.** Line numbers, the status-bar inactive text, comments (`# like this`), de-emphasized output rows. The "quiet" tier. - `#C9D6C9` — **Paper Grey.** The rare near-white: column data that must read crisply, the human-aside serif text body (used at reduced opacity for warmth). - `#D85C4A` — **Exit-Code Rust.** Used *once or twice only* — an `EXIT 1` style accent on a single deliberately "failed" command (`$ undo settlement` → `error: settlement is final`), the one warm-red spark in an otherwise green/amber room. ## Imagery and Motifs **There is no photography, no SVG illustration, no 3D render, no stock art, no hand-drawn squiggle.** Every visual element is **typed characters in a monospace grid** — the imagery *is* the typography. The motifs: - **The blinking block cursor.** A `▮` (or `█`) that follows the end of whatever line is currently "being typed," then parks at the active prompt, blinking at ~1.06s. It is the page's only persistent moving element. - **ASCII transaction diagrams.** `[ PARTY A ]══offer══▶[ PARTY B ]` with `╰─▶ [ escrow ] ─╯` hanging beneath; a vertical `tree` for the lifecycle (`transaction/`, `├─ offer`, `├─ acceptance`, `├─ escrow`, `├─ clearing`, `└─ settlement`). Drawn purely in box-drawing glyphs, colored in Phosphor Green with Amber on the node labels. - **`ls -l`-style tables.** Definitions presented as fixed-width tables: columns `TERM | ROLE | RISK | ANALOGUE` separated by ` │ ` and a `───┼───` rule, with the header row in Amber and the body in Paper Grey. - **Inline command grammar.** `$`, `#` comments, `--flags`, `|` pipes, `>` redirects appear as living syntax in the prose, lightly syntax-highlighted (flags in moss, strings in amber). It teaches the subject *in the idiom of the shell*. - **The scanline + phosphor-glow texture.** A barely-there CSS overlay: 2px horizontal `repeating-linear-gradient` at ~4% opacity, plus a faint `text-shadow: 0 0 6px currentColor` on the green text only — the bloom of a phosphor pixel. Optionally a slow, almost-imperceptible 0.5px horizontal "roll." Never a heavy CRT cosplay; just enough that you feel the glass. - **The man-page furniture.** Section markers styled like `NAME`, `SYNOPSIS`, `DESCRIPTION`, `SEE ALSO` headers (Plex Mono, uppercase, amber) — the page is structured like `man 7 transaction`. ## Prompts for Implementation Build transactology.net as **a single static route** — one `index.html`, one stylesheet, one ES module — and treat it as **a five-minute terminal session that explains the anatomy of a transaction**. The reader is not a customer; the reader is someone who typed `man transactology` and got a thoughtful, slowly-rendered answer. There is **no contact form, no email capture, no pricing tier, no testimonial wall, no stat-counter grid, no row of feature cards, no "Get Started" CTA, no logo cloud, no cookie modal, no chat widget, no language switcher** — none of it. There is only the transcript. - **Structure as transcript.** `
` is the console pane. Inside, ~7 "command blocks," each: a `.prompt` line (`transactology@net:~/ledger$ explain offer`) followed by a `.output` region. Suggested commands: `whoami` (what transactology is — short epigraph), `ls sections/` (the nav list), `explain transaction` (the core definition), `trace escrow --verbose` (the escrow mechanism, with an ASCII diagram), `cat lifecycle.txt` (the `tree` of offer→settlement), `diff promise settlement` (a two-column table contrasting them), `undo settlement` (the deliberate `error: settlement is final` — the one rust-colored line, a small philosophical punch), and a closing `# end of session` with the *Newsreader* human coda. - **Typing + reveal animation.** On scroll-into-view, each command block: (1) the `.cmd` text types itself char-by-char (~28ms/char, with a tiny random jitter, cursor riding the end); (2) a ~400ms pause (the "machine thinking"); (3) the `.output` reveals **line by line**, each line fading+sliding up 4px with a ~60ms stagger — like rows printing to a teletype. Prefers-reduced-motion: skip typing/stagger, show everything instantly. Use `IntersectionObserver`; do **not** re-trigger once played. - **The cursor.** One global `▮` element, `position: absolute`, CSS-animated blink (`@keyframes` opacity step, ~1.06s, `steps(1)` so it snaps not fades). JS moves it to the end of whatever line is currently typing; when idle it parks at the next prompt. - **Sticky status line.** Bottom `position: sticky` bar, JetBrains Mono 13px, Dim Moss text on Console Field: `-- TRANSACTOLOGY --` left; center shows `reading: §N ` updated by the same IntersectionObserver; right shows a live `uptime HH:MM:SS` counting from page load. On narrow screens it collapses to just `-- TRANSACTOLOGY -- uptime …`. - **Line numbers.** Left 4ch gutter, Dim Moss, right-aligned, `user-select: none`, monospace-aligned to the transcript baseline grid. Generated by JS counting rendered lines, or hand-authored if simpler — they must stay column-true. - **Texture layer.** A single fixed full-viewport `::before` with the scanline `repeating-linear-gradient` at ~3–5% opacity + a very faint vignette; green text gets `text-shadow: 0 0 5px rgba(127,227,161,.35)`. Keep it subtle — the words must stay razor-sharp; the glow is seasoning, not soup. - **ASCII diagrams.** Author them as literal `
` blocks of box-drawing characters; style with `white-space: pre`, color the strokes Phosphor Green, wrap node labels (`[ PARTY A ]`) in a span colored Amber. They should still *read as a diagram* with CSS disabled — that's the point.
- **Anchors.** The `ls sections/` output lines are `explain transaction` etc.; clicking smooth-scrolls down the same transcript and the status line updates. Active anchor highlights in Amber.
- **Tone of copy.** Plain, exact, a little dry, occasionally wry (the `undo settlement` error). It should read like good `man`-page prose and good operator notes — never like a landing page. Bias the whole experience toward **calm, textual, full-screen narrative immersion**: a reader leans in, reads a transcript, and leaves understanding what a transaction *is*.

## Uniqueness Notes

Differentiators, each a deliberate move against the frequency analysis:

1. **A literal single-terminal-pane layout — the whole site is one `tail -f` transcript.** `terminal` aesthetic sits at 22% and almost always shows up as a *decorative widget* (a fake console embedded in an otherwise normal page) or as `cyberpunk`/`sci-fi-hud` neon dressing. transactology.net makes the terminal the **entire architecture**: one fixed-width console column, prompt-and-output rhythm, line numbers, a vim-style sticky status line, `man`-page section furniture. No card-grid (93%), no bento, no hero image, no feature cards — none of the dominant layout patterns appear at all.
2. **Warm dual-phosphor palette, not cyber-neon and not the corpus's warm gradients.** The corpus is 98% "warm" but that warmth is almost universally peach/terracotta/honey *gradients* (93% gradient). Here the only colors are P1-green `#7FE3A1`, amber `#E0B341`, moss, paper-grey, and a single rust `#D85C4A` spark — **zero gradients**, flat phosphor-on-black, the aesthetic of an honest CRT rather than either neon Tron or sunset SaaS.
3. **The "imagery" is 100% typed characters — ASCII box-drawing diagrams and `ls -l` tables — against a corpus that is 98% photography.** No photos, no SVG illustration, no 3D render, no hand-drawn elements (94%!), no glassmorphic cards (85%). Every diagram still reads with CSS disabled.
4. **Animation = teletype, not parallax/cursor-follow/spring.** The dominant motion patterns (cursor-follow 89%, parallax 89%, spring 83%, magnetic 78%) are entirely absent. The only motion is a justified typewriter reveal, a line-by-line teletype stagger, a single blinking block cursor, and a ticking uptime counter — motion that *is the medium*, not decoration on top of it.
5. **Deliberate sibling contrast with transactology.com.** The `.com` is an exploded axonometric *blueprint* (isometric, drafted, spatial); the `.net` is the *command-line companion* (flat, textual, luminous). Same discipline, opposite instrument — and `man 7 transaction` as the structural conceit is unlike anything in the corpus.

Chosen seed/style: **"terminal command line dev"** (from seeds.json) — interpreted as a `man`-page/`tail -f` ledger session rather than a developer-portfolio console.

Avoided patterns from frequency analysis: hand-drawn (94%), glassmorphism (85%), card-grid (93%), full-bleed photography (98% imagery), warm gradients (93%), cursor-follow (89%), parallax (89%), spring (83%), magnetic (78%), stagger-as-decoration, bento-box, hero-dominant, dashboard, stat-grids, CTA/pricing/testimonial blocks.