# Design Language for tanso.market ## Aesthetics and Tone tanso.market is a **retro-futuristic carbon trading bazaar** — imagine a night market on a decommissioned orbital station where old neon tubes flicker against brushed titanium, holographic price boards float in corridors between stalls selling tokenized emission credits, and the whole atmosphere smells of ozone and possibility. "Tanso" (炭素) means carbon in Japanese — the site treats carbon not as guilt or obligation but as a **raw material with a market price**, mysterious and alive. The visual register is **synthwave-meets-1980s-Osaka-science-fiction-novel-cover**: hot magenta slashing across near-black void, acid green telemetry readouts, and chunky rounded display type that looks like it was set by a printer who loved both Hiroshi Nagai album art and NASA mission patches. The mood is **mysterious and moody** — never anxious, never earnest. Information arrives like classified intelligence: revealed obliquely, in fragments, through diagonal cuts and pulsing indicators. The user is not a compliance officer; they are a market participant in something occult and lucrative. Key aesthetic references: Ridley Scott's "Blade Runner" color grading (1982), Kazuhiko Sano sci-fi magazine cover illustrations (1979–1985), DEVO's "Freedom of Choice" album art, vintage carbon-fiber weave texture under UV light, and the orange-on-black LED displays of 1980s Casio scientific calculators. ## Layout Motifs and Structure The structural backbone is **diagonal-sections** — the entire page is composed of parallelogram-shaped content zones where the horizontal separator between sections is always a sharp diagonal cut at exactly 7 degrees, never a horizontal rule. This creates perpetual forward momentum: every section slides into the next as if the layout itself is accelerating. **Compositional logic:** - **Diagonal cut system:** All section boundaries are CSS `clip-path: polygon()` cuts at 7 degrees. Alternating sections clip from top-left-to-bottom-right versus top-right-to-bottom-left, creating a herringbone rhythm down the page. The cut edge is always decorated with a 1px magenta glowing hairline (`box-shadow: 0 0 8px #ff2d78`). - **Parallelogram content cards:** Individual market data cards are `transform: skewX(-5deg)` with their internal content counter-skewed `skewX(5deg)` — creating a slanted card face that implies velocity. - **Column asymmetry:** Two-column desktop layout with an 58% / 38% / 4% split (main content / sidebar telemetry panel / right gutter). The sidebar is permanently darker, as if viewed through tinted glass on the orbital station. - **Horizontal anchor rails:** Two fixed horizontal rails — one at 8vh from top (navigation), one at 92vh from top (market ticker tape) — frame the diagonal content between them. These are the only purely horizontal elements. - **Z-layer depth:** Content cards float 4–8px above their section background via `box-shadow` and `transform: translateZ(8px)`. The section backgrounds themselves carry subtle noise grain at 3% opacity, making them feel like physical bulkheads rather than flat surfaces. **Single continuous vertical scroll.** No routing, no page transitions. Seven sections total: Origin → Market → Credits → Mechanism → Participants → Archive → Signal. Each section occupies 85–110vh before its diagonal cut hands off to the next. ## Typography and Palette **Typography:** - **Display / Wordmark:** [Nunito](https://fonts.google.com/specimen/Nunito) Black (weight 900), used at `clamp(52px, 10vw, 120px)` with `letter-spacing: -0.04em`. Nunito's extreme rounded terminals make the heavy weight feel simultaneously friendly and alien — like a corporate logo from a future that never happened. All display text is uppercase and tracks at `-0.04em` for tight, mission-patch density. - **Body / Data:** [Space Mono](https://fonts.google.com/specimen/Space+Mono), weight 400 and 700. Used for all body copy, data readouts, price figures, and labels. The doubled-width digits (`0`, `1`) in Space Mono read as telemetry on a CRT display. Line height 1.6 for body, 1.1 for data readouts. - **Accent / Tags:** [Nunito](https://fonts.google.com/specimen/Nunito) SemiBold (weight 600) at small scale (11–13px) with `letter-spacing: 0.15em` uppercase for category tags, navigation items, and unit labels. The same rounded face at micro scale creates a classified-file sticker quality. **Palette:** - `#0a0a12` — Void Black. Primary background. Near-black with the faintest blue-violet cast, like deep space with one distant star. - `#12121f` — Bulkhead Dark. Secondary background for sidebar panel and card hover states. - `#ff2d78` — Hot Magenta. Primary accent. Used for diagonal cut hairlines, active state indicators, pulse rings, the wordmark dot accent. - `#00ff9f` — Acid Green. Secondary accent. Used for price data, positive market movement, telemetry readout values, SVG sparklines. - `#c8a8f0` — Lavender Haze. Tertiary accent. Used for body text, secondary labels — a desaturated purple that reads as cool moonlight against the near-black ground. - `#ff8c42` — Burnt Amber. Quaternary accent. Used for warnings, negative movement indicators, and the carbon molecule motif outline. - `#1e1e38` — Deep Panel. Used for card backgrounds, section depth layers, and the ticker tape rail. **No white.** `#c8a8f0` is the lightest value in the system — the entire design breathes in neon-lit darkness. ## Imagery and Motifs **No photography.** The entire visual vocabulary is built from four families of SVG vector forms, all inline, all themeable via CSS custom properties: 1. **Carbon Hexagon Lattice.** The site's structural motif. Benzene-ring hexagon grids rendered as fine `0.5px` stroke SVGs in `#1e1e38` overlaid on section backgrounds — like looking at a graphene sheet under an electron microscope. At the hero section, one hexagon in every 40 is highlighted in `#ff2d78` with a `pulse-attention` animation (see below). The lattice is `position: fixed` with `will-change: transform` and moves at 0.3× scroll speed via JS, creating a slow drift that makes the grid feel like it's floating in the void behind the content. 2. **Sharp-Angle Data Arrows.** Navigation and flow indicators are not rounded chevrons but 45-degree sharp-cut arrowheads — SVG `polygon` elements with no border-radius. These appear as: section-transition arrows on the diagonal cut hairlines, "read more" indicators within cards (skewed to match card angle), and the market ticker tape direction indicators. 3. **Pulse Rings.** Price-change indicators pulse using concentric SVG circles with `animation: pulse-expand 2s ease-out infinite` — a ring that starts at 8px, expands to 24px, and fades from `rgba(255,45,120,0.8)` to transparent. This is the primary `pulse-attention` pattern implementation. Applied to: live price update nodes, new credit listing badges, and the hero's animated "LIVE MARKET" indicator. 4. **Carbon Molecule Clusters.** Decorative SVG groups of carbon atom nodes (filled circles, 6–10px) connected by stick bonds (2px `#ff8c42` lines) — arranged in fragment clusters of 3–7 atoms. These float as absolutely-positioned decorative elements within section backgrounds, slightly desaturated at 60% opacity so they read as background texture, not foreground information. **Skew geometry throughout.** All decorative elements — arrows, pulse rings, card borders — are rendered with `transform: skewX(-5deg)` to mirror the parallelogram card motif. The site has zero right-angle decorative borders; every border is either diagonal, skewed, or hexagonal. ## Prompts for Implementation Build tanso.market as a **single-page noir market experience** that unrolls vertically through seven diagonal-cut sections. The page is a classified briefing dossier from a carbon trading intelligence service — delivered to a buyer, not a newcomer. Never explain what carbon trading is; speak to it as a given. **Section structure (single scroll, diagonal-cut separators, no horizontal navigation chrome except the two fixed rails):** 1. **Origin — The Void.** Full-viewport hero. Wordmark "TANSO" in Nunito Black at clamp(80px, 14vw, 160px), uppercase, tracking -0.04em. Subtitle: "炭素市場 / CARBON MARKET" in Space Mono at 13px, letter-spacing 0.2em, `#c8a8f0`. Below: three live metric readouts (offset carbon credits, market cap, daily volume) in Space Mono Bold at 28px `#00ff9f`. A single LIVE indicator with pulse ring in magenta blinks at 2s interval. The carbon hexagon lattice drifts behind at 0.3× scroll. Diagonal cut at bottom: 7 degrees, magenta hairline, pointing right. 2. **Market — The Floor.** Two-column layout (58/38 split). Left: a vertical stack of 4 "credit listing" parallelogram cards, each skewed at -5deg, containing: credit ID (Space Mono, monospaced), region flag SVG, vintage year, volume, and a micro sparkline SVG (acid green line on near-black field, 120×24px). Right: a sidebar telemetry panel with a rolling 12-hour price chart (SVG, acid green line, `#12121f` background, no axes labels — pure signal). Above the chart: a live bid/ask spread readout in Space Mono. Diagonal cut: opposite direction from section 1. 3. **Credits — The Ledger.** A horizontal-scroll sub-region (inside the vertical scroll) showing 8 credit type cards arranged in a rail. Cards: 240×180px parallelograms at -5deg skew, background `#1e1e38`, top edge a 2px solid line in one of the three accent colors (type-coded). Each card: credit name in Nunito 900 at 18px, type badge in Nunito 600 small caps, description in Space Mono 400 at 12px (max 2 lines). Scroll rail has no scrollbar; drag-scroll via JS. Sharp-angle arrow indicators at rail edges. 4. **Mechanism — The Signal.** Full-width section explaining the market mechanism through a three-step visual flow. NOT a bulleted list — a horizontal tri-panel layout on desktop (stacked on mobile) where each panel is a parallelogram card. Between panels: sharp-angle data arrows (SVG, `#ff2d78`, 45-degree cut). Card 1: "MEASURE" with a carbon molecule cluster SVG. Card 2: "TOKENIZE" with a hexagon-lattice fragment. Card 3: "TRADE" with a pulse ring group. Each panel has exactly one sentence of Space Mono body text — maximum 18 words. 5. **Participants — The Roster.** Asymmetric grid of participant logos, all rendered as SVG placeholder silhouettes (circle + rectangle compositions in `#1e1e38` with `#c8a8f0` stroke). 3 columns, variable row heights. Above grid: "炭素参加者 / MARKET PARTICIPANTS" label in Space Mono 700. Each logo cell has a hover state: `background` shifts to `#1e1e38 → #12121f`, a magenta pulse ring appears at the logo center, and the cell border changes from `#c8a8f0` to `#ff2d78`. No JS required — pure CSS `:hover`. 6. **Archive — The Record.** A vertical timeline of past market events, formatted as a classified intelligence log. Each entry: date in Space Mono 700 `#00ff9f` (right-aligned, 80px wide), a 1px `#1e1e38` vertical connector line, then event title in Nunito 900 at 16px uppercase and one-line description in Space Mono 400. The connector line has a small filled circle node at each event junction in `#ff2d78`. The entire timeline is offset left by 20% on desktop so it reads as a marginalia column of a classified document. 7. **Signal — The Gate.** Bottom section, 80vh. A centered contact/subscribe block: single text input (Space Mono, `#12121f` background, `#ff2d78` bottom-border-only style), submit arrow button (sharp-angle SVG arrow, `#ff2d78` fill, skewX(-5deg)), and "TANSO SIGNAL / 炭素市場レポート" label. Below: social links as sharp-angle icon SVGs, all `#c8a8f0` at rest, `#ff2d78` on hover with 0.2s transition. The carbon hexagon lattice reappears here, denser (every 6th hex highlighted), pulsing slowly. **Animation budget:** Maximum 4 animation types active simultaneously. Priority: (1) pulse rings on live indicators, (2) hexagon lattice parallax drift, (3) card hover states, (4) ticker tape scroll. All animations respect `prefers-reduced-motion: reduce` — fall to static states. **NO:** pricing blocks, feature comparison tables, testimonial carousels, "Get Started" CTA buttons, or any copy that frames carbon trading as a virtue signal or CSR initiative. This is a market, not a movement. ## Uniqueness Notes 1. **Diagonal-sections layout at 2% frequency.** The corpus shows diagonal-sections as one of the least-used layout motifs (2% of 510 designs). tanso.market fully commits to it as the structural DNA of every section boundary, card face, and decorative element — not a one-off flourish but the geometric grammar of the entire page. 2. **pulse-attention as structural telemetry language, not decorative.** Pulse rings appear at only 2% frequency in the corpus. Here they are the semantic signal system: every live data point (prices, volume, active listings) has its own pulse ring, making the page feel like a living market display board rather than a static document. The pulse is always magenta — the only color that gets to move. 3. **Retro-futuristic palette with no warm or gradient dominance.** The corpus is 88% warm and 76% gradient. tanso.market uses a strictly cold, neon-on-void palette — `#0a0a12` ground, `#ff2d78` magenta, `#00ff9f` acid green — with no gradients except a 4% opacity noise texture. The retro-futuristic reference is 1980s Japanese sci-fi illustration: flat neon fills, no bloom, no depth-of-field softness. 4. **Nunito Black as display type in sci-fi context.** The frequency report shows playful-rounded typography at only 5% and mostly applied to consumer/food contexts. Using Nunito 900 (extreme rounded terminals) as a market intelligence display face is deliberately dissonant — the fat-round letterform against near-black void creates the uncanny quality of a children's toy company that secretly runs a derivatives desk. 5. **"Tanso" / 炭素 bilingual identity as cultural artifact, not internationalization.** The Japanese is never translated in the UI — it sits beside the English as a parallel channel, as if the market has always existed in both languages simultaneously. This is a design choice, not an accessibility feature. 6. **Seed:** aesthetic: sci-fi, layout: diagonal-sections, typography: playful-rounded, palette: retro-futuristic, patterns: pulse-attention, imagery: vector-art, motifs: sharp-angles, tone: mysterious-moody 7. **Avoided patterns from frequency analysis:** warm palette (88% — not used), gradient (76% — not used), centered layout (83% — rejected in favor of asymmetric 58/38 split), parallax (74% — replaced by subtle hexagon lattice drift at 0.3× scroll, not full-section parallax), mono typography as primary voice (74% — here Nunito is primary, Space Mono is secondary data voice).