# Design Language for tanso.club ## Aesthetics and Tone tanso.club is a **breathing-room** — a membership club whose only dues are the air you already trade with the world. 炭素 (*tanso*) is carbon, atomic number 6, and this club is built around the single fact that the carbon you exhale this second is the same carbon a maple drinks at dawn, the same carbon a reef locks into chalk, the same carbon a peat bog has held since the last ice age. The club has no bar, no stage, no lounge of leather chairs — it is a **soft, slow-pulsing membrane** you step inside, a place that *inhales and exhales with you*. The governing aesthetic is **blobitecture**: there are no straight lines, no rectangles, no card grids — only lobed, lung-like chambers that swell and relax on a four-second respiratory cycle, connected by capillary corridors. Think of the inside of an alveolus rendered as a serene clubhouse: warm, dim, organic, faintly humid. The tone is **calm-serene** and **grounded-earthy** — the unhurried hush of a glasshouse before sunrise, never the eco-guilt of a carbon calculator, never the chrome of a climate-tech startup. No charts. No "join now." No tonnes-of-CO₂ counters. Just membership in the most ordinary, most universal exchange there is: breath for breath. ## Layout Motifs and Structure The site is a **single organic-flow descent through five soft chambers**, each chamber an irregular blob — an SVG `border-radius`-morphed shape, never a box — that the visitor scrolls *into* rather than past. The five chambers are the five great reservoirs carbon moves between: **ATMOSPHERE** (the thin blue lung), **BIOSPHERE** (the green one — leaves, lungs, gut flora), **HYDROSPHERE** (the slow blue — ocean, dissolved, deep), **PEDOSPHERE** (the dark one — soil, peat, root), and **LITHOSPHERE** (the patient grey — limestone, shale, the ten-thousand-year hold). Between chambers run **capillary corridors**: thin, curving SVG paths that the scroll "pushes" a single carbon mote along, so transition *is* the carbon cycle in motion. There is **no header bar and no footer slab** — navigation is a small cluster of five soft lobes floating at the lower-left, each the colour of its reservoir, the active one gently dilated. Content inside each chamber sits on a **single flowing column** that hugs the inner curve of the blob, text wrapping along `shape-outside` so paragraphs themselves are lobed. Categories deliberately chosen against the corpus: **organic-flow (6%)** and **blobitecture (3%)** over card-grid (92%), centered (80%), full-bleed (85%) — there is not one rectangular container anywhere on the page, not even the images. ## Typography and Palette **Fonts (Google Fonts only):** - **`Fraunces`** — the display and headline face, used for the five reservoir names ("ATMOSPHERE", "BIOSPHERE", "HYDROSPHERE", "PEDOSPHERE", "LITHOSPHERE") and the `tanso · club` wordmark. Fraunces is a "wonky" old-style serif with soft, almost botanical terminals and a high `SOFT` and `WONK` variable-axis range — set it at its softest and wonkiest (`font-variation-settings: 'SOFT' 100, 'WONK' 1`), in optical-size display mode, at clamp(2.8rem, 7vw, 6rem), tracking slightly loose. It reads warm and breathing, never corporate. - **`Spectral`** — the long-form reading face for the chamber prose: a generous, low-contrast serif designed for screens, set at 1.2rem / 1.75 line-height, max-width tied to the blob's inner curve. Carries the "glasshouse essay" feel. - **`Space Mono`** — used *only* for the small chemical/atomic asides that float in the margins: `C · 6 protons · 12.011 u`, `½ life: ~10⁴ a`, `Henry's constant ↓ with T`. Tiny (0.72rem), uppercase, letter-spaced wide, opacity 0.55 — these are the only mono notes, a quiet nod to the 94% mono-typography corpus without making mono the voice. **Palette — five reservoir hues over a humid near-black, never warm-orange-gradient:** - `#0E1311` — **bog-black**, the base background of the whole membrane (a green-shifted near-black, like wet peat in shade). - `#0F2A33` — **deep-hydro**, the ocean chamber and the resting capillary colour. - `#7FB7A6` — **chlorophyll-mist**, the biosphere lobe and primary text-on-dark; a soft sage, the colour of breath fogging a leaf. - `#A8C7E8` — **alveolar-blue**, the atmosphere lobe; pale, thin, almost weightless. - `#5E4A3C` — **humus-brown**, the pedosphere lobe; warm-dark, root-stained. - `#8E938D` — **limestone-grey**, the lithosphere lobe; the cool patient grey of shale. - `#EDEAE0` — **chalk-white**, used sparingly for the wordmark and the single travelling carbon mote — literally the colour carbon becomes when a reef gives it up. This is a **forest-green / ocean-deep / earth-tones** family — deliberately avoiding the 98%-warm, 93%-gradient corpus default; the only "gradient" is the soft radial glow each chamber breathes outward, single-hue, no rainbow mesh. ## Imagery and Motifs **No photography (countering the 98% photography corpus), no stock, no 3D render, no AI raster.** Every visual is **custom SVG and CSS**, soft-edged, hand-tuned, organic: - **The five chambers** are each a large `` blob with `` on the path `d` attribute (or a CSS `@keyframes` morph between 3–4 hand-drawn `clip-path` polygons), inflating ~4% and deflating on a 4s ease-in-out loop — the whole page visibly *breathes*. Each blob has an inner soft-light radial gradient in its reservoir hue, like backlit tissue. - **Capillary corridors**: thin SVG `` curves (1.5px, reservoir-coloured, low opacity) linking chamber to chamber, with a single `r=5` chalk-white circle (`` driven by scroll position) — the carbon mote, threading the cycle. When it enters a chamber it briefly pulses larger, "absorbed." - **Floating motes**: a scatter of 30–40 tiny translucent dots drifting upward inside each chamber at glacial speed (CSS `translateY` + `filter: blur(0.5px)`), denser in BIOSPHERE, sparse and slow in LITHOSPHERE — visible carbon density per reservoir. - **The wordmark `tanso · club`** is set in Fraunces with the middle dot replaced by a tiny breathing blob — the club's "logo" is literally a lung the size of a period. - **No icons in the UI chrome** — the five nav lobes *are* miniature breathing blobs, each tinted its reservoir hue; hovering one makes it inhale. - Decorative motif throughout: **lobed, never sharp** — every divider is a hand-drawn organic squiggle, every "rule" a capillary, every bullet a mote. Motif tags: `organic-blobs`, `leaf-organic`, `flowing-curves`, `wave-forms` — explicitly *not* grid-lines, circuit, sharp-angles. ## Prompts for Implementation Build tanso.club as **one `index.html`, one `style.css`, one ES-module `breath.js`, and a single `chambers/` folder of SVG blob files** — no framework, no bundler, no build step, no canvas, no WebGL, no Lottie, no service worker. **Document structure:** ```
...
...
... (hydrosphere, pedosphere, lithosphere) ...
``` **Storytelling, full-screen and immersive — this is a place you breathe in, not a page you skim:** - On load, the page is dark and still for ~600ms, then the first chamber **inhales** into view (scale 0.96 → 1.00, opacity 0 → 1, the radial glow blooming). Establish the respiratory rhythm immediately: a global 4s `--breath` cubic-bezier loop that every blob, the wordmark dot, and the nav lobes share, so the whole site pulses *in sync* like one organism. - **Scroll = the carbon cycle.** As the visitor scrolls, the chalk mote travels the capillary `` between chambers using `getPointAtLength()` mapped to scroll progress (use `IntersectionObserver` + a rAF loop, no scroll-jank libraries). Entering a chamber: the mote pulses, the chamber's prose staggers in word by word along its `shape-outside` curve (a gentle `clip-path` wipe, ~40ms stagger), and a one-line "transformation note" types out in Space Mono — e.g. atmosphere→biosphere reads `photosynthesis · 6CO₂ + 6H₂O → C₆H₁₂O₆ + 6O₂`. - Each chamber's prose is short (≈90–130 words): a contemplative paragraph about *what carbon is doing* in that reservoir and *how long it stays* — the residence time is the emotional beat (seconds in a breath, decades in a tree, millennia in the deep ocean, geologic ages in limestone). End each with the same quiet refrain rendered small: *"— still in the club."* - **Cursor as breath**: the pointer carries a faint 80px soft-light halo in the current chamber's hue; moving slowly makes it bloom, moving fast makes it contract — a `blur-focus` micro-interaction tied to pointer velocity. No magnetic snapping, no tilt-3d, no cursor-trail spam. - **Reduced-motion**: if `prefers-reduced-motion`, the breathing freezes mid-inhale (blobs hold a soft static shape), the mote sits still in each chamber as you scroll past, prose fades rather than staggers — the *form* survives without the pulse. - Closing: after LITHOSPHERE, the membrane doesn't end in a footer — the bog-black simply deepens, the mote comes to rest in the limestone, and a single line of Fraunces fades up: *"membership: ongoing. dues: paid in breath."* Below it, only the wordmark and a quiet `est. ∞` in Space Mono. **AVOID:** CTA-heavy layouts, "Join the club" buttons, pricing tiers, stat-grids, CO₂ counters or carbon-calculator widgets, dashboards, hero-with-overlay-text-on-photo, card grids, bento boxes, glassmorphism panels, neon, rainbow gradients, testimonial sliders, logo walls. ## Uniqueness Notes Differentiators from the other designs in this codebase (including the sibling tanso domains) and from the seed's defaults: 1. **A "club" with zero clubhouse furniture and zero CTAs — it's a literal lung you inhabit.** Where almost every "club"/membership site in the corpus leans on dark-luxury, gold-on-black, leather, member tiers, and "Apply Now," tanso.club has no bar, no stage, no pricing, no join button — the entire interface is a breathing alveolar membrane. The conceit (membership = the carbon exchange you already do) is delivered through *form* (a site that physically inhales/exhales in sync) rather than copy. 2. **Distinct from sibling tanso.bar's rigid graphite art-deco.** tanso.bar is all sharp ziggurats, mirror symmetry, hairline facets, soot-on-obsidian, six allotropes as "pours." tanso.club is its opposite pole: zero straight lines, blobitecture, five *reservoirs* (not allotropes), warm green-and-blue tissue tones (not gunmetal), Fraunces-soft-serif (not Poiret-One deco geometry). Same element, opposite physics. 3. **No photography, no card grid, no rectangle anywhere** — counters the 98%-photography, 92%-card-grid, 85%-full-bleed corpus saturation. Every container is an organic blob with `shape-outside` text wrap; every divider a capillary; every bullet a drifting carbon mote. 4. **Scroll *is* the carbon cycle.** A single chalk-white mote travels SVG capillary paths between reservoirs as you scroll, pulsing on absorption — the navigation mechanic and the scientific story are the same object. No parallax-photo-layers, no horizontal-scroll gallery, no immersive-video. 5. **Forest-green / ocean-deep / humus-brown / limestone-grey reservoir palette over a green-shifted near-black** — deliberately rejecting the 98%-warm, 93%-gradient default; the only gradient is each chamber's single-hue respiratory glow. Chosen seed/style: **blobitecture fluid layout** (fallback selection — no seed was supplied in the assignment; blobitecture sits at ~3% in the corpus and is unused by sibling tanso domains). Avoided patterns per frequency analysis: hand-drawn (94%), glassmorphism (85%), card-grid (92%), centered (80%), full-bleed (85%), photography (98%), warm palette (98%), gradient (93%), cursor-follow/parallax/magnetic/tilt-3d saturation — kept only a single restrained `blur-focus` cursor halo and a `path-draw`/`animateMotion` mote.