# Design Language for tanso.center ## Aesthetics and Tone **Tanso** (炭素) is the Japanese word for carbon — element 6, the backbone of all organic chemistry, the ghost in every living thing. The site is built around that fact: carbon is invisible and everywhere, the structural truth beneath beauty. The aesthetic is **y2k-futurism colliding with authoritative stillness** — chrome logic intersecting with the slow amber of warm wax. The visual mood is a high-end materials-science journal that was redesigned in 2001 by a Tokyo studio obsessed with early CGI chrome and translucent acrylic panels. It radiates institutional authority without ever descending into corporate gray. The feeling is cold precision warmed by honeyed light — a laboratory that smells faintly of beeswax and ozone. Y2K-futurism here is **restrained**: no lens flares, no raves, no holographic interference. Instead it is expressed through: - Razor-thin dividers at 0.5 px that glow faintly like heated filament wire - Serif headlines with letter-spacing tightened to −0.03 em — the typographer's scalpel - Flat chrome fills on structural elements (not gradients — flat, like polished carbon fiber) - Amber and warm cream pooling against absolute black, the way candlelight pools in a dark lab The tone is **authoritative without condescension**: the voice of a materials scientist presenting a career-defining finding to a room of peers. No persuasion. No selling. Only the confidence of a domain that has nothing to prove. ## Layout Motifs and Structure The page is built as a **full-bleed vertical ribbon** — five panels, each 100 vh, each edge-to-edge with no visible margin at the outer boundary. The ribbon is not scrollable in the conventional sense: it is a *chemical chain* — each panel bonds to the next via a morphing seam, a 120-frame SVG path that swells, contracts, and resolves as the viewer scrolls past the boundary. Panel anatomy: 1. **Hero panel** — 100 vw × 100 vh. A single large-format photograph (carbon fiber weave or graphite mineral cross-section, extreme close-up) occupies the full bleed beneath a honey-amber overlay at 55% opacity. The word mark "tanso" appears centered, set in 18 vw display serif, white at 90% opacity. Below it: a single sentence in 1.2 rem body serif, amber `#C9901A`. 2. **Substance panel** — split at 45/55 by a vertical seam. Left: pure black `#0A0906` with body copy in warm cream. Right: a second photograph (scanning electron microscope imagery of carbon nanotube bundles, treated to honeyed duotone `#C9901A` / `#F5E9C8`). The vertical seam is the flowing-curve motif — an SVG cubic Bézier that breathes 4 px left-right on a 6-second loop. 3. **Principle panel** — full-bleed black with a single large numeral (the atomic number: "6") set at 50 vw in ultra-light serif, `#C9901A` at 15% opacity, behind the copy block. A four-line prose passage in 1.4 rem is centered at 48 ch max-width. 4. **Evidence panel** — a 3-up horizontal set of photographs (tight crops: pencil graphite, diamond facet, laboratory sample), each full-height in its column, with floating captions in 0.85 rem mono below. The captions appear by morphing into view — individual letters arriving as if being typed by a slow, deliberate hand. 5. **Close panel** — returns to the hero palette: full-bleed honey amber `#C9901A` at full opacity. Black serif type. A single closing sentence, large. No navigation, no footer links. The morphing seam between panels is the structural signature: a full-width SVG (100 vw × 120 px) whose central path shape-morphs between a straight line and a flowing sinusoid on scroll entry. The seam color is `#C9901A` at 30% — visible as warm amber thread between black panels. ## Typography and Palette **Type system — one serif family, three weights, no sans:** - **Display (wordmark, numerals):** [Cormorant Garamond](https://fonts.google.com/specimen/Cormorant+Garamond), weight 300 Light Italic, set at 14–20 vw for wordmark, 40–50 vw for the numeral "6". Letter-spacing: −0.03 em. Line-height: 0.92. This is the blade. - **Body (paragraphs, captions):** [Cormorant Garamond](https://fonts.google.com/specimen/Cormorant+Garamond), weight 400 Regular, 1.1–1.4 rem. Line-height: 1.72. Maximum 52 ch column width. No hyphenation. Justified alignment only in the Principle panel. - **Data labels, photo captions:** [EB Garamond](https://fonts.google.com/specimen/EB+Garamond), weight 500 Medium, 0.78 rem, letter-spacing +0.12 em, uppercase. This provides the only "small caps" energy in the system. **Palette — honeyed-neutral:** | Role | Hex | Description | |---|---|---| | Amber signal | `#C9901A` | Primary accent — heated carbon, amber resin | | Warm cream | `#F5E9C8` | Body text on dark, soft light | | Pale honey | `#E8D5A3` | Secondary text, secondary UI | | Deep carbon | `#0A0906` | Primary background — not pure black, slightly warm | | Charcoal mid | `#1C1713` | Secondary background, panel alternates | | Ash gray | `#4A4038` | Tertiary text, borders | | Chrome white | `#F0ECE4` | Highlight text in y2k chrome moments | The palette is deliberately narrow. No blue. No green. No cool cast. The warmth of carbon burning vs. the coldness of carbon structure — resolved always toward amber. ## Imagery and Motifs Imagery is **photography-exclusive**, but treated in two modes — never raw: 1. **Duotone Carbon Mode**: All photographs are processed to a two-color duotone using `#0A0906` (deep carbon) as shadow and `#C9901A` (amber) as highlight. The processing is tight — shadows go fully black; mid-tones shift amber; highlights become the pale cream `#F5E9C8`. The effect is like viewing a specimen under a sodium-vapor lamp. 2. **High-Clarity Window Mode**: The SEM (scanning electron microscope) imagery in the Substance panel right column is kept at higher fidelity — the duotone is applied more loosely, letting the structural geometry of the nanotube weave remain visible. This imagery is the only moment where the y2k-futurism shows its technical face: the precision geometry of carbon at nanoscale. **Flowing-curve motifs** appear in three forms: - The SVG seam paths between panels (described in layout section) - A persistent background layer on the hero panel: three large, slow-moving Bézier arcs at 8% opacity, `#C9901A`, animating with a 24-second loop — like heat shimmer or the slow flexing of a carbon fiber sheet under load - Caption underlines drawn as hand-calibrated curved paths (not `text-decoration`) — each one a unique SVG drawn from a custom curve set **No icons.** No decorative bullets. No arrow glyphs. Structure is provided by whitespace and seams alone. ## Prompts for Implementation Treat the build as **a five-panel materials-science manifesto** — the visual equivalent of a published Nature paper bound in amber-lacquered carbon fiber. Every implementation decision must serve the fiction of scholarly authority made beautiful. **Panel transitions:** Use the `morph` pattern via GSAP `MorphSVGPlugin` or a hand-coded SVG `d` attribute interpolation. Each seam path morphs on scroll entry using `IntersectionObserver` + `requestAnimationFrame`. The morph duration is 1.8 seconds with an ease-out-cubic curve — never linear, never bouncy. **Photograph treatment:** Apply CSS `mix-blend-mode: multiply` on an amber overlay div (`background: #C9901A`) sitting above each image. Then add a second overlay div with a CSS custom property `--honey-overlay` tinted `#F5E9C8` at 10% to lift the shadows slightly. This two-layer duotone approach preserves edge sharpness while achieving the amber-carbon look without heavy image processing. **Background Bézier arcs:** Three `` paths on the hero, animated with a custom keyframe sequence: each arc shape-shifts between two saved `d` attribute states over 24 s (staggered starts at 0s, 8s, 16s). The arcs are `stroke: #C9901A`, `stroke-width: 1.5`, `fill: none`, `opacity: 0.08`. **Caption morph-reveal:** Each photo caption letter arrives by morphing its SVG path shape from a collapsed glyph outline (all bezier handles at centroid) to the final letterform. Use a stagger of 0.04 s per character. Trigger on `IntersectionObserver` at 20% viewport entry. **Typography loading:** Load both Cormorant Garamond and EB Garamond via Google Fonts with `display=swap`. Set CSS `font-synthesis: none` to prevent faux-italic artifacts on the display headings. **Scroll behavior:** `scroll-snap-type: y mandatory` on the body, with each panel as a snap target. The morph seam sits at the snap boundary — it is visible only during the 150 px snap-scroll deceleration zone. **Avoid entirely:** CTA buttons, pricing blocks, testimonial sections, feature lists, stat grids, navigation bars with links, social share icons, newsletter modals, hover tooltips, animated counters, gradient backgrounds (use flat fills only), drop shadows (use opacity and duotone instead), any color outside the seven-value palette. ## Uniqueness Notes 1. **y2k-futurism at 1% frequency, expressed via material science rather than internet nostalgia.** Every other y2k treatment in the wild reaches for chrome gradients, star glows, and early-internet UI skeuomorphism. This design uses the y2k futurist vocabulary of thin hairlines, extreme letterform compression, and flat chrome fills — but applies them to the language of scientific publishing, creating a combination that appears nowhere else in the registry. 2. **Honeyed-neutral palette at near-zero frequency, stripped of warmth clichés.** The registry shows `honeyed-neutral` at extremely low usage. Most warm-amber palettes are applied to food, wellness, or artisan craft — all soft and approachable. Here the honey amber is used in a cold, scientific, authoritative context: `#C9901A` against `#0A0906` carbon black. The warmth reads as chemical heat, not comfort. This inversion is unique. 3. **Flowing-curve motifs as structural seams rather than decoration.** The `flowing-curves` motif in the registry is typically deployed as background blobs, hero section dividers, or decorative swooshes. Here the curves are load-bearing: they are the morphing SVG seams that define panel boundaries and serve as the primary interaction gesture. The curves are functional architecture, not ornament. 4. **Scroll-snap combined with morph seams.** The `scroll-snap-type: y mandatory` + morphing SVG boundary combination is not present in any other registry design. Scroll snap panels are common individually; using the snap deceleration zone as the display window for the morph animation is an interaction model unique to this design. 5. **Seed:** aesthetic: y2k-futurism, layout: full-bleed, typography: serif-classic, palette: honeyed-neutral, patterns: morph, imagery: photography, motifs: flowing-curves, tone: authoritative 6. **Avoided overused patterns from frequency analysis:** `centered` layout (83% — skipped in favor of full-bleed edge-to-edge), `photography` used raw (87% — all photography is duotone-processed, never raw), `spring` animation pattern (32% — replaced with `morph`), `vintage` motif (34% — replaced with `flowing-curves`), `friendly` tone (15% — replaced with `authoritative`).