# Design Language for transactology.com ## Aesthetics and Tone transactology.com is **the exploded-axonometric atlas of a single exchange** — picture a 1970s engineering manual that, instead of dissecting a turbine or a wristwatch movement, dissects the *act of a transaction itself*: offer, counter, escrow, clearing, settlement, receipt. The site presents itself as a working diagram, a wall-mounted blueprint that has been lit from a low cold angle so every plane casts a thin steel shadow. The aesthetic is **isometric technical illustration rendered in brushed navy-metallic**, austere and instrument-grade, the way a surveyor's drafting table looks at dusk — precise, slightly cold, faintly luminous along its etched lines. The tone is **scholarly-intellectual with an engineer's deadpan**: it speaks the way a good reference text speaks — declarative, unhurried, never selling. "Transactology" is treated as a real discipline with its own taxonomy, and the page is its primer. Nothing winks. Nothing bounces. Things *snap into place* on a 30°/30° axis with the satisfying authority of a caliper closing. The mood lands somewhere between a NASA technical memorandum, a Dieter Rams parts catalogue, and the quiet of a library annex where the only sound is a flat-file drawer rolling shut. Crucially: **no warmth, no gradients-as-decoration, no card grids, no pricing tables, no statistics walls.** The drama is structural — the slow rotation of an isometric assembly, the draw of a dimension line, the layering of translucent strata — not promotional. ## Layout Motifs and Structure The entire site obeys a **true isometric grid: a 30° left axis, a 30° right axis, and a vertical Z** — every box, panel, label, and connector is constructed on this triad. There is **no horizontal baseline anywhere** except in the running body text inside "callout sheets." The page is not a stack of sections; it is **one tall axonometric drawing you scroll *into*, plate by plate**, the way you'd page through a fold-out schematic. - **The Plate System.** Six numbered "plates," each a self-contained isometric tableau: *Plate I — The Two Parties*, *Plate II — The Offer*, *Plate III — The Ledger*, *Plate IV — Escrow & Clearing*, *Plate V — Settlement*, *Plate VI — The Receipt*. Each plate occupies a full viewport and is captioned in the bottom-left corner like a technical figure: `FIG. 03 — THE LEDGER · sheet 3 of 6`. - **Layered-depth strata.** Within each plate, content is built from **3–5 translucent isometric planes stacked along the Z axis**, slightly offset, so the viewer reads depth like geological strata. As you scroll, the strata *separate* — an exploded view — then re-seat on the next plate. (layered-depth sits at 13% in the frequency analysis; this site treats it as the literal grammar of the page, not an accent.) - **Dimension lines as the layout skeleton.** Thin extension lines with arrowheads and tick-marks run between elements, labelled with mock measurements (`Δt = settlement window`, `n = 2 counterparties`, `∮ ledger closure`). These dimension lines *draw themselves* on entry and serve as the visual connective tissue between strata. - **The Margin Rail.** A fixed left margin column, 64px wide, ruled like the edge of drafting vellum — printed with plate numbers, a tiny isometric compass-rose (showing the 30/30/Z axes), and a vertical scroll progress notch. This is the only persistent UI; there is no top nav bar, no hamburger. - **No centered hero, no symmetry.** Every plate is deliberately **asymmetric** — the assembly sits off to one side, balanced by dimension lines and a callout sheet on the other, the way a real engineering plate composes negative space around the part. ## Typography and Palette **Fonts — Google Fonts only, three voices, each with a job, never blended:** - **Plate titles & figure captions — *IBM Plex Mono* (wght 500 / 600), letter-spaced +0.12em, UPPERCASE.** The monospace gives the captions their instrument-panel, parts-list authority. Used for `FIG. 0X`, plate names, dimension-line labels, the margin-rail numerals — anything that behaves like *engraved metadata*. - **Body & callout-sheet prose — *Spectral* (wght 400, with 400 italic for asides).** A transitional serif with enough warmth to be read at length but enough rigor to sit on a technical sheet without looking decorative. This is the "voice of the discipline" — definitions, the running primer text, footnote-style annotations. - **The wordmark & oversized plate numerals (the big roman "I"–"VI") — *Archivo Black*.** Heavy, neutral, almost industrial-signage; set in the isometric plane so the letterforms shear along the 30° axis and read as *embossed onto a steel plate*. Used sparingly: the masthead "transactology", and one giant ghosted plate-numeral floating behind each tableau. **Palette — navy-metallic, cold and etched (minimum well exceeded):** - `#0B0F1A` — *abyssal navy* — the paper of the drawing; the deepest background. - `#141C2E` — *drafting navy* — primary panel fill, one step up from the void. - `#1F2C44` — *steel slate* — mid-stratum planes, the workable surface. - `#3A4D6E` — *gunmetal* — receding planes, dimension-line bodies, secondary rules. - `#8FA3C4` — *brushed silver-blue* — body text on dark, tick-marks, the "ink" of the diagram. - `#C9D6EC` — *polished chrome* — headings, the bright edge-light on near planes, key labels. - `#E8B23A` — *signal brass* — the single accent: used **only** on the active dimension line, the live plate numeral, and the one element each plate is "calling out." Brass = "look here," like a highlighted callout in a service manual. Never more than ~3% of any screen. - `#5FB39A` — *patina verdigris* — secondary accent, reserved exclusively for the *settled / closed* state in Plate VI (the receipt's checkmark, the closed-ledger glyph) — the green of oxidized bronze, signalling completion. ## Imagery and Motifs **Everything is constructed SVG/CSS isometry. No photography. No 3D-render plugins. No stock illustration. No hand-drawn squiggles.** Every visual is built from flat polygons sheared onto the 30/30/Z grid — the way isometric pixel art or a technical exploded-view is assembled by hand. - **The Isometric Assembly (per plate).** A central object built of stacked translucent isometric boxes: two facing parties as simple prismatic figures (Plate I); an "offer" rendered as a thin sliding plate that docks between them (Plate II); the ledger as a deck of horizontal isometric leaves that fan and re-close (Plate III); escrow as a sealed isometric vault-cube with a clearing-channel running through it (Plate IV); settlement as the two prisms exchanging a glowing brass token along a dimension line (Plate V); the receipt as a single thin embossed plate stamped with a verdigris seal (Plate VI). - **Dimension lines & extension lines.** Hairline strokes (0.75px), with proper machined arrowheads and witness-line ticks, labelled in Plex Mono. They are *the* recurring decorative motif — they wander across negative space connecting strata, and they animate by path-drawing. - **The Compass-Rose.** A tiny isometric axis-indicator (the classic X/Y/Z tripod with 30° legs) lives in the margin rail and subtly re-orients — a 2° wobble — as you scroll, as if the whole drawing is breathing. - **Hatching & section-fill.** Cut faces of isometric solids are filled with **fine 45° engineering hatching** (1px lines, 4px pitch) in gunmetal — the universal "this is a sectioned surface" convention. Translucent planes show this hatching faintly through one another, building moiré-free depth. - **Mock annotations.** Leader lines pointing to parts of each assembly, ending in small Plex-Mono labels in brackets: `[the bid]`, `[escrow seal]`, `[clearing window Δt]`, `[counter-signature]`. They read like a parts-callout sheet. - **Grid ghost.** The faint 30/30 isometric grid is always present at ~4% opacity behind the strata, like the printed grid on engineering vellum — never obtrusive, always grounding the geometry. ## Prompts for Implementation Build transactology.com as **a single-route, vertically-scrolled axonometric atlas** — one `index.html`, one stylesheet, one ES module. Treat the entire page as *one technical drawing the reader scrolls into*, not a marketing site. There is **no contact form, no email capture, no pricing block, no testimonial row, no stat-counter grid, no row of feature cards, no "Get Started" CTA**. There is only the six-plate primer on the discipline of transactology, told the way a reference manual reveals an exploded assembly. **Narrative spine — six plates, scroll-driven, ~80 seconds of unhurried travel:** 1. **Plate I — The Two Parties.** Open on near-black drafting navy. The wordmark "transactology" shears in along the 30° axis (Archivo Black), under it a Spectral definition: *"transactology, n. — the study of the exchange as a structured object: its planes, its seams, its order of operations."* The isometric grid fades up at 4%. Two prismatic figures rise from the Z plane, a dimension line draws itself between them: `n = 2`. Brass touches only the live caption `FIG. 01`. 2. **Plate II — The Offer.** As the reader scrolls, Plate I's strata *separate upward* (exploded view) and resolve into Plate II: a thin "offer" plate slides on a dimension-line track and docks between the two prisms. Plex-Mono leader: `[the bid] → Δv = proposed value`. Spectral body in a right-hand callout sheet explains the offer as "the first plane laid down." 3. **Plate III — The Ledger.** The offer-plate multiplies into a fanned deck of isometric leaves — the ledger — which spread, each leaf annotated, then snap closed with a caliper-like motion. The `∮ ledger closure` dimension line completes its path-draw on snap. Verdigris is *withheld* here — it's promised, not yet given. 4. **Plate IV — Escrow & Clearing.** The deck sinks into a sealed isometric vault-cube; a "clearing channel" (a translucent tube along the right axis) routes through it. Brass pulses once along the clearing channel on entry. Callout: *"escrow — the held plane; clearing — the channel that releases it."* 5. **Plate V — Settlement.** The vault opens; the two prisms exchange a single glowing brass token that travels along a dimension line between them. The token's path is the hero animation of the page — slow, weighty, inevitable. On arrival, both prisms shift one chroma-step brighter (`#1F2C44` → toward `#C9D6EC` edge-light). 6. **Plate VI — The Receipt.** All strata re-seat into one thin embossed plate. A verdigris seal stamps onto it (the only place `#5FB39A` appears at full strength) — a closed-ledger glyph + checkmark. Final Spectral line, small, centered in its sheet: *"the exchange, fully sectioned. — fin."* The margin-rail progress notch reaches the bottom; the compass-rose settles flat. **Motion language (scroll-triggered, spring-eased, instrument-precise — never floaty):** - **Path-draw-SVG** is the signature: every dimension line, extension line, leader, and arrowhead draws itself on entry via `stroke-dasharray`/`stroke-dashoffset`, eased like a plotter pen — fast then settling. - **Exploded-view transitions between plates:** as one plate scrolls out, its translucent strata translate apart along the Z axis (parallax-by-stratum, each layer a different rate), then the next plate's strata translate *in and re-seat*. Use `transform: translate3d()` on isometric planes; respect `prefers-reduced-motion` by cross-fading instead. - **Snap, don't bounce:** the ledger-deck closing, the offer-plate docking, the vault sealing — all use a *critically-damped* spring (overshoot ≈ 0). The feel is mechanical authority, not playfulness. - **Margin-rail compass-rose:** a continuous, tiny (±2°) wobble tied to scroll velocity — the drawing "breathing." - **Brass spotlight:** exactly one element per plate receives the `#E8B23A` accent, and it gently `pulse`s once on plate-enter, then holds steady. Verdigris is locked away until Plate VI. - **Hatching reveal:** sectioned faces draw their 45° hatch lines progressively (left-to-right wipe) as a plane becomes "active." - Cursor is a small **crosshair reticle** (CSS), not a dot — when it nears a leader-line endpoint, the reticle's ticks lengthen 4px. This is the only cursor effect; it must read as a drafting tool, not a gimmick. **Build notes:** isometry via CSS `transform: rotateX(30deg) rotateZ(-30deg)` wrappers (or matrix3d for the true dimetric look); keep SVG hairlines at non-scaling-stroke; the 4%-opacity isometric grid is a tiled CSS background. Everything stays in the navy-metallic ramp — no stray color, ever, outside brass and verdigris. ## Uniqueness Notes Differentiators, each a deliberate move against the frequency analysis: 1. **True isometric grammar as the *entire layout system*, not an icon style.** Isometric sits at 14% aesthetic / layered-depth at 13% layout — and where they appear they're usually decorative spot-art. transactology.com builds *every plate, panel, label, and connector* on a literal 30/30/Z drafting grid with no horizontal baseline outside body copy. The page is one scrollable axonometric drawing. 2. **The "transactology as a real discipline" conceit.** Instead of selling a product, the site is the primer for an invented science of the exchange — six numbered figure-plates, parts-callout sheets, dimension lines with mock measurements. This refuses the entire CTA/pricing/stat-grid/feature-card vocabulary that dominates the corpus. 3. **Navy-metallic with a two-accent lockout (brass = "look here", verdigris = "settled").** Navy-metallic is at ~2% in the palette frequencies, and against the corpus's 98%-warm / 93%-gradient tendency this site is cold, etched, and gradient-free; the brass accent is rationed to ~3% of screen and verdigris is *withheld until the final plate* as a narrative payoff. 4. **Path-draw dimension lines as the connective tissue.** Path-draw-SVG exists in the corpus (~49%) but as flourish; here the self-drawing extension lines, witness ticks, and machined arrowheads are the *structural skeleton* linking strata across plates. 5. **Anti-floaty motion.** Against the corpus's spring/elastic/bounce/cursor-follow defaults, this site uses critically-damped, overshoot-free "snap" easing and a crosshair-reticle cursor — the feel of a caliper closing, not a balloon settling. Avoided per frequency analysis: hand-drawn (94%), glassmorphism (85%), card-grid (92%), full-bleed-as-default, centered hero, warm palette (98%), gradient-as-decoration (93%), cursor-follow-dot (89%), photography (98%), CTA/pricing/stat-grid blocks. Chosen seed/style: **isometric technical docs** — *aesthetic: isometric, layout: layered-depth, typography: tech-mono, palette: navy-metallic, patterns: path-draw-svg, imagery: isometric-icons, motifs: abstract-tech, tone: scholarly-intellectual*.