# Design Language for tanso.tech ## Aesthetics and Tone **tanso.tech** is a **carbon intelligence laboratory**. "Tanso" (炭素) is Japanese for carbon — the element that underlies all life, all coal, all diamonds, all graphene. The site exists at the intersection of material science rigour and avant-garde provocation: it is a place where the periodic table becomes a philosophical argument and where emissions data is rendered as something approaching portraiture. The aesthetic is **avant-garde scientific** — not the cold minimalism of a biotech landing page, not the neon maximalism of a crypto dashboard. Think instead of a 1970s Bauhaus lab manual that has been redesigned by Neville Brody after a long residency at the RIKEN Institute: hard-edged geometry, deliberate asymmetry, molecular diagrams treated as calligraphic gestures. The white space (ma — 間) is not empty; it is pressurised, like the vacuum in a sealed carbon-analysis chamber. Objects placed within it carry weight precisely because they are surrounded by nothing. The tone is **authoritative without being closed**. Tanso.tech does not explain itself. It declares. The language is sparse, lapidary, confident — the voice of a scientist who no longer needs to justify their premises. Sentences end without hedging. The site earns respect by assuming the visitor already brings intelligence to the encounter. The emotional register: **compressed authority**. The site feels like holding a carbon-fibre panel — impossibly light, impossibly strong, with a directional grain that only reveals itself under oblique light. Everything is controlled. Nothing is decorative for decoration's sake. But the result is not cold — it is charged. Inspiration: Issey Miyake's Pleats Please (structure as liberation), Saul Bass's title sequences (geometry as narrative), the microstructure of graphite under electron microscopy (laminar planes at 0.335 nm intervals), and the minimal brutalism of Tadao Ando's concrete. ## Layout Motifs and Structure The layout vocabulary is built entirely from **ma — negative space** (間): the Japanese concept of meaningful emptiness, used as active structural force rather than passive background. **Primary architecture: asymmetric vertical spine with deliberate voids** The viewport is divided into an invisible 11-column grid (not 12 — the prime number refuses even subdivision and creates natural tension). The primary content occupies columns 3–9 at most — but individual elements break this rule deliberately and precisely. A large heading might bleed to column 1. A molecular diagram lives alone in columns 9–11, separated from its caption by four columns of void. The asymmetry is scored, not accidental. **Scroll behaviour — sectional pressure release** The page is built as a series of **pressure chambers**: dense, compressed sections (high information density, tight leading, small type) separated by vast emptied panels (a single word in 18vw type, or a raw SVG molecule floating in 80% white space). The rhythm mimics the compression-and-release of carbon crystallisation — graphite laminae under pressure becoming diamond. **Navigation: vanishing** No persistent navigation bar. Instead, a single hairline (1px, `#1A1A1A`) runs the full left edge of the viewport at `position: fixed`. Seven microscopic navigation points live on this line at equal intervals — circles of 4px diameter, filled `#B8A89A` at rest, expanding to 12px with a label on hover. On mobile, the line collapses to a single corner mark. The navigation is almost invisible by design — the content is the navigation. **Breakpoints and spatial rhythm** Every section opening has a mandatory 30–40vh of empty space before the first text element appears. This is not padding; it is **interval** — the ma that gives the next statement its authority. Headings entering the viewport from this silence land harder. The grid enforces that no two content blocks share the same left edge: each section is horizontally offset from the previous by at least 2 grid columns, creating a staircase descent through the page. **Geometric interruptions** Thin SVG rules — not decorative borders but measurement lines in the style of technical drawings — appear at irregular intervals. A horizontal rule at exactly 0.5px connects a data point to its annotation. A vertical axis rule marks the boundary between body text and white void. These rules are drawn in `#C4B8AE` and carry arrowheads of 4×4px — the vocabulary of a laboratory instrument. ## Typography and Palette ### Type System (all Google Fonts, verified) **Display and primary headings — `Unbounded`** A wide, bold geometric variable font. Set H1 and chapter headings at `wght 800`, tracking `+0.04em`, uppercase. Size: `clamp(3.5rem, 9vw, 10rem)`. The all-caps is not shouting — it is the engraving style of instrument panels. On scroll, the `wght` axis animates from 400 to 800 as the heading enters the viewport over 600ms — a slow materialisation from thin to authoritative. **Body and secondary headings — `DM Sans`** Set at `wght 300` for body (18px/32px leading), `wght 500` for subheadings. The extreme thinness of the body weight against the heavy display is the typographic version of carbon fibre: featherlight strands under extreme load. Line length capped at 62ch. **Data and annotation — `Space Mono`** Used exclusively for numbers, chemical notation, data labels, and technical footnotes. 13px, `wght 400`, `#5A5550`. Molecular formulae (`CO₂`, `C₆₀`) use proper subscript via `font-variant-numeric: subscript` and HTML ``. **Variable animation axis** `Unbounded`'s weight axis drives the primary expressive-variable effect: headings enter at `wght 100` (barely visible, gossamer) and compress to `wght 800` as the viewport intersection ratio crosses 0.6. This is executed via CSS `@property` and `animation-timeline: scroll()` — no JavaScript weight for this effect. ### Color Palette The palette is derived from carbon's material states: charcoal grey, graphite black, the warm cream of rice paper, a single luminous gradient accent that maps to bioluminescent carbon nanotube emission spectra. | Role | Hex | Description | |---|---|---| | Void | `#0D0D0B` | Near-black with a 1.5% warm brownish cast — not pure black, which reads as digital | | Graphite | `#1F1E1C` | Surface tone for cards and secondary panels | | Ash | `#3D3A35` | Midtone for borders, rules, and secondary text | | Washi | `#F5F0E8` | Warm cream background — rice-paper white, not clinical white | | Bone | `#C4B8AE` | Quiet text, rules, annotations | | Carbon arc | gradient: `#4ECDC4` → `#2A9D8F` → `#1B4332` | The single chromatic accent — teal-to-forest, evoking the spectral emission of carbon plasma arcs. Used sparingly: one gradient per section maximum | | Ember | `#E76F51` | Used for exactly one element per page: the single most important data point or CTA. Never diluted. | Background: `#F5F0E8` (washi) for light sections; `#0D0D0B` (void) for the opening hero and data-heavy sections. ## Imagery and Motifs **No photography.** The frequency analysis shows photography at high usage across the registry; tanso.tech opts out entirely and replaces it with computational and diagrammatic imagery. **Primary imagery: geometric-abstract molecular geometry** All imagery is derived from carbon allotrope structures: graphene hexagonal lattice, fullerene (C₆₀ buckyball) wireframe, carbon nanotube cross-section, diamond cubic unit cell. These are rendered as: - Precise SVG wireframes at 0.8px stroke in `#3D3A35`, with node intersections marked by 3px filled circles in `#4ECDC4` - The hexagonal graphene lattice renders as a very large (120vw) background texture at 4% opacity on the hero section — not decorative wallpaper but the literal atomic substrate of the site - The C₆₀ buckyball rotates in 3D via CSS `transform: rotateX() rotateY()` on scroll, driven by scroll position — exactly one degree of rotation per 8px of scroll **Vintage motif as material archaeology** The "vintage" motif is expressed not through nostalgic typography but through **material archaeology**: technical illustrations in the style of 19th-century scientific engravings (cross-hatched, annotated, measured). Molecular diagrams carry dimension lines and part callouts as if from a 1887 Kekule structural formula. The hatch lines are SVG patterns at 45 degrees, 1px stroke, 3px spacing, rendered at 15% opacity over diagrammatic elements. **Measurement and instrumentation vocabulary** - Callout lines: 0.5px, `#C4B8AE`, with 4×4px arrowheads, connecting data labels to diagram nodes - Dimension annotations in `Space Mono` 11px - Grid registration marks at page corners: crosshair forms (8×8px cross in `#3D3A35`, 1px stroke) - Section separators: a single horizontal hairline at 0.5px with a centered double-arrowhead indicating the void between sections **Gradient as spectral event** The carbon-arc gradient (`#4ECDC4` → `#2A9D8F` → `#1B4332`) appears in three forms: 1. A subtle diagonal gradient overlay on the hero (10% opacity) that sweeps from upper-right to lower-left at 135 degrees 2. The fill of activated navigation points 3. The underline of the primary CTA — a 2px gradient rule instead of solid colour ## Prompts for Implementation Build this as **a single uninterrupted scroll through carbon's physics** — from molecular structure (hero: the graphene lattice) through material properties (sections: conductivity, strength, weight) to human application (closing: what tanso.tech actually does). The visitor descends through scales: atomic → crystalline → industrial → planetary. **Act 1 — The Lattice (hero, 100vh, dark `#0D0D0B`)** Full-viewport. The background is the graphene hexagonal lattice at 4% opacity. A single large heading: `TANSO` in `Unbounded wght 800` at 12vw, white, tracked at 0.1em. Below it, in `DM Sans wght 300` at 22px, one sentence: "Carbon intelligence for a finite planet." Nothing else. The left-edge navigation hairline is visible at `position: fixed`. As the visitor scrolls down, the lattice background slowly zooms (scale from 1 to 1.06 over the full page scroll height) — the only animation in the hero, driven purely by CSS scroll-timeline. **Act 2 — The Void panels (five pressure-release sections, `#F5F0E8` washi background)** Each section opens with 35vh of empty space. Then a single sentence-heading in `Unbounded` arrives. Then silence again for 10vh. Then body text in two columns (columns 3–6 and columns 7–10 of the 11-column grid), with the right column staggered 4vh below the left — the stagger is fixed in CSS, not a scroll effect. The `spring` animation pattern is used exactly here: body text paragraphs enter with a spring physics easing (`cubic-bezier(0.34, 1.56, 0.64, 1.0)`) — a slight overshoot that evokes the elasticity of a carbon fibre panel under load. Scale from 0.97 to 1.0 combined with a 16px Y-translate, over 400ms. No opacity fade (opacity is overused in the registry) — pure transform. **Act 3 — The Data Chamber (dark panel, `#0D0D0B`)** A single large dark section showing carbon emission data as a geometric-abstract visualisation: a sparse dot matrix where each dot is a hexagon (4px side), positioned on a polar grid, coloured by emission intensity from `#1F1E1C` (low) to `#4ECDC4` (high). The matrix is drawn in SVG, not canvas. No tooltips. No legend. Just the pattern. Below it, one sentence in `Space Mono`: the year, the number, the unit. **Act 4 — The Molecular Archive (vintage-archaeology section)** A scrolling row of five carbon allotrope diagrams — graphene, nanotube, diamond, fullerene, amorphous carbon — each rendered in the 19th-century engraving style. They are arranged horizontally and scroll via `overflow-x: hidden` with a `transform: translateX()` driven by vertical scroll position (1px vertical scroll = 0.4px horizontal translate of the row). This creates lateral drift as the visitor scrolls down. No JS libraries — pure CSS scroll-timeline. **Act 5 — The Declaration (closing, washi background)** One full-viewport section. Left column: the company statement in `Unbounded` at 5vw, broken across three lines for dramatic lineation. Right column: empty except for the C₆₀ wireframe spinning slowly. A single `ember (#E76F51)` gradient-underline CTA below the statement. The CTA is the only interactive element with a visible hover state: the underline extends to full width on hover over 200ms. **Technical constraints:** - Zero JavaScript for scroll effects — use CSS `animation-timeline: scroll()` and `animation-timeline: view()` throughout - The `Unbounded` variable weight axis must be driven by CSS `@property --wght` animated via scroll-timeline - No libraries (no GSAP, no AOS, no Swiper) - `Space Mono` loaded only for data/annotation contexts via `font-display: optional` — no layout shift penalty - The graphene SVG background pattern is inline SVG `` — not a raster image - All gradients use `oklch()` colour space for perceptual uniformity: `oklch(72% 0.09 183)` for teal, `oklch(38% 0.07 162)` for forest ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic = **avant-garde**, layout = **ma-negative-space**, typography = **expressive-variable**, palette = **gradient**, patterns = **spring**, imagery = **geometric-abstract**, motifs = **vintage**, tone = **authoritative**. **Differentiators from every other design in the registry:** 1. **avant-garde aesthetic at 0% frequency.** The frequency report shows `avant-garde` at 0% usage — this is the only design in the registry to use this aesthetic. No other site combines the Bauhaus-laboratory-Brody visual language with material-science content. 2. **ma-negative-space used for structural force, not decoration.** The layout uses Japanese ma (間) as its explicit structural principle — not as a vague "give things room to breathe" platitude, but as a scored architecture where the emptiness between content blocks is measured, weighted, and deliberately sequenced. The 11-column grid (prime number, asymmetric) reinforces this — no easy subdivision, no balanced pairs, only dynamic tension. 3. **Vintage motif expressed as material archaeology.** Where other designs using `vintage` (34% frequency) reach for nostalgic type or sepia tones, this design converts the vintage motif into 19th-century scientific engraving style applied to molecular diagrams — Kekule's structural formulae, cross-hatch shading, dimension callouts. This is vintage-as-methodology, not vintage-as-nostalgia. 4. **Zero-JS scroll effects via CSS scroll-timeline.** The `spring` animation pattern, scroll-driven variable-font weight axis, and parallax-free horizontal drift section are all implemented with native CSS `animation-timeline: scroll()` and `animation-timeline: view()`. This is technically distinct from every other design that relies on GSAP or AOS for scroll effects — the physics live entirely in CSS custom properties. 5. **The carbon-arc gradient as spectral fact, not decoration.** The gradient (`#4ECDC4` → `#2A9D8F` → `#1B4332`) maps to actual carbon plasma arc emission spectral peaks. It is not a fashionable gradient; it is a data-derived colour sequence. Used in oklch() for perceptual uniformity — a technique not seen elsewhere in the registry. 6. **Avoided overused patterns:** no `centered` layout (83% usage), no `parallax` pattern (74%), no `mono` typography (74%), no `warm` palette qualifier (88%), no `stagger` animation (49%) as primary pattern — the spring pattern is used instead with intentional physical metaphor.