# Design Language for tanso.center ## Aesthetics and Tone tanso.center is **a charcoal kiln photographed from the inside** — the domain reads as 炭素 (*tanso*, the Japanese word for the element carbon) and also, swallowed in the middle, *anso* — *an*, the soot-dark patina, the carbon-black underglaze that Bizen and Iga potters call upon when a firing goes long and hungry. The site treats carbon not as a climate-spreadsheet topic and not as a crypto-credit ledger, but as the **oldest pigment humans ever held**: burnt bone, lampblack, the cooled char at the bottom of the brazier. The mood is **zen-contemplative, grounded-earthy, and quietly mortuary** — a hall of black where the only light is the residual orange memory of a fire that went out hours ago. The reference points are deliberately pre-digital: a *sumi* ink-stick being ground in slow circles against a wet *suzuri* stone; the inside of an *anagama* tunnel-kiln after the last load has cooled, walls glazed by their own breath; a stick of vine charcoal snapping; the diamond and the graphite drawn side by side in an old chemistry plate, captioned "the same atom, two destinies." Nothing here glows neon. Nothing here is glassy. Everything is **matte, sooted, and slightly warm to the touch** — black that has been *near heat*, not black that is empty. The site should feel like walking into a cooled forge at dusk and finding that someone has arranged six small objects on the still-warm hearthstone for you to consider, one at a time, before the dark finishes settling. Tone in copy: hushed, declarative, a little funereal but never grim — the calm of someone tending embers. Short lines. Long pauses. The word "carbon" is never used as jargon; it is used the way you'd say "ash" or "ink" or "bone." ## Layout Motifs and Structure The site is a strict **stacked-sections** vertical descent — `stacked-sections` is essentially absent from the corpus (the printed layout bands are dominated by `full-bleed` 85%, `card-grid` 92%, `centered` 80%), so committing to a rigid stack of full-height bands with **no parallax, no broken grid, no card matrix, no asymmetric breakouts** is itself the structural uniqueness move. There are exactly **six bands**, called **firings** (一窯〜六窯), each 100vh, each separated not by a line but by a **3vh strip of pure soot-black `#0B0A09`** so the page reads as black bricks stacked with thin mortar of darker black. - **The hearth-rule.** Every firing is internally laid out as a *hearthstone*: a single horizontal slab of slightly-warmer charcoal floated in the band's center with generous *ma* (negative space) above and below — minimum 26vh of empty soot top and bottom on desktop. On the slab sit **at most three objects**: a numeral, a short line of text, and one SVG specimen. Never a grid. Never a row of cards. Three things on a warm stone, the way you'd actually lay them down. - **The ember-gradient.** The page does not lighten as you scroll; it *cools*. Firing one carries the most residual heat — a faint ember-orange radial bloom (`#3A1E0C` at 4% opacity) behind the slab, as if the fire only just died. Each subsequent firing dims that bloom by ~0.8%, so by firing six the bloom is gone and the band is the coldest, deadest black on the page. Scrolling down is letting the kiln go cold. - **The grinding-margin.** A persistent ultra-thin vertical rail runs down the left edge (28px wide on desktop, hidden on mobile): a stylized *suzuri* ink-stone groove, rendered as a single soft-edged dark channel. As you scroll, a 6px charcoal-grey "ink front" creeps down this groove tracking scroll position — the only progress indicator, and it reads as ink being ground, not a loading bar. - No fixed header. No nav menu. No footer with links. The wordmark `tanso.center` sits once, small, top-left, set against the soot, weight low, letter-spacing wide — and it never moves; it just scrolls away with firing one and is gone. - Mobile: the six firings stack identically; the grinding-margin and ember-bloom are dropped; *ma* padding shrinks to 14vh; specimens scale to 64vw centered. ## Typography and Palette **Typefaces — Google Fonts only, two voices, never blended:** - **Zilla Slab** (weights 300, 400, 600) — the primary `slab-serif` voice. `slab-serif` sits at 4% in the typography frequency analysis, qualifying as underused; most sites here reach for `mono` (94%) or `humanist` (44%). Zilla Slab's blocky, kiln-brick serifs read like fired clay type. Used for: the wordmark `tanso.center` (weight 300, tracked +0.22em, lowercase, never capitalized); the six firing numerals rendered as kanji-styled Latin "I–VI" at 11vw weight 600; and every short declarative line on the hearthstones (weight 400, 2.4vw desktop / 6vw mobile, leading 1.6, color warm-ash, max 9 words a line). - **Shippori Mincho** (weights 400, 600) — the secondary `serif-revival` / `garamond-classic`-adjacent voice, here standing in for the brushed *mincho* feel appropriate to a 炭 theme. Used sparingly: the single Japanese kanji that labels each firing (炭・墨・煤・灰・黑・燼 — charcoal, ink, soot, ash, black, ember-remains) set huge and ghosted behind each slab at 5% opacity, weight 400, 34vw; and the closing colophon line of firing six at 1rem weight 600. Nothing else uses it. - All text is anti-aliased onto soot; nothing pure white ever appears — the lightest text is warm-ash `#C9C0B4`, which on `#0B0A09` reads as something written in cooled bone. **Palette — a controlled descent through black (a `monochrome` reading of carbon's allotropes; `monochrome` is 16%, well under `warm` 98% and `gradient` 93%):** - `#0B0A09` — **soot-black.** The mortar strips between firings; the coldest band (firing six). Near-pure black with one degree of warmth. - `#171513` — **kiln-wall.** The base field of firings one through five; a black that has been near fire. - `#241F1A` — **hearthstone.** The warm-charcoal slab that floats in each band; the only surface you "stand on." - `#3A1E0C` — **ember-bloom.** Used only at 1–4% opacity as the radial heat-memory behind firing one, fading to nothing by firing six. - `#7A5C3F` — **vine-char.** A muted, dusty brown — the snap of a charcoal stick, the warm hairline edge on every SVG specimen, the kanji labels' faint warm tint. - `#C9C0B4` — **warm-ash.** All primary text; cooled bone-white with a graphite undertone. - `#9C9286` — **grey-grind.** The "ink front" creeping down the suzuri groove; secondary text; specimen interior fills. That is the whole palette. Seven values, six of them within a hair of black. Carbon is the same atom many ways; the palette is the same black many ways. ## Imagery and Motifs **No photography. No 3D renders. No gradient mesh. Every visual is hand-built SVG, matte, hairline-stroked in vine-char `#7A5C3F`, filled in soot or grey-grind — line-illustration drawn as if scratched into a sooted wall.** `line-illustration` is 17% in imagery frequency; `photography` is 98%, so the refusal of photography is the move. **The six specimens (one per firing, the only "image" each band gets):** 1. **窯 — The kiln.** A cross-section of an *anagama* tunnel: a long low arch, a stoke-mouth, faint stroke-marks of heat lines rising. Drawn in 1px vine-char on the hearthstone; the only specimen that carries a tiny ember-orange dot at the firebox. 2. **墨 — The ink-stick & stone.** A rectangular *sumi* stick resting in the wet well of a *suzuri*; three concentric ground-circles. The grinding-margin rail visually "continues" out of this specimen, as if the whole page's progress groove is this stone. 3. **煤 — The lampblack.** A guttering oil lamp seen from the side, a cone of rising soot resolving into a loose stipple-cloud of grey-grind dots — the only place dots/particles appear, and they do not move. 4. **灰 — The ash.** A shallow bowl of cooled ash, the surface drawn as concentric fading rings, a single line-drawn rake-mark across it (the only diagonal on the entire site). 5. **黑 — The diamond & the graphite.** The old chemistry-plate motif: a faceted diamond octahedron on the left, a hexagonal graphite sheet-stack on the right, a hairline bracket joining them with the caption set in Zilla Slab between: *the same atom — two destinies.* 6. **燼 — The ember-remains.** Almost nothing: a single small irregular polygon of `#241F1A` on the coldest band, one last `#3A1E0C` pixel of warmth at its center fading to zero over 8 seconds on load, then never again. The kiln is cold. Recurring micro-motifs: **heat-lines** (1px vine-char wavy verticals, used only as section-quiet decoration, never animated except by the slow draw); **the hexagon** (carbon's bond geometry — appears once, in specimen five, never as a honeycomb grid); **the ground-circle** (concentric rings, the ink-grinding gesture, echoed in specimens 2 and 4 and in the wordmark's single underline-circle on hover). ## Prompts for Implementation Build tanso.center as **one HTML file, one CSS file, one ~5KB vanilla JS module.** No SPA, no router, no framework, no build step. Target page weight under 70KB before fonts. The site is a scroll-only, single-route descent — treat it as a **60-second cooling of a kiln**, six firings, top warm, bottom cold-dead. **Storytelling spine — the kiln goes cold:** The visitor enters firing one (窯) with the faintest ember-bloom still breathing behind the hearthstone. As they scroll, each of six firings presents one kanji-ghost, one numeral, one SVG specimen, and one short hushed line of Zilla Slab. The line of copy for each is a single thought about carbon-as-pigment, not carbon-as-data: *one* (窯) — "Every black begins as a fire that agreed to stop." *two* (墨) — "We grind the dark in circles until it pours." *three* (煤) — "Soot is light, exhausted." *four* (灰) — "Ash remembers the shape it gave up." *five* (黑) — "The same atom, two destinies — pressure or patience." *six* (燼) — "What's left when even the ember forgets: this." Then the colophon, Shippori Mincho, weight 600, 1rem: *tanso.center — 炭素 — a hall of black, kept cool.* And the page ends. No CTA, no email signup, no pricing, no stat grid, no testimonial row, no contact form, no "explore more." It ends like a fire ends. **Motion — restrained, scheduled, the opposite of springy:** - **The ink-front** (`scroll-triggered`, `path-draw-svg`): the 6px grey-grind segment in the left suzuri groove tracks scroll position exactly — no easing, no spring, no overshoot. It is the only thing tied to scroll. `path-draw-svg` is 48% but here it's used minimally, against the grain of the `spring` 83% / `magnetic` 78% / `cursor-follow` 89% norm — **explicitly avoid magnetic buttons, cursor-followers, 3D tilt, parallax, elastic, and bounce-enter entirely.** - **Specimen draw** (`path-draw-svg`, `fade-reveal`): when a firing enters the viewport, its SVG specimen draws its hairline stroke in over 1.8s at a constant rate (no ease), then the kanji-ghost fades from 0% to 5% opacity over 1.2s. Once drawn, it never redraws or re-animates on scroll-back — the firing is fired, it's done. - **The ember decay** (one-time, on load): firing one's ember-bloom pulses once — from 0% to 4% opacity over 2s, holds 1s, settles to 4% — and then is static forever. Firing six's central warm pixel does the reverse: visible at load, fades to nothing over 8s, gone. These are the only timed animations on the page. - **Wordmark hover** (`underline-draw`, the only hover effect on the site): hovering `tanso.center` draws a single thin grey-grind circle-underline beneath it over 0.4s — the ink-grinding gesture. That's it. Links, if any (there are none in the body), would behave the same. - `prefers-reduced-motion`: ink-front jumps instead of tracking; specimens appear fully drawn; ember-decay skipped — everything just *is* black, immediately. Typography is set in `clamp()`-driven `vw` units; spacing in custom properties; dark by default and dark only (there is no light mode — a kiln has no light mode). The whole thing should run on a decade-old laptop on bad WiFi and feel like it weighs nothing, because ash weighs nothing. ## Uniqueness Notes Differentiators this design commits to — no other site in the corpus should duplicate them: 1. **Carbon read as the world's oldest pigment, not as climate-data or crypto-credit.** Every other plausible reading of a "tanso/carbon" domain leans dashboard, data-viz, eco-green, or neon-ledger. This site routes entirely through *sumi* ink, lampblack, charcoal kilns, and the diamond/graphite chemistry plate — carbon as *an*, the dark patina, the cooled char. The 炭素 → *tanso* → *an* etymological pun is load-bearing. 2. **A seven-value palette where six values are within a hair of black** — a `monochrome` (16%) treatment in a corpus saturated with `warm` (98%) and `gradient` (93%). The page *cools* rather than lightens as you scroll; the ember-bloom is a depleting resource, not a decoration. 3. **Strict `stacked-sections` (essentially absent from the corpus) with the explicit refusal of the dominant `card-grid` (92%), `full-bleed` (85%), `centered` (80%) layouts** — six 100vh "firings," each a single warm slab floating in 26vh of soot, each holding exactly three objects. No grid, ever. 4. **Zilla Slab + Shippori Mincho** — `slab-serif` (4%) paired with `serif-revival` (17%) — against the corpus's `mono` (94%) reflex; no monospace anywhere on the site. 5. **Anti-spring, anti-cursor motion language.** Where the corpus runs on `spring` (83%), `magnetic` (78%), `cursor-follow` (89%), and `tilt-3d` (31%), this site uses only constant-rate `path-draw-svg`, two one-time timed fades, and a single hover underline-circle. Nothing chases the cursor. Nothing overshoots. The kiln just goes cold. 6. **Documented chosen seed/style: "japanese zen portfolio"** — reinterpreted away from the usual airy-white-gallery cliché into a *hall of black*: zen-contemplative restraint applied to soot, ink, and cooled fire rather than to negative space and bright paper. Referenced avoided patterns from the frequency analysis: `card-grid`, `full-bleed`, `centered` (layout); `photography`, `gradient-mesh` (imagery); `mono`, `humanist` (typography); `warm`, `gradient` (palette); `spring`, `magnetic`, `cursor-follow`, `tilt-3d`, `parallax`, `elastic` (patterns); `hand-drawn`, `glassmorphism` (aesthetic).