# Design Language for tanso.tech ## Aesthetics and Tone "Tanso" (炭素) is the Japanese word for carbon — element six, the backbone of every organic molecule and the most shape-shifting atom in the periodic table. This site is built as **an atlas of carbon's allotropes**: graphite's slippery hex sheets, diamond's rigid cubic cage, the buckyball's stitched soccer-ball, the nanotube's rolled lattice, amorphous soot, the fragile lacework of graphene. The aesthetic is **materials-laboratory precise — cold, exacting, and quietly awed.** Think of the look of a high-resolution electron-microscope capture printed on matte black card stock, annotated in a draughtsman's hand: thin white construction lines, lattice vectors drawn as arrows, bond-angle measurements floating beside structures, the faint blue afterglow of a diffraction pattern. The tone is **scholarly-intellectual with a current of restrained wonder** — never breathless, never marketing-loud. The voice is that of a crystallographer who has spent decades looking at the same six-sided ring and still finds it astonishing. Nothing is "revolutionary"; everything is *observed, measured, drawn.* The site should feel like turning the pages of a meticulously typeset monograph that happens to be alive — structures rotate slowly when you rest your eyes on them, lattices breathe by a few picometres, a diffraction halo pulses once per heartbeat. Mood references: scanning-tunneling-microscope imagery, the engineering drawings in old Bell Labs papers, Japanese scientific stationery (graph paper with the faintest cyan rule), the silence of a vibration-isolated optics bench, carbon-fibre weave seen at extreme magnification. ## Layout Motifs and Structure **A hexagonal honeycomb spine, not a card grid.** The entire site is organised around a single load-bearing motif: the six-fold symmetry of the graphene ring. The home view is one allotrope occupying the centre of the screen as a slowly rotating wireframe; six hex-cells arranged around it (true honeycomb tessellation, offset rows, 30° rotation) are the navigation — each cell is a different allotrope. Selecting one doesn't navigate away so much as **collapse the lattice toward it**: the chosen cell expands to full-bleed while the others recede as ghosted hex outlines at the margins. - **Spine 01 / THE RING** — opening viewport: a graphene sheet rendered as thin-line wireframe drifting in z-space, bond lengths labelled (0.142 nm) in the margin, the title set small in the upper-left like a plate caption ("Tanso — an atlas of carbon"). - **Spine 02 / ALLOTROPE PLATES** — each plate is a single full-screen "specimen": the structure centred and rotatable, a left-margin column of measured annotations (hybridisation, coordination number, density, hardness, year first synthesised), and a right-margin running prose passage that reads like a museum wall text. - **Spine 03 / LATTICE VECTORS** — interstitial bands between plates: thin white construction lines extend off-screen, unit-cell parallelepipeds drawn in dashed stroke, the next allotrope's name appearing first as a faint diffraction smudge that resolves into letters as you scroll. - **Spine 04 / THE SMUDGE (amorphous carbon)** — deliberate breakdown of the grid: soot, lampblack, charcoal — here the precise lines dissolve into a granular field, annotations go uncertain ("≈ no long-range order"), the only intentionally "messy" screen, a quiet humility built into the structure. - **Spine 05 / COLOPHON LATTICE** — closing: every allotrope shown simultaneously at small scale, tessellated into one continuous honeycomb wall, each still gently rotating, like a printer's specimen sheet. Generous negative space (ma) everywhere — structures float in black, never crowded. No hero CTA, no pricing, no stat-grid. Asymmetry comes from the off-centre margin annotations, never from "broken grid" gimmickry — the grid here is a *crystal lattice* and it holds. ## Typography and Palette **Typefaces (all Google Fonts):** - **Spectral** — the body and prose voice. A serif designed for screens with genuine bookish authority; set at weight 300–400, 1.7 leading, comfortable measure (~62ch) for the museum-wall passages. Italic 300 for Latin binomials and emphasis. - **IBM Plex Mono** — all measurements, lattice-vector labels, bond angles, densities, coordinates, the title plate. Tracked +0.04em. This is the draughtsman's lettering — every number on the page is monospace, reinforcing the "annotated specimen" reading. - **IBM Plex Sans** — the rare interface microcopy (allotrope names in the honeycomb cells, section indices like "Plate 03 / 06"). Weight 500, slightly condensed feel. Used sparingly so the page reads as serif-prose + mono-annotation. **Palette — graphite black with diffraction-cyan:** - `#080A0B` — *Lampblack* — the dominant ground, a black with the faintest blue-green undertone (never pure #000). - `#101417` — *Graphite* — raised surfaces, plate backgrounds, the honeycomb cell fills. - `#E8EAE6` — *Chalk* — primary text and wireframe line colour; warm off-white like a draughtsman's pencil on dark card. - `#7C8A8E` — *Tungsten Grey* — secondary annotations, dimmed margin notes, inactive hex outlines. - `#3FE0C8` — *Diffraction Cyan* — the single accent: bond highlights on hover, the diffraction-halo glow, the active hex cell's edge, scroll-progress lattice line. Used like a laser pointer — small, surgical, never as a fill. - `#1B6F63` — *Patina* — the deep, desaturated version of the cyan for subtle glows, focus rings, and the soot-field's barely-there warmth. ## Imagery and Motifs - **Generative crystal lattices** — every allotrope structure is procedurally drawn at runtime from its actual atomic coordinates (a small embedded data table per structure), not a static image. Graphene as a true hex tiling; diamond as the FCC-with-basis tetrahedral cage; C60 as the truncated icosahedron; the nanotube as a rolled graphene strip with a chirality vector drawn on it. Thin-line wireframe only — 1px Chalk strokes, atoms as tiny open circles (4px ring, no fill), bonds as plain lines. On hover, the bonds adjacent to the cursor's nearest atom flush Diffraction Cyan and the bond length tooltips in IBM Plex Mono. - **The diffraction halo** — a soft radial ring of Diffraction Cyan behind the centred structure, like a Laue pattern bloom; it pulses once every ~4 seconds (a slow systole), expanding ~3% then settling. The only "ambient animation" that's always running. - **Construction lines** — thin Chalk lines at 30% opacity extending past structures to the screen edges, with small tick marks and the occasional measurement bracket (├──── 0.246 nm ────┤) in mono. Pure draughting-table furniture. - **Lattice-vector arrows** — the unit-cell basis vectors (a₁, a₂, a₃) drawn as labelled arrows from each structure's origin, rotating with it. - **Grain field for amorphous carbon** — an SVG-noise / dithered-stipple texture (not a smooth gradient — actual visible dots, like a halftone of soot) that the precise wireframe dissolves into on the amorphous plate. - **Honeycomb tessellation** — used as the navigation lattice and the closing colophon wall; cells are flat-top hexagons, 1px Tungsten outline, the active one Diffraction Cyan with a faint Patina inner glow. - No photography. No glassmorphism. No hand-drawn doodles. No organic blobs. The "organic" here is *molecular geometry*, which is rigorously geometric. ## Prompts for Implementation Build this as a **single-route, full-screen narrative atlas** — the visitor scrolls (or steps via the honeycomb nav) through six carbon allotropes, each its own immersive plate. No landing-page apparatus. No "Get Started." The first viewport is the graphene sheet drifting in black with a small plate caption; the only affordance is scroll. Do not explain the interaction. - **Structures as live geometry, not images.** Render the lattices in lightweight SVG (or a thin canvas/WebGL layer) from per-allotrope coordinate tables. Each structure rotates slowly and continuously (~one revolution per 40–60s) about a tilted axis; on `pointermove` the rotation eases toward facing the cursor a little (gentle parallax of *the object itself*, not a cursor-trail). On `pointerleave` it resumes its idle drift. Respect `prefers-reduced-motion` by freezing rotation to a single flattering angle. - **Hover = inspection.** Hovering near the structure highlights the nearest atom (its open circle fills Diffraction Cyan) and its bonds glow; a small IBM Plex Mono tag shows the bond length / angle. This is the core micro-interaction — it should feel like touching a model on an optics bench. - **Scroll-as-page-turn.** Scrolling between plates triggers a path-draw of the next structure's wireframe: bonds animate in stroke-by-stroke (SVG stroke-dashoffset), atoms fade in last, the diffraction halo blooms once when the structure completes. The previous plate's structure shrinks into a ghosted hex outline parked at the screen margin (so the honeycomb of "visited" allotropes accumulates in the corners). - **The honeycomb navigation** is persistent at small scale in a corner; clicking a cell collapses the current lattice toward that cell and expands the chosen allotrope. Animate with spring physics — slightly elastic, like a model snapping into its lowest-energy configuration. - **The amorphous plate breaks the rules on purpose.** The wireframe degrades into a stipple/noise field; annotations become approximations; rotation stutters. Then the next plate snaps back to crystalline order — the contrast is the point. - **Typography motion:** the next allotrope's name first appears as a blurred Diffraction-Cyan smudge (CSS blur + low opacity) that sharpens to crisp IBM Plex Sans as it enters view — a diffraction pattern resolving. - **Closing colophon** tessellates all six structures into one honeycomb wall, each still gently turning; the credit line set tiny in IBM Plex Mono like a printer's mark. - AVOID: CTA-heavy layouts, pricing blocks, stat-grids, card grids, glassmorphic cards, cursor-follow particle trails, parallax-scroll cliché, warm gradient backgrounds, photography, hand-drawn illustration. ## Uniqueness Notes Differentiators from other sites in the batch: 1. **The domain name *is* the subject matter, literally.** "Tanso" = carbon; the site is an atlas of carbon's allotropes. The navigation is a graphene hex lattice; the structure-collapse interaction mimics atoms finding their lowest-energy state. No other domain in the batch can borrow this — it only makes sense for the word "carbon." 2. **Live procedural crystallography instead of imagery.** Every structure is drawn at runtime from real atomic coordinates and rotates as a true 3D-projected wireframe — graphene, diamond, fullerene, nanotube, graphite, amorphous soot. The page contains essentially zero raster images; the "art" is geometry computed in the browser. Against a batch that is 98% photography, this is a hard departure. 3. **Annotation-as-layout.** The composition is driven by draughtsman's furniture — construction lines, measurement brackets, labelled lattice vectors, every number in monospace — turning the screen into a working engineering plate rather than a marketing page. Asymmetry comes from off-centre margin notes, never from "broken grid" tricks. 4. **A built-in moment of humility.** The amorphous-carbon plate deliberately dissolves the site's own precision into a stipple field with uncertain annotations, then snaps back — disorder given equal billing with order. 5. **Restraint of colour.** A near-black ground (`#080A0B`) and warm chalk-white lines, with exactly one accent — diffraction cyan `#3FE0C8` — used surgically (hover highlights, the halo, the active hex). No gradients, no warmth, no glow-everywhere. Against a batch that is 93% gradient and 98% warm, this monochrome-plus-one is distinctive. Chosen seed/style: **generative art background** — extended here into *generative crystallography*: the entire visual surface is procedurally generated lattice geometry rather than decoration. Avoided patterns flagged by frequency analysis: hand-drawn (94%), glassmorphism (85%), photography (98%), warm palette (98%), gradient (93%), cursor-follow (89%), parallax (89%), card-grid (92%), full-bleed-as-cliché — all consciously rejected in favour of honeycomb tessellation, monospace annotation, path-draw SVG, and a graphite-black palette with a single cyan accent.