# Design Language for tanso.markets ## Aesthetics and Tone tanso.markets is a carbon credit marketplace built for a generation that grew up sketching in notebooks and believes the climate economy can look like something worth believing in. The aesthetic is **hand-drawn optimism** — a warm, sun-baked visual language where the seriousness of carbon accounting is wrapped in the irreverent confidence of a city muralist who also happens to understand futures contracts. Think: a Brazilian favela tile-maker who trained on a Bloomberg terminal, then quit to open a stall at a street market in Marrakech. Every element feels drafted by hand, but the underlying grid is meticulous. The tone is **optimistic-bright** without tipping into greenwashing softness. This is not a mossy nonprofit palette with diffident Helvetica. This is terracotta at high noon — brick and dust and the particular amber of late afternoon light bouncing off a clay wall in Oaxaca or Lisbon. The site breathes with warmth but moves with city urgency. Inspiration: RISO-print city maps. Hand-stamped market ledger typography. The texture of a leather-bound commodity trading manual left in a warm office. Chalk sketch price boards at a souk. Brushstroke route lines on a transit map. ## Layout Motifs and Structure The page is organized as **diagonal-sections** — not the timid five-degree tilt of a typical marketing site, but true oblique cuts between content panels, like a transit system map laid over a street grid at 22°. Each section is a parallelogram: the hero cuts down-right at 22°, the next panel inverts up-right, creating a zipper of angled bands that the user descends through. Navigation is a single fixed horizontal strip at top — condensed uppercase letterforms, minimal. No hamburger menus. The hero is full-viewport: a large hand-drawn SVG sketch of a city skyline traced in terracotta ink on cream, partially complete (strokes trail off at the edges like an unfinished market illustration), with the domain name set in enormous condensed display type at 18vw that bleeds off the right edge. Between diagonal sections, thin ruled lines — like ledger paper rulings — run horizontally at a slight offset, a nod to accounting sheets and market ledgers. The second section introduces a **slide-reveal** feature panel: each feature card slides in from the left edge on scroll entry, the card edge carrying a hand-drawn stamp mark as if each item was manually checked off. Cards are stacked and staggered, not grid-aligned. Scroll depth is rewarded with increasingly visible hand-drawn detail: SVG path-draw animations that complete city sketches as the user descends. No stat-grids. No pricing blocks. No CTA-heavy sections. The page ends with a full-bleed hand-drawn city map fragment — a neighborhood annotated with carbon project locations — fading into the base terracotta. ## Typography and Palette **Primary Display**: Barlow Condensed (Black, 900 weight) — used for headlines, section labels, and the enormous hero wordmark. Extremely condensed, all-caps, letterspacing -0.02em. **Secondary Body**: Syne (Regular 400, Medium 500) — a geometric grotesque with personality, used for body copy and supporting text. **Accent / Handwritten**: Caveat (700 weight) — used sparingly for annotation-style callouts, hand-stamped labels, and the market ticker-style micro-labels. **Palette:** - `#C4613A` — Terracotta Primary: the dominant warm brick-red - `#E8D5B0` — Sand Cream: background base, like aged paper - `#1C1915` — Carbon Black: text and line strokes - `#F2A65A` — Amber Gold: warm highlight, call-to-action underlines - `#3D5247` — Market Green: secondary accent for positive carbon data - `#EDE0CB` — Parchment: section background variant - `#8B3A2A` — Deep Brick: hover states, pressed states, shadow - `#F7F1E8` — Off-White: lightest surface Hand-drawn illustration strokes are rendered in `#1C1915` at varying opacities (40%–100%) to simulate ink wash depth. ## Imagery and Motifs **Leather texture**: A subtle SVG/CSS noise layer simulates leather grain — not photographic, but generated via SVG `feTurbulence` filter overlaid at 8% opacity on card surfaces. This references the physical commodity trading ledger. **City-urban motifs**: Hand-drawn city elements appear throughout — partial building elevations sketched in outline, transit route lines, street grid fragments. These are not photography but SVG illustrations rendered in the Carbon Black stroke color. Buildings are simplified to 2–4 stroke gestures. Market vendor stalls, awnings, and street-level detail appear at the footer illustration. **Stamp iconography**: Each feature or category is marked with a hand-stamped circular seal icon — the kind of ink-stamp found on market invoices and commodity certificates. These rotate slightly (±3°) and are rendered in the deep brick color with imperfect stroke weight. **Ledger ruling**: Thin horizontal lines at 24px intervals on cream backgrounds, slightly off-horizontal (0.3° tilt) to mimic hand-ruled paper. Used under the feature list section. **Carbon particulate texture**: A grain-overlay CSS layer (SVG noise) runs across the hero section at 12% opacity — the visual equivalent of the fine carbon dust that is the site's subject matter. **Diagonal cut decorators**: At each section break, a thin terracotta ruled line traces the cut angle, with a small hand-drawn arrowhead at one end — the draftsman's notation for a section cut. ## Prompts for Implementation The site is a single long-scroll narrative page. Build with semantic HTML5 sections, each styled as a diagonal parallelogram using CSS `clip-path: polygon()` or `skewY(-5deg)` with compensating inner content `skewY(5deg)`. **Hero section**: Full-viewport `#E8D5B0` background. Layer: (1) leather grain SVG filter at 8%; (2) hand-drawn SVG city skyline sketch, strokes at 60% opacity; (3) enormous `Barlow Condensed` headline "TANSO" at 18vw, `#C4613A`, slightly overflowing right; (4) sub-headline in Syne: "Carbon moves here." The SVG skyline uses `stroke-dasharray`/`stroke-dashoffset` animation to draw itself in over 2 seconds on page load. **Slide-reveal feature panels**: Use `IntersectionObserver` to trigger `translateX(-100%) → translateX(0)` transitions on feature cards as they enter viewport. Stagger delay 80ms per card. Each card carries a background `#EDE0CB`, a faint ledger-rule texture, and a rotated stamp seal in the top-right corner. **Diagonal section cuts**: CSS `clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%)` alternating with `polygon(0 5%, 100% 0, 100% 100%, 0 95%)` to create the zipper effect. Sections alternate between `#E8D5B0` and `#F7F1E8` backgrounds. **Path-draw city map footer**: An SVG city map fragment occupies the full bottom section. On scroll-into-view, SVG paths animate via `stroke-dashoffset` from invisible to drawn — neighborhood blocks, street names in Caveat font, and small dot-markers for carbon project sites. **Typography scale**: Hero `Barlow Condensed` at `clamp(12vw, 18vw, 22vw)`. Section headers at `clamp(3rem, 6vw, 8rem)`. Body Syne at `1.125rem`, line-height 1.65. Caveat annotations at `1rem`, color `#8B3A2A`. **Micro-interaction — stamp hover**: Feature stamp icons scale from 1.0 to 1.08 and rotate +2° on hover, with a slight shadow deepening — simulating pressing a physical rubber stamp. AVOID: hero carousels, particle.js backgrounds, gradient blobs, floating emoji, countdown timers, testimonial carousels, pricing grids. No glassmorphism. No frosted cards. ## Uniqueness Notes 1. **Diagonal parallelogram zipper layout** with true 22° section cuts — not the shallow 5–8° tilts typical of other diagonal-section sites. The oblique angle is aggressive and cityscape-referential. 2. **Hand-drawn SVG city sketch that path-draws on load** — the hero illustration is not static photography or a stock background but a living SVG that completes itself, connecting the hand-drawn aesthetic to animation in a single gesture. 3. **Leather grain via SVG feTurbulence (not CSS noise)** — the texture is generated procedurally from a filter rather than a photo overlay or CSS grain, giving it a crisp vector quality that scales perfectly and avoids the muddy look of raster leather textures. 4. **Condensed typography at 18vw bleeding the viewport edge** — using `Barlow Condensed` at extreme scale as a structural element, not just a headline, creates a layout anchor that no other terracotta-warm site in the registry uses. 5. **Caveat handwritten font as market annotation layer** — stamped Caveat labels float over feature sections like a trader's pen-marked annotations, creating a hand-drafted financial document aesthetic that references commodity trading paper culture. Seed: aesthetic: hand-drawn, layout: diagonal-sections, typography: condensed, palette: terracotta-warm, patterns: slide-reveal, imagery: leather-texture, motifs: city-urban, tone: optimistic-bright