# Design Language for tanso.biz ## Aesthetics and Tone tanso.biz is a **draughtsman's table at a carbon foundry, lit by one cold lamp and one banked ember** — "tanso" (炭素) is the Japanese word for *carbon*, and this site treats carbon not as a climate abstraction but as the physical element: the sixth atom, the thing that is graphite, diamond, charcoal, soot, lampblack, and the backbone of every molecule that has ever been alive. The aesthetic is **isometric technical-document drafting** rendered in **charcoal and graphite**, as if an engineer were patiently sketching the crystal lattices of carbon's allotropes onto blue-black drafting vellum at 02:00, the pencil leaving a faint silver sheen where it pressed hardest. The tone is **grounded-earthy and quietly authoritative** — the calm of someone who works in a material that is four billion years old and is not impressed by trends. Nothing here glows neon, nothing bounces, nothing shouts a call to action. The page behaves like a well-built drawing instrument: precise detents, weighted motion, the satisfying resistance of a parallel rule sliding across a board. Where most of the corpus is warm (98%) and gradient (93%) and hand-drawn (94%), tanso.biz is **cool charcoal, flat-inked, hard-ruled** — a deliberate refusal of the soft-paper-and-pastel default. The single concession to warmth is the ember: one orange coal banked in the lower corner, the colour of carbon mid-combustion, the only thing on the page that could be called "alive." Think: the engineering plates in an old Diderot encyclopédie, but the subject is the diamond cubic and the hexagonal graphene sheet; think a planetarium's diagram of element abundances drawn with a 2H pencil; think the inside cover of a chemistry notebook where someone has carefully isometric-projected a buckminsterfullerene and labelled every vertex. ## Layout Motifs and Structure The composition is governed by a **true isometric grid** — a 30°/30° axonometric lattice that underlies the entire page, faintly visible as silver-grey hairlines on the charcoal field, the way a drafting board shows its underlay through the vellum. Isometric layout sits at only 13% in the frequency analysis and isometric-icons imagery at 5%; this site commits fully, building *every* structural block as a shallow isometric volume rather than a flat rectangle. - **The drafting-board frame.** The whole viewport is bordered by a thin double rule — outer hairline, 8px gutter, inner hairline — like the margin printed on an engineering sheet. The title block sits bottom-right inside this frame: a small isometric cartouche reading "TANSO · 炭素 · C · 6 · [12.011]" in monospace, the way a real drawing carries its part number and revision. - **Seven plates, scrolled vertically.** The page is a portfolio of seven "plates," each one a numbered drawing of carbon in a different form (PLATE I — GRAPHITE; PLATE II — DIAMOND; PLATE III — CHARCOAL; PLATE IV — GRAPHENE; PLATE V — FULLERENE; PLATE VI — NANOTUBE; PLATE VII — SOOT & LAMPBLACK). Each plate occupies one full viewport, divided by the isometric grid into a large drawing zone (left two-thirds) and a tall annotation column (right third) where dimensioned callouts and material notes are stacked like spec lines. - **Isometric stacking, never flat cards.** Where the corpus reaches for card-grid (92%) and bento-box, tanso.biz uses **stepped isometric platforms** — content blocks that read as thin slabs floating at slightly different heights on the same 30° plane, casting hard-edged flat shadows (no blur, no glow) onto the slab below. Diagonal-sections (5% in the corpus) appear as the natural seams between plates: each plate boundary is a 30° rake matching the iso axis. - **The element-card anchor.** Fixed in the top-left of the frame throughout the scroll: a single periodic-table cell for Carbon — square, hairline-ruled, "6 / C / Carbon / 12.011" — that subtly redraws its electron-shell diagram (2,4) as you move between plates, the two outer electrons orbiting a little faster on the diamond plate, a little slower on the soot plate. It is the only persistent UI; there is no nav bar. - **Annotation columns as the "copy."** Body text never sits in a paragraph block — it sits in the right-hand annotation column as **leadered callouts**: a short line of mono text, an em-dash, a thin leader line angling back into the drawing to touch the thing it describes. The page reads like a labelled diagram, not an article. ## Typography and Palette **Fonts (Google Fonts only):** - **Drawing labels, callouts, title block, periodic cell — *IBM Plex Mono* (weights 400, 500, 600).** The structural voice of the entire site. Plex Mono has the slightly humanist warmth of a good drafting stencil without tipping into novelty; its figures are unambiguous (essential for dimension strings like "1.42 Å" and "3.35 Å"). Set in tracked uppercase for plate titles ("PLATE IV · GRAPHENE"), in mixed case for callouts, always left-aligned to the iso grid. - **Plate headings and the wordmark — *Bricolage Grotesque* (weights 600, 700, 800, optical sizing on).** A grotesque with cut, slightly mechanical terminals that read like precision-milled type — used large for the carbon-form name on each plate ("GRAPHITE", "DIAMOND") set in deep charcoal against the lighter graphite field, sometimes outline-only (1px stroke, no fill) so the iso grid shows through the letterforms like a stencil. Bricolage's faint quirk keeps it from feeling cold-corporate. - **The molecular-formula and footnote layer — *Spline Sans Mono* (weight 400).** A second, lighter monospace used *only* for chemical formulae (C₆₀, the SMILES strings, the lattice parameters) and the tiniest footnotes, so formulae are visibly a different "instrument" from the labels — like switching from pencil to a 0.18mm technical pen. Type is never animated as kinetic display; it is *plotted* — headings can draw on stroke-by-stroke as if a pen plotter were tracing them, but once drawn they hold still. **Palette (charcoal / graphite / one ember / one diamond-cold):** - `#0E1013` — **furnace charcoal**, the page ground; near-black with the faintest blue in it, like cold forge iron. - `#1A1E24` — **drafting vellum-dark**, the slab/plate surface; a half-step up from the ground so isometric platforms separate by value alone. - `#3A424C` — **graphite line**, the primary hairline and grid colour; the grey of pencil on dark paper. - `#8A95A1` — **silver-press**, secondary text and lighter rules; the sheen left where a 2H pencil pressed hard. - `#D6DCE2` — **chalk white**, primary text and key drawing lines; not pure white — slightly cool, like a chalk line snapped on slate. - `#E8732C` — **banked ember**, the single warm accent; carbon at ~1100°C, used *only* for the live coal in the corner, the current-plate marker, and the one leader line that points to "this is carbon burning." - `#5FB7C9` — **diamond-cold**, a restrained cyan used *only* on the Diamond plate (PLATE II) for the cubic lattice — the cold fire of a brilliant-cut stone — and nowhere else, so its single appearance feels like the page briefly catching light. ## Imagery and Motifs **No photography (a deliberate stand against the 98% photography corpus), no 3D renders, no stock illustration, no hand-drawn doodles.** Every visual is **SVG line-work on the isometric grid** — built like engineering plates, inked in graphite hairlines and chalk-white key lines, the way a real technical drawing is constructed. - **The seven allotrope lattices.** Each plate's hero drawing is the actual atomic structure, isometric-projected and dimensioned: - **Graphite** — stacked hexagonal sheets, the 3.35 Å interlayer gap called out with a dimension arrow; the sheets can shear past one another on hover (graphite's lubricity, made literal). - **Diamond** — the cubic lattice as a wireframe gem, drawn in `diamond-cold` cyan, slowly rotating exactly 30° and stopping (one detent, never continuous spin). - **Charcoal** — a porous amorphous network, drawn as a tangle of short graphite segments with voids; the "drawing" half-erased at its edges, smudged into the vellum. - **Graphene** — a single endless hexagonal sheet receding to the iso vanishing line, one carbon atom highlighted in `ember` as "you are here." - **Fullerene** — C₆₀ as a truncated icosahedron, every one of its 60 vertices a tiny ring, the pentagon faces faintly shaded; it bobs as if floating in solvent. - **Nanotube** — a rolled graphene sheet shown half-rolled, the "seam" of the roll dimensioned with a chirality vector (n,m). - **Soot & Lampblack** — concentric onion-shell carbon, drawn as nested broken circles fading into the furnace-charcoal ground until the drawing simply *is* the page. - **Dimension lines everywhere.** Bond lengths (1.42 Å, 1.54 Å), interlayer spacings, lattice constants — all rendered as proper engineering dimension callouts: thin witness lines, arrowheads, the measurement set in `Spline Sans Mono`. These double as the page's "decoration." - **The banked coal.** Lower-left of the frame, persistent: a small isometric lump of glowing charcoal, drawn in `ember`, its glow rendered *not* as a CSS blur but as concentric stippled SVG rings (true engraving cross-hatch), pulsing on a slow 6-second breath — the page's heartbeat, and the only "warm" pixel. - **The periodic cell** (top-left): Carbon's element box with a live 2,4 electron-shell diagram orbiting inside it. - **Pen-plotter texture.** A faint, fixed grain over everything — not film grain, but the look of ink slightly bleeding into vellum fibre, very low opacity. ## Prompts for Implementation Build tanso.biz as **a single-route, vertically scrolled portfolio of seven engineering plates** — one HTML file, one CSS file, one JS module. Treat the page as a 70-second walk down a drafting table, plate after plate, each one a patient drawing of carbon wearing a different face. There is **no CTA, no pricing block, no stat grid, no testimonial row, no contact form, no newsletter signup, no nav bar**. There is the drafting frame, the persistent periodic cell, the banked coal, and the seven plates. **Storytelling structure (seven plates, vertical scroll, 30° diagonal seams between them):** 1. **Title plate / cold open.** The drafting-board frame draws itself first — outer rule, then inner rule, then the title-block cartouche bottom-right plotting in character by character ("TANSO · 炭素 · C · 6 · [12.011]"). The isometric grid fades up underneath at very low opacity. Centre: the word **TANSO** in outline-only Bricolage Grotesque, the iso grid visible through the letters, and beneath it in Plex Mono: "the sixth element, drawn seven ways." The banked coal appears in the corner and takes its first breath. Hold. 2. **PLATE I — GRAPHITE.** The hex-sheet lattice plots on, line by line, as if a pen plotter were tracing it. Annotation column fills with leadered callouts ("interlayer gap — 3.35 Å", "in-plane bond — 1.42 Å", "this is pencil; this is lubricant; this is the electrode"). On hover over the sheets, they shear. 3. **PLATE II — DIAMOND.** Seam rakes at 30°. The cubic lattice draws in `diamond-cold` cyan — the *only* colour on the whole site — rotates exactly 30° and stops with a detent. Callouts: "sp³, tetrahedral", "1.54 Å", "same atom as Plate I — different handshake." 4. **PLATE III — CHARCOAL.** The amorphous network draws, then deliberately half-erases its own edges into the vellum. Callouts about porosity, surface area, filtration, the firepit. The ember marker in the annotation column glows here for one beat. 5. **PLATE IV — GRAPHENE.** A single hex sheet receding to the iso vanishing line; one atom marked in `ember` as "you are here." Callouts: "one atom thick", "stronger than steel by weight", "discovered with sticky tape." 6. **PLATE V — FULLERENE (C₆₀).** The buckyball draws vertex by vertex, then bobs gently. Callouts on its 60 vertices, 12 pentagons, 20 hexagons; a note: "named for a man who built domes." 7. **PLATE VI — NANOTUBE.** A graphene sheet shown mid-roll, chirality vector (n,m) dimensioned along the seam. 8. **PLATE VII — SOOT & LAMPBLACK.** Concentric onion-carbon draws, then fades into the furnace-charcoal ground until the drawing *is* the page. The annotation column ends with one last leadered callout pointing at the banked coal in the corner: "— and this is carbon, burning." The title block bottom-right adds a final line: "REV. 01 · PLATES I–VII · COMPLETE." Scroll ends. **Motion vocabulary — instrument detents, not bounce.** No springy overshoot, no elastic, no magnetic cursor swarm. Use **pen-plotter path-draw** (SVG `stroke-dashoffset` animating to 0) for every lattice and every heading — this is the signature interaction, and path-draw-svg at 48% is common enough to be safe but rarely used *as the whole grammar*. Use **scroll-triggered reveals** where each plate's drawing plots on as it enters the viewport, callouts staggering in along their leader lines. Hover states are **mechanical**: graphite shears, the diamond catches light, a callout's leader line brightens to `silver-press`. The persistent electron shell orbits continuously but slowly. The banked coal breathes on a fixed 6s cycle independent of scroll. One detent per discrete action — the diamond's 30° turn, a plate snapping into place — each with a tiny, dry click of motion, never a wobble. Respect `prefers-reduced-motion` by skipping the path-draw and showing finished plates. **Construction notes.** Everything lives on the same 30°/30° isometric transform basis — define the iso skew/rotate once in CSS custom properties and compose all platforms from it. Hard flat shadows only (`box-shadow` with 0 blur, offset on the iso diagonal). The grain is a single fixed low-opacity SVG-noise overlay. Type on dark: chalk-white key text, silver-press secondary, never pure `#FFFFFF`. The cyan and the ember are *rationed* — cyan appears on exactly one plate, ember appears on exactly the coal plus two markers. If a thing isn't a drawing, a label, a dimension line, the periodic cell, or the coal — it doesn't belong on the page. ## Uniqueness Notes Differentiators, each a deliberate departure from the patterns in the frequency analysis: 1. **Cool charcoal in a warm corpus.** 98% of the analysed designs use a warm palette and 93% use gradients; tanso.biz is built on flat, ungraded furnace-charcoal and graphite grey with exactly two rationed accent colours (a single-plate cyan, a corner-only ember). The near-total absence of warmth and gradient is itself the statement — carbon is cold rock until it burns. 2. **No photography, no hand-drawn — only engineering plates.** Photography sits at 98% and hand-drawn aesthetic at 94%; this site uses neither. Every visual is precise SVG line-work with real dimension callouts (bond lengths in ångströms), built like Diderot's encyclopédie plates retasked for carbon allotropes — a register the corpus essentially never occupies. 3. **Isometric committed to fully, as structure not decoration.** Isometric layout is 13% and isometric-icons imagery 5%, and where it appears it's usually a decorative icon set. Here the *entire page* — every content slab, every shadow, every seam — is built on one shared 30°/30° axonometric basis; the page is a drawing board, not a website with iso accents. 4. **The drafting-instrument motion grammar.** Against a corpus dominated by spring (83%), magnetic (78%), and elastic (21%) motion, tanso.biz uses only pen-plotter path-draw and dry mechanical detents — no overshoot, no wobble, no cursor-follow swarm. Motion that behaves like a parallel rule, not a trampoline. 5. **Diagram-as-content, not article-as-content.** There are no paragraph blocks; all copy is leadered callouts in an annotation column pointing into the drawings. The reader experiences a labelled technical plate, not prose — a structure absent from the card-grid-and-paragraph default (card-grid 92%). 6. **The periodic-cell anchor and the breathing coal.** The only persistent UI is Carbon's element box (with a live 2,4 electron-shell animation) and a corner lump of glowing charcoal that breathes on a 6-second cycle — replacing the conventional nav bar and CTA with two pieces of the subject matter itself. Chosen seed / style: **isometric technical docs** — *aesthetic: isometric; layout: diagonal-sections; typography: tech-mono; palette: monochrome (charcoal/graphite) + rationed ember & diamond-cold accents; patterns: path-draw-svg; imagery: isometric-icons; motifs: crystalline / abstract-tech; tone: grounded-earthy.* Avoided patterns from the frequency analysis: hand-drawn (94%), glassmorphism (84%), photography (98%), warm palette (98%), gradient (93%), card-grid (92%), spring/magnetic/cursor-follow motion (89%/78%/89%), stat-grids and CTA-heavy layouts.