# Design Language for transactology.dev ## Aesthetics and Tone transactology.dev is a **cinematic study of value exchange made tactile** — the science of transactions stripped to its atmospheric core. Picture a dimly lit trading floor at 3 AM where candles cast amber pools across ledger books, and neon price tickers bleed magenta and electric cyan into the smoke. The aesthetic is **duotone noir with candlelight warmth**: every frame is a still from a film about money, meaning, and movement. Not fintech polish. Not startup optimism. A **cinematic document** — the kind a finance professor would hang on a wall if finance professors thought in moving images. The tone is **friendly but weighty** — a knowledgeable guide standing beside you in a dark museum, not lecturing but illuminating. Sentences are direct, warm, slightly conspiratorial. The site speaks as if sharing something most people never think to ask about. Visually: deep charcoal grounds, a sharp magenta-to-amber duotone logic applied to imagery and overlays, Bebas Neue stacked title cards at cinematic scale, candle-flicker atmospherics as micro-animation, and counter animations that tick upward like a transaction count registering in real time. ## Layout Motifs and Structure **Stacked-sections as film frames.** Each section is a full-viewport panel — a discrete cinematic cut. The viewport is a **projection screen**, not a scroll canvas. Transitions between sections use a hard-cut fade-to-black (40ms opacity collapse then cross-dissolve) rather than parallax or continuous scroll — each section is tonally self-contained, like scenes in a documentary. **Macro structure (top to bottom):** 1. **The Ledger Opening** (`100svh`). Pure `#0d0b0a` background. Centered vertically: a single thin horizontal rule in `#c8622a` (ember amber) draws itself left-to-right over 1.2 seconds. Above it, `Bebas Neue` at `14vw` renders "TRANSACTOLOGY" letter by letter (stagger 60ms per character) in `#f5e8d0` (parchment). Below the rule: a subtitle in `Space Mono` at `1.1rem` tracks in: "the science of what passes between." A faint candle-flicker animation pulses the amber rule opacity between 0.7 and 1.0 on a 2.4s sine curve. 2. **The Counter Panel** (`100svh`). `#0f0d0c` ground. A 3-column grid of oversized counters — each counter ticks upward from zero using `requestAnimationFrame` easing (ease-out-cubic). Counter labels in `Space Mono` caps at `0.75rem`, values in `Bebas Neue` at `10vw`. A magenta (`#e0245e`) thin underline sweeps beneath each counter value on completion. The three counters read: "TRANSACTIONS STUDIED", "EXCHANGE TYPES MAPPED", "YEARS OF PATTERN DATA". No fabricated numbers — all rendered as animated placeholders that integrate actual data at implementation. 3. **The Duotone Film Strip** (`100svh`). A horizontal strip of three film-frame panels, each `33.3vw` wide and `80vh` tall. Each panel contains an SVG-generated scene — abstract geometric representations of transaction flow: arrows, nodes, ledger lines — rendered through a CSS duotone filter (`sepia(1) saturate(3) hue-rotate(Xdeg)`) cycling through magenta, amber, and cyan tones per panel. No photography. Panels separated by a `2px` vertical rule in `#c8622a`. 4. **The Candle Doctrine** (`100svh`). Dark `#110e0d` background with a single candle SVG animation in the lower-right quadrant — a looping flame built from three layered `` elements animated with `scale` and `translate` on independent sine curves. Text content occupies 55% left column: a short manifesto paragraph in `Crimson Pro` italic at `1.8rem`, line-height `1.6`, color `#f5e8d0`. A pull-quote in `Bebas Neue` at `6vw` magenta `#e0245e` anchors the midpoint. This section tells the story of transactology as a discipline. 5. **The Signal Grid** (`100svh`). `#0d0b0a` ground. A `4×2` grid of concept tiles. Each tile has: a `Bebas Neue` label in `#f5e8d0` at `2.2rem`, a two-sentence description in `Space Mono` at `0.8rem` in `#8a7a6e` (warm ash), and a thin `1px` ember-amber border. On hover: border color transitions to `#e0245e` magenta over `200ms`; tile background shifts to `#1a1210`. No card-flip, no shadows — only border and background state change. Tiles cover: Bilateral Exchange, Value Assertion, Ledger Inscription, Trust Propagation, Settlement Lag, Counterparty Risk, Market Microstructure, Clearing Mechanics. 6. **The Contact Frame** (`60svh`). `#0f0d0c` ground. Centered: `Bebas Neue` "ENTER THE STUDY" at `7vw` in `#f5e8d0`. Below: a minimal email input and submit button — input border `1px #c8622a`, focus state shifts to `#e0245e`. A candle flicker animation on a small decorative rule above the input. **No sidebar. No fixed header.** Navigation is a minimal `position: fixed` top-right cluster: three `Space Mono` items in `0.75rem` all-caps, `#8a7a6e`, hover to `#f5e8d0`. ## Typography and Palette **Typography (Google Fonts only):** - **Primary Display — [Bebas Neue](https://fonts.google.com/specimen/Bebas+Neue)**, weight 400 (single weight; extreme vertical compression, industrial stroke geometry, cinematic poster authority). Used at `6vw`–`14vw` for section titles and the site wordmark. Tracking: `+0.05em` default, `+0.2em` on spaced-out counters. All caps always. This is the marquee font — the film title card voice. - **Monospace / Data — [Space Mono](https://fonts.google.com/specimen/Space+Mono)**, weights 400 and 700. Counter labels, navigation items, data descriptors, tile descriptions. Used at `0.7rem`–`1.1rem`. Mimics ledger entries and ticker data — every number feels tabulated, every label feels systematic. Tracking `+0.08em` on labels. - **Body / Prose — [Crimson Pro](https://fonts.google.com/specimen/Crimson+Pro)**, weights 400 italic and 400 regular. Used exclusively in the Candle Doctrine section for the manifesto paragraph. At `1.8rem`, `line-height: 1.65`, it carries the warmth and literary authority of a scholarly text — contrasting the industrial coldness of Bebas Neue. **Palette:** - `#0d0b0a` — Projection Black (primary ground; deepest background) - `#110e0d` — Candleroom Dark (secondary background panels) - `#1a1210` — Ember Shadow (hover states, tile backgrounds on hover) - `#f5e8d0` — Parchment White (primary text, main headings) - `#c8622a` — Ember Amber (decorative rules, input borders, film strip separators, candle body) - `#e0245e` — Magenta Signal (counter underlines, pull-quotes, hover borders, accent CTA) - `#8a7a6e` — Warm Ash (secondary text, nav items, tile body copy, muted labels) - `#00c8d7` — Cold Cyan (used sparingly: one duotone filter panel, one data highlight) **Duotone logic:** All image-like content (SVG geometric scenes) receives a CSS duotone filter that maps shadows to `#0d0b0a` and highlights to either `#c8622a` (amber panels), `#e0245e` (magenta panels), or `#00c8d7` (cyan panels). The duotone is not applied uniformly — each film-strip panel has its own hue cast, creating a triptych of color temperatures unified by the dark ground. ## Imagery and Motifs **No photography.** The frequency data shows photography and bokeh-background at high usage across the corpus. transactology.dev uses zero photographs. All visual content is SVG geometry or CSS animation. **Candle-atmospheric motif:** The candle is the site's primary atmospheric symbol — it appears in three forms: 1. A full animated SVG candle (flame with three layered ellipses on sine-curve transforms) in the Candle Doctrine section 2. A CSS-only flame glow: `box-shadow: 0 0 40px 8px rgba(200, 98, 42, 0.35)` applied to the decorative `#c8622a` rule elements — giving them a warm halation like candlelight 3. A flicker micro-animation on the opening rule: `@keyframes flicker { 0%, 100% { opacity: 1; } 47% { opacity: 0.85; } 49% { opacity: 0.65; } 51% { opacity: 0.9; } }` — running on a `2.4s infinite` loop with `ease-in-out` **Neon-glow motif:** Magenta elements receive a subtle neon bloom: `text-shadow: 0 0 20px rgba(224, 36, 94, 0.6), 0 0 60px rgba(224, 36, 94, 0.2)` on Bebas Neue display text in `#e0245e`. The cyan panel adds `0 0 30px rgba(0, 200, 215, 0.4)` to its SVG geometry. The neon glow is never applied to more than one element per viewport — it is a punctuation, not a wallpaper. **Transaction flow geometry:** In the film-strip panels, abstract SVG diagrams show stylized transaction topologies: directed graphs with circular nodes (`r="8"`, fill `#c8622a`) connected by tapered arrow paths. These are not decorative doodles — they are formal graph diagrams of bilateral, multilateral, and cleared transaction structures, rendered at high contrast against the duotone wash. **Counter animation:** Counters use `requestAnimationFrame` with an ease-out-cubic easing function. Starting value: `0`. Each counter triggers when its panel enters the viewport via `IntersectionObserver` (threshold `0.4`). The tick sound is simulated through a CSS transform: each digit increment causes a `translateY(-2px)` then `translateY(0)` spring at `150ms` — a mechanical ticker feel without audio dependency. ## Prompts for Implementation The narrative to enact: a visitor arrives at transactology.dev as if entering a documentary screening. The room is dark. The first thing that happens is a horizontal line draws itself across the center of a black screen — an amber rule like a film leader. Then the title materializes, letter by letter: TRANSACTOLOGY. The visitor doesn't need to click. The site is already speaking. **Technical architecture:** 1. **Section structure:** Six `
` elements, each `height: 100svh` (except the contact section at `60svh`). CSS `scroll-snap-type: y mandatory` on `
` — snapping between film frames. `overflow: hidden` per section to prevent content bleed. Snap align: `scroll-snap-align: start`. 2. **Opening animation sequence:** Use a JS sequencer (`async/await` with `setTimeout` wrappers) for the title reveal. First: rule draws (`width: 0` to `width: 60vw` via CSS transition `1.2s ease-in-out`). Then: letters appear staggered (`opacity: 0` to `1`, `translateY(8px)` to `0`, 60ms per character delay). Then: subtitle tracks in (`letter-spacing: 0.5em` to `0.1em`, `opacity: 0` to `1`, `800ms ease-out`). 3. **Duotone filter implementation:** Define three CSS custom filter chains as SVG `` elements embedded in the HTML ``. Apply via `filter: url(#duotone-amber)` etc. Do NOT use CSS `sepia()+hue-rotate()` chain — use proper SVG `feColorMatrix` for clean duotone with accurate shadow/highlight color mapping. 4. **Counter animation:** `IntersectionObserver` with `threshold: 0.4`. On intersect: start `requestAnimationFrame` loop. Easing: `function easeOutCubic(t) { return 1 - Math.pow(1 - t, 3); }`. Duration: `2200ms`. On each frame: `Math.round(easeOutCubic(elapsed/duration) * targetValue)`. On completion: trigger the magenta underline sweep (CSS transition on `width: 0` to `100%` over `400ms`). 5. **Candle SVG animation:** Three ellipse layers with independent `animateTransform` elements. Inner flame: fast flicker (`dur="0.3s"`, `scaleY: 1 to 1.15`). Mid flame: medium sway (`dur="0.8s"`, `rotate: -3 to 3`). Outer glow: slow breathe (`dur="2.4s"`, `opacity: 0.6 to 0.9`). All `repeatCount="indefinite"`. 6. **Neon glow control:** Apply `text-shadow` only on elements with class `.neon-accent`. Never cascade — always target explicitly. Maximum one `.neon-accent` element visible per viewport. 7. **Film strip panels:** Use `display: flex; flex-direction: row` container at `100svh` height. Each panel `flex: 1; overflow: hidden`. SVG transaction diagrams scale to `80%` panel width with `viewBox` auto-scaling. Separator lines: `border-right: 2px solid #c8622a`. 8. **No gradients as primary backgrounds.** The frequency report shows gradient at 76% across the corpus. transactology.dev uses `#0d0b0a` and `#110e0d` flat fills for all section grounds. The only gradient permitted is a `radial-gradient` candle glow effect (`0 0 / 300px 300px no-repeat` at `20% 90%`) in the Candle Doctrine section — simulating a pool of candlelight on the floor. **AVOID:** - Any card with drop-shadow and border-radius (corpus cliché) - Gradient hero backgrounds (76% usage — absolute avoid) - Icon libraries (Lucide, Heroicons, etc.) - Testimonial blocks or social proof sections - Fixed sticky sidebar navigation **EMPHASIZE:** - Silence between elements — generous `padding: 8vh 0` between content blocks within sections - The amber rule as leitmotif — appears in opening, separates film strip, decorates contact frame - Counter animation as the only "interactive" moment that invites attention without demanding it ## Uniqueness Notes 1. **Cinematic scroll-snap as documentary film structure, not scroll-jacking gimmick.** The corpus shows stacked-sections at only 2% usage. transactology.dev uses CSS `scroll-snap-type: y mandatory` not as a trendy effect but as a deliberate narrative choice — each section is a film scene, the scroll is a cut. This framing justifies every visual and typographic decision: the projector-black backgrounds, the Bebas Neue title cards, the film-strip triptych. 2. **Candle motif as atmospheric logic, not decoration.** The corpus shows candle/atmospheric motifs are essentially absent. Here the candle is the site's conceptual anchor — transactology is about the passing of value, and value has historically been negotiated by candlelight (candle auctions were a common 17th–19th century practice). The candlelight isn't nostalgic decoration; it is a reference to the physical history of transaction. The amber ember palette traces directly from this. 3. **Duotone applied as per-panel cinematic color grading, not uniform overlay.** The corpus's 11% duotone usage applies duotone as a single filter across all imagery. transactology.dev uses three distinct duotone registers (amber, magenta, cyan) across the three film-strip panels — creating a color temperature arc (warm → hot → cold) that moves through the site like a color grade in a film edit. 4. **Counter animation tied to transaction semantics, not vanity metrics.** Counter animations at 4% corpus usage are almost always used for "We served X clients" bragging. Here the counters are taxonomic ("EXCHANGE TYPES MAPPED", "YEARS OF PATTERN DATA") — they reinforce the site's identity as a scholarly instrument, not a conversion funnel. 5. **Zero gradients as backgrounds; amber rules as structural rhythm.** The corpus's 76% gradient usage makes flat-black grounds an underused differentiator. The recurring `#c8622a` horizontal rule serves as the design's structural grammar — every major section transition and content division is marked by this ember line, creating visual coherence without relying on gradient washes. **Planned seed from assignment:** `aesthetic: cinematic, layout: stacked-sections, typography: bebas-bold, palette: duotone, patterns: counter-animate, imagery: neon-glow, motifs: candle-atmospheric, tone: friendly` **Avoided patterns (per frequency analysis):** gradient backgrounds (76% — avoided entirely), hand-drawn (54% — not used), editorial aesthetic (50% — not used), terminal aesthetic (31% — not used), photography/bokeh imagery (high — zero photos used), card drop-shadows (corpus cliché — avoided), hexagonal-honeycomb layout (4% but overrepresented in recent designs — not used).