# Design Language for tanso.market ## Aesthetics and Tone "Tanso" (炭素) is the Japanese word for carbon — the element, the soot, the charcoal stick, the diamond, the thing that gets traded by the tonne on exchanges nobody can picture. tanso.market refuses the obvious moves: no green forests, no glassy fintech dashboards, no glowing globes wrapped in flight-path arcs. Instead it is built as a **wabi-sabi carbon atelier** — a quiet, kiln-warm workshop where carbon is treated as a *physical material with a maker's history*, not an abstract financial instrument. The governing image is a low wooden shelf in raked light, holding a row of hand-thrown charcoal-black ceramic vessels, each one a "lot" of sequestered carbon, each one cracked and rejoined with a thread of gold — **kintsugi**, the art of honoring the break. The tone is **zen-contemplative and grounded-earthy**, with an undercurrent of *raw-authentic* honesty: this is a market, and markets are imperfect, illiquid, occasionally cracked — wabi-sabi says show the crack, gild it, do not pretend. Copy speaks slowly, in short declaratives, the way a potter describes a glaze. There is dust in the air (literally — a faint drifting ash particle layer). Everything is slightly off-axis, slightly hand-placed, never snapped to a rigid grid. The mood is the opposite of "trade now": it is "sit with this, understand what a tonne of carbon weighs in the world, then decide." Inspirations: a charcoal-maker's drying barn in Wakayama; the *kanna-me* turning marks left on a tea bowl; sumi ink bleeding into kozo paper; the asymmetry of a Korean moon jar; the matte black of bizen-yaki pottery; the gold seams in a Rakuware chawan. ## Layout Motifs and Structure The corpus is drowning in **card-grid (92%)**, **full-bleed (85%)**, and **centered (80%)** layouts. tanso.market discards all three lattices. The structure is the **shelf-and-vessel**: a single, slow vertical scroll organized as a stack of **horizontal raked-light shelves** (`stacked-sections`, only 3% in corpus) — each shelf a wide, low band of warm-paper color, lit from one raking side so the band has a soft luminance gradient and a long shadow beneath, the way a real shelf in a workshop catches afternoon light. - **The shelf rhythm.** Roughly five to seven shelves, top to bottom: (1) *The Atelier* — title shelf, one large slowly-rotating vessel and the wordmark hand-set beside it; (2) *What a Tonne Weighs* — a contemplative passage that translates abstract carbon volumes into physical analogues (a tonne ≈ a sphere of CO₂ ten metres across), rendered as ink-line diagrams; (3) *The Shelf of Lots* — the actual market, listings as ceramic vessels on a wooden plank, arranged with deliberate uneven spacing (`organic-flow`, `ma-negative-space` — both underused); (4) *Provenance* — how each lot was made (the project, the place, the verification), shown as a maker's mark / hanko stamp scroll; (5) *The Cracked Ledger* — a quiet honest section on the imperfections of carbon markets, gilded not hidden; (6) *Settling* — the close, an empty shelf in fading light. - **Off-grid placement.** Vessels are never centered in their slots. Each sits 3–14px off the implied baseline, rotated ±0.5–2.5°, with hand-tuned gaps. The negative space (the *ma*) between vessels is the composition — it is generous, asymmetric, and load-bearing. - **No navigation bar.** A single thin vertical *kiln-temperature gauge* runs up the left edge — a slim sumi line with notch marks; as you scroll it "fires up," the notch glowing copper-gold at your current shelf. That is the only chrome (`minimal-navigation`, 5%). - **The plank.** Each market shelf rests on a hand-drawn wood-grain plank SVG — knots, end-grain, a nail head — never a flat rectangle. ## Typography and Palette **Typography — three voices, all on Google Fonts, biased toward the underused `elegant-serif` / `humanist` register rather than the corpus's 94%-saturated `mono`:** - **Display & Wordmark — *Shippori Mincho* (weights 400, 600, 800).** A Japanese-rooted Mincho-style serif (it ships full Latin glyphs too) with crisp brush-cut serifs and a calligraphic spine — it carries both "炭素" energy and "atelier" refinement. Used at 56px → 132px for "tanso.market" set lowercase with wide letter-spacing, and for shelf titles at 30px → 52px. The wordmark's dot in ".market" is replaced by a tiny gold-gilt crack mark. - **Body & Contemplative passages — *Spectral* (weights 300, 400, 500 italic).** A gentle, slightly literary serif with a warm reading rhythm; the 300 weight at generous 19px/1.85 line-height makes the copy feel like a letterpress essay, not UI text. Italics for the "what a tonne weighs" analogies. - **Maker's marks & micro-labels — *IBM Plex Mono* (weight 400, sparingly).** Only for lot IDs, tonnage figures, vintage years, registry codes — small (12–13px), letter-spaced, the way a craftsperson stamps a base. Mono is *quoted*, not *worn*, here — a deliberate inversion of the corpus default. **Palette — kiln-warm, charcoal-and-gold, in the `warm-earthy` / `honeyed-neutral` family (both underused), never green:** - `#1C1714` — *sumi charcoal* — the deepest vessel black, near-black warm brown, used for ceramic bodies, primary text, the kiln-gauge line. - `#2E2620` — *fired clay shadow* — secondary dark, for shelf undersides and the "cracked ledger" section ground. - `#EFE4D2` — *kozo paper* — the dominant warm-cream background of the shelves, faintly grained. - `#E2D2B6` — *raw clay* — slightly deeper paper tone for alternating shelves and vessel highlights. - `#C9A24B` — *kintsugi gold* — the gilt seam color; the only saturated accent; used for crack lines, the active gauge notch, hover glints, underline draws. Used at roughly 4% coverage, never as a fill. - `#8C5A3C` — *cedar plank* — warm mid-brown for the wood-grain SVG planks and wood shadows. - `#A3471F` — *ember copper* — a rust-orange used only for the kiln gauge's "hot" gradient and for tiny interactive sparks. Type is `#1C1714` on `#EFE4D2`. Contrast is intentionally warm, never stark white. A subtle ~3% grain/noise texture overlays everything to evoke fired-clay surface and paper tooth. ## Imagery and Motifs **No photography, no 3D product renders, no stock illustration, no flat icon set.** Every visual element is hand-drawn SVG (sumi-line style), procedurally-generated canvas (drifting ash, kiln glow), or CSS-rendered ceramic forms. - **The Vessels (custom SVG, `wabi-sabi`, `crystalline`-adjacent — none of this in the corpus).** Each market lot is a hand-authored ceramic silhouette: moon jar, tokkuri, chawan, tsubo — drawn as an asymmetric closed `` with a subtly wobbling profile. Filled with a soft radial dark-clay gradient and a single raked highlight. Across the body runs **one to three gold kintsugi seams** — `path-draw-svg` strokes (corpus 49%, but here used for *cracks*, not for the usual underlines/logos) — irregular, branching at the ends, with tiny gold "staple" dots. Bigger tonnage = larger vessel + more, deeper seams (the more carbon stored, the more "the world was broken and rejoined"). - **The Shelf & Plank (hand-drawn wood SVG).** Long horizontal planks with drawn grain lines that *bend around knots*, an occasional iron nail head, soft long shadows cast by the raking light. The plank's far end is slightly out of frame — the workshop continues beyond. - **The Raking Light (CSS/canvas).** Each shelf has a one-directional luminance wash — bright on the lit side, falling to warm shadow — that subtly *shifts angle* as you scroll, as if the sun is moving across the barn. Long vessel shadows stretch and rotate with it. - **Drifting Ash (canvas particles).** A barely-there layer of slow, lazy ash motes — maybe 18 of them — drifting down and sideways on a gentle noise field. They settle on shelves, fade, respawn. Faint. Atmospheric, never busy. - **Maker's Marks / Hanko (SVG).** Provenance is shown as red-ink *hanko* stamp impressions — square seals with stylized characters — slightly smudged, slightly rotated, the way a real stamp lands. Each project carries its own seal. - **Ink Diagrams (SVG).** The "what a tonne weighs" analogies are loose sumi-brush line drawings — a human figure beside a 10m CO₂ sphere, a charcoal stick, a tree's annual breath — with hairline measurement ticks in Plex Mono. - **The Kintsugi Crack as connective tissue.** Section transitions are joined by a single gold seam that "draws" across the boundary as you scroll into the next shelf — the page itself is one rejoined vessel. ## Prompts for Implementation Build tanso.market as **one slow vertical scroll** — a single HTML file, one CSS file, one JS module, and one `lots.json` data file holding the ceramic-vessel listings (id, vessel-type, tonnage, vintage, project, place, seam-count, hanko-glyph). Treat the whole page as a **two-minute walk through a charcoal-maker's atelier at golden hour**: you enter, your eyes adjust, you see the shelf of dark gilded vessels, you learn what each one *weighs* in the real world, you read the honest note about the market's cracks, and you leave with the light fading. **There is no hero with a "Trade Carbon Now" button, no pricing tier table, no stat-counter grid ("2.3M tonnes offset!"), no testimonial carousel, no partner logo wall, no email-capture bar, no live-ticker fintech chrome.** This is a contemplative essay-object, not a SaaS landing page. - **Storytelling spine.** Each shelf is a paragraph in one continuous piece of writing about carbon-as-material. Copy is sparse, declarative, potter's-cadence: "This jar holds nine hundred tonnes. It was thrown in Pará. It cracked twice. We gilded the cracks." Let silence (whitespace, *ma*) do half the talking. - **Motion — slow, breathing, weighted.** Use `spring` / `elastic` physics but tuned *heavy and damped* (low stiffness, high mass) — vessels don't bounce, they *settle*, like real ceramic set down on wood. On scroll: shelves `fade-reveal` upward by ~24px; the raking light angle interpolates; long shadows rotate; the left kiln-gauge `counter-animate`s its temperature and the active notch warms from charcoal → copper → gold. On vessel hover: a slow magnetic lean toward the cursor (±2°), a soft raked-light glint travels across the glaze, and the gold seams briefly *brighten and shimmer* (`path-draw-svg` re-stroke). Click a vessel: it lifts a few px with a deepened shadow and a small panel of provenance unfolds *beside* it (never a modal overlay) — a hanko stamp "presses" in with a tiny ink-bloom. - **The kintsugi page-seam.** Implement one continuous gold SVG path that runs the full page height, mostly hidden behind shelves, *revealing* its drawn segment at each section boundary as you scroll past — the page literally is a rejoined vessel. - **Ash particles.** A `` fixed layer, ~18 ash motes, slow downward drift modulated by a single Perlin/sine noise field; opacity 0.04–0.12; respawn at top when they exit. Pause when tab hidden. - **Texture.** Tile a subtle ~3% monochrome grain over the whole viewport (CSS `background` SVG noise or a tiny repeating PNG) — fired-clay tooth, never sterile. - **Vessels in CSS/SVG only.** Each is an inline `` with a hand-tuned asymmetric `` body, a `` dark-clay fill, one raked highlight ``, and 1–3 procedurally-jittered gold seam ``s with cap dots. No images. - **Cursor.** Replace the pointer over the market shelf with a small drawn *kanna* (turning tool) or a charcoal nub — subtle, monochrome. - **Reduced-motion.** If `prefers-reduced-motion`, freeze the ash, freeze the raking-light drift, keep the gold seams static (already drawn), keep provenance panels but without the ink-bloom. The page must still read as a quiet atelier — just a still photograph of one. - **Footer / close.** The last shelf is nearly empty: one small vessel, the light almost gone, the wordmark in `#8C5A3C` cedar-brown, a single line — "Carbon is the oldest material. We are only its keepers for a while." No links row, no social icons, no newsletter. ## Uniqueness Notes Differentiators, each a deliberate departure from the frequency analysis: 1. **Carbon-as-fired-ceramic, not carbon-as-finance.** Every "carbon market" reflex — green palettes, glassy dashboards, globe-and-arc imagery, stat grids, ticker chrome, "Trade Now" CTAs — is rejected. Carbon is rendered as a *physical material with a maker's history*: hand-thrown charcoal-black vessels, each a tradeable lot, each gilded with kintsugi seams. No other site in the corpus treats a commodity exchange this way. 2. **Wabi-sabi + kintsugi as the structural metaphor, not decoration.** `wabi-sabi` sits at 8% in the corpus and is almost always used as a vague "imperfect ceramic" mood. Here it is load-bearing: vessels are deliberately asymmetric and off-axis, the *ma* (negative space) is the composition, and the cracks are *gilded and foregrounded* — including a whole "Cracked Ledger" shelf admitting carbon-market imperfections honestly. The page itself is one rejoined vessel via a continuous gold scroll-seam. 3. **Stacked raked-light shelves replace the card-grid / full-bleed / centered triad.** Against `card-grid` 92%, `full-bleed` 85%, `centered` 80%, this uses `stacked-sections` (3%) shaped as horizontal workshop shelves with a *moving* one-directional light wash and long rotating shadows — `organic-flow` and `ma-negative-space` placement, no rigid lattice anywhere. 4. **Mono is quoted, not worn.** The corpus is 94% `mono` typography. Here the primary voice is *Shippori Mincho* (calligraphic serif) + *Spectral* (literary serif); IBM Plex Mono appears only at 12–13px on maker's-mark labels — a deliberate inversion of the default. 5. **Kiln-warm earth palette, zero green.** No `forest-green`, no eco-cliché. The whole site lives in `warm-earthy` / `honeyed-neutral` (both underused): sumi charcoal #1C1714, kozo paper #EFE4D2, kintsugi gold #C9A24B at ~4% coverage, cedar #8C5A3C, ember copper #A3471F. Chosen seed/style: **wabi-sabi imperfect ceramic** (seeds.json). Avoided overused patterns from frequency analysis: `hand-drawn`-as-aesthetic 94% and `glassmorphism` 85% (this is matte fired clay, not glass; the only "hand-drawn" here is sumi-line SVG, used as craft technique not generic doodle aesthetic); `card-grid` 92%, `full-bleed` 85%, `centered` 80% (replaced by stacked raked-light shelves with organic off-grid placement); `photography` 98% imagery (none — all SVG/canvas/CSS); `mono` typography 94% (demoted to micro-labels only); `warm`+`gradient` palettes used everywhere — kept warm but in a specific kiln-charcoal-gold register, no rainbow gradient meshes; `cursor-follow`/`parallax`/`spring` are present but re-tuned *heavy and damped* so motion *settles* rather than bounces, against the corpus's springy default.