# Design Language for transactology.com
## Aesthetics and Tone
transactology.com is the imagined field journal of a Victorian botanist who also happened to be a transaction theorist — someone who pressed specimens of commercial exchange between sheets of vellum and annotated the margins with handwritten observations about value, desire, and transfer. The aesthetic is **botanical-archival meets terracotta pastoral**: the warm, sun-bleached atmosphere of a conservatory in late afternoon, where dried flora fills brass-framed specimen drawers and the light through leaded glass casts amber grids across cotton-rag paper.
The tone is **pastoral-romantic**: not nostalgic in a sentimental way, but in the way of someone who believes that the exchange of value is as old as the first trade of seeds across a river, and that this antiquity deserves tenderness. The word "transactology" — the study of transactions — is treated as a discipline of the natural sciences, the way mycology or entomology frames inquiry: taxonomic, illustrated, deeply patient. The site feels like it belongs in the same library as a 19th-century botanical atlas, but the specimens being pressed and named are moments of exchange.
The **split-screen architecture** is the structural soul of the experience: left panel is always the **field specimen** (a full-bleed photograph, warm and earthen), right panel is the **scholarly annotation** (cream vellum, terracotta ink, retro-display type). When the user scrolls, these two panels animate with different velocities — the photograph drifts slowly, the text lifts faster — as if the physical object and the written understanding of it are always slightly out of step.
## Layout Motifs and Structure
**Core structure: vertical split-screen with differential scroll.**
The viewport is divided into two equal columns — 50/50 at all breakpoints above 900px — that never collapse to single-column until mobile. This split is the central metaphor: the physical world (left) and the conceptual world (right) are always visible simultaneously, always slightly asynchronous, always in relationship.
**Left Panel — the Specimen Column:**
- Full-bleed photography, always portrait or square crop, never landscape
- Image occupies 100vh, `position: sticky`, top: 0 — it stays fixed while the right column scrolls
- A thin terracotta rule (2px) separates left from right, but bleeds off-screen at top and bottom — it is not a border, it is a stem
- A small botanical illustration (a crystalline-veined leaf in SVG) floats at the rule midpoint, growing or shrinking based on scroll progress
- No text overlays on the photograph. The image speaks alone.
**Right Panel — the Annotation Column:**
- Scrollable. Divided into distinct "entries" — each entry is one transaction concept, one case study, one specimen description
- Each entry begins with a **large drop capital** in terracotta (#C4562A), 7rem, Playfair Display italic, with a crystalline-vein SVG ornament beside it
- Below the drop cap: a specimen header in retro-display type (Alfa Slab One), then body text in a humanist serif (Lora), then a narrow annotation strip
- **Marginal annotations:** a thin column (80px) on the far right of the right panel holds handwritten-style asides in a smaller size — botanical field notes about the transaction concept
- Between entries: a horizontal rule rendered as a pressed botanical stem (SVG, 1px stroke, terracotta)
**Grid logic:**
- Base grid: 12 columns, but only used in the right panel — the left panel is a full-bleed image, not on the grid
- Right panel body: columns 2–10 (center 8 of 12)
- Annotation strip: column 11–12
- All vertical rhythm based on 1.5rem baseline grid
**Navigation:**
- No persistent navbar. A single monogram mark (minimal crystalline crystal SVG) sits at the top-left corner of the left panel, fixed
- Navigation appears as a **botanical index tab** — a thin vertical strip on the far right edge of the right panel, visible on hover, containing section names typeset rotated 90°
- Progress is indicated by the growing/shrinking botanical stem SVG at the split, not a progress bar
## Typography and Palette
**Type System:**
1. **Display — [Alfa Slab One](https://fonts.google.com/specimen/Alfa+Slab+One)** — weight 400 (the only weight). Used for specimen headers, primary section names, and the site title treatment. A slab serif with strong bracketed serifs and chunky warmth — designed in the tradition of 19th-century wood type jobbing serifs used in botanical print catalogues. Set at 4–8vw for headers. Letter-spacing: -0.02em. Never italic.
2. **Drop Capitals — [Playfair Display](https://fonts.google.com/specimen/Playfair+Display)** — italic 700. Used exclusively for drop capitals (7rem) and pull quotes. The italic lends the necessary tenderness to the pastoral-romantic tone. High-contrast stroke, classical elegance.
3. **Body Text — [Lora](https://fonts.google.com/specimen/Lora)** — regular 400 and italic 400. The primary reading voice. A contemporary serif with roots in calligraphy — designed for body text in academic and editorial contexts. Set at 1.0625rem / 1.75 line-height, measure 60–65 characters.
4. **Annotation / Marginal Notes — [Kalam](https://fonts.google.com/specimen/Kalam)** — regular 400. A handwriting-style font (Google Fonts verified) used for marginal annotations in the 80px right strip. Set at 0.8125rem. Used sparingly: 2–4 annotations per scroll section. Color: #8A6040.
5. **UI / Navigation — [Work Sans](https://fonts.google.com/specimen/Work+Sans)** — light 300 and regular 400. Used for navigation labels, index tabs, metadata. Clean without being cold. Letter-spacing +0.1em at small sizes.
**Palette — Terracotta Warm:**
- `--terracotta-deep`: #C4562A — the primary accent, used for drop capitals, rules, SVG ornaments, and active states. A fired-clay orange-red.
- `--terracotta-mid`: #D97E52 — secondary accent, hover states, secondary headings
- `--parchment-warm`: #F2E8D5 — the right panel background. Warm cream, not white. The vellum ground.
- `--parchment-dark`: #E8D9BC — secondary background for annotation strip, inset sections
- `--ink-deep`: #2A1F12 — primary text color. A very dark brown-black, not pure black.
- `--ink-mid`: #5C4033 — secondary text, body text after the first paragraph
- `--annotation-brown`: #8A6040 — for Kalam marginal notes
- `--stem-terracotta`: #C4562A at 40% opacity — for botanical SVG stems and rules
- `--photo-overlay`: rgba(194, 120, 70, 0.08) — a barely-visible warm tint over the left panel photographs
**Full palette hex values:** #C4562A, #D97E52, #F2E8D5, #E8D9BC, #2A1F12, #5C4033, #8A6040
## Imagery and Motifs
**Photography — the Specimen Column:**
All photography in the left panel follows a strict visual grammar:
- **Subject matter**: physical objects of exchange — coins, hands exchanging paper, market stalls at dusk, wax seals, ink bottles, folded receipts, pressed flowers alongside coins, terracotta pottery — photographed in raking side-light (45° angle, warm 2700K–3200K color temperature)
- **Color grading**: warm-shifted, desaturated -15%, clarity +10%. The photographs should feel like they've been sitting in a conservatory for a decade — not faded, but absorbed into the amber light. They are NOT filtered to look vintage; they look like quality analog photography that has aged well.
- **Aspect ratio**: always 3:4 portrait or 1:1 square. Never wide. The tall portrait crop emphasizes the specimen-on-drawer quality.
- **Composition**: centered subject with significant negative space. The object is studied, not styled. No lifestyle photography, no people except hands.
**Crystalline Motifs — the Distinctive Visual System:**
The crystalline element distinguishes transactology.com from every botanical design in the corpus. Instead of using soft, organic botanical illustration (the cliché), the site's botanical illustrations are rendered in a **crystalline-vein style**: leaves, stems, and seedheads drawn as if they are mineral structures — angular, geometric, faceted — as though a botanist looked at a fern frond and saw a quartz crystal. This creates the central visual tension: the warmth of terracotta and pastoral photography against the precision of crystalline geometry.
**Six recurring crystalline-botanical SVG motifs (all inline SVG, no image files for motifs):**
1. **The Crystalline Leaf** — a stylized leaf where veins are rendered as geometric facets, like a cut gemstone. Used at the panel split midpoint, scales 40px–120px based on scroll. Stroke: `--terracotta-deep`.
2. **The Faceted Seedhead** — a circular seed dispersal pattern built from triangular facets, like a dandelion clock but geometric. Used as section dividers in the right panel.
3. **The Angular Stem** — the botanical stem SVG used as horizontal rules between entries. A zigzag stem with crystalline node points, not a curved organic line.
4. **The Pressed Specimen Frame** — a rectangular frame built from crystalline-botanical corner ornaments (faceted leaves at each corner, angular stems as frame sides). Used to frame pull quotes.
5. **The Crystal Monogram** — the site mark. A single crystalline structure (octahedron-like) in `--terracotta-deep` line art. The "T" of transactology is suggested but not spelled — it emerges from the crystal geometry.
6. **The Field Number Badge** — each section/entry has a specimen number (01, 02, 03...) inside a small hexagonal crystalline badge. Terracotta fill, parchment numeral.
**Background Textures:**
- Right panel: a subtle `noise-texture` overlay (SVG feTurbulence filter, opacity 3%) gives the parchment warmth a slight paper grain. Not visible at a glance, felt as a material quality.
- The 2px terracotta stem-rule between panels: not a CSS border, but a live SVG that responds to scroll — the crystalline leaf motif traveling along it as a moving marker.
## Prompts for Implementation
Treat transactology.com as a **single continuous scholarly field journal**, scrolled right-panel-only (left panel is `position: sticky`), that documents the natural history of transactions as if they were botanical specimens. There are no pages, no navigation in the traditional sense — only entries. The experience begins at the cover entry and descends through six to eight specimen entries, each revealing one deeper concept.
**HTML/CSS Architecture:**
```
.site-container
.panel-specimen (left, position: sticky, top: 0, height: 100vh, width: 50vw)
img.specimen-photo (object-fit: cover, width: 100%, height: 100vh)
.panel-rule (position: absolute, right: 0, height: 100%, 2px wide, SVG stem line)
.rule-leaf (position: absolute, top: var(--scroll-progress), SVG crystalline leaf)
.panel-annotations (right, overflow-y: scroll equivalent via parent scroll, width: 50vw)
.annotation-entry × 7
.drop-cap-letter (Playfair Display italic, 7rem, --terracotta-deep)
.entry-ornament (crystalline SVG, inline, beside drop cap)
h2.specimen-title (Alfa Slab One, 3.5rem)
.specimen-number-badge (crystalline hexagon SVG, absolute, upper right)
p × 3–5 (Lora, body)
.pull-quote (Playfair Display italic, crystalline frame border)
.annotation-strip (Kalam, 80px column, marginal note)
.entry-rule (angular stem SVG, full-width of body column)
```
**JavaScript — Spring Pattern (the primary animation system):**
The `spring` pattern governs ALL motion on this site:
1. **Panel differential scroll**: The left specimen photo translates at 0.6× the scroll velocity of the right panel. Implement with `requestAnimationFrame` and a spring physics solver (stiffness: 60, damping: 12). The photo "lags behind" the text with soft spring resistance — not a CSS parallax percentage but a genuine spring system.
2. **Crystalline leaf traveler**: The leaf SVG on the split rule travels vertically as the user scrolls. Its position uses the same spring solver with different parameters (stiffness: 80, damping: 18) — snappier than the photo but still organic.
3. **Entry reveal on scroll-intersect**: Each `.annotation-entry` has an `IntersectionObserver`. When it enters viewport: the drop cap springs in from left (translateX: -2rem → 0, with spring), the specimen title fades up with a stagger delay (each word a separate span), and the entry rule draws from left to right (SVG stroke-dashoffset animation, spring-timed).
4. **Photograph cross-fade**: When the user reaches the midpoint of each entry, the left panel photo cross-fades to the next specimen photo. The cross-fade uses opacity springs (two `![]()
` elements, outgoing springs to opacity 0, incoming springs to opacity 1). Never a hard cut. Never a slide.
5. **Hover on specimen number badge**: The crystalline hexagon badge on each entry hovers with a micro-scale-spring (scale 1.0 → 1.08, spring stiffness: 200, damping: 20). The badge fill color springs from terracotta-deep to terracotta-mid on hover.
**Narrative Structure (seven entries):**
1. **Entry I — The First Exchange** (intro/cover): A close photograph of two hands almost touching over a folded document. Drop cap "E". The specimen title: *Exchangium primordiale* (in Alfa Slab One). Body: the origin theory of transaction. Crystalline leaf large, animating on load.
2. **Entry II — The Value Carrier**: A macro shot of a wax seal on parchment, terracotta-colored wax. Specimen title: *Sigillum valoris*. Body: how value is encoded in objects of exchange.
3. **Entry III — The Ledger Form**: An old ledger page, columns of handwritten figures, warm amber light. Specimen title: *Forma registri*. Body: the role of record-keeping in legitimizing transaction.
4. **Entry IV — The Moment of Transfer**: A hand releasing a coin over a bowl of clay vessels. Specimen title: *Momentum translationis*. Body: the phenomenology of the exchange moment.
5. **Entry V — The Crystalline Structure of Price**: A macro photograph of rock salt or quartz crystals alongside small coins. This entry connects the crystalline motif to the concept explicitly. Specimen title: *Structura pretii*. Body: how price emerges from the geometry of supply and demand.
6. **Entry VI — The Botanical Record**: Pressed flowers alongside a handwritten receipt. The most explicitly pastoral entry. Specimen title: *Registrum naturale*. Body: the transaction as a living record.
7. **Entry VII — The Open Field** (outro): A wide terracotta-toned field at dusk, empty. The annotation strip on this entry is blank. The drop cap is "∞". Body: transactology as an unfinished taxonomy.
**Implementation Directives:**
- AVOID any call-to-action buttons, pricing tables, feature grids, or testimonial blocks. This is a journal, not a product page.
- AVOID flexbox centering of hero elements — everything is typeset on a measure, not centered.
- The crystalline SVGs must be inline (not `![]()
`), so they can respond to CSS custom properties for color theming.
- The right panel should use `scroll-snap-type: y proximity` with `scroll-snap-align: start` on each entry — but with a gentle spring override in JS so the snapping feels botanical, not mechanical.
- Font loading: preload Alfa Slab One (400) and Lora (400, 400i) as they are above-the-fold critical. Work Sans and Kalam can load deferred.
- The `--scroll-progress` custom property (updated by rAF loop, 0–1) should be set on `:root` so all spring animations can reference it without separate observers.
- NEVER use a hamburger menu. Navigation tabs are rotated text on the right edge only.
- Color scheme: no dark mode. The site is always warm parchment. `prefers-color-scheme: dark` is honored by making the parchment slightly more amber (#E8D5B8), not by switching to a dark palette.
## Uniqueness Notes
1. **Split-screen with differential spring physics as the primary layout.** Split-screen appears in only 2% of the corpus — one of the rarest layout patterns. But more critically: no other design in the corpus uses a genuine spring physics solver (not CSS transitions) as the *structural* animation for the layout itself. The left panel's spring-lag is not a decorative effect — it IS the layout experience. This is not parallax (74% of corpus); it is differential spring scroll.
2. **Crystalline motifs fused with botanical illustration.** The corpus shows `crystalline` motifs at 6% and `floral-botanical` motifs at 4%, but every instance treats these as separate visual vocabularies. transactology.com fuses them deliberately: the botanical forms are drawn as mineral structures. This is neither "nature" nor "tech" — it is a completely new hybrid that mirrors the domain name's hybrid concept (transaction + taxonomy).
3. **Retro-display typography (Alfa Slab One) in a botanical/pastoral context.** Retro-display typography appears at 3% of the corpus, and every existing instance uses it in urban, graffiti, or vintage-advertising contexts. Placing a chunky 19th-century wood-type slab serif in a pastoral, scholarly, botanical journal is a deliberate inversion — the slab serif's historical origin in 19th-century job printing connects it to the same century as Victorian botanical illustration, so the combination is historically coherent but visually unexpected.
4. **Pastoral-romantic tone in a domain about transactions/commerce.** The tone vocabulary shows `pastoral-romantic` at 5% of the corpus, and every existing instance pairs it with obvious pastoral subjects (cafes, gardens, lifestyle). transactology.com applies the pastoral-romantic tone to *the science of commerce* — treating transactions with the same tender, patient attention that a botanist gives to plant specimens. The domain's inherent tension (commerce vs. nature, transaction vs. tenderness) is the site's primary content.
5. **Seed:** aesthetic: botanical, layout: split-screen, typography: retro-display, palette: terracotta-warm, patterns: spring, imagery: photography, motifs: crystalline, tone: pastoral-romantic
**Reference avoided patterns from frequency analysis:**
- AVOIDED: centered (83%), full-bleed (63%), asymmetric (43%) as primary layouts — using split-screen (2%) instead
- AVOIDED: mono (74%), humanist (32%) as primary typography — using retro-display (3%) as display voice
- AVOIDED: parallax (74%), stagger (49%) as primary animation — using spring (33%) but with a physics-first implementation, not the CSS-easing version most designs use
- AVOIDED: photography-as-background (the 87% use it as full-bleed backgrounds) — using photography as a sticky specimen panel in dialogue with text, not as backdrop