# Design Language for tanso.group ## Aesthetics and Tone tanso.group is the public field-ledger of a carbon collective — a loose band of soil samplers, kelp-line tenders, biochar burners, and freight-route auditors who weigh the world in grams of carbon and refuse to make it pretty. "Tanso" (炭素) is the Japanese word for carbon, and the site treats carbon as a *substance* before a *cause*: charcoal under a fingernail, the matte black crust on a burnt log, graphite smeared on butcher paper, the soot-grey of a coal seam. The aesthetic is **brutalist anti-design** — a deliberately unstyled, document-first surface that looks like a working measurement notebook photocopied too many times: hard 1px hairline rules, exposed table grids, footnote-dense margins, monospaced figures that never align prettily, and the structural honesty of showing every join. Nothing is rounded. Nothing glows. Nothing floats on a soft shadow. The only "decoration" is the data itself and the carbon-black ink it is printed in. The tone is **raw-authentic with an edgy-rebellious streak** — the voice of people who think most climate websites are a hero image and a lie. Copy is terse, lowercased by default, occasionally ALL-CAPS when something is being asserted as fact. Numbers are never rounded for comfort: "−3.118 t CO₂e (provisional, ±0.4)". The site is not trying to recruit you. It is publishing its ledger and you can read it or not. Warmth, where it appears, is the warmth of ash still holding heat: a single ember-orange that bleeds through the black in exactly three places. ## Layout Motifs and Structure The site is an **editorial-flow document**: one long, narrow measure (max-width 720px on desktop, hard-left-aligned, never centered) of stacked text blocks, oversized exposed tables, and full-bleed black "strata" bands that interrupt the column edge-to-edge like core samples driven through the page. There is **no card grid, no bento box, no centered hero, no symmetric three-column anything**. The layout law is *the ledger reads top to bottom*. Structure as a printed report: 1. **MASTHEAD** — not a hero. A black bar, page-height ~46vh, containing only: the word `炭素` set enormous in graphite-grey on near-black (barely-there contrast, you have to lean in), the romanization `tanso.group` in mono beneath it, and a single line: `collective carbon ledger — open since 2021 — entries: 1,418`. A blinking block cursor sits after the entry count and never stops. No buttons. No scroll-down chevron. 2. **THE PREAMBLE** — three short paragraphs, hung indents, with running footnote markers `[1] [2] [3]` that link to the margin. 3. **STRATUM I — WHAT WE MEASURE** — full-bleed black band; a raw HTML `` with visible borders listing measurement domains (soil organic carbon, blue-carbon kelp lines, biochar yield, freight reroute deltas), each row a hyperlink to its own sub-ledger view. 4. **STRATUM II — THE FIELD LOG** — a vertical timeline rendered as a left-margin rule with date ticks; each entry is a dated block of mono text, some struck through (`~~retracted — sampling error, see addendum~~`), preserving the corrections in place rather than hiding them. 5. **STRATUM III — THE TALLY** — a single giant running figure, set in oversized condensed type, that animates by *counting* from zero on scroll-into-view: net tonnes of carbon the collective claims to have moved, with the ± uncertainty band shown smaller and never collapsed. 6. **COLOPHON** — printer's marks: who set this, what it was made with, the license (CC0), a final hairline rule, and the cursor blinking one last time. The right margin (desktop ≥1100px) is a live **footnote rail** — actual footnotes pinned beside the paragraph that cites them, in 12px mono, the way a critical edition prints apparatus. On narrow screens footnotes collapse to inline `
`. ## Typography and Palette **Type system (Google Fonts only):** - **Display / masthead / the big tally:** `Archivo Black` — a single weight, brutally heavy, near-rectangular grotesque. Used only for `炭素`-scale moments and the running tally figure. Tracked tight: `letter-spacing: -0.02em`. Where Japanese glyphs are needed, fall back to `Noto Sans JP` (weight 900) so `炭素` matches the slab heft. - **Condensed sub-headings / stratum labels:** `Archivo Narrow` (weight 700, uppercase, `letter-spacing: 0.14em`) — narrow enough to read as "stamped on a sample bag". - **Body, footnotes, all tabular data, the cursor:** `IBM Plex Mono` (weights 400 and 600). Everything numeric is mono so columns *almost* align and the misalignment is visible and honest. Body size 16px / line-height 1.7; footnotes 12px / 1.55. No third "friendly humanist" face. The contrast is purely heavy-grotesk vs. mono — that *is* the type system, and the starkness is the point. **Palette — "ash holding heat":** - `#0B0B0C` — **carbon black** (page background of the strata bands, masthead, all heavy type on light ground) - `#F4F2EC` — **photocopy paper** (default page background — warm grey-white, faintly yellowed, never pure #fff) - `#3A3A3C` — **graphite** (the low-contrast `炭素` on black; body text on the paper ground sits a touch darker at `#1A1A1B`) - `#9A9893` — **fixed-out grey** (hairline rules, table borders, struck-through retracted entries, footnote rail text) - `#D8431B` — **ember orange** (the one accent — used in exactly three places site-wide: the masthead's blinking cursor, the live `±` uncertainty band on the tally, and the `[n]` footnote markers; never as a button fill, never as a gradient) - `#C8C5BC` — **margin tint** (a barely-perceptible block fill behind the footnote rail and behind retracted log blocks, so corrections read as "shaded into the record") No gradients anywhere. No drop shadows except a single hard 2px-offset, zero-blur `#0B0B0C` shadow on the strata-band table to suggest it's a physical card laid on the page — the brutalist "show the join" move. ## Imagery and Motifs **No photography. No illustration. No 3D. No stock anything.** The imagery is *typographic and tabular* — the page builds its own pictures out of rules, monospace, and ink. - **The strata band** — full-bleed black rectangles with a 1px ember-orange hairline at top and bottom only; conceptually a core sample of dark matter driven through the white document. Three of them, increasing in height down the page (I < II < III), so the page literally "gets heavier". - **Exposed tables** — every dataset is a real `
` with `border-collapse: collapse` and visible `1px solid #9A9893` on every cell. Column headers in `Archivo Narrow` caps. Numeric cells right-aligned in Plex Mono. Hover on a row inverts it to carbon-black ground / paper-white text with no transition softening — a hard snap. - **The struck record** — retracted log entries are not deleted; they're wrapped in ``, tinted with the margin grey, and a small note appended in ember `[corrected → entry #N+1]`. The visual motif is *the ledger that won't lie about its own mistakes*. - **Hairline apparatus** — thin rules everywhere a printed critical edition would put them: under the masthead, between log entries, framing the footnote rail, a doubled rule before the colophon (thick over thin, the traditional "end of section" mark). - **The blinking cursor** — a solid ember `#D8431B` block `▉`, `1ch` wide, that blinks at exactly 530ms on/off (the classic VT100 rate) and appears after the masthead's entry count and at the very end of the colophon, as if the ledger is still being written. - **Footnote markers** — superscript `[1]`, `[2]` … in ember mono, that on hover draw a 1px ember leader line across the gutter to the matching note in the right rail (an SVG path that draws on, then erases on mouse-out). - **Grain** — a single faint photocopier-noise overlay (CSS `background` of a tiled 1% noise data-URI) at ~4% opacity over the paper ground only, never over the black bands, so the document feels reproduced rather than rendered. ## Prompts for Implementation Build tanso.group as **one HTML file, one CSS file, one small ES module** — no framework, no build step, no service worker, no cookie banner. The page is a 90-second read of a carbon collective's working ledger. There is **no CTA, no pricing block, no stat-grid of three glossy numbers, no testimonial carousel, no email capture, no logo wall, no "trusted by", no contact form, no FAQ accordion, no newsletter, no chat bubble**. If you feel the urge to add a hero button, add a footnote instead. **Storytelling structure (single vertical document, scroll-driven, no horizontal anything):** 1. **Masthead band.** ~46vh of `#0B0B0C`. `炭素` in `Archivo Black`/`Noto Sans JP 900` at `clamp(5rem, 14vw, 11rem)`, color `#3A3A3C` — *deliberately low contrast against the black*, so the user leans in; this is the anti-design dare. Beneath: `tanso.group` in Plex Mono `#F4F2EC`, then the one-liner with the live entry count and a blinking ember `▉`. Nothing else. On load, the masthead does NOT fade in — it's just there, like a page already printed. The only motion is the cursor. 2. **Preamble.** Three terse lowercase paragraphs on the `#F4F2EC` ground, hung-indent, with ember `[1] [2] [3]` markers. On scroll-into-view each paragraph does a *hard, fast* reveal — `opacity 0→1` and `translateY(8px→0)` over 180ms with `ease-out`, **staggered** 60ms per block. No spring, no bounce, no blur. Brutalism's reveal is curt. 3. **Stratum I — black band, the measurement table.** Full-bleed `#0B0B0C`, `2px offset / 0 blur` hard shadow on the inner `
` which sits on a `#F4F2EC` slab inside the black. Real `
`: columns `DOMAIN | METHOD | UNIT | LAST SAMPLED | SUB-LEDGER`. Header row in `Archivo Narrow` caps. Each row a link; `:hover` inverts the entire `` instantly (carbon ground, paper text) — implement with `background`/`color` change and `transition: none` so the snap is felt. 4. **Stratum II — the field log / vertical timeline.** Left-margin vertical rule `1px #9A9893`; date ticks every entry. Each entry: `2021-09-04 · soil core, plot 7N · +0.92 t SOC (provisional, ±0.3)` in Plex Mono, dated, dense. Salt in 4–6 retracted entries using `` + margin-grey tint + ember `[corrected → #N+1]`. Entries reveal on scroll with the same 180ms curt fade, staggered. A thin ember leader can draw from a footnote marker to the right rail (SVG `path` with `stroke-dasharray` animation on hover, reversed on mouseout — this is the one path-draw-svg flourish, used sparingly). 5. **Stratum III — the tally.** Tallest black band. One enormous figure in `Archivo Black` condensed feel (`Archivo Narrow 700` if you want it tighter), `clamp(4rem, 12vw, 9rem)`, color `#F4F2EC`, that **counts up from 0** to the net-tonnes figure when it scrolls into view (ease-out over ~1.6s, requestAnimationFrame, formatted with thin-space thousands). Directly beneath, smaller, in ember `#D8431B`: `± 41 t (uncertainty band — NOT collapsed, NOT rounded away)`. The uncertainty must never be hidden; that refusal is the editorial stance. 6. **Colophon.** Back on paper ground. Printer's-marks block in 12px Plex Mono: `set in archivo & ibm plex mono · measured in the field · code & data: CC0 · no analytics, no cookies, no newsletter`. A doubled rule above it (3px solid over 1px solid, 4px gap). One last blinking ember `▉` at the very end — the ledger is still open. **Right-margin footnote rail (desktop ≥1100px):** a fixed-width (~220px) gutter to the right of the 720px measure; each `[n]` footnote rendered there, pinned vertically near its citation, in `#9A9893` 12px mono on a faint `#C8C5BC` tint, with a `1px #9A9893` left border. On hover of either the marker or the note, both go ember and the SVG leader draws between them. Below 1100px the rail collapses; footnotes become inline `
[n]…
` with a hard, instant disclosure (no slide). **Global interaction texture:** a custom cursor of a tiny 1ch ember block `▉` is *too cute* — do NOT do that. Instead: text selection highlight is restyled to carbon-black ground / ember text (`::selection`). Links are plain `#1A1A1B` with a `1px` ember underline that on hover thickens to `2px` instantly. Focus rings are a hard `2px solid #D8431B` outline, offset 2px — visible, brutalist, unapologetic. Reduced-motion: kill the count-up (show final figure immediately), kill the staggered reveals (show all), keep the cursor blink (it's the heartbeat of the document and harmless). Everything else stays exactly as stark. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **A carbon/climate site that is matte, not lush.** The corpus's nature/eco entries lean botanical-illustration, forest-green, organic-blobs, pastoral-romantic warmth. tanso.group does the opposite: carbon as *graphite and soot*, rendered as a brutalist photocopied ledger — anti-design (5% of corpus), raw-authentic tone (3%), with zero photography in a corpus where 98% of sites use it. 2. **Tables as the hero, not cards.** 92% of designs use card-grid; this one bans it outright and makes the exposed HTML `
` — borders visible, rows that hard-invert on hover — the central visual object. Layout is editorial-flow (4%) / timeline-vertical (6%), a narrow left-aligned measure that never centers. 3. **A right-margin footnote rail like a critical edition.** Not a sidebar nav, not a TOC — an apparatus criticus: footnotes pinned beside the lines that cite them, with ember leader lines that draw between marker and note. Nothing else in the corpus treats the margin as scholarly apparatus. 4. **Honesty as decoration.** Retracted log entries are struck through *in place* with their corrections appended; uncertainty bands are shown and explicitly "NOT rounded away". The design's only ornament is the data refusing to flatter itself — a stance, not a style. 5. **Curt motion only.** Against a corpus that is 89% parallax, 83% spring, 78% magnetic, 89% cursor-follow — tanso.group uses none of those. Its entire motion vocabulary is: a 530ms VT100 cursor blink, a hard 180ms staggered fade, one scroll-triggered count-up, and one hover-drawn SVG leader. No spring, no bounce, no tilt, no magnetism. **Documented chosen seed/style:** `brutalist anti-design experiment` — interpreted as a carbon collective's working field-ledger: brutalist anti-design aesthetic, editorial-flow + timeline-vertical layout, Archivo Black / Archivo Narrow / IBM Plex Mono typography, an "ash holding heat" monochrome+ember palette, typographic/tabular imagery (no photos), grid-lines + book-scholarly motifs, raw-authentic / edgy-rebellious tone. **Avoided patterns from frequency analysis:** card-grid (92%), full-bleed-as-glossy-hero, centered layout (80%), photography (98%), warm gradient palettes (93% gradient / 98% warm — used only one matte ember accent, no gradients), glassmorphism (85%), hand-drawn (94%), cursor-follow (89%), parallax (89%), spring (83%), magnetic (78%), tilt-3d (32%), counter-animate kept to a single justified instance, stat-grids and CTA-heavy layouts excluded entirely.