# Design Language for causality.club ## Aesthetics and Tone **causality.club** is imagined as a private members' library tucked into the cloister of a half-ruined Italian *villa rustica* — somewhere between Tivoli and the Palatine slope — where a long oak refectory table is set with a single beeswax candle and a thread of olive leaves laid across the open page of a commonplace-book. The "club" is not a chatroom; it is the kind of club you join by *consequence* — by the cause-and-effect chain that brought you to the URL. The aesthetic is **ethereal**, but ethereal here does not mean pastel cloud-render fluff. It means the late-afternoon dust that hangs in the slanted column of light coming through a marble loggia at five o'clock in September, and the way that dust visibly *carries* the geometry of the columns even after the columns end. The tone is **pastoral-romantic** in the Virgil-Eclogues sense, not the Disney-cottage sense — shepherds, marble, weather, omens, the literal practice of reading entrails to forecast the next hour. Every block of copy is written as a small Latin tag (one to three words) followed by a single English sentence that completes it, the way a Roman epitaph greets a passing reader: *Causa fuit. — There was a cause.* The voice is unhurried, fond, slightly melancholic, and wholly unimpressed with novelty. It treats the visitor as someone who has already walked a long way to get here. The mood the site rehearses, again and again, is the *moment just before something becomes inevitable* — the breath the wind takes before it picks the leaf off the branch, the half-second pause in a billiard cue before the white ball is struck. Every animation, every reveal, every type-set choice is built to lengthen that pause. The site is, in its bones, an argument for slowness, for **causality as the only honest form of romance** — the long causal chain that links a single olive press in 30 BCE to the visitor's index finger now resting on the trackpad. Nothing is pitched, nothing is sold, nothing is gamified. It is a slow vertical walk, downhill, through a ruined garden, with a friend who has been dead for two thousand years. The aesthetic frequency report shows **ethereal** at 2 % — claimed by exactly one other design in the corpus. causality.club takes the rarest aesthetic in the vocabulary and refuses to render it as *cloud-pastel-spa*. Instead, ethereality is built out of **warm marble dust, beeswax light, and the kerned breathing of a single condensed display face** — the ether of an actual Mediterranean afternoon, not of a stock-photo sky. ## Layout Motifs and Structure The structural metaphor is the **votive pilgrimage path** — the long descending stone staircase at Praeneste that drops you, terrace by terrace, from the temple summit to the forum below. The page is built as a strict **timeline-vertical** spine, scrolled top-to-bottom on one continuous column, broken into **nine descending terraces**. Each terrace is the height of one viewport (`100 svh`) and contains exactly one *causal moment* — one Latin tag, one English sentence, one piece of imagery, and one date. The visitor descends the timeline; they never branch, click sideways, or open modals. The layout frequency report shows **timeline-vertical** at exactly 2 % — used by one other design across the entire 49-design corpus. causality.club commits to it as the load-bearing geometry, not as a decorative section. **The vertical axis is causation itself.** A single 1 px hairline of `#7B5E3F` (warm umber) is drawn down the dead-center of the page, from the first terrace to the last, like a plumb-line dropped from the cella ceiling. Every terrace's content is anchored to this hairline by a small marble *medallion* — a circular leaf or letter-form, 64 px diameter, that interrupts the line. The line is not navigation. It is the **cause-and-effect axis** the visitor is walking down. As the visitor scrolls, an **SVG circle marker** the same size as the medallions slides down the hairline and "snaps" to each terrace medallion in turn, with a 600 ms `cubic-bezier(0.16, 1, 0.3, 1)` ease — like a stylus tracking down the gnomon of a sundial. **Terrace composition** alternates between three orientations, in strict rotation, never randomised: 1. **Left-anchored terraces (1, 4, 7)** — the Latin tag sits on the left, set in `clamp(72px, 14vw, 220px)` Bebas Neue, color `--travertine`; the English sentence sits to the right of the medallion in 18 px Cormorant Garamond italic; the imagery occupies the lower-right quadrant as a 480 px duotone plate. 2. **Right-anchored terraces (2, 5, 8)** — mirrored. The Latin tag sits on the right, the imagery on the lower-left. 3. **Centered terraces (3, 6, 9)** — the Latin tag is centered above the medallion at 22 vw, the English sentence is centered below it at 60 ch, and the imagery is removed entirely. These three terraces are deliberate *empty rooms* in the descent — places to catch breath. They are the architectural equivalent of the landings on the Praeneste stair. **Horizontal measure.** The body column is fixed at 720 px (target 66 ch) and centered against the hairline. There are no sidebars, no margins of "related links," no footnotes-as-tooltips. A single right-margin of 240 px is reserved for **leaf-glyph annotations** — small SVG olive-leaf marks that float in the negative space and carry a single date in 11 px monospaced numerals (e.g. `IX • XV • MMXXIV` rendered as Roman). The leaves drift on a 22-second sine-wave loop, two degrees of rotation max, like leaves caught in a low wind. **Header and footer.** There is no sticky header. The wordmark **causality.club** is set once, at the top of terrace 1, in 8 vw Bebas Neue spaced at `0.18em`, and never re-appears. The footer is a single line of 11 px Cormorant italic — *Hic finis chorda. — Here the line ends.* — set 240 px below the bottom medallion, with no social icons, no newsletter form, no copyright notice. **Mobile.** Below 768 px, the hairline collapses to the **left edge** at 32 px from the viewport edge, the medallions shrink to 40 px, and the leaf-glyph margin is dropped. The three centered terraces remain centered. Latin tags reduce to `clamp(48px, 18vw, 120px)`. The vertical breath is preserved by holding `min-height: 100svh` per terrace even on small screens — the visitor still descends nine rooms, no matter the viewport. The layout deliberately avoids: dashboard grids (28 % of corpus), bento-box (8 %), card-grids (2 %), broken-grids (10 %), and parallax-sections (12 %). It uses the rarest layout in the vocabulary — *because the descent down a real stone staircase is itself a timeline*, and any other layout would betray the metaphor. ## Typography and Palette The typographic system is **bebas-bold** — claimed by zero other designs as a primary key (frequency 2 % including this one in planning). Bebas Neue is condensed, all-caps, geometric, and almost militantly utilitarian; the corpus pairs it with display contexts almost never. causality.club takes Bebas as the *Latin lapidary face* — the literal voice of carved travertine inscriptions on Roman temples, where condensed all-caps existed because chisels are expensive and stone is finite. Pairing Bebas's brutal economy with the romantic Cormorant body sets the entire site's tonal contradiction: **a marble inscription whispered in candlelight**. - **Display — Latin tags:** [Bebas Neue](https://fonts.google.com/specimen/Bebas+Neue), regular 400 (the only weight Bebas ships). Set at `clamp(72px, 14vw, 220px)`. Tracked at `0.04em` for inscription feel, never less. Color `--travertine` (#E9DEC7). Used **only** for the nine Latin tags, the wordmark, and the year-marker on each terrace medallion. Never used for body text. - **Body — narrative sentences:** [Cormorant Garamond](https://fonts.google.com/specimen/Cormorant+Garamond), italic 400 and roman 500. Italic is the default body voice — every English sentence is set italic to read as a translator's gloss under the Latin lapidary stone. Set at `clamp(17px, 1.4vw, 22px)`, `line-height: 1.55`, color `--ink-vellum` (#3A2E1E). Old-style figures via `font-variant-numeric: oldstyle-nums`. - **Marginalia — dates and leaf glyphs:** [JetBrains Mono](https://fonts.google.com/specimen/JetBrains+Mono), regular 400, set at 11 px, all-caps, Roman numerals only. Color `--umber-faded` (#7B5E3F). Letterspacing `0.12em`. The mono is the *single industrial gesture* on the page — the way an art historian's catalog plate carries a tiny modern accession number under a Renaissance fresco. - **Drop capital — terrace 1 only:** Cormorant Garamond, roman 600, set at 8.5 line-heights tall, color `--olive-deep` (#5B6A3C), used as a single illuminated capital on the first English sentence of the descent. **Palette — warm-earthy.** Six colors, all hand-picked from photographs of actual *Roman tufa, travertine, and weathered olive bark*, never from a generative palette tool. - `--travertine` **`#E9DEC7`** — the page ground. The color of late-afternoon limestone in the shadow of a Tivoli portico. Used at 100 % across the entire body of the site. - `--ink-vellum` **`#3A2E1E`** — the body text color. The color of oak gall ink on old vellum after 600 years of oxidation. Almost-black, but warm, never `#000`. - `--umber-faded` **`#7B5E3F`** — the hairline axis, marginalia, and medallion strokes. The color of a worn brown leather book-spine. - `--olive-deep` **`#5B6A3C`** — the leaf glyphs, drop capitals, and the second duotone plate channel. The color of a Mediterranean olive leaf seen *from below*, against bright sky. - `--rose-marbled` **`#C58B6F`** — used sparingly (less than 4 % of pixels) as the duotone *highlight* channel and for the occasional terrace medallion fill. The color of the pink veins in Italian Rosa Aurora marble. - `--candle-glow` **`#F4E4B8`** — used only inside the 80 px glow halos behind the nine medallions; one warm pulse, opacity 0.35. Beeswax candlelight on a stone wall. The palette key in the frequency report is **warm-earthy** at 0 % outside this design's planning — it is *not* among the keys recorded in any of the 49 existing designs. Combined with `warm` (97 %) being the corpus's dominant cue, the gesture is to take the *most-used family* and exhaust it down to a six-color sub-palette nobody else has named. ## Imagery and Motifs Imagery is built around two co-equal motifs at the rarest frequencies in the corpus: **marble-texture** (2 %) and **leaf-organic** (2 %). Both rank as one-design-each in the existing 49-design corpus, and causality.club is the first to *cross* them. **Marble plates.** Six plates total across the descent, one per imagery-bearing terrace (terraces 1, 2, 4, 5, 7, 8). Each plate is a square 480 × 480 px close-photograph of a different Italian marble surface, treated identically: 1. **Terrace 1 — Travertine, Tivoli.** A horizontal section of weathered travertine showing the characteristic banded vesicular pores. Duotoned `--travertine` to `--umber-faded`. 2. **Terrace 2 — Cipollino verde, Karystos.** The Greek Cipollino marble used in Hadrian's Pantheon columns, pale green wave-grain. Duotoned `--olive-deep` to `--travertine`. 3. **Terrace 4 — Rosa Aurora, Trentino.** Pink-veined marble. Duotoned `--rose-marbled` to `--ink-vellum`. 4. **Terrace 5 — Pavonazzetto, Phrygia.** White marble shot through with violet veins. Duotoned `--ink-vellum` to `--travertine` with a 4 % rose tint. 5. **Terrace 7 — Bardiglio, Carrara.** Dove-grey marble with chalky white inclusions. Duotoned monochrome `--ink-vellum` 60 %. 6. **Terrace 8 — Giallo antico, Numidia.** The honey-yellow marble that Romans imported from North Africa. Duotoned `--candle-glow` to `--umber-faded`. Each plate carries a single caption in 11 px JetBrains Mono, all-caps, set 24 px below the plate: a Latin marble name, a colon, and a Roman date *of the original quarry's first documented use* — e.g. `MARMOR LUNENSE : ANTE • CCC • A.U.C.` **Leaf glyphs.** Custom-drawn SVG olive-leaf paths, 32 × 96 px, each one a slight variant of the next so that across the page no two leaves are identical. Twenty-three leaves total, distributed in the 240 px right-margin column at irregular vertical intervals — not a grid, an *autumn fall*. Stroke `--olive-deep`, fill none, stroke-width 1.2 px, with a `path-draw-svg` reveal triggered on scroll-enter — each leaf draws itself in 1.4 s, then drifts on a 22-second sine-wave loop. The drawing order follows the descent — top leaves draw first, bottom leaves last. Each leaf is anchored to a Roman numeral date in JetBrains Mono. **The medallions.** Nine circular SVG marks, 64 px diameter, that interrupt the central hairline at each terrace. Three motif variants, rotated: - **Letter medallions (terraces 1, 4, 7)** — a single Latin majuscule (C, A, V respectively, for *Causa, Affectus, Veritas*) set in Cormorant Garamond bold at 32 px, centered, on a `--candle-glow` halo at 35 % opacity that diffuses to 0 over 80 px. - **Leaf medallions (terraces 2, 5, 8)** — a single olive leaf at 28 px, color `--olive-deep`, on the same candle-glow halo. - **Empty medallions (terraces 3, 6, 9)** — only the candle-glow halo, no glyph. The empty rooms are *unmarked* even at the medallion level. **Texture overlay.** The entire page carries a low-amplitude paper-grain noise overlay at 4 % opacity — a 512 × 512 looping tile generated from a photograph of *unburnished vellum*. The grain is warm (yellow-brown, never grey) and is set to `mix-blend-mode: multiply` so it deepens warmly into the travertine ground rather than washing it. **No photographs of people.** No team headshots, no founder portraits, no lifestyle imagery, no stock illustrations of "abstract concepts." Photography (the corpus runs 93 % photography-of-something) is rejected almost entirely; the only photographic surfaces permitted are the six marble macro-plates, and even those are duotoned beyond easy recognition as photography. ## Prompts for Implementation Treat causality.club as a **single nine-terrace descent** — a vertical Roman pilgrimage staircase rendered in HTML that the visitor walks by scrolling, top to bottom, once. Bias every implementation decision toward marble-stair geometry, votive offerings, and the slow turning of the year. Do not implement modals, tooltips, dropdowns, mega-menus, search bars, sticky headers, hero CTAs, pricing tables, stat grids, feature cards, social proof rails, testimonial sliders, newsletter modals, cookie banners (visually — handle compliance via a single 11 px line of mono in the footer), gamified progress bars, dark-mode toggles, language switchers, or "back to top" buttons. The visitor descends; they do not return. **Storytelling spine — the nine terraces.** The vertical descent rehearses a Latin causal sequence. Each terrace is one moment. Implement the copy *exactly* as a Latin tag in Bebas + a single English italic Cormorant gloss + a Roman date, never longer: 1. **CAUSA FUIT.** — *There was a cause.* `ANTE • OMNIA` 2. **AURA MOVIT.** — *The breeze stirred.* `HORA • PRIMA` 3. **(silence)** — terrace three is the first empty room; only the medallion halo, no copy at all. 4. **ARBOR FLEXIT.** — *The tree bent.* `HORA • TERTIA` 5. **FOLIUM CECIDIT.** — *A leaf fell.* `HORA • SEXTA` 6. **(silence)** — second empty room. 7. **AQUA TETIGIT.** — *Water touched it.* `HORA • NONA` 8. **TERRA CEPIT.** — *The earth received it.* `HORA • UNDECIMA` 9. **(silence)** — third empty room. The medallion is the very last mark on the page; the descent ends in negative space. These nine moments *are* the site. There is no "About causality.club," no "Members," no "Apply." The club is whoever has scrolled to the ninth terrace. **Animation — the fade-reveal pattern.** The frequency report shows **fade-reveal** at 4 % — used by two other designs, ranking it as one of the rarest patterns in the corpus's animation vocabulary (against `parallax` 91 %, `stagger` 69 %, `scroll-triggered` 61 %). causality.club commits to fade-reveal as the *only* entry animation — no slide, no scale, no parallax displacement, no stagger. Each terrace's contents fade in from `opacity: 0` to `opacity: 1` over **2.4 seconds** with a `cubic-bezier(0.4, 0, 0.2, 1)` ease, triggered by `IntersectionObserver` at 35 % terrace visibility. The slow 2.4 s duration is critical and non-negotiable: it is the breath length the site's pastoral tone requires. Latin tags fade first (delay 0 ms), the English gloss fades second (delay 600 ms), the imagery fades third (delay 1200 ms), the leaf marginalia fades last (delay 1800 ms, with the path-draw-svg leaf-stroke reveal layered on top). **The descending stylus marker.** A single 64 px SVG circle, fill `--rose-marbled`, opacity 0.6, slides down the central hairline as the visitor scrolls. Implement via a `requestAnimationFrame` loop bound to `window.scrollY`, mapping scroll progress 0–100 % to vertical position along the hairline. When the marker passes a medallion, snap to its center for 500 ms with a `cubic-bezier(0.16, 1, 0.3, 1)` ease before continuing — the marker is a *stylus tracking down the year's gnomon*, and the snap is the moment the sundial reads the hour. This is the single most important interaction on the page. Get it right. **Type kerning and hierarchy.** Bebas Neue must be tracked at exactly `letter-spacing: 0.04em` — tighter than this and it loses lapidary weight; looser and it becomes a logo. The Cormorant body italic must use `font-feature-settings: "liga", "dlig", "hist"` so historical ligatures fire (the *ct* and *st* swashes are essential to the romantic register). Roman numerals in the JetBrains Mono marginalia are hard-coded as text; do not use a JS Arabic-to-Roman converter — the inaccuracy of hand-set Roman numerals is part of the patina. **The candle-glow halos.** Each medallion carries a 80 px `radial-gradient(circle, var(--candle-glow) 0%, transparent 70%)` halo at 35 % opacity, with a slow 6-second `pulse` keyframe animation oscillating opacity between 0.30 and 0.40. Nine candles, breathing at slightly offset phases (each terrace's halo is offset by `animation-delay: calc(var(--terrace-index) * 0.7s)` so the page seems to breathe in a long slow rhythm rather than in unison). **Cursor.** The native cursor is hidden site-wide and replaced with a custom 12 px circle, stroke `--umber-faded`, no fill — a quiet hairline ring that mirrors the central spine. On hover over the medallions, the ring expands to 32 px over 400 ms. There is no magnetic pull, no follow-trail, no particle emission. The cursor is *a quiet companion, not an effect*. **Sound (optional, opt-in only).** A single 90-second loop of a beeswax candle hissing, recorded at 96 kHz mono, gain -32 dB, with a 4-second crossfade. Off by default. A 11 px mono toggle in the bottom-right of terrace 1 reads `AUDIRE • CEREUM` (*hear the candle*). When the visitor enables it, the hiss plays continuously through the descent. The site does not autoplay. **Performance is irrelevant; atmosphere is total.** Do not lazy-load the marble plates — load them all at first paint, even if it costs 4 MB. The descent must feel like one unbroken object. Do not split the page into routes; it is one HTML document. Do not use a framework if a static `index.html` will do. ## Uniqueness Notes Three or more deliberate differentiators from the existing 49-design corpus, each justified against the frequency report. 1. **Timeline-vertical claimed as the load-bearing geometry, not as a section.** The frequency report shows `timeline-vertical` at 2 % — present in exactly one other design as a layout key. causality.club doesn't merely cite it; it builds the entire nine-terrace descent on it, with a literal hairline plumb-line down the center of the page and a stylus marker that physically travels it. No other design in the corpus uses vertical timeline as the *only* load-bearing structure, with no horizontal navigation, no second axis, and no escape from the descent. 2. **Bebas-bold as Latin lapidary face, paired with Cormorant Garamond italic body.** The frequency report shows `bebas-bold` at 2 % — claimed by exactly one prior design. The corpus's typography is dominated by `mono` (95 %) and `humanist` (34 %); Bebas is almost universally avoided because it reads as "agency landing-page hero." causality.club re-coerces Bebas into a *temple-inscription* register — condensed, all-caps, 0.04em-tracked, weather-aged in `--travertine` — and pairs it with Cormorant Garamond italic body, a romantic-revival face the corpus barely touches. The pairing — chiselled stone over candlelit vellum — is present in zero other designs. 3. **Warm-earthy palette never claimed in the corpus, executed as photographs of actual Italian marble.** The frequency report shows `warm-earthy` at 0 % outside this assignment, despite `warm` (97 %) being the corpus's most-used parent cue. causality.club is the first to take the warm cluster and refine it down to a six-color named sub-palette (`--travertine`, `--ink-vellum`, `--umber-faded`, `--olive-deep`, `--rose-marbled`, `--candle-glow`), with each color sampled from a documented Italian marble or a photographed weathering process — not from a generative palette tool, not from Coolors, not from a Tailwind preset. 4. **Marble-texture (2 %) crossed with leaf-organic (2 %), the two rarest motifs in the corpus.** The frequency report shows both motifs claimed by exactly one prior design each, and never together. causality.club is the first to set them in dialogue: six duotone marble macro-plates (each captioned with a Latin marble name and a Roman quarry-date) descending against twenty-three hand-drawn olive-leaf glyph annotations in the right margin. The metaphoric pairing — the longest-lasting Roman material against the most ephemeral seasonal one — is the visual argument the site makes about causality itself. 5. **Pastoral-romantic tone (4 %) executed as Virgilian Latin tags + English glosses, not as cottagecore.** The frequency report shows `pastoral-romantic` at 4 %, used by two prior designs that read pastoral-romantic as *cottage / kitchen / hand-lettered embroidery*. causality.club refuses cottagecore entirely (the cottagecore aesthetic is at 6 %, and we explicitly avoid it). Instead, pastoral-romantic is interpreted through Virgil's *Eclogues* — shepherds, marble, omens, the long Mediterranean afternoon — and the entire body voice is a one-word Latin tag plus a single English sentence in italic. No other design in the corpus uses Latin epigraphic copy as the body voice. 6. **Fade-reveal (4 %) as the only animation, at a deliberately slow 2.4 s duration.** The frequency report shows `fade-reveal` at 4 % and animation patterns dominated by `parallax` (91 %), `stagger` (69 %), and `scroll-triggered` (61 %). causality.club rejects parallax entirely (the descent must feel like real walking, not a layered diorama), rejects stagger except as a *between-element delay sequence within a single terrace*, and commits to fade-reveal as the only entry animation — at 2.4 seconds, far slower than the conventional 400–800 ms web norm. The slowness is the design's argument for slowness. 7. **Ethereal aesthetic (2 %) re-rendered as Mediterranean afternoon dust, not pastel cloud-spa.** The frequency report shows `ethereal` at 2 % — claimed by one prior design. causality.club is the second design to claim ethereal and the first to refuse the pastel-cloud reading; ethereality is built from beeswax candle halos, travertine ground, and the slow breathing of nine offset glow-pulses. There is no blue, no lavender, no cloud gradient, no soft-focus blur. Ethereality here is *warm and grounded* — the ether of a real Italian afternoon, not a stock-photo sky. **Avoided patterns (frequency context).** The corpus is dominated by `parallax` (91 %), `stagger` (69 %), `scroll-triggered` (61 %), `centered` (93 %), `full-bleed` (89 %), `vintage` motifs (89 %), `photography` imagery (93 %), `mono` typography (95 %), and `warm` palette parent (97 %). causality.club deliberately abstains from the first three (the only animation is fade-reveal at 2.4 s), avoids vintage motifs in the corpus's sense (no aged-paper-collage, no halftone, no kraft-card layout), avoids generic photography (the only photographic surfaces are six duotoned marble macros), uses mono only as 11 px marginalia, and refines warm into a named warm-earthy sub-palette no other design has claimed. **Chosen seed:** *aesthetic: ethereal, layout: timeline-vertical, typography: bebas-bold, palette: warm-earthy, patterns: fade-reveal, imagery: marble-texture, motifs: leaf-organic, tone: pastoral-romantic*. Every key in this seed sits at 4 % or less in the frequency report; together they describe a design that is not adjacent to any prior site in the corpus.