# Design Language for tanso.day ## Aesthetics and Tone tanso.day takes the Japanese word *tanso* (炭素 — "carbon") at its most literal and most ancient: carbon is the black of *sumi* ink, the soot of a pine-resin lampblack stick ground against a wet inkstone. The site is built as **a single contemplative day rendered as a scroll of carbon** — a vertical *emakimono* (handscroll) that moves from the cold blue-grey of pre-dawn, through the warm bone-white of midday paper, into the dense lampblack of night. It is unapologetically **wabi-sabi**: imperfect ink edges, the dry-brush *kasure* streak where the brush ran out of pigment, a deliberate off-centredness, the asymmetry of *fukinsei*. Nothing snaps to a hard grid; the page breathes with *ma* (間), the active emptiness between marks. The mood is quiet, slow, and a little austere — the antithesis of dashboard urgency. Where most "carbon" sites shout offsets and counters, this one *exhales*. It treats one day's worth of carbon — the carbon in a breath, in a candle, in graphite, in coal, in a diamond, in every living cell — as something to sit with rather than optimise. The reference points: a Sesshū landscape with three brushstrokes for a whole mountain; the inkstone (*suzuri*) and its small black pool; the way a single drop of ink blooms into rice paper; the calm of a tearoom *tokonoma* alcove holding one hanging scroll and nothing else. ## Layout Motifs and Structure **The whole site is one continuous vertical handscroll**, not a stack of cards. There is no card-grid, no bento box, no dashboard. Instead: - A **single off-centre column** of content, set roughly 38% from the left on wide screens, leaving a tall river of `ma` (negative space) down the right side where ink-wash gradients and lone brush marks live. The asymmetry is the structure. - Content arrives as **"strokes"** — irregularly spaced text blocks, each one entering as though the brush just lifted from the paper. Generous vertical voids (clear viewport-heights of nothing) separate the major movements of the day. - A faint **vertical seam line** runs the full length of the page like the join between two sheets of a mounted scroll — hairline, 1px, in a translucent ink grey — anchoring the eye as everything else floats. - The "sections" are the **hours of a single day**: *Akatsuki* (pre-dawn), *Asa* (morning), *Hiru* (midday), *Yūgure* (dusk), *Yoru* (night), *Mayonaka* (deep night). Each is just a small *kanji* + romaji marker set in the right-hand margin, vertical, like a chapter mark on a scroll's edge. No nav bar in the conventional sense — the day *is* the navigation. - The footer is the inkstone itself: a wide, shallow dark basin shape at the very bottom where the day's "ink" pools — a small set of links rendered as faint reflections on the wet surface. - Optional: a slim **vertical progress mark** on the far right — a single drip of ink that descends as you scroll, from a dry brush at the top to a full black bead at the bottom. ## Typography and Palette **Typography (Google Fonts only):** - **Display / large strokes — `Shippori Mincho`** (weights 500/600/800): a Japanese *mincho* serif with strong, slightly dry brush-derived terminals — perfect for big bilingual headings and the hour-kanji. Set huge (up to 7–9rem) for the day's title, with very loose `letter-spacing` so each character sits alone like a stamp. - **Body / prose — `Zen Old Mincho`** (weights 400/600): a calm, literary mincho for the meditative running text. Body at 18px, `line-height` 1.95, measure held tight at ~52ch so each line is a deliberate breath. Western text in the same family renders with quiet old-style serifs. - **Marginalia / romaji / labels — `Zen Kaku Gothic New`** (weight 400): a soft humanist gothic for the small romaji captions, hour markers, and any UI text — kept tiny (12–13px), wide-tracked, ink-grey. - Vertical-writing-mode (`writing-mode: vertical-rl`) is used for the hour markers and one or two short poetic lines, true to the handscroll. **Palette — "lampblack on bone, warmed by the hour":** - `#F4F0E6` — *kozo* paper bone-white (the default page in daylight hours) - `#E7E0CE` — aged-paper warm shadow / section grounds - `#1B1A17` — *sumi* lampblack (primary ink — text, brush marks) - `#3A3C40` — diluted ink grey (*usuzumi* — secondary text, the seam line) - `#6E7B82` — pre-dawn slate-blue (the *Akatsuki* tint, cold light) - `#9C5A2E` — burnt-pine ember (a single warm accent — a hanko-style seal, a dusk glow) - `#0B0B0A` — true carbon black (the night background, the inkstone basin) - A near-invisible `#C9442E` (cinnabar/*shu*) appears **once**, as the artist's red seal stamp near the footer — the only saturated colour on the whole site. ## Imagery and Motifs Everything is **brushed, not photographed; ink, not illustration-doodle**. No stock photography, no glassmorphic cards, no clip-art icons. The visual vocabulary: - **Sumi brushstrokes** — generated and hand-shaped SVG paths with rough, tapering, *kasure* (dry-brush) edges; used as section dividers, underlines that "paint" themselves, and one enormous gestural stroke behind the title. - **The ink bloom** — a circular *enso*-adjacent wash that radiates with soft, mottled edges (achieved with layered SVG `feTurbulence`/`feDisplacementMap` filters on a dark blob) — appears at scene transitions like ink hitting wet paper. - **The inkstone & stick** — a minimal line rendering of a *suzuri* with its dark well, and a *sumi* stick resting in it; the footer literalises this. - **Carbon's other faces** — extremely spare line motifs: a single graphite-pencil hexagon lattice (the carbon ring) drawn as if with a ruling pen; a faceted diamond outline; a curl of candle-soot smoke — each appearing *once*, small, in a margin, never as a repeated pattern grid. - **Paper fibre texture** — a barely-there `kozo` fibre grain (subtle noise PNG or CSS gradient stipple) on the light backgrounds; the night background gets a faint carbon-dust speckle instead. - **Vertical poetic lines** — a *haiku*-length line or two in `vertical-rl` floating in the right margin, set in Shippori Mincho, like a colophon. - **The red seal** — one cinnabar *hanko* square, slightly crooked, near the bottom, "stamped" with a quick scale+rotate as it enters. ## Prompts for Implementation Build tanso.day as **one HTML page, one CSS file, one small ES module** — no framework, no build step. The experience is **a single vertical handscroll of one day, told in carbon ink**, and the implementation should privilege storytelling, slowness, and brushwork over interactivity. - **The day as a scroll journey:** the page background colour transitions *as you scroll* through the hours — `#6E7B82`-tinted pre-dawn → `#F4F0E6` bone daylight → `#E7E0CE` warm afternoon → ember-warmed dusk → `#0B0B0A` carbon night. Drive this with `scroll-timeline` / `animation-timeline: scroll()` where supported, falling back to an `IntersectionObserver` that lerps `document.body` background between hour anchors. Make the transitions long and unhurried — the colour should change like real daylight, almost imperceptibly. - **Brush reveals, not fades:** when a text "stroke" enters the viewport, animate an SVG clip-path mask that *wipes along the brush direction* (left-to-right with a slightly irregular leading edge) so the words appear as if being written. Use generous `stagger` between successive strokes (200–400ms). Pair each major heading with an SVG stroke whose `stroke-dasharray`/`stroke-dashoffset` animates so the brushstroke paints itself beneath the words. - **Ink physics:** at each hour transition, spawn an "ink bloom" — a dark SVG blob with an animated turbulence filter (`feTurbulence` `baseFrequency` easing from ~0.9 down to ~0.02 over ~1.2s, with `feDisplacementMap` `scale` rising) so the edge looks like ink diffusing into wet paper. One per transition, never spammed. - **The descending ink drip:** far-right vertical progress indicator — a tiny SVG of a brush at the top; as scroll progresses, a bead of ink elongates and travels down a hairline, arriving as a full black drop in the inkstone footer. Optional, decorative, `prefers-reduced-motion`-safe (it just snaps to position). - **Vertical typography:** render the hour markers and one floating poetic line with `writing-mode: vertical-rl; text-orientation: upright` (for kanji) — let them sit in the right `ma` column. - **The inkstone footer:** a wide dark basin shape (CSS clip-path or SVG) with a faint specular sheen; links appear as low-contrast "reflections" that brighten slightly on hover (a soft `filter: brightness` ripple, no underline-draw cliché). The cinnabar seal stamps itself nearby with a quick `scale(1.4)→1` + small rotate. - **Restraint over richness:** the cursor does NOT have a custom follower. There is NO parallax of stacked layers. There are NO stat counters, NO pricing blocks, NO CTA buttons stacked in a hero. If a "call to action" is unavoidable, it is a single quiet line of text with a self-painting brush underline. Whitespace (the `ma`) is load-bearing — resist filling it. - **Texture & grain:** apply the kozo-fibre noise via a fixed-position `::before` overlay at very low opacity (~0.04) with `mix-blend-mode: multiply` on light hours and a carbon-speckle variant with `screen` blend on the night. Keep it subtle enough to feel like paper, not like a filter. - **Performance/feel:** prefer CSS-driven animation; reserve JS for the scroll-progress lerp, the IntersectionObserver reveals, and spawning the ink-bloom filters. Everything should feel hand-paced — easings are slow, mostly `cubic-bezier(0.22, 1, 0.36, 1)` (a gentle settle), nothing snappy or springy. ## Uniqueness Notes Differentiators from other designs in this codebase: 1. **The entire site is a single vertical *emakimono* handscroll narrating one day in carbon ink** — not a card-grid (92%), not a centered column of sections (80%), not a dashboard (35%), not a bento box (17%). The structure is one off-centre column with a tall, active `ma` margin and a scroll-mounted day/night colour journey. Almost nothing in the corpus is built as a literal handscroll. 2. **Wabi-sabi sumi-ink imagery — generated brushstrokes with *kasure* dry-brush edges, turbulence-driven ink blooms, an inkstone footer** — instead of the near-universal photography (98%), hand-drawn doodles (94%), or glassmorphic cards (85%). The only saturated colour anywhere is one crooked cinnabar seal. 3. **Bilingual Japanese mincho typography set as solitary brush-stamps** — `Shippori Mincho` + `Zen Old Mincho` + `Zen Kaku Gothic New`, with `writing-mode: vertical-rl` hour markers and a floating vertical haiku. Japanese-minimal sits at ~3%; almost everything else defaults to a mono face (94%). 4. **Reveals are brush *wipes* that "write" the text, and the page background changes like real daylight over a long scroll** — deliberately avoiding the corpus-saturated cursor-follow (89%), parallax (89%), and spring (83%) patterns. Easings are slow settles, never bouncy. 5. **A "carbon" site that refuses the offset-counter / stat-grid / CTA-hero genre entirely** — it meditates on carbon as ink, graphite, soot, diamond, and breath rather than as a number to reduce. Chosen seed/style: **wabi-sabi imperfect ceramic** (adapted from `seeds.json` toward wabi-sabi *sumi-ink handscroll*; closely related to the underused `japanese zen portfolio` and `muji clean functional` directions). Avoided overused patterns per frequency analysis: hand-drawn aesthetic (94%), glassmorphism (85%), card-grid layout (92%), full-bleed/centered defaults, photography imagery (98%), warm-gradient palette cliché (warm 98% / gradient 93% — used here only as slow ink-wash transitions, not as button fills), mono typography (94%), cursor-follow (89%), parallax (89%), spring (83%), magnetic (78%).