# Design Language for tsundere.stream ## Aesthetics and Tone tsundere.stream is conceived as a **slow broadcast from a half-abandoned classical archive** — imagine a livestream where the camera has been forgotten, pointed at a chipped marble bust on a wooden plinth in a basement room with one bare bulb, while a low burgundy curtain stirs in a draft no one notices. The aesthetic is **wabi-sabi meets pirate art-history channel**: the beauty of cracked plaster, oxidized metal, water-stained paper, and slightly out-of-frame compositions, fused with the raw, low-fidelity intimacy of a 4 AM personal broadcast that nobody is watching but the host keeps streaming anyway. The tone is **raw-authentic** in the most literal sense — nothing here is polished, retouched, or asking to be loved. Edges are unjustified. Letters drift slightly off the baseline. Marble surfaces show their veins, their staining, the chip a clumsy hand made in 1923. The "tsundere" duality reads as the wabi-sabi paradox: outwardly cold, austere, even rejecting — but warmed from within by an embarrassed burgundy, the color of wine spilled and not wiped, of a blush refusing to fade. The site whispers rather than announces, and apologizes for the whisper while doing it. Inspirations: Hiroshi Sugimoto's blurred wax-museum classical portraits; the printed inserts in late-90s Japanese vinyl records; Andrei Tarkovsky's *Nostalghia* with its wet plaster interiors; the layout vocabulary of Korean independent poetry chapbooks; the timing and weight of Studio Ghibli's quiet between-shots; analog film grain on tungsten 3200K stock pushed two stops. ## Layout Motifs and Structure The site is a **single immersive vertical scroll** structured as ten contemplative "frames" of a forgotten broadcast — each frame fills the viewport (`100vh` minimum) and resolves at its own pace. There is no top navigation bar, no hamburger menu, no sticky header. The only persistent element is a thin burgundy hairline (`1px`) crawling down the right edge of the viewport, marking scroll progress like the timecode of a tape that has been left to run. **Frame 1 — The Open Channel:** A near-empty viewport. A single off-center marble bust illustration sits at roughly the rule-of-thirds intersection (lower-left), facing slightly away from the visible composition. The domain name `tsundere.stream` is set very small in mono in the upper-right, kerned wide, as if it were a lower-third broadcast slug. A burgundy timestamp (`04:17:33`) ticks in mono at the bottom-right but never updates after first paint — the stream is paused on this exact moment. White margin (negative space, *ma*) occupies 60-70% of the screen. **Frame 2 — The Cold Open:** As the user scrolls, the bust does not parallax — instead, fragments of it (a cracked nose, a chipped earlobe) bounce-enter from below the fold one at a time, with overshoot, settling into asymmetric positions. Captions in mono burgundy fade in beside each fragment ("not looking at you", "didn't notice you arrived", "the curtain moved on its own"). Layout is editorial-flow with deliberate rivers of white space cutting diagonally through the type. **Frame 3 — The Apology:** A single long sentence in mono is set at oversized scale, breaking awkwardly across lines mid-word, with one word — `i guess` — shifted three pixels off baseline and rendered in a soft cream against burgundy. This is the warmest moment. **Frames 4–7 — The Drift:** A cycle of marble-bust illustrations (different angles, different states of decay), each accompanied by stream-style "subtitles" set in mono at the bottom of the viewport. Each frame uses a different asymmetric grid: 5-column with content in cells 2 and 4; 3-column with a single column rule; full-bleed with a marble texture overlay at 8% opacity; centered single column with 80ch line length and a hanging burgundy initial. **Frame 8 — The Static:** A nearly empty frame containing only a small custom illustration of an unplugged microphone cable on a plinth, with the mono caption "(channel goes quiet)" set in 14px italic burgundy. **Frame 9 — The Index:** A loose, hand-set list of imagined past broadcasts ("ep. 003 — the bust that fell", "ep. 014 — wine on the floor", "ep. 027 — i wasn't crying") with episode numbers slightly mis-aligned to the left, dates set in mono small caps in burgundy, and titles in a soft serif. **Frame 10 — The Sign-off:** Just the words `still here.` in mono lowercase, slightly off-center, with a single bounce-entering burgundy ink-blot beneath them. No call-to-action. No social links. The user is invited to stop scrolling and leave the tab open. The page never centers itself fully. There is always a slight bias — usually 4-8% off the geometric center — toward whichever side feels colder. Margins are uneven by design: `padding-left: 12vw; padding-right: 7vw;` and similar deliberate asymmetries. Section transitions are not snap-scrolled; they breathe, with `min-height: clamp(100vh, 110vh, 120vh)` so the user always has to scroll a little past where they expected. ## Typography and Palette **Typography (Google Fonts only):** - **Body & Captions — "JetBrains Mono"** (Google Fonts), weight 400, size `0.95rem`, line-height `1.7`, letter-spacing `0.01em`. This is the primary voice of the site — every subtitle, every timestamp, every caption is set in this monospace. Chosen over more common monospaces (Space Mono, IBM Plex Mono) for its slightly humanist proportions and the way its lowercase `g` and `a` carry a flicker of warmth inside the cold grid of fixed-width. - **Display & Quiet Headlines — "Cormorant Garamond"** (Google Fonts), weight 300 italic, size `clamp(1.6rem, 3.2vw, 2.8rem)`, used sparingly only for the long sentence in Frame 3 and the episode titles in Frame 9. The thin italic adds the sigh, the embarrassed warmth that the mono refuses to give. - **Lower-thirds Slug — "Inconsolata"** (Google Fonts), weight 200, size `0.72rem`, letter-spacing `0.18em`, all-lowercase, used only for the domain slug and section markers. A second monospace, deliberately spindlier than the body, to read as "broadcast metadata" rather than "voice". No font is rendered above weight 400. Bolding is forbidden. Emphasis is achieved through color shift (cream → burgundy) or italic (Cormorant only). **Palette — Deep Burgundy variant, warm-cold wabi-sabi:** - `#0F0B0B` — *Stage Black* — near-black with a red undertone, used for body text and the deepest shadows. Never pure `#000`. - `#FAF6EE` — *Plaster Cream* — the dominant background, the color of unbleached aged paper and dry plaster wall. Slightly warmer than ivory. - `#5C1A2B` — *Deep Burgundy* — the primary accent. Used for the timecode hairline, the warmest captions, the ink-blot, the single italic word. This is the blush that won't fade. - `#3A0E1C` — *Wine Stain* — a darker burgundy used only for hover states and the marble veins in illustrations. - `#8C7468` — *Old Marble* — a desaturated taupe-grey for the marble bust mid-tones. - `#D9CFC0` — *Aged Linen* — a soft secondary cream for inset cards (used twice in the entire site). - `#262020` — *Curtain Shadow* — used only at 12% opacity over background images to create the feeling of a dim room. Color contrast against background: body text on `#FAF6EE` uses `#0F0B0B` (passes WCAG AA easily). The burgundy `#5C1A2B` on `#FAF6EE` passes AA at 14pt+ — and is intentionally only used at headline scale or for short emphatic passages. ## Imagery and Motifs **Core Motif — The Chipped Marble Bust:** Every other frame features a custom-drawn illustration of a classical marble bust (Apollo, Sappho, an unnamed weeping figure, a cracked emperor) rendered in a hand-inked line-art style with no fills — only crosshatched shadows and visible chips, cracks, and stains. Illustrations are intentionally drawn with a slightly trembling line, as if by candlelight. They are NOT photographs. They are NOT 3D renders. They are line drawings that lean into wabi-sabi imperfection — one ear is missing, one eye is lower than the other, the plinth is uneven. **Secondary Motif — The Burgundy Stain:** A small irregular ink-blot (custom SVG, not a CSS shape) appears once per frame, in different positions and sizes, like wine drops left on a tablecloth. Each is hand-drawn with a slight feathered edge. They are never decorative borders or dividers — they are *evidence* that someone was here, and was not careful. **Tertiary Motif — The Lower-third Slug:** A small mono caption block in the lower-left or lower-right of each frame, mimicking a broadcast lower-third graphic, but holding only a quiet personal note: `(she said nothing for a while)`, `(the bulb flickered)`, `(off-camera: a cup tipped over)`. These are character ambient — the show that is not being shown. **The Marble Vein Texture:** A single subtle SVG noise/marble pattern overlay sits on Frame 5 at `mix-blend-mode: multiply, opacity: 0.06`. Visible only when one looks for it. **No icon library. No stock photography. No emoji.** Every visual element on the page is either custom-drawn line illustration or pure typographic. **The Empty Frame Principle:** At least two of the ten frames must contain *nothing* but a single small element and a vast field of cream. The site must feel like it is okay being mostly empty. ## Prompts for Implementation Build this as a single static HTML page with no frameworks — vanilla HTML, CSS, and a small `script.js` for scroll-driven reveals. Animation philosophy: nothing snaps. Everything **bounces in slowly, with a cubic-bezier(0.34, 1.56, 0.64, 1) easing** ("bounce-enter"), but the bounces are gentle — overshoot of 4-8%, never more — and durations are long (700-1200ms). The page should feel sleepy. Structure: ten `
` elements, each `min-height: 100vh` (some 110vh or 120vh for breathing room), each with `padding: clamp(8vh, 12vh, 16vh) clamp(7vw, 12vw, 14vw)` and an asymmetric padding bias (more left than right on odd sections, vice versa on even). For the bounce-enter effect, use IntersectionObserver to add an `.in-view` class to elements as they cross the 30% threshold. CSS handles the rest: each element starts with `opacity: 0; transform: translateY(40px) scale(0.97);` and transitions to `opacity: 1; transform: translateY(0) scale(1);` over 900ms with the bouncy cubic-bezier above. Stagger child elements with `transition-delay: calc(var(--i) * 80ms);` where `--i` is set per-element. The right-edge timecode hairline is a fixed `
` 1px wide, full viewport height, `background: linear-gradient(to bottom, #5C1A2B var(--scroll, 0%), transparent var(--scroll, 0%))`, with `--scroll` updated on scroll via `requestAnimationFrame`. No scroll listener should ever do layout work — only update CSS custom properties. Marble bust illustrations: inline SVG, `stroke: #0F0B0B; stroke-width: 0.9; fill: none;`, with crosshatching as `` elements at varying opacities (0.4 to 0.9). Each bust occupies roughly 30-40% of viewport width on desktop, and is positioned absolutely off-center within its section. On hover, **do not** add transforms or filters — instead, fade in a single small burgundy tooltip-caption (`position: absolute; transform: translate(8px, -50%);`) that whispers the bust's title, with a 250ms `opacity` transition. Hover does not "lift" or "scale". Lifting would be too eager. Cursor: leave as default. No custom cursor. No cursor-follow effect. The site does not chase the user. Body text uses `text-rendering: geometricPrecision; font-feature-settings: "ss02", "calt";` to enable JetBrains Mono's stylistic alternates for the lowercase `g` and zero. Justify text with `text-align: left; hyphens: none;` — ragged right margins are the point. Storytelling bias: every section title is a fragment of a sentence that does not finish. Every body block reads as a personal note that was not meant to be public. Avoid all marketing voice. There are NO call-to-action buttons, NO pricing tiers, NO testimonials, NO stats, NO feature grids, NO social proof, NO email capture. The site's only goal is to make a stranger pause for 90 seconds and feel slightly seen. If someone bounces in three seconds, that is correct — they were not invited to stay. For the burgundy stain SVGs: hand-draw or trace them as irregular `` shapes with `fill: #5C1A2B; opacity: 0.78; filter: blur(0.4px);` — the slight blur softens the edges into stain-like feathering. Mobile: collapse padding to `clamp(6vh, 9vh, 12vh) 6vw`, reduce display type, but **never** stack the asymmetric layout into centered. The off-center bias is structural and must survive at every viewport. The marble bust illustrations scale to 70% of viewport width on mobile and shift to whichever side preserves the bias. ## Uniqueness Notes 1. **Wabi-sabi as livestream metaphor.** No other design in the registry weds the imperfection-aesthetic of wabi-sabi (rare at 2%) to the broadcasting/streaming TLD semantics. The "stream" here is a *slow* stream — a tape left running on an empty room — which inverts every other `.stream` site's energy. 2. **Custom-drawn classical busts as the only imagery.** Custom-illustration sits at 0% and marble-classical at 0% in the registry. This site uses both as its primary visual language, drawn in hand-inked line-art with deliberate trembling and missing pieces, refusing photography (82% used) and 3D renders entirely. 3. **Burgundy as embarrassed-blush color, not luxury color.** Deep-burgundy at 0% in the registry — and where burgundy normally signals wine-bar luxury or medieval gravitas, here it is repurposed as the *tsundere blush* — the warmth leaking out of an otherwise cold composition. The single italic burgundy word in Frame 3 is the entire emotional pivot of the site. 4. **No call-to-action, no navigation, no conversion path.** Aggressively rejects the CTA-heavy / pricing-block / stat-grid layout patterns the AVOID list calls out. The page is structured as a non-monetizable contemplative scroll. The only persistent UI element is a 1px scroll-progress hairline. 5. **Bounce-enter with deliberately gentle overshoot.** Bounce-enter sits at 1% in the registry. Where most bounce-enter implementations are spring-loaded and dopamine-driven, this site uses a slow 900ms bounce with only 4-8% overshoot — the visual equivalent of someone hesitating before sitting down. 6. **Two monospaced typefaces stacked on one display serif.** Where mono is heavily used (79%), this site differentiates by using *two* monospaces (JetBrains Mono for voice, Inconsolata for broadcast metadata) plus Cormorant Garamond italic light — never bold, never above weight 400, no sans-serif present at all. 7. **Lower-third "ambient subtitles" as content.** Each frame includes mono captions in parentheses describing things happening *off-camera* — `(the bulb flickered)`, `(off-camera: a cup tipped over)`. This is a narrative device borrowed from late-night broadcast intimacy, not used elsewhere in the registry. **Chosen seed:** aesthetic: wabi-sabi, layout: immersive-scroll, typography: mono, palette: deep-burgundy, patterns: bounce-enter, imagery: custom-illustration, motifs: marble-classical, tone: raw-authentic. **Avoided patterns from frequency analysis:** photography (82%), playful (71%), mono used as default tech-aesthetic (79% — repurposed here as broadcast-intimacy instead), dark-mode (30%), card-grid layouts, hover-lift, glassmorphism, CTA-heavy layouts, pricing blocks, stat-grids, feature-comparison tables, testimonial carousels.