# Design Language for tanso.news ## Aesthetics and Tone tanso.news ("tanso" — 炭素, *carbon*) is a **risograph-printed carbon dispatch**: a climate-and-emissions newsroom that looks like it was run off a two-drum Riso machine in the back of a soil-science department, then scanned slightly crooked. The governing aesthetic is **grainy-textured** — every surface carries a visible ink-grain stipple, mis-registration haloes, and the gentle tooth of recycled-pulp paper. Nothing is glossy. Nothing glows. The site reads like a field broadsheet that has been folded once, carried in a coat pocket, and unfolded on a windy ridge. The tone is **grounded-earthy** — sober, soil-deep, unhurried. tanso.news does not shout about catastrophe with red sirens; it reports the carbon cycle the way a long-form naturalist reports a river: with patience, with respect for the data, and with a faint melancholy under the prose. The voice is that of a measured field correspondent — someone who has stood at a flux tower at 4 a.m. and watched the CO₂ numbers breathe with the sunrise. Headlines are plain and declarative. Captions read like ledger entries. The mood sits between a Whole Earth Catalog page and a peat-core sample log. Inspiration touchstones: Risograph zine culture (the GR Green / Black two-pass look), 1970s ecology pamphlets printed on cheap stock, the carbon-curve plots of the Keeling record, mycelial root diagrams, and the quiet typographic restraint of a forestry service field manual. The emotional target is *attention without alarm* — the reader should feel they are being trusted with the numbers, not frightened by them. ## Layout Motifs and Structure The structure is **editorial-flow** — a single broadsheet column that scrolls vertically as one continuous "issue," with no card-grid, no bento, no dashboard. Think of unrolling a paper scroll rather than clicking through tiles. Sections are separated not by boxes but by **printed rules** — thin ink hairlines, fold-creases, and small registration crosses (✛) parked in the margins where a real press operator would line up the second drum. Spatial system: - **The Margin Ledger.** A persistent narrow left margin (≈8vw on desktop) holds a running vertical column of small data marginalia: the current atmospheric CO₂ figure, a date stamp, a "dispatch №" counter, and tiny tick marks. It behaves like the perforated edge of continuous-feed printer paper. On mobile it collapses to a thin top strip. - **The Issue Masthead.** The page opens full-bleed with an oversized newspaper-style masthead: "tanso.news" set huge in a tight grotesque, an em-rule beneath, and a one-line "Carbon, measured." standfirst. Below it, a single hero passage — no buttons, no signup. - **Stacked dispatches.** Below the masthead, content flows as a sequence of "dispatches" — each is a headline, a standfirst, a body passage, and (often) one inline data figure rendered as a stippled SVG plot. Dispatches are divided by fold-crease rules, never by cards. - **Marginal pull-data.** Numbers float into the right gutter as hanging marginalia — a single big risograph-green numeral with a hairline leader line pointing back to the sentence it annotates. - **The Colophon footer.** The page ends like a zine back-cover: a printed colophon block — "Printed in two passes. Forest Green over Carbon Black. tanso.news, dispatch series." — set small, centered, with two overlapping mis-registered ink swatches. Composition rule: **everything aligns to a visible baseline grid** (24px), and 1–2% of elements are *deliberately* nudged 1–2px off that grid to mimic press drift. Wide measure for headlines (full column), narrow measure for body (≈62ch max) so reading feels like a real newspaper column. ## Typography and Palette **Fonts (Google Fonts only — a two-voice press, like a two-drum Riso):** - **Masthead & Headlines — *Archivo Expanded* (variable, wght 700–900, width Expanded)** — a sturdy grotesque that goes wide and heavy without becoming a display gimmick. Used for "tanso.news", dispatch headlines, and the big marginal numerals. Tracked tight at large sizes so the masthead reads as one inked slab. This is the **grotesque-neo** voice. - **Standfirsts & UI marginalia — *Archivo* (regular grotesque, wght 400–600)** — the same family at normal width for sub-heads, the margin ledger, captions, and the colophon. Keeps the page coherent like a single typeface kit a small press would actually own. - **Body text — *Spectral* (serif, wght 400, occasional 400 italic)** — a quiet, slightly humanist serif with good ink-trap personality at small sizes; carries the long passages so the reading body feels like a printed broadsheet, not a website. Italic Spectral is reserved for ship's-log-style captions and footnotes. - **Data labels & tick marks — *Spline Sans Mono* (wght 400)** — monospace for axis numbers, CO₂ ppm readouts, dates, and the "dispatch №" counter, so the data has a measured-instrument flavor. **Palette — two-pass risograph (Forest Green over Carbon Black on warm pulp):** - `#F4F1E6` — **Pulp** — the recycled-paper ground. Warm, faintly green-grey, never pure white. - `#1C1B17` — **Carbon Black** — the first ink pass; body text, hairlines, masthead. Not #000 — a soft charcoal that looks like real ink soaked slightly into stock. - `#2E5E3A` — **Forest Green** — the headline / data ink; the "second drum." Risograph forest green, deep and a little dusty. Used for headlines, plot lines, marginal numerals. - `#A7C4A0` — **Lichen** — a pale wash of the green for fills, gridlines, and overprint zones. - `#C9462C` — **Oxide** — a sparing third "spot" ink (used on ≤2% of the page): a burnt iron-oxide red for the single most important figure in a dispatch and for registration crosses. Evokes a third Riso drum brought out only when it matters. - `#8C8A7E` — **Ash** — muted warm grey for de-emphasized marginalia, fold-crease shadows, and disabled states. Overprint behavior: where Forest Green and Carbon Black overlap (headline shadows, the colophon swatches), blend toward a near-black bottle green `#13231A` to simulate two inks stacking. ## Imagery and Motifs **No photography. No 3D renders. No stock illustration. Every visual is hand-built SVG with a grain filter applied.** The imagery vocabulary is the **data-viz of the carbon cycle**, drawn as if printed: - **The Breathing Curve.** A recurring motif — a Keeling-style sawtooth CO₂ line that rises year over year while wobbling with the seasons. Rendered as a single Forest Green stroke with a subtle stipple texture, drawn-on as the reader scrolls. It is the site's heartbeat graphic and reappears at small scale in the margin ledger. - **Flux ribbons (wave-forms).** Horizontal banded ribbons representing carbon flux — ocean uptake, soil respiration, photosynthesis — drawn as overlapping translucent Lichen-green waveforms, like a printed spectrogram. They serve as section dividers and ambient background bands. - **Root / mycelial diagrams.** Thin-line botanical-style schematics of root systems and fungal networks, used as decorative full-bleed underlays at very low opacity behind long passages — a nod to soil carbon storage. - **Registration crosses & color bars.** The classic print-shop ✛ marks and a tiny CMYK-style color bar (here: Pulp / Black / Green / Oxide) parked in corners and margins. Honest, structural decoration. - **Stippled fills.** Any area of "color" is actually a dot-stipple at 2–4 dot densities — no flat fills anywhere. SVG `` of small circles, plus a global SVG `feTurbulence` grain overlay at ~6–8% opacity sitting above everything like paper tooth. - **Fold creases.** Faint diagonal highlight/shadow lines suggesting the broadsheet has been folded — one horizontal third-fold near the masthead, one vertical half-fold down the page. - **Hand-set numerals.** Big marginal data numbers get a 1px mis-registered green "ghost" offset behind the black numeral — the look of an imperfect second pass. ## Prompts for Implementation Build tanso.news as **one single scrolling broadsheet** — one HTML file, one CSS file, one JS module. No CTAs, no pricing blocks, no stat-grids-as-bragging, no testimonial rows, no email-signup band, no contact form. Just an "issue" the reader scrolls through, top to bottom, like unrolling a printed dispatch. **Narrative structure (vertical scroll, scroll-triggered reveals):** 1. **The Masthead.** Full-viewport. "tanso.news" in huge Archivo Expanded Black, Carbon Black with a 1px Forest Green ghost offset. Em-rule beneath. Standfirst: "Carbon, measured. A field dispatch on the element that warms the world." A tiny live-ish line in the margin: "atmospheric CO₂ — ~426 ppm — and rising." Faint third-fold crease across the lower third. As the page is loaded, the grain overlay fades up over ~600ms. 2. **Dispatch I — The Curve That Breathes.** A passage on the Keeling record. Inline, the Breathing Curve SVG draws itself left-to-right as this section enters the viewport (path-draw, ~2s, eased). A single Oxide numeral hangs in the right gutter with a hairline leader: the year-over-year increase. 3. **Dispatch II — Where the Carbon Goes.** Flux ribbons (wave-forms) animate in as overlapping Lichen bands — ocean, land, atmosphere — each band sliding up and settling with a faint overshoot. Body text in Spectral explains the partition. Marginalia ticks update as you scroll past. 4. **Dispatch III — The Slow Bank Underground.** Root/mycelial schematic underlay fades in behind the column at ~12% opacity, drawn-on with a slow path animation. Passage on soil carbon. Captions in italic Spectral, set like ledger entries. 5. **Dispatch IV — The Ledger Today.** Three or four hanging marginal numerals appear in sequence (staggered, each with its green ghost-offset settling 1px), each annotating a sentence in the body via a leader line. This is the closest the page gets to a "stat" moment — but it is prose with marginalia, never a grid of boxes. 6. **The Colophon.** Zine back-cover. Two overlapping mis-registered ink swatches (Black + Green, overprint = bottle-black). Small centered text: "Printed in two passes — Carbon Black, Forest Green, and one drum of Oxide held in reserve. tanso.news — a dispatch on the carbon cycle." A final ✛ registration cross and the Pulp/Black/Green/Oxide color bar. **Motion vocabulary — restrained, "press-like":** - Primary pattern is **scroll-triggered** reveals: text passages rise 12–16px and fade in as they cross a threshold; section rules "ink in" via a clip-path wipe left-to-right. - The Breathing Curve and root diagrams use **SVG path-draw** (`stroke-dashoffset`) on enter. - Marginal numerals enter with a tiny **overshoot/settle** (≈1–2px) to mimic a second-pass mis-register, not a bouncy spring. - Global **grain**: an SVG `feTurbulence` + `feColorMatrix` overlay fixed above the page at 6–8% opacity; optionally a very slow (~8s) micro-jitter of the turbulence seed so the paper "lives." Provide a reduced-motion path that freezes it. - A faint **paper drift** on the whole content column: ≤1px sub-pixel translate tied to scroll, so the broadsheet feels physically held. No parallax depth layers, no cursor-follow, no tilt-3d. - Links: underline is a hairline that "draws" in Forest Green on hover; visited dispatches get a small filled ✛ in the margin ledger. **Build notes:** semantic `
` per dispatch, `