# Design Language for causality.club ## Aesthetics and Tone causality.club is a private debate society reconceived as a cathedral of cause-and-effect. Every argument is a chain; every counter-argument is a severed link; every rebuttal is a new causal graph grafted onto the old. The site presents itself as the members' archive of an ongoing, centuries-long dispute about **why things happen** -- an institution where rhetoricians, epidemiologists, historians, economists, and physicists sit on opposite sides of long walnut tables and attempt to refute one another's chains of inference. The aesthetic is **avant-garde editorial meets parliamentary chamber**: oversized display typography that collides with clinical forensic diagrams, rough letterpress textures layered over hairline vector proofs, and a composition logic that treats the page as a **debate transcript with marginalia** rather than a marketing brochure. The mood is **disputatious, ceremonial, forensic** -- a little theatrical, a little obsessive, always argumentative. Think of a reading room at the Royal Society crossed with a Dazed magazine fashion spread, lit by a single green bankers' lamp. The tone oscillates deliberately between two voices: **PROSECUTION** (the voice that establishes causal claims, set in sharp display type, spoken with confidence) and **DEFENSE** (the voice that undermines those claims, set in narrow italic serif, spoken with suspicion). These voices appear side by side on every screen, in direct tension. The visitor is never addressed; they are always **overhearing**. No CTAs, no sign-ups, no pricing -- just the transcript of an argument that began before they arrived and will continue after they leave. ## Layout Motifs and Structure The primary layout is a **broken-grid split-screen** structure built on a **12-column columnar disputation grid** where columns 1-5 belong to the **Prosecution** (left), columns 8-12 belong to the **Defense** (right), and columns 6-7 are a narrow **Register** -- a vertical strip carrying the timestamp, the causal operator symbols (→, ↛, ⇒, ⊬, ⊭), and the moderator's line numbers (like a verse-numbered Bible or a legal deposition). **Structural sections, in scroll order:** 1. **The Docket** (opening viewport): A full-bleed landing where a single enormous serif word -- **BECAUSE** -- fills 80% of the viewport height, set in a condensed display serif. Below it, in tight mono, the line: `MOTION #1174 / ENTERED INTO RECORD / 24 APRIL 2026`. No navigation. No hero image. Just the premise being placed on the table. A slow-pulsing green dot in the top-right corner indicates the chamber is **IN SESSION**. 2. **The Splitting** (scroll 100vh): The word BECAUSE bisects vertically along a faint hairline and the two halves drift apart, revealing a split-screen where the Prosecution's opening argument types itself onto the left half and the Defense's opening objection types itself onto the right half -- staggered, so the objection never lands on the same line as the claim it objects to. The visual effect is of a transcript being written in real time by two scribes sitting at opposite desks. 3. **The Chain** (horizontal scroll module): A single extremely wide section where a **causal chain** stretches across a viewport three times wider than the window. Nodes are labeled events (e.g., "wheat surplus 1846", "Corn Law repeal", "Irish emigration spike") connected by arrows. The user scrolls horizontally through the chain. At each arrow, a small red diagonal cut appears: a Defense objection, which can be hovered to reveal an italic rebuttal footnote that claims the causal link is spurious. 4. **The Exhibits** (stacked-sections with diagonal cuts): Three to five evidentiary exhibits, each occupying a full viewport, each containing a single large artifact -- a scanned news clipping, a handwritten margin note, a regression plot, a portrait in fine engraving -- paired with the Prosecution's framing beneath it and the Defense's annotation in the far right margin, set rotated 90 degrees so the visitor must tilt their head to read it. This is intentional: counter-arguments demand effort. 5. **The Rebuttal Spread** (magazine-spread layout): A two-page editorial spread where the Defense gets uninterrupted floor time. Large italic pull-quotes, drop caps, and a single photographic plate of an empty chair. The Prosecution's presence is reduced to marginal red strikethroughs in the left gutter. 6. **The Ledger** (final section): A ruled ledger of past motions debated at the club -- purely typographic, set in small mono, three columns: MOTION NUMBER / CLAIM / VERDICT (RESOLVED / UNRESOLVED / ADJOURNED SINE DIE). No links. The motions are simply there, dated, like gravestones in a chapel. **Grid disobedience:** Content regularly breaks the columnar grid. Long Defense footnotes spill into Prosecution territory and get struck through with a red horizontal rule. The Register strip occasionally widens to interrupt both sides with a MODERATOR'S NOTE set in a different font entirely. The grid is a courtroom, and the grid is violated when the chamber loses decorum. ## Typography and Palette **Typography** (Google Fonts only): - **Prosecution Display**: **Playfair Display** -- weight 900, condensed via `font-stretch: 75%` where supported and `transform: scaleX(0.85)` as fallback. Used for the opening BECAUSE, for motion headlines, for declarative claims. Set in uppercase with letter-spacing -0.02em. This is the voice of certainty. - **Defense Italic**: **EB Garamond** -- italic, weight 400 and 500. Used for objections, footnotes, rebuttals, and marginalia. Set at 0.92 line-height to feel tight and whispered. This is the voice of doubt. - **Register / Moderator**: **IBM Plex Mono** -- weight 400. Used for timestamps, line numbers, causal operator symbols, and the moderator's interjections. Set at 12px fixed size, never fluid, because the court record is not decorative. - **Evidentiary Body**: **Fraunces** -- weight 450, optical size set to `opsz=14` via variable-font axis. Used for exhibit captions and the longer expository passages that sit between claims. - **Display accent**: **Abril Fatface** -- used sparingly, once per section, for the single word that carries the emotional weight of the passage ("PERHAPS", "NEVER", "HENCE"). **Palette** (duotone with forensic accents, high-contrast): - **#0F0E0C** -- *Court Black*. The primary background. Not pure black -- a warm near-black with a brown undertone, like a walnut bench stained by decades of ink. - **#F3EBDA** -- *Parchment*. The primary text surface and the color of the Prosecution's columns. Cream with a faint yellow cast. - **#B71C1C** -- *Objection Red*. The Defense's signature color, used only for strikethroughs, objection markers, the diagonal cut in causal chains, and the pulsing session indicator. Never for body text. Deployed like blood on a linen napkin -- rarely, shockingly. - **#1F3A2E** -- *Chamber Green*. A deep, ecclesiastical bottle-green. Used for the bankers' lamp glow in the opening viewport, for the "IN SESSION" dot, and as the background of the Rebuttal Spread to signal a tonal shift. - **#C9A77C** -- *Brass Rule*. A muted antique brass used for hairline dividers, the Register strip borders, and the ornamental flourishes at section starts. Evokes the gilt edges of a bound volume of proceedings. - **#6B6258** -- *Ash Grey*. A mid-tone used for tertiary text, archived motion numbers in the Ledger, and dimmed marginalia. The palette operates as a **forensic duotone** (Court Black + Parchment) interrupted at rhetorically critical moments by Objection Red and Chamber Green, with Brass Rule carrying the architectural ornament. Gradients are forbidden -- every color is flat, because gradients feel like persuasion, and this site distrusts persuasion. ## Imagery and Motifs **The Causal Graph**: The core recurring motif. A directed graph where nodes are events and arrows are claims of causation. These graphs appear both as clean SVG line art (precise, rendered live) and as **hand-drawn overlays** on top of photographs, as if a debater has annotated a news photo with arrows and question marks. The graphs are never decorative -- each one encodes an actual argumentative structure from the site's content. **The Severed Arrow**: When a causal claim is refuted, the arrow between two nodes gains a single diagonal slash through it in Objection Red. This motif also appears at the page level: horizontal red slashes appear across claim sections when the Defense scores a hit. The slash animates in with a quick `stroke-dashoffset` draw, like a fencer's riposte. **The Marginalium**: Every long-form passage is accompanied by hand-written marginalia in the far-right gutter, set in a rough script (EB Garamond italic, slightly rotated, pale Brass Rule color). These marginalia are contradictions, questions, pointed jabs. They appear written in a different voice from the main text -- as if a reader has scribbled back at the author. **The Bankers' Lamp Vignette**: A subtle radial vignette (Chamber Green at the center, bleeding to near-transparent) sits in the top-right of the opening viewport, suggesting a single green-shaded brass lamp illuminating the chamber. It does not move. It flickers once, barely perceptibly, every 40 seconds. **The Stamped Record**: Section endings carry a **stamp motif** -- a circular rubber-stamp graphic in Objection Red or Chamber Green reading "ENTERED INTO RECORD", "OBJECTION SUSTAINED", "OBJECTION OVERRULED", or "MOTION TABLED", rendered with a slightly irregular edge as if pressed unevenly by hand. Set rotated 4-7 degrees off-axis. **The Ledger Rule**: Thin horizontal rules in Brass Rule color, spaced at exactly 32px, appear behind the Ledger section to evoke the lined pages of a 19th-century register book. The lines are only faintly visible. **The Footnote Swarm**: At the bottom of scroll-heavy sections, footnote numbers cluster -- not in a tidy list but as a scattered swarm of superscript numerals, each one expandable on hover. The swarm suggests contested ground, overlapping claims, an argument that has spawned many sub-arguments. **Photographic elements** are strictly limited to: scanned newspaper clippings (treated with a noise-texture and slight sepia cast), single-subject engravings (portraits of 19th-century figures or empty rooms), and one full-bleed plate of an empty debate chamber used as the visual anchor for the Rebuttal Spread. No stock photography. No smiling faces. The chamber itself is the protagonist. ## Prompts for Implementation **Opening sequence (first 4 seconds):** Page loads to pure Court Black (#0F0E0C). A single green pixel appears in the top-right corner. After 400ms it expands into the slow-pulsing "IN SESSION" indicator (scale breathes between 1.0 and 1.15 over a 2.4s ease-in-out cycle). Simultaneously, the Parchment-colored word **BECAUSE** draws itself on from left to right using a CSS `clip-path: inset()` animation over 1400ms with `cubic-bezier(0.85, 0, 0.15, 1)`. Underneath, in IBM Plex Mono, the motion number and timestamp fade in one character at a time over 800ms (CSS `steps()` typewriter on width). No audio. No video. No hero image. Only the word, the time, and the pulse. **The Splitting transition:** As the visitor scrolls past the first viewport, the BECAUSE word splits exactly down its center. A JS scroll-progress value drives `transform: translateX(-scrollProgress * 40vw)` on the left half and `+scrollProgress * 40vw` on the right half. Between them, as the gap widens, the Register strip (Brass Rule borders, mono timestamps) draws itself in from top to bottom with `path-draw-svg`. When the gap is fully open, the two halves of the argument begin typing themselves out in their respective columns -- staggered by exactly 600ms so the Prosecution always speaks first and the Defense answers second. **The Chain module (horizontal scroll):** Implement as a `position: sticky` container that holds while the user scrolls vertically, translating an inner wide canvas horizontally via `transform: translateX(-scrollProgress * (canvasWidth - viewportWidth))`. Each node on the chain is a small circle (12px, Parchment-filled, Court Black border) with a label in Fraunces. Arrows are SVG paths stroked in Brass Rule, 1.5px weight, with arrowheads. When a node enters the central 40% of the viewport, its label fades to full opacity and the arrow *leaving* it begins drawing via `stroke-dashoffset`. If a Defense objection applies to that arrow, the red diagonal slash draws itself *after* the arrow completes, with a 300ms delay -- so the argument is allowed to make its claim before the rebuttal lands. **Marginalia rendering:** Use CSS Grid with a 12-column layout where columns 11-12 are reserved for marginalia. Each marginal note is absolutely positioned against the paragraph it objects to, pulled slightly into the paragraph's vertical space. Rotation is applied via `transform: rotate(-1.5deg)` with a random variance of +/- 1deg per note. On hover, the marginal note brightens from Ash Grey to Parchment and the paragraph it objects to gains a faint Objection Red underline via `text-decoration: underline wavy #B71C1C`. **The Rebuttal Spread:** When the user enters this section, the entire viewport background transitions over 800ms from Court Black to Chamber Green (#1F3A2E). This is the only time the site changes its base color. Text reflows to a single narrow column (max-width 52ch), centered, set in EB Garamond italic at 1.35rem. A single drop cap (first letter, 5 lines deep, set in Playfair Display) opens the passage. The spread concludes with the empty-chair photographic plate filling the next viewport, then the background transitions back to Court Black as the Ledger section begins. **The Ledger section:** Pure typography. A three-column monospaced table. Each row animates in via `fade-reveal` with a 40ms stagger per row. The rows are real-looking historical motions (fictional but plausible): "MOTION 0001 / That the American Civil War was caused by tariff disputes / RESOLVED -- OVERRULED". "MOTION 0847 / That language shapes thought / ADJOURNED SINE DIE". The ledger should feel like the archive of a real institution. **Cursor behavior:** Default cursor remains the system cursor -- this is not a webGL playground. However, when hovering marginalia or footnote superscripts, the cursor becomes a small Objection Red question mark (custom SVG cursor). When hovering a Prosecution claim, nothing changes. The Defense announces itself; the Prosecution does not. **Scroll-triggered section transitions:** Each major section (Docket, Splitting, Chain, Exhibits, Rebuttal Spread, Ledger) separates with a full-width **stamp motif** -- the rubber-stamp graphic described in the motifs section. The stamp animates in via a quick `scale(0.8) rotate(-8deg)` → `scale(1) rotate(-6deg)` with opacity 0→1 over 300ms, with an `ease-out` curve, giving the impression that it has been pressed firmly onto the paper. **Typographic animation:** Headlines that contain the word BECAUSE, THEREFORE, HENCE, or any causal connective animate on entry via a gentle `letter-spacing` breathe -- starting at `letter-spacing: 0.1em` and easing to the resting `-0.02em` over 600ms. This gives causal language a subtle weight, like words settling into their argumentative place. **No forms. No sign-ups. No CTAs. No pricing blocks. No stat grids. No social proof.** This site is not trying to sell anyone anything. It is a transcript. A visitor either overhears the debate or leaves. The only "navigation" is scroll, and perhaps a permanent top-left sigil (a small Brass Rule logograph: an arrow with a slash through it, the club's emblem) that returns to the Docket on click. **Mobile adaptation:** On viewports below 768px, the split-screen collapses into a single column where Prosecution and Defense alternate paragraph by paragraph, with each Prosecution paragraph bordered left in Parchment and each Defense paragraph bordered right in Objection Red. The Register strip becomes a horizontal band between them, carrying the line numbers. The horizontal scroll Chain module becomes a vertical scroll, with nodes stacked and arrows running top-to-bottom. The experience must remain argumentative even on a phone. ## Uniqueness Notes **Differentiators from other designs in this collection:** 1. **Dual-voice structural opposition as the primary information architecture.** No other design in this collection uses a literal **Prosecution vs. Defense** columnar split as the load-bearing structural metaphor. Sites like LegalDebug.com and SocialDebug.com use the debugger-as-reader metaphor, but their voice is singular and forensic. causality.club is *bivocal by construction*: every scroll position shows two voices in direct tension, with the Register strip mediating. This is not a decorative split-screen; it is an argumentative one. 2. **Avant-garde editorial layered over 19th-century parliamentary ornament.** The frequency analysis shows `corporate` (90%) and `gradient` (98%) as massively overused, and `editorial` (16%) and `avant-garde` (8%) as underused. This design commits fully to the editorial-avant-garde axis -- Playfair Display + Abril Fatface display, asymmetric magazine-spread layouts, oversized single-word headlines, rotated marginalia -- combined with specifically parliamentary ornament (brass rules, rubber stamps, bound-ledger typography) that does not appear in any other site in the collection. Zero gradients. Zero cards in a grid. 3. **Horizontal causal-chain scroll as the central interactive module.** While horizontal scroll appears in 24% of designs, none use it specifically as a **causal argumentation device**, where each horizontal node is a claimed cause, each arrow is a contested link, and Defense rebuttals interrupt the chain mid-arrow. The horizontal scroll here encodes the argument's logical structure, not a gallery or timeline. 4. **Rubber-stamp section markers rather than decorative dividers.** Instead of the common section separators (diagonal lines, gradient fades, animated borders), causality.club uses rotated rubber-stamp graphics that read institutional verdicts ("OBJECTION SUSTAINED", "MOTION TABLED"). This motif appears nowhere else in the collection. 5. **Chamber Green as a section-wide background shift.** The Rebuttal Spread's full-viewport color inversion from Court Black to Chamber Green (#1F3A2E) is a structural color event, not a micro-interaction. The site commits its entire background to the Defense's voice for one full section, then reclaims it. No other design uses palette at this structural level. 6. **Explicitly anti-CTA, anti-conversion tone.** The site has no sign-up, no pricing, no contact form, no "Learn More" buttons. The only navigation is scrolling and the club sigil. This is deliberate: causality.club is framed as a private institution whose archive the visitor is merely permitted to read. Frequency analysis implicitly rewards this by treating CTA-heavy layouts as a failure mode. **Chosen seed / style:** `avant-garde fashion lookbook` (from `seeds.json`) -- specifically the "lookbook" spatial logic of oversized typographic plates and editorial white space, retargeted from fashion to rhetoric. The parliamentary chamber is the runway; the debate is the collection; each motion is a look. **Avoided patterns from frequency analysis:** - Avoided `corporate` (90%) -- no trust-building gradients, no smiling professionals, no "solutions" language. - Avoided `gradient` (98%) -- flat colors exclusively, because gradients feel like persuasion and this site distrusts persuasion. - Avoided `card-grid` (94%) -- content flows as a transcript and a ledger, never as equally weighted cards. - Avoided `centered` (88%) -- the site is structurally asymmetric; the split-screen Prosecution/Defense grid has no center of gravity. - Avoided `scroll-triggered` over-reliance (94%) -- while the site uses scroll, the key animations are triggered by content position in a sticky horizontal-scroll frame, not by generic scroll reveals of cards coming into view. - Avoided `photography` (94%) -- limited strictly to scanned artifacts, engravings, and a single empty-chamber plate. No faces, no stock, no lifestyle. - Avoided overused `mysterious-moody` (42%) and `scholarly-intellectual` (18%) -- the tone here is *disputatious-forensic*, an underused combination. **Preferred underused patterns:** - Embraced `editorial` aesthetic (16% → core axis) - Embraced `avant-garde` aesthetic (8% → core axis) - Embraced `magazine-spread` layout (8% → Rebuttal Spread section) - Embraced `broken-grid` layout (14% → grid disobedience rule) - Embraced `serif-classic` + `elegant-serif` + `display-bold` typography - Embraced `deep-burgundy`-adjacent palette via the Chamber Green + Court Black + Objection Red triad - Embraced the `book-scholarly` motif through Ledger section and rubber stamps