# Design Language for tanso.biz ## Aesthetics and Tone `tanso.biz` is a **retro-futuristic laboratory journal for effervescent ideas** — imagine a 1962 chemistry textbook that has been rebound in glowing neon-orange vinyl and annotated in phosphorescent ink by a scholar who cannot stop thinking. The word *tanso* (炭素, carbon) grounds everything: the site is carbon in all its forms — graphite pencil marks on graph paper, carbonation fizzing through liquid, carbon bonds drawn in structural-chemistry notation. The aesthetic is **retro-futuristic handwritten**: technical precision of mid-century scientific illustration colliding with dopamine-electric color that feels like a CRT monitor tuned to a frequency no one planned. The tone is **scholarly-intellectual but fizzing with delight** — not the cold authority of a peer-reviewed abstract, but the marginalia-stuffed notebook of someone who finds carbon chemistry genuinely thrilling. Every heading reads like a lab note. Every paragraph ends with a superscript observation. The site does not sell anything. It demonstrates that knowing things about carbon is intrinsically wonderful. Mood anchors: - A neon-lit periodic table from 1983, annotated in three pen colors - Carbonated water pressed against backlit glass, bubbles climbing in lazy arcs - A chemistry lab at 11 PM, fluorescent tubes slightly buzzing, someone still working - The dopamine spike of a beautiful molecular diagram ## Layout Motifs and Structure The page is **centered** but subverts centeredness through an **off-register notebook grid** — the background carries faint blue quadrille lines (chemical graph paper) at 24px intervals, but they are printed at 88% opacity and rotated 1.2° from true horizontal. This rotation is imperceptible at first but creates a subtle wrongness that rewards attention. The content column sits at exactly 680px, perfectly straight, while the grid beneath leans. **Structural sequence (top to bottom):** 1. **Hero band** — full-viewport-height, centered column. The domain wordmark `tanso` is set in Caveat Brush at ~120px, rendered as if written with a thick marker in two passes (a slightly-offset duplicate layer at 15% opacity creates the marker bleed). Beneath it, the element symbol **C** from the periodic table, drawn as a proper period-table tile in dopamine-yellow, floats and bobs gently. Surrounding the tile: six smaller tiles appear on hover — C₆₀, CO₂, CO, CH₄, C₂H₅OH, C₁₂H₂₂O₁₁ — each a different neon tint, rising slowly like carbonation. 2. **Content panels** — three to five full-width sections, each with a centered 680px content column. Each section has a **left-margin annotation strip** (80px wide, set in Homemade Apple at 11px) that runs like a science notebook's margin — dates, asterisked side-thoughts, underlines, looping connectors to terms in the body. These annotations are purely decorative but typed real content. 3. **Bubble field** — between sections, a 120px-tall **inter-section bubble zone**: translucent circles of varying radius (8–64px) rendered in CSS with radial gradients simulating the refraction of a water bubble. They drift upward on scroll-trigger, wobble on hover, and pop (scale-to-zero with a blur burst) when clicked. 4. **Footer** — a single periodic-table row of carbon compounds, each as a tiny tile. Minimal: just the domain, a carbon atom diagram, and a note in Caveat about the site. **No sidebar. No nav bar. One scrollable column with living annotations and bubbles.** ## Typography and Palette **Type system (all Google Fonts, verified):** - **Display and wordmark — `Caveat Brush`** — the hand-drawn, felt-tip-marker face. Used only for the site title and major section headings (H1, H2). Set at 96–120px for the hero wordmark, 48–56px for section heads. Slightly irregular letterforms communicate the scholar's hand, not a designer's choice. Letter-spacing: -0.02em. Line-height: 1.1. - **Body and annotation — `Caveat`** (the regular weight companion to Caveat Brush) — used for body copy, pullquotes, and the margin annotation strips. Body at 18px, weight 400. Annotation strips at 11–12px, weight 600, rotated -90° where running along the left margin. This keeps the handwritten register consistent at every scale. - **Chemical notation and data — `Source Code Pro`** — used exclusively for molecular formulas, compound names in their IUPAC forms, and any numeric data. Set at 14px, weight 400. Color: neon-cyan (#00FFE0). This creates a deliberate register break: the human writes in Caveat, the periodic table answers in Source Code Pro. **Palette — dopamine-neon on near-black:** - `#0D0D14` — deep carbon black (primary background; think graphite smudge) - `#F5F0E8` — warm cream (primary text; aged graph paper) - `#FFE000` — dopamine yellow (primary accent; the C tile, key highlights) - `#FF4DD8` — neon magenta (secondary accent; hover states, compound tiles) - `#00FFE0` — neon cyan (tertiary accent; molecular formulas, code spans) - `#FF7A1A` — electric tangerine (CTA-adjacent, bubble highlights, H3 color) - `#7B2FFF` — electric violet (structural bond lines, annotation connectors) - `#1A1A2E` — deep navy (section background alternates; slightly cooler than the base black) Graph paper grid lines: `rgba(0, 255, 224, 0.06)` at 24px squares, 1.2° rotation. ## Imagery and Motifs **No photography.** The entire visual language is hand-drawn and chemical: **Primary motif — bubble-playful water-bubble field:** Every bubble is a CSS-only sphere: a `border-radius: 50%` div with a radial gradient from `rgba(255,255,255,0.45)` at the top-left specular highlight, through a midtone tint of the section's accent color, to transparent at the bottom-right. A second pseudo-element adds a thin `1px` ring at `rgba(255,255,255,0.2)`. Sizes range from 8 to 96px. On idle: bubbles drift upward via a `@keyframes float` at 4–12s random durations. On hover: the bubble under cursor presses outward (scale 1.06 with hover-lift shadow), then rebounds. On click: the bubble pops — `scale(0) blur(8px)` over 200ms, then a new bubble births at a random offset after 400ms. **Secondary motif — carbon structural diagrams:** Molecular bond diagrams (benzene ring, C₆₀ buckminsterfullerene outline, diamond lattice cross-section) drawn as thin-line SVGs at `1.5px` stroke weight in `#7B2FFF`. These appear as background decoration behind section content, at 8% opacity, large (400–600px wide), never interactive. They reinforce the carbon theme without overwhelming the reading experience. **Tertiary motif — periodic table tiles:** The C tile from the periodic table is the site's mascot. The hero features it prominently. In the footer row, a series of carbon-compound tiles (CO₂, CH₄, etc.) are rendered as 48×48px CSS boxes: border `2px solid` in the tile's accent color, neon glow via `box-shadow`, atomic number in Source Code Pro at top-left, formula centered in Caveat Brush. **Margin annotation system:** Left-margin annotation strips contain real carbon-chemistry trivia written in Caveat at 11px: "carbon is the 4th most abundant element in the universe by mass ★", "graphene is one atom thick", "coal is mostly carbon — but so is a diamond". Styled with yellow highlighting (`background: rgba(255,224,0,0.15)`) on key phrases. ## Prompts for Implementation Build `tanso.biz` as a **single-page scrolling field notebook** — the visitor is reading someone's research journal, not a website. The page has no navigation. It starts with the lab-bench hero, then unfolds through a series of carbon stories told in handwritten text, bubble fields, and molecular diagrams. Scroll is the only navigation. **Implementation priorities:** **1 — The graph paper background.** A single fixed `position: fixed` SVG background layer that covers the viewport. It contains two `` elements: a 24px grid of 0.5px lines in `rgba(0,255,224,0.06)`, and a 120px major-grid line every 5 cells at `rgba(0,255,224,0.10)`. The entire SVG is rotated `rotate(1.2deg)` and scaled to `110%` of viewport so the rotated pattern bleeds to the edges without gaps. The content column above it is perfectly level — the tilt is only in the background. **2 — The bubble field system.** Implement bubbles as a JavaScript class `BubbleField` that takes a container element and a count (default 12). Each bubble is a `
` with inline styles for position, size (random 8–96px), hue-rotate on the base gradient, and animation-delay. The float animation is a CSS keyframe: `translateY(-40px)` over 6–14s, easing sine, infinite alternate. On hover, the `hover-lift` pattern fires: `transform: scale(1.08) translateY(-6px)` with `box-shadow: 0 12px 40px rgba(255,224,0,0.35)`. On click, the pop sequence fires imperatively via JS classList manipulation. A `BubbleField` instance lives between every two major sections. **3 — The hero periodic tile and satellite compounds.** The hero C tile is a 96×96px CSS box. Six satellite compound tiles start at the C tile's center and animate outward on page load: use `@keyframes orbit-out` that takes each tile from `scale(0) translate(0,0)` to its final position in a 180px radius. The six positions are evenly distributed on a half-circle above the C tile (since the wordmark is below). On hover of any satellite tile, it glows — `box-shadow: 0 0 24px currentColor` — and a tooltip appears in Caveat showing the compound name. **4 — Caveat Brush wordmark treatment.** The `tanso` wordmark is two `` elements overlaid: the base layer in `#FFE000`, the shadow layer in `#FF4DD8` at 15% opacity, offset `3px 3px`. This simulates the double-pass marker bleed. No image or SVG — pure CSS layering. On page load, the wordmark plays a `@keyframes jot-in`: each character's `opacity` goes 0→1 with a slight `skewX(3deg)` → `skewX(0)` over 60ms staggered per character via JS-set `--char-index` custom property. **5 — Margin annotation strips.** Each content section has a `