# Design Language for tanso.markets ## Aesthetics and Tone tanso.markets is an **isometric exploded-axonometric atlas of the carbon economy** — imagine a vintage IBM systems-engineering wall chart from 1974 redrawn for the planet's atmosphere: every part of how carbon moves (a forest registry, a verification audit, a retired-credit ledger, a tonne of CO₂ leaving a smokestack) is rendered as a small **isometric mechanical diagram**, drawn at a fixed 30° projection, floating on a pale drafting-paper field. The mood is *cool, precise, quietly serious* — `professional` crossed with `scholarly-intellectual`, but never sterile. It is the tone of a good infrastructure documentary: this is plumbing, this is machinery, this is something you can actually look at and understand. There is no greenwash gradient-mesh, no soft-focus aerial-of-a-rainforest hero, no glowing leaf. Carbon markets are an *accounting apparatus*, and the site looks like one — like a beautifully kept technical manual whose every figure is hand-built from clean isometric line-work and four flat inks. The word **tanso** (炭素, "carbon") is treated as a material, not a feeling: a numbered element on a periodic chart, a substance that flows through pipes and meters and gets booked into ledgers. The whole experience reads like turning the pages of a *Field Manual for a Substance* — Chapter 1: where it comes from. Chapter 2: how we count it. Chapter 3: how it is retired. Calm, exact, almost clinical, with the dry confidence of people who measure things for a living. ## Layout Motifs and Structure The governing layout is **isometric technical docs** (14% in the registry — present but never the dominant idiom) executed as a **single continuous vertical drafting sheet**, not a card-grid and not a dashboard. The page is one long sheet of pale grid paper, and the visitor scrolls *down through a cutaway* of the carbon system — top of the sheet is the atmosphere and emission sources, the middle is measurement and verification machinery, the bottom is the registry, retirement, and the permanent ledger. Each "plate" in the manual occupies roughly one viewport and contains exactly one isometric assembly drawn at true 30°/30° projection, anchored to a faint isometric floor-grid that runs the full height of the document (the grid is the only background; it never scrolls away — content plates float a few millimetres above it on subtle drop-shadows, like overlay sheets on a light table). Plates are connected by **call-out leader lines**: thin diagonal strokes with a small filled dot at the diagram end and a number in a circle at the text end, so reading the page feels like reading an annotated cutaway. A persistent **left margin rail** (≈ 64px wide) runs the whole document carrying plate numbers (`PLATE 01`, `PLATE 02`, …) set vertically in mono, plus a tiny isometric-cube progress glyph that fills face-by-face as you descend. No top nav bar — navigation is a thin **index strip** that lives in that left rail and expands on hover into a list of plate titles. The grid is **single-column and centred** within an 880px measure for all prose; only the isometric drawings are allowed to break that measure and bleed toward the edges. Nothing is asymmetric for style's sake — the asymmetry that exists is the natural asymmetry of an axonometric drawing (things recede up-and-to-the-right), which is honest to the projection, not decorative. ## Typography and Palette **Fonts (Google Fonts only):** - **`IBM Plex Mono`** — the structural voice. Used for *all* labels, plate numbers, leader-line callouts, dimension figures, axis ticks, unit suffixes (`tCO₂e`, `MtCO₂`, `vintage 2024`), table cells, and the index rail. IBM Plex Mono is the natural lettering of a systems diagram: even-width, engineered, slightly humanist in its terminals so it never feels like raw terminal output. Set tight, `letter-spacing: 0.04em`, often UPPERCASE for labels. - **`IBM Plex Sans`** — the reading voice for body prose and plate descriptions. It is the sans companion drawn by the same hand as the mono, so the page has the coherence of a single type system (the way a real IBM manual did). Body at 18px / 1.65, comfortably set in the 880px measure. - **`Spectral`** — the *editorial* voice, used sparingly and only for the large plate titles and the single opening statement. Spectral is a screen-tuned serif with sharp, almost technical bracketing; against the two Plex faces it reads like the chapter heads of a well-typeset reference book — authoritative, not romantic. Plate titles in Spectral SemiBold, ~42–56px, tracked slightly negative. **Palette — "drafting paper + four inks":** - `#F4F1E8` — **drafting bone**, the paper. A warm-neutral off-white, the colour of good vellum, the entire background. - `#1C1B18` — **graphite black**, the line. Near-black with a trace of warmth; all line-work, all type, the isometric edges. - `#2D6A4F` — **registry green**, the one carbon-colour, used *only* for verified / retired / "on the ledger" states and for the single accent rule under each plate title. A deep, ledger-ink green — not a hopeful leaf-green. - `#C1440E` — **emission rust**, the warning ink, used for emission sources, uncounted tonnes, and the "before" side of every comparison. A burnt iron-oxide orange, the colour of a smokestack diagram. - `#3D5A80` — **meter blue**, the instrument ink, used for measurement / verification machinery, gauges, sampling lines, and hover states on interactive parts. A cool steel-blue. - `#D9D3C0` — **grid ash**, a barely-there warm grey for the isometric floor-grid, secondary dimension lines, and table rules. Default text is `#1C1B18` on `#F4F1E8`. The four inks (green, rust, blue, ash) are *flat fills only* — no gradients ever appear inside a shape; depth comes from line-weight and the projection, the way it does in a real axonometric. ## Imagery and Motifs **Imagery is hand-built isometric line-illustration only** — no photography, no gradient-mesh, no 3D-raster, no stock. Every figure is an inline SVG drawn on the 30° isometric grid with consistent stroke weights (`2px` primary edges, `1px` secondary, `0.5px` hatching) in `graphite black`, filled with at most one of the four inks plus a 12%-tint of `grid ash` for shadow faces. **The recurring iconographic system — "the carbon apparatus":** - `PLATE 01 — THE SOURCE` — an isometric cutaway of an emission stack: a small industrial block, a chimney, and a single cube of `emission rust` rising from it labelled `1 tCO₂e`. The cube is the unit-of-account; it reappears, identical, on every later plate. - `PLATE 02 — THE FIELD` — an axonometric patch of forest / soil rendered as a stepped contour model, each contour a thin line, with measurement stakes (`meter blue`) driven into it at sample points; little flux towers cast 30° shadows. - `PLATE 03 — THE INSTRUMENT` — an exploded-view of a monitoring assembly: sensor, datalogger, satellite uplink, drawn the way a Haynes manual explodes a carburettor, parts floating apart along the isometric axes connected by dashed alignment lines. - `PLATE 04 — THE VERIFICATION` — an isometric desk with a stamp, a magnifier, and a stack of paper; the rust cube from Plate 01 enters one side and exits the other re-rendered in `registry green` — the same cube, now *verified*. This is the site's central visual gag and its whole thesis. - `PLATE 05 — THE LEDGER` — a long isometric drawer / card-index, each card a credit with vintage, project ID, and status; cards can be pulled half-out on hover (a 30°-correct slide). - `PLATE 06 — THE RETIREMENT` — the green cube being dropped into a sealed isometric vault and a serial number being struck through; below it, a tiny line reading `permanently removed from circulation`. Decorative motifs throughout: **isometric floor-grid** (the only "texture"); **leader/callout lines** with numbered circles; **dimension lines** with arrowheads and figures (`12 m`, `2024`, `Δ −1 tCO₂e`); a recurring **unit-cube** glyph; small **registry stamps** (a circle of mono text around a checkmark) marking verified content; **fold marks** and **plate numbers** in the corners like a real engineering drawing. Sharp angles, layered depth, abstract-tech — but rendered in the restrained, paper-bound way of a manual, not the neon way of a sci-fi HUD. ## Prompts for Implementation Build tanso.markets as **one HTML file, one CSS file, one ES module, and an `svg/` directory of six hand-drawn isometric plates plus a few shared glyphs (`unit-cube.svg`, `stamp.svg`, `iso-grid.svg`)**. No framework, no bundler, no build step. No WebGL, no Lottie, no ``. All animation is CSS, plus a small `IntersectionObserver` driver in the module. Respect `prefers-reduced-motion` by disabling transforms (but the page must still read perfectly as a static manual — that is the point of choosing a drawn aesthetic). **Document structure:** ```

炭素 / tanso

…inline SVG…
PLATE 01

The Source

…IBM Plex Sans prose, 880px measure…

…plates 02–06…
…drawn-and-set-by line, Plex Mono…
``` **Narrative & motion (storytelling-first, full-screen, scroll-driven):** - The page is *read top-to-bottom as a descent through the carbon system* — atmosphere/source at the top, measurement in the middle, ledger/retirement at the bottom. Scrolling is the only interaction needed to get the whole story. - On entering each plate, the isometric SVG **draws itself**: `path-draw-svg` on the line-work via `stroke-dashoffset` (primary edges first, then hatching, ~700ms, eased `cubic-bezier(.2,.7,.3,1)`), then flat fills `fade-reveal` in. Use `stagger` so parts of an exploded view assemble along the axes. - The **leader line** between figure and annotation animates last: the diagonal stroke draws from the figure outward, the numbered circle pops in at the end with a tiny `spring`. - **The unit-cube is the through-line.** A small isometric cube glyph rides in the left rail; as you pass Plate 01 it is `emission rust`; as you scroll through Plate 04 it transitions to `registry green` (a clean colour swap on a clip, not a gradient); by Plate 06 it shows a struck-through serial. Optionally a `scroll-triggered` sticky moment where the rust cube visibly slides through the "verification desk" as that plate centres. - Hover on any labelled part of a diagram: the part lifts a hair along the isometric Z (translate up-left a couple px), its label switches to `meter blue`, and a thin dimension line with a figure draws beside it (`underline-draw`-style reveal of the dimension). This is the only `tilt-3d`-adjacent effect and it must stay subtle and projection-correct. - The `cube-progress` glyph in the rail fills **face by face** (3 visible isometric faces) as the document scrolls — a quiet `counter-animate` companion can tick a `tCO₂e counted` figure beside it. - Plate titles arrive with a short `fade-reveal` + the `registry green` rule drawing left-to-right beneath them. **AVOID:** no hero with a CTA, no pricing tables, no stat-grid of giant numbers, no "trusted by" logo wall, no testimonial carousel, no glassmorphism panels, no gradient-mesh blobs, no rainforest photography, no glowing leaf. The page sells nothing; it *explains a machine*. ## Uniqueness Notes Deliberate departures from the 600+ designs already in the registry and from generic carbon-market styling: 1. **Carbon markets rendered as cold systems-engineering, not warm eco-marketing.** Climate sites overwhelmingly default to `forest-green` + `gradient-mesh` + aerial photography + a glowing-leaf hero. This design refuses all of it: a `drafting-bone` paper, four flat technical inks, and zero photography. The mood is a 1970s IBM systems manual, not a sustainability brochure — `professional`/`scholarly-intellectual`, not `pastoral-romantic` (the registry's most common tone at 32%). 2. **One continuous isometric drafting sheet, not a card-grid or dashboard.** `card-grid` (92%) and `dashboard` (35%) dominate the registry; this is a single vertical cutaway you descend through, with a persistent fixed isometric floor-grid as the only background and content plates floating on it like light-table overlays. `isometric technical docs` layout (14%) and `isometric` aesthetic (14%) are present-but-uncommon, and almost never combined with a manual/field-guide framing. 3. **The unit-cube as a narrative protagonist.** A single isometric cube labelled `1 tCO₂e` is born at an emission stack in rust, passes through a verification desk and turns registry-green, and is finally sealed in a vault with a struck serial — a literal object you follow down the page. This is `path-draw-svg` + `stagger` + a scroll-triggered colour swap, not the registry's near-ubiquitous `cursor-follow`/`parallax`/`magnetic` triad. 4. **A typographic system, not a font pairing.** `IBM Plex Mono` + `IBM Plex Sans` + `Spectral` is chosen so the entire page reads as one coherent reference-manual type system (the way a real IBM doc did) — mono for the apparatus, sans for the prose, Spectral serif only for chapter heads. `mono` is technically common (94%) but almost always as a *terminal/cyberpunk* signifier; here it is *drafting-label* mono. 5. **Imagery is hand-built isometric line-illustration only — no photography (98% of the registry uses it), no 3D-raster, no gradient-mesh.** Depth comes from line-weight and true 30° projection, never from a gradient inside a shape. Chosen seed/style: **isometric technical docs**. Avoided patterns from frequency analysis: `hand-drawn` (94%) and `glassmorphism` (85%) aesthetics; `photography` (98%) imagery; `card-grid` (92%) / `full-bleed` / `centered` default layout cluster (used only the centred *measure*, not the card-grid); `warm` (98%) + `gradient` (93%) palette default (warm-neutral *paper* + flat inks, no gradients); the `cursor-follow` / `parallax` / `spring` / `magnetic` (78–89%) motion cluster (used `path-draw-svg`, `stagger`, `fade-reveal`, `scroll-triggered`, `counter-animate` instead); `pastoral-romantic` tone (32%).