# Design Language for tanso.day ## Aesthetics and Tone **tanso.day** lives at the intersection of Japanese *wabi-sabi* impermanence and European fairy-tale enchantment — the word *tanso* (炭素, carbon) suggesting the elemental, ancient, organic substrate of all living things, while *.day* insists on the quotidian, the brief, the passage of light. The site is a **fairycore meditation chamber**: imagine a hand-drawn field journal found tucked inside a moss-covered hollow, its pages illuminated by bioluminescent spores drifting in slow suspension. The aesthetic is **fairycore** — but without whimsy as kitsch. There are no cartoon toadstools, no glitter GIFs. Instead: the strange seriousness of fairy rings discovered at dawn, the weight of dew on a spiderweb, the quality of attention that precedes a wish. Every element carries botanical weight and mythic patience. The tone is **zen-contemplative**: sparse, unhurried, wordless in stretches. Content does not announce itself — it surfaces, like memory, like breath. Visitors are not users; they are witnesses. The site does not sell, explain, or instruct. It holds. Primary mood: an autumn forest clearing at the precise moment just after rain, before wind, when light is horizontal and every surface holds a bead of water. ## Layout Motifs and Structure The structural soul is a **broken grid**: a deliberately fractured, asymmetric composition where content elements refuse alignment to any shared baseline or column. Not chaos — rather, the deliberate placement of stones in a Zen garden, each element's isolation amplifying its weight. **Spatial logic:** - The viewport is treated as a **moss-covered stone tablet** — flat, dark, ancient. Elements are placed onto it like offerings: a pressed fern here, a fragment of text there, a drifting particle cluster in the upper-right void. - **No columns.** No gutters. No grid lines visible or implied. Each content block floats at its own coordinates, attached to the page with fine invisible thread. - **Three zones of gravity** (not columns): an upper-left origin cluster (title, breath-mark), a center-mass pool (the primary text body, always narrow), and a lower-right settling region (closing imagery, date-mark, silence). - **Asymmetric negative space** dominates: at least 65% of any viewport slice is unoccupied, but tonally active — the dark jewel-toned background is not blank, it breathes with subtle particle movement and micro-texture. - On scroll, elements do not all move at the same rate. Some are pinned to the stone; some drift at 0.3× scroll speed; one key image floats at 1.2×, creating a sense that the forest itself shifts as you move through it. - **No navigation bar.** The domain name is set in small text, upper-left, at 0.75rem, barely present. There are no CTAs, no buttons, no pricing, no stat-grids. - Mobile: the broken grid collapses to a single uncentered spine at 22% from left, with content floating within ±40px of that spine — never perfectly aligned. ## Typography and Palette **Typography (Google Fonts only):** - **Display / Title**: [`Playfair Display`](https://fonts.google.com/specimen/Playfair+Display), weight 400 italic for the main wordmark and section headings. Playfair Display's ink-trap serifs and optical high contrast evoke 19th-century botanical publication titles — each letterform a specimen pinned to a board. Set `tanso.day` as wordmark at clamp(3.5rem, 8vw, 7rem), italic, letter-spacing -0.02em, color `#E8D5F5`. - **Body / Meditation text**: [`Cormorant Garamond`](https://fonts.google.com/specimen/Cormorant+Garamond), weight 300, italic where breath is needed. Set at 17px / 30px line-height, tracking +0.02em. The long ascenders and featherweight counters make even dense text feel airy and unhurried. - **Accent / Date / Micro-labels**: [`DM Serif Display`](https://fonts.google.com/specimen/DM+Serif+Display), weight 400, used sparingly for single-word accents and the day-counter ("day 47" in the lower right). Set at 0.8rem, 10% opacity — present but retreating. **Palette (jewel-tones on deep darkness):** - `#0D0B1A` — Midnight Void: the base background, so dark it appears to absorb light. Not black — has a faint violet cast that the particles will catch. - `#1C1033` — Deep Amethyst: secondary background for offset content blocks, slightly lighter than the void. - `#6B21A8` — Imperial Violet: primary jewel accent, used for thin rule-lines (0.5px), the wordmark hover state, and sparse particle cores. - `#A855F7` — Lavender Jewel: particle cloud body color, typography warm glow, active states. - `#EC4899` — Rose Facet: a single accent jewel, used only once per viewport — the single most prominent organic-blob or the day-mark accent. Sparse and therefore powerful. - `#10B981` — Malachite: a cold, mineral green used exclusively for micro-elements — the dots at sentence ends, the fern-vein SVG detail lines, never for large areas. - `#F3E8FF` — Ghost Petal: near-white with lavender cast, used for body text. Not pure white — parchment from a journal found in a fairy hollow. ## Imagery and Motifs **Organic blobs** are the site's primary visual mass — not as decoration but as elemental geography. Each blob is a unique, irregular closed SVG path suggesting: a water droplet on stone, a bioluminescent spore cluster, a lichen patch, a fairy ring's edge. No two blobs share the same control points. **Blob rules:** - Rendered as SVG with `fill` in Deep Amethyst or Imperial Violet, zero stroke - Internal micro-texture achieved via `feTurbulence`/`feDisplacementMap` SVG filters — each blob surface ripples subtly as if seen through shallow water - Two to three blobs visible at any time, ranging from 15vw to 45vw diameter, placed entirely off-axis from text elements - Blobs drift independently on a looping Perlin-noise path (amplitude ±8px, period ~12s) — breathing, not bouncing **Particle effects** are the site's primary atmospheric layer — the bioluminescent spores that fill the void: - 120–180 individual particles rendered on a `` element that covers the full viewport behind all content - Each particle: 1.5–3px radius circle, fill `#A855F7` or `#6B21A8` at 15–45% opacity - Particles follow slow Brownian-motion drift: each tick adds a tiny random vector (±0.08px/frame), creating organic diffusion - Three particle clusters anchor to the three gravity zones; between clusters, particle density falls to near-zero — the void is real - On cursor proximity (within 80px), nearby particles gently deflect away — the visitor's presence creates a small clearing in the spore cloud - No explosions, no spawning bursts, no aggressive motion. The particles have been there since before the visitor arrived; they will be there after. **Pressed botanical line illustrations** (custom SVG, ink style): - A single fern frond (Dryopteris filix-mas type, not generic): 1.2px stroke, color `#10B981` at 60% opacity, placed in the lower-left broken-grid zone - A spiderweb anchor strand (five threads, no spider): 0.6px stroke, `#F3E8FF` at 20% opacity, in the upper-right silence zone - Both illustrations are SVG-only, no photography, no stock vectors **No photography.** No stock imagery. No icon fonts. The only images are the blobs, the particles, and the two botanical line drawings described above. ## Prompts for Implementation **The story to tell.** The visitor opens a small digital clearing in a very old forest. They did not look for it — it found them, today specifically (*.day*). The carbon of living things — leaves, mycelium, breath — has organized itself into this moment of stillness. The visitor reads a single short text: not a headline, not a call to action, but a fragment of contemplation in the tradition of Zen koan or forest diary. They scroll slowly through three such fragments, each separated by a long breath of darkness and drifting particles. At the end, a day-counter whispers "day 47" (or whatever today's day-of-year is). Then silence. **Implementation blueprint:** 1. **Canvas layer (z-index 0):** Full-viewport ``, dark background `#0D0B1A`, 150 Brownian-motion particles initialized in three loose clusters. No framerate throttle — run at rAF. Cursor interaction: repulsion within 80px radius, linear falloff. 2. **Blob layer (z-index 1):** Three SVG blobs, absolutely positioned: - Blob A: 45vw diameter, top: -5vh, left: -10vw (partially off-screen upper left), fill `#1C1033`, with `feTurbulence` displacement - Blob B: 22vw diameter, top: 55vh, left: 62vw, fill `#6B21A8` at 40% opacity, drifts on 14s Perlin loop - Blob C: 18vw diameter, top: 82vh, left: 5vw, fill `#1C1033`, with faint `#A855F7` radial-gradient inner glow 3. **Wordmark (z-index 10):** `tanso.day` in Playfair Display italic, clamp(3.5rem, 8vw, 7rem), color `#E8D5F5`, positioned at top: 8vh, left: 7vw (broken-grid placement, NOT centered). Below: a 0.5px horizontal rule, 60px wide, `#6B21A8`, offset slightly right of the text baseline. 4. **Three contemplation fragments (z-index 10):** Each fragment is 3–5 lines of Cormorant Garamond body text, max-width 420px, placed at staggered absolute positions: - Fragment 1: top: 28vh, left: 12vw - Fragment 2: top: 58vh, left: 38vw - Fragment 3: top: 88vh, left: 18vw Each fragment fades in on scroll-enter with a 0.8s ease-in-out opacity transition. No slide, no translate — only opacity. 5. **Botanical illustrations (z-index 5):** Fern SVG placed at bottom: 8vh, left: 3vw. Spiderweb SVG placed at top: 15vh, right: 6vw. 6. **Day-counter (z-index 10):** DM Serif Display "day [N]" at bottom: 4vh, right: 5vw, font-size 0.8rem, opacity 0.12. N is computed from JS `new Date().getDayOfYear()` equivalent. 7. **Scroll behavior:** `scroll-behavior: smooth`. No snap points. The page is exactly 280vh tall — long enough to breathe through, short enough to feel like a single exhale. 8. **Spring animation** is used for particle cluster snapping (when window is resized, clusters spring back to their gravity zones using a damped spring function: `stiffness: 0.04, damping: 0.82`). Also used for the blob-B drift: each keyframe position is a spring-interpolated step toward a slowly rotating target point. 9. **No JavaScript frameworks.** Vanilla JS only. No build step. One HTML file, one CSS file, one JS file. 10. **AVOID:** navigation bars, hero CTAs, stat-grids, pricing sections, testimonial blocks, any layout element centered on the horizontal axis, any color not in the palette, any font not in the typography spec, any animation with duration under 0.5s or above 16s. ## Uniqueness Notes 1. **Broken-grid as Zen garden, not disorder.** The registry uses broken-grid at 7% but always as editorial chaos or tech-brutalist energy. This is the only design that uses broken-grid as *deliberate stillness* — the asymmetry is intentional restraint, not loudness. Fragments are placed the way stones are placed in a dry garden: each position is the only possible position. 2. **Fairycore without kitsch.** Fairycore does not appear in the registry's aesthetic frequency data. This design invents a serious, elemental version of it — bioluminescent particles, botanical ink drawings, and organic blobs instead of mushroom illustrations and glitter. The enchantment is of the uncanny, pre-industrial forest, not the commercial fairy-tale shelf. 3. **Particle canvas as primary atmosphere, not decoration.** The registry uses particle-effects rarely and only as secondary decoration. Here, the particle canvas IS the background — the entire mood of the site is set by 150 slowly drifting spores against a void. Every content element floats within this atmosphere; nothing exists outside it. 4. **Jewel-tones at low luminosity (unusual combination).** Jewel-tones at 2% in the registry are almost always used at high brightness against light backgrounds. This design uses jewel-tones at dramatically reduced opacity (15–45%) against a near-black base — the jewels are there but you have to slow down to see them, the way you slow down to see the color in a dark opal. 5. **Zero photography, zero centered layout, zero CTA.** The three dominant registry patterns (photography 87%, centered 83%, CTA-heavy layouts) are all absent. The site's entire visual vocabulary is particles, blobs, and SVG botanical lines. 6. **Chosen seed:** aesthetic: fairycore, layout: broken-grid, typography: playfair-elegant, palette: jewel-tones, patterns: spring, imagery: organic-blobs, motifs: particle-effects, tone: zen-contemplative 7. **Avoided overused patterns from frequency analysis:** photography (87% → 0%), centered layout (83% → 0%), mono typography (74% → 0%), parallax (74% → replaced with pure opacity fade-in), stagger (48% → single-element fade only), full-bleed photography (63% → no photography at all).