# Design Language for tsundere.stream ## Aesthetics and Tone A wabi-sabi atelier with a soft gradient mist filtering through paper-paneled windows. The page is a sidebar-anchored reading environment where the main canvas is a slow gradient drift and content reveals in layered progressive disclosure — each detail emerging only after the previous has been understood. Imperfection is celebrated: edges are slightly rough, alignments off by half a pixel on purpose, gradients carry a faint noise grain. Inspiration: Axel Vervoordt's interiors, the gradient washes of Mark Rothko's late "Black on Maroon" series, Naoto Fukasawa's "Super Normal" object essays, and the futura-precise typography of Vignelli's Subway Standards Manual. Elegant-sophisticated in tone: the voice is composed, intellectually generous, never striving. "We have considered this carefully. There is no rush to see it all." A meditative atelier-host, opening one drawer at a time. ## Layout Motifs and Structure Sidebar layout. A 320px-wide fixed left sidebar carries a vertical navigation: 5 chapter names in futura-geometric, separated by 1.5px Faded Mist hairlines and small numerical indicators ("01 — 05"). Above the chapters, a square 240×240 wabi-sabi clay-tile motif sits as the brand-mark. Below the chapters, a thin vertical scroll-progress indicator (Gradient Mist gradient bar, 2px wide). Main canvas (remaining viewport): each chapter occupies one section. Sections do not transition with snap or parallax — instead, the chapter reveals via progressive-disclosure: chapter heading appears first, then after 600ms a single curving sharp-angle SVG, then after another 800ms the body paragraph fades in, then after another 900ms the illustration plate becomes visible, then finally micro-captions and marginalia. Each chapter is anchored by a single oversized custom-illustration plate (a hand-drawn atelier object: a tea-bowl with hairline crack, a single linen-thread weaving, a paper-fold, a stone with chiseled facets, a glass sphere with internal mist). The plate is placed off-center (right-aligned on odd chapters, left-aligned on even). Sharp-angle accents: thin 1px diagonal lines and angular framing brackets cut across the canvas at section corners, giving the soft mist a precise structural edge. ## Typography and Palette - **Display headlines:** "Jost" (Google Fonts), weight 500 — futura-geometric for chapter titles at 56-72px, letter-spacing 0.02em. - **Sub-display:** "Jost" (Google Fonts), weight 300 — for sub-chapter quotes at 22-28px, italic, with a single hairline underline. - **Body:** "Cormorant Garamond" (Google Fonts), weight 400 — at 18px line-height 1.8 for serif narrative prose (intentional pairing of geometric display + serif body). - **Sidebar navigation:** "Jost" (Google Fonts), weight 400 — at 14px with 0.18em letter-spacing for chapter names. - **Marginalia / captions:** "Jost" (Google Fonts), weight 300 italic — at 12px for paper-edge captions. Palette — Gradient mist atelier: - `#EFE9DE` Linen Mist — base gradient mid-tone, paper-soft with subtle noise grain. - `#D9D1C0` Faded Mist — gradient cooler stop, used in sidebar and section seams. - `#F7F2E6` Dawn Cream — gradient warmest stop, used at top of canvas. - `#5C5446` Ash Bronze — primary text/headline color. - `#8E826E` Stone Olive — secondary muted tone for italic sub-display. - `#C4814C` Persimmon Whisper — micro-accent reserved for marginal flourishes (1-2 per chapter). Gradient logic: the entire main canvas is a slow 24s-cycling radial gradient between Dawn Cream → Linen Mist → Faded Mist, anchored to the top-right corner. The gradient carries a feTurbulence grain at 0.024 frequency to give the mist physical body. ## Imagery and Motifs - **Custom-illustration plates**: hand-drawn atelier objects, each a 480×640 SVG with 0.8px Ash Bronze line work, soft Stone Olive fills at 0.15 alpha, and a single Persimmon Whisper accent. Each plate carries a hairline crack or imperfection (a chip on a vase, a snag in a thread). - **Sharp-angles motifs**: 1px Ash Bronze angular brackets, diagonal hairlines, and triangular paper-folds at section corners. These are the geometric "frame" against the soft mist. - **Paper-fold ornaments**: small SVG paper-folds (the corner of a sheet being turned up) at chapter ends, drawn in Faded Mist with a soft shadow underneath. - **Atelier marginalia**: tiny SVG icons (a single brush, a thimble, a measuring tape ribbon) at the end of each chapter, positioned in the outer margin, drawn in 0.6px Ash Bronze. - **Gradient mist field**: the canvas backdrop is a slow radial gradient that drifts, not a static fill — a living, breathing fog. ## Prompts for Implementation - Build sidebar with `position: fixed; left: 0; width: 320px; height: 100vh`. Main canvas with `margin-left: 320px`. On mobile, sidebar collapses into a top-bar with chapter dots. - Progressive-disclosure: each section uses IntersectionObserver to trigger a staged reveal sequence (heading 0ms → sharp-angle 600ms → body 1400ms → plate 2300ms → marginalia 3000ms), each element opacity 0 → 1 + translateY 12 → 0, over 540ms cubic-bezier(.2,.7,.2,1). - Gradient mist: a single fixed background-image radial-gradient cycling its center position from `top right` to `top left` to `top right` over 24s. Add a feTurbulence-noise overlay at 0.03 alpha to texture it. - Sharp-angle brackets: pre-built SVG components, placed at the four corners of each section with `position: absolute; opacity: 0`. Animated to opacity 1 on scroll. - Custom-illustration plates: hand-drawn SVGs, with `filter: drop-shadow(0 8px 24px rgba(92,84,70,0.12))`. Each plate has a single animated micro-element (the crack opens slightly, the thread sways, the steam from the tea-bowl drifts). - Sidebar nav: each chapter line has a small horizontal hairline that extends from 12px to 56px on hover, plus a Persimmon Whisper indicator dot that drifts left to right as you scroll the chapter. - Bias toward elegant atelier narrative: each chapter is a meditation on a single object. No CTAs, no pricing, no stat-grids — only chapters, plates, and quiet captions. - Cursor becomes a small ash-bronze atelier compass; on hover over a plate's imperfection (the crack, the snag), the cursor switches to a magnifying lens and the imperfection illuminates softly. ## Uniqueness Notes - Differentiator 1: sidebar layout used as a meditative chapter index, not as a dashboard sidebar — the navigation is part of the contemplation. - Differentiator 2: progressive-disclosure pattern used as a multi-stage chapter reveal (heading → sharp-angle → body → plate → marginalia), not as a pop-up content disclosure. - Differentiator 3: gradient palette enforced via a slowly cycling radial gradient drift, not as a static gradient — the canvas is alive. - Differentiator 4: wabi-sabi aesthetic paired with futura-geometric headlines — soft imperfection against precise geometry. - Differentiator 5: sharp-angles motifs (triangular brackets, angular hairlines) deliberately contrasted with wabi-sabi softness — the friction is the design. - Chosen seed: aesthetic: wabi-sabi, layout: sidebar, typography: futura-geometric, palette: gradient, patterns: progressive-disclosure, imagery: custom-illustration, motifs: sharp-angles, tone: elegant-sophisticated. - Avoided patterns from frequency analysis: parallax (94% — replaced with progressive-disclosure staged reveal), card-grid (90% — replaced with chapter-spread), centered (94% — sidebar + off-center plates), photography (90% — replaced with hand-drawn SVG plates), mono typography (81% — replaced with futura + serif), mysterious-moody tone (71% — replaced with elegant-sophisticated).