# Design Language for transactology.net ## Aesthetics and Tone transactology.net is a **live generative systems tutorial** — the site presents itself as a running simulation of urban transaction flows, specifically imagined as Tokyo's underground water infrastructure mapped onto financial exchange networks. The aesthetic is **retro-futuristic operator console**: the visual language of a 1988 NEC PC-88 terminal that has been upgraded with WebGL bubble physics running at 120fps. Think: green phosphor screens behind frosted acrylic panels, numeric readouts in circuit-board amber, and above them all — water. The transactions are water. The water is data. The tone is **tech-tutorial with kinetic authority** — not a product pitch, not a portfolio piece, but a working explainer where the demos ARE the interface. Every paragraph of tutorial prose lives inside a slide-reveal panel that emerges from the left edge of the screen, timed to a generative bubble animation running continuously behind it. The site teaches you something real while the background is quietly alive. Aesthetic DNA: 1980s Japanese sci-fi console + generative bubble fluid dynamics + city infrastructure diagram + terminal typography. The site should feel like studying a decommissioned transit operations center where someone has jury-rigged a live simulation. Cold phosphor light. Warm amber readouts. Bubbles rising through dark water. ## Layout Motifs and Structure **Core layout: minimal-navigation slide-reveal panels over a generative full-viewport canvas.** The viewport is permanently occupied by a full-screen canvas (`position: fixed`, `z-index: 0`) running a bubble fluid simulation — hundreds of semi-transparent circles of varying radii (8px–90px) drifting upward through a dark liquid field, occasionally clustering and separating, their paths influenced by the cursor position. This canvas is never hidden, never scrolled away. It is the ground of the site. Above the canvas, content exists in a single navigation strip and a series of **slide-reveal panels**: **Navigation — one line, top-left:** - A wordmark in fixed-width terminal font: `TRANSACTOLOGY.NET` — 14px, letter-spacing +0.3em, color #a8ff78 (phosphor green) - Five navigation items to the right: `PRIMER | FLOWS | SYSTEMS | PROTOCOLS | REFERENCE` — inline, separated by pipe characters, same terminal mono font at 11px. No hamburger. No dropdown. Always visible. - The entire nav line sits on a single horizontal rule: 1px solid rgba(168, 255, 120, 0.2). Sticky at top. **Content panels — slide-reveal from left edge:** Each content section is a panel 540px wide (max), positioned absolute-left, with `transform: translateX(-100%)` default state. On scroll-trigger or nav click, the panel slides in with `transform: translateX(0)` over 480ms with `cubic-bezier(0.16, 1, 0.3, 1)` (fast-out snappy). The panel has: - Background: `rgba(8, 12, 20, 0.88)` with `backdrop-filter: blur(12px)` — allows bubbles to be visible behind - Left border: 2px solid #a8ff78 at 60% opacity — the phosphor edge - Internal padding: 32px 40px - Typography in tight reading columns - Panels can be dismissed (slide back out) by clicking outside them **Structural sequence (six panels, triggered in order):** 1. **PRIMER** — what transactology studies; the water metaphor introduction 2. **FLOWS** — how transactions move through systems; the bubble simulation explained 3. **SYSTEMS** — urban infrastructure as transaction networks; city diagrams 4. **PROTOCOLS** — the rules governing exchange; circuit-board diagram overlays 5. **REFERENCE** — technical vocabulary in terminal-list format 6. **ABOUT** — the project origin; a brief human moment in cold terminal prose **Spatial rhythm:** Panels are not stacked vertically. They all occupy the same left-side zone and replace each other via slide-in/slide-out. The generative canvas behind them is always the true "page" — infinite, alive, continuous. ## Typography and Palette **Color palette — retro-futuristic urban console:** - `#080c14` — void black (body background, deepest layer, the water-dark) - `#a8ff78` — phosphor green (primary text, nav, active states, the terminal glow) - `#ffb347` — amber circuit (secondary accent, readout numbers, code annotations) - `#00d4ff` — cyan discharge (bubble highlight color, links, hover states) - `#1a2744` — deep navy panel (panel backgrounds at 90% opacity, infrastructure diagram fill) - `#2d4a2d` — muted phosphor shadow (inactive nav items, dimmed text) - `#c8ffa0` — pale phosphor (body text within panels — slightly warm green-white for readability) **Typography (Google Fonts only):** - **Primary Display / Wordmark — [Share Tech Mono](https://fonts.google.com/specimen/Share+Tech+Mono)** — weight 400 (single weight). Used for the site wordmark, section headers within panels, all numeric readouts, and all code blocks. This is a genuine monospace typeface designed to feel like a real terminal — not a fashion mono. At 14px with +0.3em tracking it reads as a live data feed; at 32px it reads as a command header. Color: `#a8ff78`. - **Tutorial body text — [Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk)** — variable axes `wght 300–700`. Used for all prose within slide-reveal panels. Set at 15px/1.7 line-height, weight 350, color `#c8ffa0`. As the user scrolls through a panel, section subheads animate their `wght` axis from 350 to 620 over 300ms (expressive-variable effect: words gain mass as they come into focus). Headings within panels: Space Grotesk at 22px, wght 600, color `#a8ff78`. - **Diagram labels / annotation — [JetBrains Mono](https://fonts.google.com/specimen/JetBrains+Mono)** — variable, `wght 100–800`. Used for all labels that appear inside or adjacent to the generative canvas: bubble radius annotations (appear on hover), city infrastructure diagram street names, data-flow notation. Set at 10px, wght 400, color `#ffb347` at 70% opacity. On hover over any annotated element, wght animates to 700 over 150ms — a crisp terminal-weight snap. **Scale:** - `--fs-wordmark`: 14px, Share Tech Mono, +0.3em tracking - `--fs-nav`: 11px, Share Tech Mono, +0.25em tracking - `--fs-panel-h1`: 22px, Space Grotesk wght 600 - `--fs-panel-body`: 15px, Space Grotesk wght 350, line-height 1.7 - `--fs-annotation`: 10px, JetBrains Mono wght 400 - `--fs-code`: 13px, Share Tech Mono, background rgba(168,255,120,0.08) ## Imagery and Motifs **Primary imagery: generative water-bubble simulation (canvas, not photo).** The full-viewport canvas runs a continuous simulation: - 200–350 circular particles with radii 8–90px - Each particle has: a base fill of `rgba(0, 212, 255, 0.04–0.12)` (cyan, low opacity), a 1px stroke of `rgba(0, 212, 255, 0.2–0.4)`, and an inner specular highlight (a small white arc at the top-left of each circle rendered as a short arc path) - Movement: upward drift at 0.3–1.2 px/frame, slight sinusoidal lateral oscillation, cursor proximity increases drift speed and causes gentle repulsion - Clustering behavior: particles within 40px of each other slow down and merge trails (their opacity briefly increases, then separates) - The overall effect is: dark water, rising bubbles, the feeling of looking upward through a tank or city cistern **Secondary imagery: city-urban infrastructure diagrams (SVG overlay).** On the SYSTEMS panel, a schematic city grid SVG appears as a faint overlay on the canvas: - Orthogonal street grid: 1px strokes at `rgba(168, 255, 120, 0.08)` - Major arteries: 1.5px at `rgba(168, 255, 120, 0.15)` - Intersection nodes: 3px circles in `rgba(255, 179, 71, 0.3)` (amber) - Underground water main overlay: dashed blue lines `rgba(0, 212, 255, 0.12)` - The grid is stylized Tokyo-metro scale, not geographically accurate, but evokes a real urban infrastructure map - Transaction flow paths are drawn as animated dashed lines traveling along the city grid routes, their dash-offset animated at varying speeds to simulate current **Tertiary motif: terminal scan-line texture.** A subtle CSS overlay: a repeating-linear-gradient of alternating transparent/1px-dark-row creates a soft scan-line effect at 2% opacity across the entire viewport. This is the TV-screen phosphor feel. Never strong enough to obstruct — purely atmospheric. **Quaternary motif: amber readout numerics.** In the top-right corner of the viewport (fixed position, above canvas, below nav z-level): a live-updating cluster of fake system metrics displayed in Share Tech Mono, amber color: ``` TX/SEC 4,721 NODES 1,088 LATENCY 0.003ms UPTIME 99.97% ``` Values increment/decrement slowly at random intervals (±5% each 2–4 seconds) using requestAnimationFrame. This is pure aesthetic — it makes the site feel like a running system. ## Prompts for Implementation Build transactology.net as a **live generative operations console** that teaches transaction theory through the metaphor of urban water infrastructure. The implementation has one fixed canvas layer and one dynamic panel layer. They never obscure each other — the canvas is always partially visible. This is the core UX promise: the simulation is always running. **Phase 1 — Canvas foundation:** Start with the bubble canvas. Use plain Canvas 2D API (no three.js, no external libraries). Create a `Particle` class with: `x, y, r, vx, vy, opacity, phase`. Initialize 280 particles randomly distributed across viewport. Each frame: update positions (upward drift + sinusoidal), wrap particles that exit top back to bottom at random x, check cursor distance for repulsion (within 80px, add outward force scaled by 1/distance²), check inter-particle distance for clustering opacity boost. Draw each particle as: arc path, fill with cyan rgba, stroke with cyan rgba, then add specular highlight arc. Scan-line: add a `div.scanlines` with `position: fixed`, `inset: 0`, `pointer-events: none`, `background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.02) 2px, rgba(0,0,0,0.02) 4px)`, `z-index: 1`. **Phase 2 — Navigation strip:** Single `