# Design Language for continua.club ## Aesthetics and Tone continua.club is a **private salon for continuity practitioners** — mathematicians of the smooth, philosophers of duration, musicians of the held tone, embroiderers of the unbroken stitch. The whole site is reconceived as a **single unbroken figure that breathes** — a topological surface of soft swells and slow inhales where every page is a region of one continuous membrane rather than a discrete document. The aesthetic is **blobitecture crossed with the lab notebooks of Henri Bergson, the rope-stitched manuscripts of Cistercian copyists, and the slow-shutter cloud photography of late 19th-century alpinists** — a place where the only sin is the seam, where rupture is heresy, and where the gentlest available action (a sustained note, a lap dissolve, a fillet weld) is held up as the highest civic virtue. The tone is **warm-inviting and zen-contemplative without being austere**. There is humor here — continua.club is a club, after all, with a quiet ledger of inside jokes about the Dedekind cut, the Cantor set, and the Zeno paradox — but the prevailing register is the unhurried tea-room confidence of an old society that has long since stopped needing to prove its relevance. Members are referred to as *continuants*. The site speaks like an erudite friend reading aloud from a leather-bound common book by candlelight, the kind of voice that uses the word **"protension"** without footnoting it, that quotes Bergson's *durée* in the same breath as a recipe for slow-cooked sourdough that needs three days. Nothing is sharp. Nothing terminates. Even hyperlinks soften into the next thought rather than announcing themselves with underlines. The mood: **the held breath before the wave breaks, suspended indefinitely.** A long-held organ chord under a cathedral. A river you cannot see the source or the mouth of. The sense, when reading, that you are inside one very large, very slow paragraph that began before you arrived and will continue after you leave. ## Layout Motifs and Structure The site is built as **one continuous metaball field** — a single SVG topology that fills the viewport and morphs as the visitor scrolls. There are no rectangular cards, no straight section dividers, no horizontal rules, no boxed media. **Every container is a rounded blob with a minimum corner radius of 28% of its shorter axis**, and most containers are full **superellipse** shapes (squircles with `border-radius: 50% / 30%` or arbitrary SVG `` clip-paths). The page reads as **organic-flow** with **stacked-sections** that visually overlap and merge into one another — never abut, never tile. **The Continuum Spine.** A single soft serpentine line — drawn live as an SVG `` with **path-draw-svg** stroke animation — runs from the very top of the document to the very bottom, snaking left-to-right through every section like a slow river through valleys. This spine is the load-bearing navigational element: section anchors are the *bends* in the river, not pinned tabs. Hovering on the spine reveals subtle pearl-bead waypoints. The spine never breaks. If the page is 14,000px tall, the spine is 14,000px long, and a `getTotalLength()` measurement is woven into the live `dasharray` so the line draws itself in lockstep with scroll progress. **Sections, in scroll order:** 1. **The Surface (0–110vh).** Full-bleed viewport occupied by a slow-breathing **metaball field** — three to five gaussian blobs in the palette's deep cream and pond-green, shifting their gravitational centers on a 14-second loop using a CSS `@property`-driven custom radial-gradient transform. Centered above (not boxed, just floated in the vapor) the wordmark **continua** is set in an oversized variable serif whose `font-variation-settings: 'wdth' 80 'wght' 400` *very slowly* breathe to `'wdth' 95 'wght' 480` over 9 seconds. The dot of the i is a real metaball that detaches from the stem and rejoins it in a slow lap. 2. **The Definition Pool (110–220vh).** A large lozenge-shaped reading area in the center of the viewport, framed by floating margin glosses to the left and right. The body of this pool is **the working definition of continuity** as practiced at the club, written in flowing prose, with key technical terms (*Dedekind cut, ε-δ, hereditary connectedness, durée, legato*) gently underlined with hand-drawn wavy lines that animate when entering the viewport via **path-draw-svg**. 3. **The Ledger of Continuants (220–360vh).** A vertical river of **member entries** — not a card grid. Each member's entry is a long horizontal blob, alternating left and right of the spine, that you read as you would read postcards strung along a clothesline. The blobs softly overlap their neighbors at the edges via `mix-blend-mode: multiply`, so you cannot tell where one ends and the next begins. 4. **The Practices Garden (360–520vh).** A **masonry of organic blobs** of varied sizes, each containing a single practice the club cultivates — *Slow Reading, Long Tones, Marbling, Hand-Copying, The Sustained Pedal, Fermenting, Knotting, Walking Without Stopping*. The garden uses **organic-flow** placement: blobs are positioned with CSS `clip-path: ellipse()` and offset randomly within ±40px of a soft grid so the garden looks tended-but-not-pruned. 5. **The Long Note (520–680vh).** A **horizontal-scroll** section embedded vertically — the user's vertical scroll is translated into a sustained horizontal sweep across a single uninterrupted timeline that depicts **a single A=415Hz pitch held continuously since the founding of the club in 1893**. SVG cycles, decade markers, biographies of the continuants who held the pitch during their watch, all unfurling sideways. The pitch never breaks; the line never lifts. 6. **The Membership Inquiry (680–800vh).** Not a CTA. A handwritten letter-form, set in a soft cream blob, addressed *Dear Continuant,* with one thin sliver of envelope visible in the corner. A single field — *Where would you not want to be interrupted?* — is the only input. There is no submit button; pressing Enter dissolves the letter into the metaball field, and a pearl-bead waypoint appears on the spine. 7. **The Endless Footer (800vh+).** The spine does not terminate. It curves softly off the bottom edge of the page and re-enters at the top of the page on next visit (cookied: the spine remembers its last bend and resumes from there). The grid underneath all this is a **continuous logarithmic radial grid** anchored at the visitor's cursor — a subtle background guide that becomes briefly visible on cursor-hold, like the contours appearing on a topographic map under a magnifying glass. ## Typography and Palette **Typography (Google Fonts only):** - **Display & Wordmark: "Fraunces"** — variable serif, axes `opsz`, `wght`, `SOFT`, `WONK`. Fraunces is used at high `SOFT` (100) and high `WONK` (1) to evoke a hand-set roman softened by long use; weights breathe between 400 and 600 on a 9-second sine. At display sizes (clamp(3rem, 9vw, 8rem)) Fraunces gets `letter-spacing: -0.015em` and `font-optical-sizing: auto`. - **Body & Long-Form: "EB Garamond"** — set at 19px with 1.78 line-height and a generous 26em max-measure. Used for The Definition Pool, member biographies, and the long-tone timeline captions. EB Garamond carries the lab-notebook DNA the site needs: reflective, breathable, unaggressive. - **Marginalia & Glosses: "Caveat"** — a true handwritten Google Font, used at 16–20px in the warm-burgundy ink color for the *side comments and underlines and tiny annotations* that pepper the Definition Pool and the Practices Garden. Caveat is also used for the **Continuum Spine's tooltips**. - **Technical & Indices: "JetBrains Mono"** — used sparingly, only for numerals (years, member ID numbers, the hertz of the long note, durations) and for the live cursor-coordinate readout in the Long Note section. Set at 13px with `font-feature-settings: 'tnum' 1, 'zero' 1`. - **Pull Quotes: "Cormorant Garamond"** italic — for the slow Bergson and Dōgen epigraphs that drift unboxed across the metaball field. Set at clamp(1.5rem, 3.4vw, 2.6rem) with line-height 1.4, `letter-spacing: 0.005em`, and a faint **blur-focus** that resolves on entering the viewport. **Palette — "Pond, Beeswax, Kintsugi"** (warm + analogous + low contrast, leaning into the underused **honeyed-neutral** and **terracotta-warm** registers): - `#F4ECDA` — **Beeswax Cream** — primary background, warm, very soft. Slightly more yellow than parchment. - `#E9DCC0` — **Linen Old** — secondary surface for blobs that overlap the background. - `#3F5D4A` — **Pond Green** — primary metaball color, the deep still water of a shaded pool. Used for the Continuum Spine and for body text on cream. - `#7C9F8A` — **Reed Light** — secondary metaball color, the moss and reed at the edge of the pond. - `#7A2E1F` — **Kintsugi Red-Brown** — sparingly used as the warm-burgundy ink for Caveat marginalia and for the rare moment of emphasis (the verb in a member's vocation, the hertz of the held note). - `#C58A3E` — **Honey Gold** — used only for the pearl-bead waypoints on the spine and for Fraunces wordmark hover-bloom. - `#1C1A14` — **Walnut Ink** — used only for body type when the highest contrast is needed; it is *almost* black but warm enough to feel like ink not pixel. The palette never includes pure white (#FFFFFF) or pure black (#000000). Every color carries warmth. Backgrounds shift by ±2% lightness over the duration of a scroll session via a slow `prefers-reduced-motion`-respecting `body { background: ... }` interpolation, so a 20-minute reader experiences a barely-perceptible **dawn-to-dusk** warming of the cream. ## Imagery and Motifs **Core motif — The Metaball Membrane.** The site's identity is the moving metaball field. Implemented with an SVG `` chain: `` followed by `` that thresholds the alpha channel (`type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"`). Underneath the filter, three to five `` elements drift on lissajous curves with periods of 7s, 11s, 13s, 17s — irrationally related so the field never repeats. This filter is GPU-accelerated and the membrane lives in a fixed, full-viewport `