# Design Language for tanso.club ## Aesthetics and Tone tanso.club is a **private members' herbarium for the age of carbon** — a site that treats the science of carbon sequestration as a grand civilizational project worthy of the same aesthetic reverence historically reserved for rare botanical specimens and illuminated natural histories. The reference is the 18th-century cabinet of curiosities crossed with a contemporary private members' club: think Kew Gardens if it were redesigned by a Japanese tea master and a Parisian rare-book dealer. The visual world is **sumptuous but controlled** — parchment-to-ivory backgrounds, botanical watercolour-style illustrations rendered in SVG, and ink paths that draw themselves into view as if a scholar's pen is still wet. Water imagery pervades everything: humid glass surfaces suggest preserved specimens kept in glycerin, rivulets of pigment bleeding into wet paper, small bubble clusters that rise and drift along the edges of cards as if carbonation is the site's own heartbeat. The tone is **opulent-grand but never loud** — the grandeur of a first edition Redouté, not a Vegas chandelier. Every element whispers authority. Gold-leaf rules appear as `1px` hairlines. Ink bleeds are slow and irreversible. Typography is set with the careful intention of a calligrapher who learned spacing by studying Trajan's Column. Mood references: *Pierre-Joseph Redouté's Les Roses* / *The Folio Society* / Shizen Japanese aesthetic / Hokusai wave study notebooks / The Athenaeum Club smoking room. --- ## Layout Motifs and Structure The page is **a single slow-scroll herbarium folio**. There is no traditional navigation bar — instead a slim gilded ribbon at the top carries only the tanso.club logotype (two characters, one Latin word, no tagline) and a "Request Membership" ghost link in the lightest possible roman weight. **Structure: true CSS masonry, three columns on desktop, two on tablet, one on mobile.** Cards are botanical specimen cards — they carry uneven heights deliberately (280px–680px) packed with CSS `column-count: 3; column-gap: clamp(16px, 2.5vw, 28px); break-inside: avoid`. Each card is a **herbarium specimen sheet**: cream-tinted background (`#F9F4EC`), a single botanical SVG illustration or path-drawn element, a calligraphic heading in small caps, and a brief scholarly annotation set in the body typeface. The page opens with a **full-width illuminated frontispiece**: a large botanical SVG (fern frond, pressed flat) whose paths draw in over 3.8 seconds as the user arrives. Below, the masonry grid begins immediately — no hero image, no marketing copy, no CTA block. Spatial logic: - Outer margins: `clamp(24px, 6vw, 80px)` on desktop - Column gutter: `clamp(16px, 2.5vw, 28px)` - Card padding: `clamp(20px, 3vw, 36px)` - Baseline grid: `8px` unit **No sticky header.** The gold ribbon disappears after 40px scroll, returning only with a slow upward swipe. The reading experience is uninterrupted folio, top to bottom. --- ## Typography and Palette ### Typefaces (Google Fonts only) **Primary display — [Cormorant Garamond](https://fonts.google.com/specimen/Cormorant+Garamond)** Used for: frontispiece title, section headers, card headings, drop capitals, pull quotes, the membership ribbon logotype. - Frontispiece wordmark: `font-size: clamp(48px, 7vw, 96px)`, `font-weight: 300`, `letter-spacing: 0.18em`, `font-style: italic` - Card headings: `font-size: clamp(18px, 2.4vw, 26px)`, `font-weight: 600`, `font-variant: small-caps`, `letter-spacing: 0.08em` **Body / annotations — [EB Garamond](https://fonts.google.com/specimen/EB+Garamond)** Scholarly, ink-pressed, humanist. Used for all running text, specimen annotations, footnote-style captions. - Body: `font-size: clamp(15px, 1.15vw, 17px)`, `line-height: 1.72`, `font-weight: 400` - Captions: `font-size: 12px`, `font-style: italic`, `opacity: 0.7` **Accent / labels — [Cormorant SC](https://fonts.google.com/specimen/Cormorant+SC)** All-caps specimen taxonomy labels, membership tier labels, footer credits. Weight 400 only. ### Palette | Role | Name | Hex | |------|------|-----| | Page ground | Herbarium vellum | `#F7F1E6` | | Card surface | Pressed cream | `#F9F4EC` | | Deep ink | Walnut gall ink | `#2C1F14` | | Primary botanical | Muted sage | `#8BA888` | | Secondary botanical | Faded rose | `#C9A0A0` | | Water / bubble tint | Aqua glycerin | `#B8D4D0` | | Gold rule | Pale gilt | `#C8A85E` | | Path-draw accent | Verdant fern | `#5E8A6A` | | Shadow / depth | Cool umber | `#7A6856` | The palette is a **pastel herbarium** — nothing saturates above 55% chroma. All colour exists as if it were watercolour applied to damp cotton-rag paper: soft, fugitive, layered. No harsh blacks; the darkest element is `#2C1F14`, a warm walnut-ink brown. --- ## Imagery and Motifs **No photography.** The corpus runs at 87% photography; tanso.club opts out completely. All imagery is **SVG botanical illustration**, path-drawn with `stroke-dasharray` / `stroke-dashoffset` animation — lines that appear to be drawn by hand in real time. Each illustration is a separate SVG file inlined into its card or the frontispiece. The subject corpus: 1. **Frontispiece (hero):** A pressed maidenhair fern frond, full width, approximately 820px across. 340 path segments. Ink colour `#2C1F14` at 90% opacity on vellum ground. Draw-in animation: 3.8s ease-in-out, staggered by path index, triggered on `IntersectionObserver` entry. 2. **Card illustrations (masonry specimens):** - Ginkgo biloba leaf (single, with venation detail), sage cluster, kelp strand (marine carbon), algae bloom - Bamboo culm cross-section (fastest-sequestering plant on earth — the site's brand claim) - Moss patch: a flat top-view with moisture-bubble motif threaded through - Water lily pad with stem entering from below — **the primary water-bubble integration point**: semi-transparent SVG circles (r: 3–16px, opacity 0.18–0.45) drift upward along the lily stem path, looping on a 6-second cubic-bezier ease. 3. **Bubble motif:** Small SVG `` clusters appear in three zones: along the frontispiece fern spine (slow, 8s loop), at the bottom edge of the aqua-tinted membership card (medium, 5s), and as a subtle cursor-follower on desktop (3–5 circles trailing 40ms behind cursor, opacity 0.12). Bubbles are `#B8D4D0` and `#C8A85E` at very low opacity. 4. **Path-draw recurring ornament:** A single-line `` botanical border (the traditional herbarium label border — a thin vine with leaves at corners) draws in on each card as it enters the viewport. Duration: 1.6s per card, stagger: `0.12s × card-index`. 5. **Gold hairline rules:** `1px` horizontal `` SVG elements in `#C8A85E` separate the frontispiece from the masonry grid, and appear as section dividers within longer cards. They draw in left-to-right using the same path-draw technique at 0.8s. **Book-scholarly motifs:** - Drop capitals in Cormorant Garamond Italic at `font-size: 4.2em`, `float: left`, `line-height: 0.75`, with a hand-drawn SVG decorative frame (a simple rectangular ink border, 2px stroke) - Specimen taxonomy labels: a two-line Latin name in Cormorant SC + common name in EB Garamond italic, exactly as a herbarium sheet would be labelled - Marginalia columns: on cards wider than 480px, a narrow left margin carries small annotation text at `font-size: 11px`, rotated 90° (as if written perpendicular to the specimen) - Footer is set as a herbarium catalog footer: issue number, curator credit, provenance line — all in Cormorant SC, 11px, `#7A6856` --- ## Prompts for Implementation Build tanso.club as **a single-page herbarium folio** — one HTML file, one CSS file, one small vanilla JS file (< 120 lines). No framework. No build tool. **Page structure:** 1. `
` — slim gold-ruled bar, disappears on scroll, returns on upswipe 2. `
` — full-width inline SVG fern, draws in on load 3. `
` — CSS masonry grid, 3 cols desktop 4. `