# Design Language for tanso.wiki ## Aesthetics and Tone tanso.wiki (炭素 — *tanso*, the Japanese word for the element carbon) is built as **a hand-drafted isometric atlas of a single element**: a quiet, slightly obsessive reference work that treats carbon's allotropes, bonds, and cycles as a set of axonometric construction drawings rather than encyclopedia paragraphs. The governing aesthetic is **isometric technical documentation** — the visual register of a vintage engineering manual, an exploded-view repair diagram, and a crystallographer's lab notebook, all rendered in true 30°/30° projection with no perspective vanishing point. Nothing curves toward the viewer; everything sits on the same imperturbable iso-grid, as if the whole site were a sheet pinned to a drafting table under a north-light window. The tone is **scholarly-intellectual but dry-witted** — the voice of a senior lab demonstrator who has explained tetrahedral hybridization four hundred times and now does it with deadpan economy. No exclamation marks, no "discover the wonder of." Instead: terse captions, figure numbers, footnote-style asides set in a smaller mono. Carbon itself is the protagonist — graphite as soft grey planes that slide, diamond as a rigid white tetrahedral cage, fullerene as a floating geodesic ball, graphene as a single trembling hexagonal mesh, charcoal as a porous black sponge-block. The mood is **cool, composed, faintly nocturnal-graphite** — the colour of pencil lead on cold-press paper, of a chalkboard wiped but not erased, with one disciplined ember of warmth where a reaction is exothermic. ## Layout Motifs and Structure The page is **one continuous isometric drafting sheet that scrolls vertically through six "plates,"** each plate a numbered figure in an imaginary monograph titled *Tanso: An Atlas in Six Plates*. There is **no hero banner, no top navigation bar, no hamburger, no footer, no CTA**. Navigation is a **slim left-margin "plate index" — six tiny iso-cubes stacked vertically**, each cube the colour of the allotrope it indexes; the active cube extrudes 6px toward the reader (the *only* element on the entire site that breaks the iso-plane, as a deliberate "you-are-here" pin) and a hairline mono label (`PLATE 01 — GRAPHITE`) types itself in beside it. Every plate is composed on a **true isometric grid (background: repeating 30° rhombus lattice at 4% ink, like ledger paper for axonometric drawing)**. Content blocks are **axonometric "trays"** — flat parallelogram cards that appear to lie *on* the sheet, each casting a single hard offset shadow at the iso-light angle (lower-left, 24px, 0 blur, 14% ink — no soft drop shadows anywhere). Trays never overlap into a z-stack; they tile across the rhombus grid like floor tiles. Headlines sit *outside* the trays, in the margin, with a thin ruled leader line drawing from the headline to the figure it labels (animated path-draw on scroll). Measurements, bond angles (`109.5°`, `120°`), and lattice constants are printed as **dimension annotations** — the little arrow-terminated callout lines from mechanical drawings — floating beside each structure. The whole layout reads top-to-bottom as: *Plate 01 Graphite → 02 Diamond → 03 Fullerene & Nanotube → 04 Graphene → 05 Amorphous Carbon (Charcoal/Soot) → 06 The Carbon Cycle (iso-landscape diorama)*. Plate 06 is the only full-bleed plate: a single sprawling isometric diorama of forest → fire → atmosphere → ocean → limestone, drawn as one connected machine. ## Typography and Palette **Type system (Google Fonts only):** - **Primary face — `IBM Plex Mono`** (weights 300, 400, 500, 600): every label, caption, dimension annotation, figure number, body micro-text, and the plate index. This is the "drafted by hand on a typewriter table" voice — even apertures, slab-ish terminals, the unmistakable engineering-manual cool. Body text set at 15px / 1.7, `letter-spacing: 0.01em`; micro-captions at 11px uppercase, `letter-spacing: 0.14em`. - **Display / plate titles — `Antonio`** (weights 400, 600): a tall, tight, condensed grotesque used *only* for the six plate titles and the masthead word **TANSO 炭素**, set in 96–140px, packed to `letter-spacing: -0.02em`, all-caps. Antonio's narrow ribs echo the verticals of a column of stacked iso-cubes. - **Numerals & data — `Spline Sans Mono`** (weight 400) for any running tabular figure (atomic number 6, density values, melting points) so columns align perfectly in the dimension callouts. **Palette (carbon-lead spectrum + one ember):** - `#0E0F12` — *graphite black* (deepest ink, masthead, plate-06 night sky) - `#1C2024` — *anthracite* (primary text ink, structural line work) - `#3A4048` — *slate-lead* (secondary text, grid lines at higher opacity, diamond cage edges) - `#8A929C` — *pencil grey* (captions, leader lines, the soft graphite planes) - `#C9CFD6` — *cold-press paper grey* (tray fills) - `#EEF1F4` — *drafting-sheet white* (page background, the "north light") - `#FFFFFF` — *pure diamond white* (the diamond tetrahedron faces only) - `#D8472B` — *exothermic ember* (the single warm accent: combustion arrows, active plate cube, the fire node in the carbon cycle, hover state on leaders) — used at < 6% of any viewport - `#2E7D5B` — *photosynthesis green* (used once only, in Plate 06, for the leaf→CO₂ uptake arc) ## Imagery and Motifs Everything is **flat-shaded isometric vector line art** — no photography, no gradients except the faintest two-stop iso-face shading (a parallelogram's "lit" face 6% lighter than its "shaded" face). Recurring motifs: - **The hex tile** — graphite's and graphene's six-membered ring, repeated as a decorative honeycomb bleed at plate edges and as the literal lattice in Plates 01 and 04. It is the site's "carbon fingerprint" watermark, drawn at 3% ink behind every plate. - **The tetrahedron** — diamond's sp³ unit, used as bullet markers (tiny 8px iso-tetrahedra instead of dots) and as the loading glyph (a tetrahedron that rotates 120° in three discrete clicks, never smoothly). - **The truncated icosahedron** — Buckminsterfullerene (C₆₀), one large floating geodesic ball in Plate 03, plus a rolled nanotube drawn as an iso-cylinder with the hex mesh wrapping it. - **Dimension callouts** — arrow-terminated annotation lines giving bond angles, bond lengths in picometres, lattice constants — drawn in slate-lead, the arrowheads tiny open triangles. These appear on *every* structure; they are the connective tissue of the whole atlas. - **The "plate corner block"** — bottom-right of every plate, a small drafting-title-block parallelogram: `PLATE 0X / TANSO.WIKI / SCALE: ATOMIC / DRAWN: 2026 / SHEET X OF 6`. - **Soot stipple** — Plate 05 only: amorphous carbon rendered as a dense field of irregular black dots inside a porous iso-block, the one place the crisp line work dissolves into grain. ## Prompts for Implementation Build tanso.wiki as **one HTML page, one CSS file, one ES module** — no framework, no build step, no router. The experience is a roughly 75–90 second descent through a six-plate isometric monograph. **There is no CTA, no pricing, no signup, no testimonials, no stats grid, no contact form, no FAQ, no logo wall, no newsletter, no chatbot, no cookie banner, no hero with a button.** **Storytelling spine (vertical scroll, each plate a scene):** 1. **Masthead** — `TANSO 炭素` in Antonio 140px, anthracite on drafting-white, sitting on the rhombus grid. Beneath it, in Plex Mono 11px caps: `ELEMENT 6 · [He] 2s² 2p² · AN ATLAS IN SIX PLATES`. A single iso-cube of pure graphite black rotates into place (three discrete 40° snaps, CSS steps timing function — never linear/ease). 2. **Plate 01 — Graphite.** Build a stack of ~5 hexagonal sheets as iso-parallelograms separated vertically by 14px; on scroll-progress, the top three sheets slide laterally a few px (the "pencil mark" mechanic — graphite shears). Dimension callout: interlayer spacing `335 pm`. Margin headline draws a leader line to the stack. 3. **Plate 02 — Diamond.** A rigid iso wireframe tetrahedral cage in pure white (`#FFFFFF`) line work on `#1C2024` — the one inverted (dark) plate, to make diamond gleam. Bond-angle callout: `109.5°`. Hardness annotation: `MOHS 10`. Nothing moves; rigidity is the point — the only animation is the leader line drawing and a single specular highlight glint that travels one edge on hover. 4. **Plate 03 — Fullerene & Nanotube.** A large truncated-icosahedron (C₆₀) drawn as iso line art, gently bobbing (translateY ±6px, 6s ease-in-out — the *only* organic motion on the site, justified because a buckyball is famously "round"). Beside it a rolled iso-cylinder nanotube. Callout: `C₆₀ · Ø ≈ 0.7 nm`. 5. **Plate 04 — Graphene.** A single vast hexagonal mesh filling the plate, drawn as one SVG `` of stroked hexagons; on scroll it does a slow `path-draw-svg` stroke-dashoffset reveal — the mesh "drafts itself" line by line. Callout: `1 ATOM THICK · ~130 GPa`. 6. **Plate 05 — Amorphous Carbon.** A porous iso-block (charcoal/soot) filled with stipple dots; a faint ember glow (`#D8472B` at low alpha) pulses from inside cracks — "still warm from the kiln." Callouts on adsorption: `SURFACE AREA UP TO ~3000 m²/g`. 7. **Plate 06 — The Carbon Cycle (full-bleed iso-diorama).** One connected machine drawn across the full width: iso forest tiles → an ember `#D8472B` combustion node → CO₂ arrows rising into a `#0E0F12` night band → a `#2E7D5B` leaf uptake arc looping back → ocean tiles → limestone strata. As the user scrolls through this plate, each arrow's `stroke-dashoffset` animates in sequence (stagger, 120ms apart) so the cycle "runs" once. End with a quiet Plex Mono line: `CARBON IS NEITHER CREATED NOR DESTROYED — ONLY RE-DRAWN.` and the final plate corner block `SHEET 6 OF 6`. **Motion rules:** prefer **discrete, stepped, mechanical motion** (CSS `steps()`, snap rotations, dashoffset draws) over smooth easing — the site should feel *drafted*, not *animated*. The only exceptions: the bobbing buckyball (Plate 03) and the ember pulse (Plate 05). Cursor: a small iso-tetrahedron replaces the default pointer; over leader lines and the ember node it tints to `#D8472B`. Scroll-triggered leader-line draws on every plate. No parallax depth layers (everything is coplanar by definition), no tilt-3D, no card flips. Respect `prefers-reduced-motion` by rendering all draws/snaps in their final state instantly. **Build details:** rhombus background = a CSS `background-image` of a 30° linear-gradient repeat at ~`#1C2024` 4% on `#EEF1F4`. All structures = inline SVG with `vector-effect: non-scaling-stroke`. Trays = `clip-path: polygon()` parallelograms with one hard `box-shadow`. Type loaded via Google Fonts: `IBM Plex Mono`, `Antonio`, `Spline Sans Mono`. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **Strict coplanar isometry as a hard constraint, not a decorative flavour.** Where the corpus's isometric sites (≈14%) use iso-icons as cute spot illustrations floating in otherwise normal layouts, tanso.wiki makes the *entire page* a single 30° axonometric sheet — no perspective, no z-stacked cards, no parallax depth — and uses the one allowed plane-break (the active index cube) as semantic "you-are-here." The isometric-technical-docs layout (≈0% in the corpus) is the literal page architecture. 2. **Mechanical, stepped motion instead of spring/elastic/magnetic.** The corpus is saturated with spring (83%), magnetic (78%), cursor-follow (89%), tilt-3D (32%) — tanso.wiki deliberately uses almost none of them. Motion is `steps()`-based snaps and SVG `path-draw` (49%, but here used as the *primary* idiom, not an accent), so the site reads as a drafting instrument rather than a bouncy SaaS landing. 3. **An element as a single-subject monograph, in dry lab-demonstrator voice.** No CTA, no pricing, no stats grid, no hero button (all explicitly avoided). The "content" is six annotated construction plates of carbon's allotropes plus a working carbon-cycle diorama — a reference atlas, not a product page. The bilingual masthead (`TANSO 炭素`) ties the domain name to the subject without theming the whole site "Japanese." 4. **A near-monochrome graphite-lead palette policed at <6% warm accent.** Against a corpus that is 98% warm and 93% gradient, tanso.wiki is overwhelmingly cool greys (`#EEF1F4`/`#C9CFD6`/`#3A4048`/`#1C2024`) with exactly one ember red (`#D8472B`) reserved for exothermic/combustion semantics and one single green arc — colour as data, not decoration. 5. **Avoided patterns:** no glassmorphism, no hand-drawn whimsy, no card-grid product layout, no full-bleed hero with overlay, no cursor-follow particle trails, no warm pastoral palette, no big animated counters — all high-frequency conventions from the frequency analysis, consciously sidestepped. **Chosen seed:** *isometric technical docs* — aesthetic: isometric; layout: isometric-technical-docs / full-bleed (Plate 06 only); typography: tech-mono; palette: cool-grays + single high-contrast ember; patterns: path-draw-svg; imagery: isometric-icons; motifs: crystalline (carbon lattice / tetrahedron / truncated icosahedron); tone: scholarly-intellectual.