# Design Language for tanso.wiki ## Aesthetics and Tone tanso.wiki is a **living carbon ledger etched in phosphor light** — a site that treats carbon (炭素, *tanso* in Japanese) not as an environmental abstraction but as a raw material with mass, texture, and weight. The visual world is that of a charcoal artist's studio where the walls are covered in smudged rubbings, neon spectroscopy printouts, and torn scientific journals pinned under cracked glass. The aesthetic is **dark-mode industrial meets serif-revival editorial**: the blackness of a freshly broken piece of graphite next to the hot glow of a spectrometer reading out in electric green and magenta. The tone is **raw-authentic** — no polish theater, no inspirational corporate softness, no glowing "Join the Movement" buttons. The page reads like a field notebook crossed with a transmission from a particle accelerator: data-heavy, material-honest, abrasively beautiful. Headers are set in a old-press serif face that feels stamped rather than typeset. Body copy is measured, scientific, deliberately dense. Mood references: the chemical lab scenes in *True Detective* Season 1; early-era CERN control-room print culture; charcoal and graphite geology core samples under UV light; Ryoji Ikeda's data installations. The visitor is not being sold to. They are being given a reading — a spectral analysis of something real. ## Layout Motifs and Structure The governing structure is **hero-dominant with sequential reveal panels** — the viewport opens on a full-bleed, atmospheric hero that communicates the entire identity of the site in one breath, then gives way to a sequence of dense content panels that unfold downward like pages torn from a scientific field log. **Hero (100svh).** The hero occupies the full viewport with zero padding-escape. Behind the type sits a procedurally generated **carbon lattice field** — a canvas-rendered hexagonal graphene structure rendered in hairline strokes at 0.4px weight in `#00FF9C` on pure black `#050505`. The lattice scrolls at 0.15× the viewport parallax rate so it feels geological, massive. The site title `tanso.wiki` is set in display serif at ~14vw, bleeding into the right edge, in `#F0EDE8` (off-white chalk). Beneath the title: a two-line tagline in monospaced type, typed character by character via typewriter reveal, reading: `炭素 — The carbon repository.` followed by a blinking block cursor. **Structure below the hero.** The page is a **single continuous vertical scroll** divided into 4 content panels: 1. **Spectral Panel** — a full-width scan/waveform ribbon: a real-looking carbon emission spectrum rendered as a horizontal SVG waveform bar in neon green/magenta against near-black, with labeled wavelength callouts in mono type. Width: 100vw, height: 180px. No interactivity — pure atmosphere. 2. **Fragment Panels** — 3-column broken-grid layout (desktop) or stacked (mobile). Each card is a torn-edge fragment — a CSS `clip-path: polygon()` irregular cut — with faint paper grain texture underneath neon-lit content. Cards carry asymmetric gutters: left card at 2-column width, center and right 1-column each. 3. **Field Notes Scroll** — a horizontal scroll section (scroll-snap-x) where individual notebook "pages" slide in from right. Each page has a faint ruled-paper grid at 10% opacity, content in serif body text, and a hand-marked annotation highlight in `#FF2D78`. 4. **Carbon Footer** — a minimal footer: only the domain name in a 3vw serif, a small °C atom SVG mark, and a copyright line. Background `#0A0A0A`. **Grid:** 12-column CSS grid with 2.4vw gutters on desktop, 1-column on mobile. Max content width: 1440px. **Depth:** Two z-levels only — background (lattice + panel fills) and foreground (type + interactive elements). No card shadows — depth comes from contrast alone. ## Typography and Palette **Typography — serif-revival + tech-mono, strictly Google Fonts.** The type system is built on three faces in hard contrast: - **Display / Hero Headings:** [Cormorant Garamond](https://fonts.google.com/specimen/Cormorant+Garamond) — weight 600 for the hero title and section headers. Optical size pulled large; the high contrast between hairline and stem gives it the look of something pressed in a letterpress from a zinc plate. Used in `#F0EDE8` on dark backgrounds. - **Body / Editorial:** [EB Garamond](https://fonts.google.com/specimen/EB+Garamond) — weight 400/500 for body paragraphs, field notes, and captions. Set at 18px / 1.7 line-height. The long-form running text about carbon isotopes and material science lives here. Used in `#C9C5BF`. - **Mono / Data / Labels:** [JetBrains Mono](https://fonts.google.com/specimen/JetBrains+Mono) — weight 400 for spectral wavelength labels, chemical formulas, file paths, and the typewriter-reveal tagline. Used in `#00FF9C` for data labels and `#FF2D78` for annotation marks. **Scale:** - Hero title: `clamp(6rem, 14vw, 14rem)`, Cormorant Garamond 600 - Section headers: `clamp(2.4rem, 4vw, 4.8rem)`, Cormorant Garamond 600 - Body: `1.125rem / 1.8`, EB Garamond 400 - Labels/mono: `0.8125rem`, JetBrains Mono 400, letter-spacing 0.08em **Palette — dark-neon:** | Token | Hex | Use | |---|---|---| | `--void` | `#050505` | True black background, hero, footer | | `--carbon` | `#0E0E0E` | Panel fill, card backgrounds | | `--coal` | `#1A1A1A` | Elevated surfaces, field-note pages | | `--ash` | `#C9C5BF` | Body text, secondary type | | `--chalk` | `#F0EDE8` | Display headings, hero title | | `--phosphor` | `#00FF9C` | Carbon lattice lines, data labels, glows | | `--spectral` | `#FF2D78` | Annotation highlights, hot accent | | `--ion` | `#B060FF` | Tertiary accent, rare decorative glow | | `--waveform` | `#22FFE5` | Spectrum waveform second color | No gradients except one: the Spectral Panel background uses a subtle `linear-gradient(180deg, #0E0E0E 0%, #050505 100%)`. ## Imagery and Motifs **Imagery is mixed-media** — the page combines procedurally generated canvas art, SVG data-art, and treated photography. No stock lifestyle photos. No portraits. Everything is material and data-derived. **Visual elements:** 1. **Graphene lattice (canvas).** A JavaScript canvas renderer draws a hexagonal grid — the molecular lattice of graphene — using `#00FF9C` hairlines at 0.4px on `#050505`. The lattice slowly drifts right at 18s cycle, giving it the feeling of a real atomic film. On scroll, nodes at the pointer's proximity receive a `pulse` animation (grow radius to 3px, fade back in 600ms). The lattice is generated once at load, no external assets. 2. **Carbon emission spectrum (SVG).** A 1800px-wide SVG waveform replicating the carbon atomic emission spectrum — peaks at approx 193nm, 248nm, 658nm mapped to the screen. Hot spectral lines glow with `filter: blur(1px)` and a `drop-shadow(0 0 4px currentColor)`. Lines colored via `--phosphor` and `--waveform`. 3. **Torn-fragment cards.** CSS `clip-path: polygon()` with 8-12 vertices creates authentic torn-paper irregular edges on content cards. Each card has a `background-image: url("data:image/svg+xml,...")` paper grain texture at 4% opacity. The torn edge is the motif: nothing on this page is pristine or finished. 4. **Ruled-page overlay.** The Field Notes scroll section uses `repeating-linear-gradient` to render faint horizontal rules at 28px intervals — a physical journal grid at 8% opacity over the `--coal` card background. 5. **Futuristic annotation marks.** Small `` bracket glyphs (`⌐` style, 1.5px stroke) mark key data points in the body text — the kind of marginal notation a scientist leaves in a field book. Rendered in `--spectral` `#FF2D78`. 6. **°C atom mark.** A custom SVG in the footer: the letter C with a superscript degree symbol, styled as a minimal orbital atom diagram at 32px. Neon stroke `#00FF9C` on void background. **Motifs — futuristic:** The site carries three recurring motif signatures: - **Hexagonal geometry** — lattice cells, clip-path card edges echoing hex forms, a subtle hex grid at 4% opacity as the base layer on all panels. - **Spectral data art** — waveform ribbons, frequency peaks, labeled emission lines. Borrowed from physics instrumentation aesthetics. - **Torn material** — charcoal rubbings, torn edges, imperfect paper surfaces. The futurism here is not clean; it is **raw-material futurism**, the future as seen from inside a materials lab, not a product launch stage. ## Prompts for Implementation Build tanso.wiki as a **single full-scroll atmospheric page** that reads as a scientific artifact rather than a website. No navigation tabs. No multi-page routing. No pricing blocks, testimonials, stat counters, CTA sections. **Macro structure (top to bottom):** 1. **Hero (100svh).** Canvas-rendered graphene lattice behind. Cormorant Garamond site title `tanso.wiki` at `14vw`, color `#F0EDE8`, positioned top-left with `padding: 8vw 6vw`. Below the title: monospaced typewriter reveal of `炭素 — The carbon repository.` using JetBrains Mono `#00FF9C`. Typewriter runs at 55ms per character, 400ms start delay, ends with a blinking `█` cursor. No hero CTA button. No "scroll down" arrow. The page teaches the visitor to scroll by being irresistible. 2. **Spectral Panel (180px tall, 100vw wide).** Full-width SVG emission spectrum ribbon. Background `#0A0A0A`. Waveform peaks in `#00FF9C` and `#22FFE5` with `filter: drop-shadow(0 0 6px #00FF9C)`. Labels in JetBrains Mono `0.7rem` in `#C9C5BF`. Animate on scroll-enter: peaks draw in left-to-right over 1200ms using SVG stroke-dasharray/dashoffset technique. 3. **Fragment Grid (auto height).** 12-column grid, desktop: left card spans col 1–7, center card col 8–10, right card col 11–12 with a 1-row offset (CSS `grid-row: 2`). Each card: clip-path torn edges, grain texture, Cormorant heading, EB Garamond body. Scroll-triggered stagger reveal: cards enter from below with `translateY(40px) → 0` at staggered 120ms offsets, `cubic-bezier(0.34, 1.56, 0.64, 1)` (elastic easing). This is the primary elastic pattern — the overshoot on card entry is audible in how the eye reads it. 4. **Field Notes Horizontal Scroll (100svh).** `overflow-x: scroll` with `scroll-snap-type: x mandatory`. 5 notebook pages, each `80vw` wide, `scroll-snap-align: start`. Page background `#1A1A1A` with ruled-line gradient overlay. Page content: EB Garamond body text with inline SVG annotation brackets in `#FF2D78`. JetBrains Mono footnotes at `0.75rem`. Horizontal scroll driven natively; no JS scroll hijacking. The elastic snap feel is provided by CSS `scroll-behavior: smooth` plus `overscroll-behavior-x: contain`. 5. **Carbon Footer (100px).** `#0A0A0A` background. `tanso.wiki` in Cormorant 3vw centered. SVG °C atom mark. `© tanso.wiki` in JetBrains Mono `0.75rem` `#C9C5BF`. **Animation guidance:** - **Graphene lattice pulse:** On `mousemove`, compute distance from each lattice node to pointer. Nodes within 80px radius animate: `r` attribute from 0 to 3, opacity 1 to 0, duration 600ms, `ease-out`. Pure requestAnimationFrame loop, no library needed. - **Elastic card reveal (IntersectionObserver):** When a `.fragment-card` enters `rootMargin: "0px 0px -10% 0px"`, add class `.revealed`. CSS transition: `transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease`. Cards stagger via `transition-delay` set inline as `(index * 120)ms`. - **Spectrum draw-in:** On entry, set `stroke-dasharray: ` and animate `stroke-dashoffset` from `` to `0` over 1200ms `ease-in-out`. Each spectral peak is a separate `` element, staggered 40ms apart. - **Typewriter reveal:** Pure JS: iterate over characters, append to DOM, schedule next character at 55ms via `setTimeout`. Replace final space with `█` that blinks via CSS `animation: blink 1s step-end infinite`. **AVOID:** CTA blocks, pricing tables, feature grids, progress bars with percentages, "Our Team" sections, logos-we-work-with rows, testimonial carousels, floating chat widgets, notification banners. **Bias toward:** Immersive entry, data-art richness, material honesty, the feeling that the page is itself a specimen — something to study, not buy. ## Uniqueness Notes **3 differentiators from the existing 515-design corpus:** 1. **Elastic snap as scientific instrument behavior, not playful bounce.** The frequency report shows `elastic` at 7% — already somewhat used, but universally deployed for playful/consumer UX (cards bouncing into a grid, buttons overshoot on hover). tanso.wiki subverts this: the elastic overshoot on fragment cards entering the viewport reads not as cute but as a **seismograph needle finding equilibrium** — the easing tells the visitor that the content landed with weight. The `cubic-bezier(0.34, 1.56, 0.64, 1)` curve is the same function as an underdamped harmonic oscillator, which is exactly what a physical pen on a chart recorder does. The elastic pattern is re-contextualized as material physics. 2. **Mixed-media as data-art + torn material, not collage aesthetics.** The registry shows `mixed-media` at only 3%, and the implementations that exist use it to mean image/illustration/photo collage. tanso.wiki defines mixed-media as a collision of **scientific data visualization (SVG spectra, canvas lattices) and degraded material surfaces (torn clip-paths, grain overlays)** — the mix is between the digital-precise and the physically-imperfect, not between photo and illustration styles. This is genuinely distinct from anything in the current corpus. 3. **Serif-revival as a forensic tool, not literary warmth.** Cormorant Garamond and EB Garamond appear in the corpus (both used in adhoc.quest for example) but always in roles serving romance, atmosphere, or scholarly credibility. On tanso.wiki, the serif is used forensically: the high contrast hairlines serve the same function as **fine-rule measurement gradations on a scientific instrument** — they provide precision annotation of data, not narrative warmth. The serifs are cold. They stamp. They do not flow. Seed: aesthetic: dark-mode, layout: hero-dominant, typography: serif-revival, palette: dark-neon, patterns: elastic, imagery: mixed-media, motifs: futuristic, tone: raw-authentic **Avoided patterns (per frequency analysis):** - `centered` layout (83% — massively overused): tanso.wiki uses left-anchored hero text and asymmetric fragment grid instead. - `photography` imagery (87% — most overused): zero photography; all imagery is procedurally generated or SVG data-art. - `warm` palette (88% — dominant): the entire palette is cold and neon; zero warm tones. - `parallax` pattern (74% — overused): parallax is limited to one subtle layer (lattice at 0.15× scroll rate) rather than being a layout device. - `friendly` tone (15% — overused for soft sites): the tone is abrasive, raw, and deliberately anti-consumer.