# Design Language for tanso.in ## Aesthetics and Tone tanso.in takes its name from the Japanese **炭 (tan, "charcoal")** and **炭素 (tanso, "carbon")** — and the whole site is built as a quiet meditation on that one black material in all its forms: the still-warm cinder, the polished binchōtan rod that rings like a bell when struck, the smear of ink ground from a sumi stick, the soft graphite ghost of a pencil line, the diamond's distant cousin. The aesthetic is **wabi-sabi**: it embraces ash-smudge, uneven edges, the asymmetry of a hand-fired kiln, and the beauty of something that has been *burned* — incomplete, impermanent, imperfect, and all the more alive for it. There is no gloss here, no chrome, no neon, no frosted glass. The mood is **zen-contemplative and grounded-earthy** — the hush of a tea room at dusk, charcoal glowing low in the brazier, a single brushstroke drying on washi paper. Think of Hasui Kawase's woodblock twilights drained of their indigo until only the soot remains; think of Antoni Tàpies' burnt-matter canvases; think of the matte, powdery black of a lump of lump-charcoal that absorbs light rather than reflecting it. The site should feel like it was *fired*, not built — a thing pulled from embers and left to cool, smelling faintly of woodsmoke. ## Layout Motifs and Structure The page is governed by **間 (ma) — negative space as the active material**, not the leftover. The default state of any screen is roughly 70% empty: vast fields of warm off-white washi, with content arriving sparsely, like ash settling. There is no card grid. There is no bento box. There is no dashboard. Content sits in a **single asymmetric column that drifts** — never centered, always offset to the left third or the right third, the way a charcoal stick is laid diagonally across a clean sheet. - **The ash-line spine.** A single thin vertical rule of charcoal grey runs down the page slightly off-center (about 38% from the left). Sections "hang" off this spine asymmetrically — text-block left, image-mark right, then text-block right, image-mark left — a slow zigzag descent. - **Five firing-stages, vertically scrolled.** The narrative descends through five states of carbon: (1) *Wood* — the unburnt thing; (2) *Ember* — the moment of combustion; (3) *Charcoal* — the cooled, useful black; (4) *Ink* — carbon dissolved into expression; (5) *Diamond/Graphite* — carbon's far horizon, the same atom rearranged. Each stage owns one full viewport-plus of vertical space, separated not by hard dividers but by widening bands of emptiness — the gaps grow as you descend, the page literally breathing slower toward the bottom. - **Margins that smudge.** The content well never has a crisp left/right boundary; instead, the washi background carries faint, irregular charcoal-dust gradients at the page edges, as if a sooty hand had brushed past. Text aligns to an invisible grid but is allowed to ragged-right freely. - **No fixed navigation.** A minimal navigation: a small ink-circle (enso) in the top-left that, when clicked, doesn't open a menu but simply scrolls smoothly between the five firing-stages. No hamburger. No sticky header bar. ## Typography and Palette **Fonts — all Google Fonts, two voices only, because a tea room does not shout:** - **Headings & stage-names — *Shippori Mincho* (weights 400, 600).** A Japanese mincho serif with crisp, slightly dry brush-terminals that read beautifully even when rendering Latin characters; it carries the calligraphic, ink-on-paper authority the site needs. Stage names ("Wood", "Ember", "Charcoal"…) are set large — clamp(2.8rem, 7vw, 6rem) — in 400 weight, letter-spacing 0.04em, and may be accompanied by the kanji (薪・燠・炭・墨・金剛石) set small beside them in the same face. - **Body & captions — *Zen Maru Gothic* (weights 300, 400)** for the rare paragraphs of prose — its softly rounded humanist terminals keep the long emptiness from feeling cold and clinical. Body copy is generous: 1.25rem, line-height 1.95, max-width 34ch so lines stay short like haiku. - A small amount of *Shippori Mincho* italic-equivalent (its 600 weight, slightly tracked) is used for pull-quotes — a line of poetry per stage, indented off the ash-line spine. **Palette — a near-monochrome graded from soot to smoke, with the faintest possible ember:** - `#F4F1EA` — *Washi* — the warm, paper-grey off-white background, very slightly creamed, never pure #fff. - `#1C1A18` — *Sumi* — the deep brush-ink near-black used for headings and the ash-line spine; warm-toned, not blue-black. - `#3E3A36` — *Charcoal* — mid-grey for body text; the colour of cooled binchōtan. - `#7C746B` — *Ash* — pale taupe-grey for captions, kanji, and the smudged page-edge gradients. - `#B5582A` — *Ember* — a single muted, smoky orange used **once or twice per stage at most** — a glowing edge, an underline, the inside of the enso. Burnt sienna, not safety-orange. Restraint is the rule: the page is 99% greyscale and the ember is the heartbeat. ## Imagery and Motifs **No photography. No 3D renders. No stock illustration.** Every visual is rendered in-browser with SVG, CSS, and canvas — generated, textured, imperfect. - **Sumi-e brush-marks.** Each firing-stage is anchored by one large SVG "brushstroke" — a single sweeping path with intentionally uneven stroke-width (thick where the brush pressed, dry-bristled where it lifted), filled with a subtle charcoal-grain texture. These are abstract: the Wood-stroke is angular and splintery; the Ember-stroke is a comma of orange-edged black; the Charcoal-stroke is a solid, dense bar; the Ink-stroke is a fluid wave that dissolves into spatter at its tail; the Diamond-stroke is a single tight, geometric octahedron outline. - **Charcoal-dust grain.** A faint, animated noise texture (very low opacity, slow drift) overlays the entire page — the visual equivalent of fine ash motes in still air. SVG `` filter, baseFrequency tuned low, applied to a full-bleed rect at ~4% opacity. - **The enso.** A hand-imperfect ink circle — open at one point, thicker on one side — appears as the site's only "logo/nav" element, top-left. It is drawn with an SVG path that's deliberately not a perfect circle. On scroll between stages it slowly rotates a few degrees, as if still wet. - **Kanji as ornament.** The five carbon-state kanji (薪 wood, 燠 ember, 炭 charcoal, 墨 ink, 金剛石 diamond) appear large and faint (Ash colour, ~8% opacity) bleeding off the page edge behind each stage's content — texture, not text. - **Crack-lines.** Thin, branching SVG paths like the surface cracks in fired charcoal run subtly along the ash-line spine at stage boundaries — drawn on as you scroll past. ## Prompts for Implementation Build tanso.in as **one HTML file, one CSS file, one JS module** — a single vertically-scrolled, five-stage contemplative essay on carbon. No CTA buttons. No pricing block. No stat-grid. No testimonial row. No email signup. No contact form. No feature cards. There is only the descent through five states of one black material, roughly 60–90 seconds of slow scrolling. **Storytelling structure (five stages, top to bottom, emptiness widening as you go):** 1. **薪 — Wood.** Open on near-empty washi. The wordmark "tanso.in" small in *Shippori Mincho*, the enso top-left. Far down-left, the splintery Wood brushstroke fades in (path-draw-svg, slow). One line of prose: the unburnt thing, full of latent fire. The huge faint 薪 bleeds off the right edge. 2. **燠 — Ember.** The page darkens *very* slightly (washi shifts ~3% toward grey). The Ember comma-stroke appears off-right, its inner edge glowing #B5582A. A pull-quote about combustion, indented off the spine. A faint, slow pulse of warmth (a barely-visible radial glow that breathes at ~6s intervals) — the only "lively" animation on the page. 3. **炭 — Charcoal.** The dense black bar-stroke, off-left. This is the calm centre of the essay — the most negative space of any stage. Prose about charcoal's paradox: a dead thing that gives heat, purifies water, draws lines. Crack-lines branch along the spine here. 4. **墨 — Ink.** The fluid wave-stroke off-right, dissolving into spatter. Carbon becomes expression. The text here may be set as a short prose-poem, ragged, with one phrase rendered in the enso-ink weight. Spatter dots scatter on scroll (stagger, fade-reveal — appear, never bounce). 5. **金剛石 — Diamond / Graphite.** The tight octahedron outline-stroke, dead-centre for the first and only time — symmetry arrives at the end. The closing line: the same atom, rearranged; soot and brilliance are siblings. The page is now at its emptiest and quietest; the ember is gone entirely; only Sumi on Washi. A long, slow fade-to-stillness. **Animation philosophy — *everything is slow and matte.*** Use only: `path-draw-svg` (brushstrokes drawing themselves over 1.5–3s as they enter the viewport), `fade-reveal` (long, ease-out, 1s+ — content "settles" like ash), `scroll-triggered` reveals via IntersectionObserver, the slow enso rotation, the ~6s ember breathing-glow, and `underline-draw` for the one or two ember accents per stage. **Absolutely no:** cursor-follow trails, parallax-with-mouse, magnetic buttons, tilt-3d, spring/elastic bounces, typewriter, glitch, card flips, counters, marquees. Respect `prefers-reduced-motion` by disabling the grain drift, the ember breathing, and the enso rotation, keeping only instant fades. Default to **stillness**; motion is the exception, used like a single drop of ink. **Texture & feel:** the charcoal-dust SVG noise overlay is essential — it's what makes the flat greyscale read as *burnt matter* rather than *minimalist tech*. Every brushstroke must have uneven stroke-width and a grain fill (SVG pattern or filter). Every edge that can be ragged, should be. The page should look like it could leave soot on your fingers. ## Uniqueness Notes Differentiators against the frequency analysis of 614 existing designs: 1. **Near-monochrome charcoal greyscale with a single muted ember accent** — `monochrome` palette sits at only 16%, and almost the entire corpus skews `warm` (98%) and `gradient` (93%). tanso.in is deliberately desaturated soot-on-washi with one burnt-sienna heartbeat — a chromatic stance the corpus barely occupies. 2. **Wabi-sabi as literal *burnt matter*** — `wabi-sabi` is at 8% and `zen` at 9%; both are usually expressed as serene ceramics or zen gardens. Here wabi-sabi means ash, char-cracks, uneven brush-pressure, and the beauty of a *combusted* thing — a darker, sootier reading of the aesthetic than the corpus shows. 3. **`ma-negative-space` (17%) pushed to an extreme, with emptiness that *widens* as you scroll** — the page literally slows its own breathing toward the end. No card-grid (92% of corpus), no full-bleed hero, no centered column (80%) — instead a single drifting asymmetric column hung off an off-center ash-line spine. 4. **All-SVG sumi-e brushstrokes with grain texture, zero photography** — `photography` is in 98% of designs; this one has none. The imagery is generated brush-marks and char-cracks and kanji-as-ghost. 5. **Anti-motion design** — explicitly rejects `cursor-follow` (89%), `parallax` (89%), `spring` (83%), `magnetic` (78%), `tilt-3d` (32%). Only slow path-draws and long fades survive. Stillness as the default state is itself rare in this corpus. Chosen seed/style: **wabi-sabi imperfect ceramic** — extended from ceramic into the fired-carbon family (charcoal, ash, sumi ink), per the domain's meaning of 炭素/炭. Avoided patterns from frequency analysis: hand-drawn aesthetic (94%), glassmorphism (85%), warm palette (98%), gradient palette (93%), card-grid layout (92%), full-bleed (85%), centered (80%), photography imagery (98%), cursor-follow (89%), parallax (89%), spring (83%), magnetic (78%), mono typography (94% — using mincho serif + rounded gothic instead), pastoral-romantic tone (32%).