# Design Language for tsundere.tube ## Aesthetics and Tone A late-October reading room in an old conservatory library, where the video tube is not a screen but a leather-bound folio splayed open on a pulpit desk. The mood is **light-academia after dusk**: brass desk lamps throwing umber pools onto burgundy felt, the stale sweetness of pipe tobacco and old paper, a crackling 78rpm spinning behind a heavy drape. Tsundere here is not a chirpy archetype — it is the long pause of a tutor who refuses to praise you until the third margin note, then signs the page in oxblood ink with reluctant warmth. Tone is **raw-authentic and unhurried**. Nothing onscreen pretends to be polished. Hairline scratches, faint foxing, the uneven kerning of a hand-set proof sheet — all left intact. Video thumbnails are not "thumbnails" but **plate impressions**, like Victorian zoetrope strips clipped into a leather portfolio. Buffering is not hidden; it is performed as the slow opening of a book's stiff spine. The site insists that the viewer earn the playback by sitting still for half a breath, the way a librarian insists you stop talking before she fetches the volume. Inspirations: the bindery archives of Sangorski & Sutcliffe; Ruskin's *The Stones of Venice* in original leather quarto; the BFI's nitrate restoration ledgers; the Bodleian's reading-desk green felt under brass-strapped tomes; Fortnum & Mason wine-counter signage in oxblood enamel; Saul Leiter's blurred winter reds; the muted reverence of Criterion Channel's "Closet Picks" videos shot at dusk. ## Layout Motifs and Structure **No grid. No columns. No cards.** The page is a single continuous **organic-flow river** — content drifts down the viewport along an irregular vertical contour the way iron-gall ink seeps down the gutter of a tilted page. CSS `clip-path` polygons and `shape-outside` cut the body text and video plates into curving riverbeds, never rectangles, never aligned. The reader's eye is led down a meander, not across a matrix. Composition rule: the **invisible spine** is a hand-drawn SVG curve (Bezier, 4 anchor points) running from upper-left to lower-right at roughly 7 degrees off vertical. Every element — heading, plate, marginalia, blockquote — *anchors* somewhere on that spine and tilts a fraction of a degree toward it. The result feels like text settled into the natural sag of a 200-year-old shelf. Content zones, top to bottom: 1. **The Frontispiece** (full viewport) — the title `tsundere.tube` set as a hand-pressed ex libris bookplate, dead-centered on a textured burgundy field. No menu, no logo lockup. A single line of latin-styled subtitle in italic small-caps. The viewport must scroll to begin. 2. **The Pulpit** (full viewport) — the featured "tube" appears as a leather-portfolio spread, the video plate inset into the right-hand page, hand-written marginalia (real video metadata: duration, year, uploader, restoration notes) bleeding into the gutter on the left. 3. **The Stacks** (~3 viewports tall) — a vertical scroll-driven river of plate impressions. Each plate is irregularly sized, irregularly rotated (-2° to +2°), and tied to the spine by a thin **whip-stitch SVG line** that visibly threads through it. Hovering a plate ages it: the corners curl, the burgundy deepens half a shade, the title rises out of the leather as if pressed from beneath. 4. **The Colophon** (full viewport) — closing endpaper. Three lines of small-caps. A single oxblood seal stamped wet onto cream paper, slightly off-register. **Skeleton-loading** is treated as a first-class motif, not a stopgap. Every plate begins life as a **printer's blind impression** — the leather-textured rectangle pressed but unprinted, with faint pulsing cream "ink rising" gradients. As the actual thumbnail loads, the cream warms into the image like daguerreotype emergence. Skeletons stay visible 800-1400ms minimum even when the asset is cached, because the *act of waiting* is the experience. ## Typography and Palette **Variable-fluid typography** — every type axis breathes with viewport width via `font-variation-settings` and `clamp()`. Nothing is fixed. - **Display / Frontispiece:** **Cormorant Upright** (Google Fonts) — used at `clamp(4rem, 14vw, 11rem)`, optical-size axis pushed to maximum, very tight tracking. Acts as the book-plate engraving. - **Headings / Plate Titles:** **Fraunces** (Google Fonts), variable font. Axes wired to scroll velocity: `SOFT` from 0 to 100, `WONK` toggled at scroll-rest. Slows down and "softens" when the reader pauses, sharpens when they scroll fast — the type itself reluctant, then warming. - **Body / Marginalia:** **EB Garamond** (Google Fonts), italic preferred for marginalia, roman for primary body. Set on a 1.85 line-height with hanging punctuation in margins. - **Hand-script accents:** **Reenie Beanie** (Google Fonts) for librarian-pencil annotations beside plates ("watch this one twice", "restored from a 1962 print", etc.). Always at a 3-7° rotation. - **Numerals / Timestamps:** **DM Mono** (Google Fonts) at small sizes only, for video durations and catalog numbers — the only mechanical voice on the page. **Deep-burgundy palette** (oxblood library, candlelight, vellum): - `#3A0E13` — **Oxblood ink** (primary body field, deepest burgundy, the leather wall) - `#5C1A22` — **Bordeaux felt** (mid-ground panels, plate backgrounds before image emergence) - `#7B2233` — **Wine seal wax** (active hovers, current scrub position, the reluctant warm) - `#A03A3A` — **Faded scarlet ribbon** (in-text emphasis, the bookmark thread) - `#E8DCC4` — **Vellum cream** (primary type on dark field, the page itself) - `#C9B58A` — **Aged paper** (secondary text, marginalia, plate caption ground) - `#6B5A3E` — **Tarnished brass** (rule-lines, plate frames, librarian's stamp) - `#1A0608` — **Reading-room shadow** (gutter shadow, viewport vignette edge) Dark mode is the default (and only) mode. The page never goes light. Lamps may dim further at night via a `prefers-color-scheme` deepening of all values by ~6%. ## Imagery and Motifs - **Leather texture as the substrate.** The body background is not a flat hex — it is a tiled, very-high-resolution leather-grain SVG noise layered with a subtle radial brass-lamp glow at viewport center. Pores, faint scuff lines, a single barely-visible foxing stain near the lower right. - **Plate impressions, not thumbnails.** Each video preview is wrapped in a 7px embossed bevel with raised stitching along two edges (CSS `box-shadow` triple-stacked: inner bevel, outer drop, faint cream highlight on the upper-left). - **Whip-stitch SVG threads** connect plates to the spine — a hand-drawn dashed line, irregular dash spacing, oxblood thread color, visibly knotted at every plate corner where it terminates. - **Vintage motifs:** ex-libris bookplate frame on the frontispiece; engraved cherub corner-pieces redrawn as monoline SVG; a single roundel cartouche behind the colophon seal; pressed botanicals (a fern frond, a sprig of laurel) as inert decorative SVG, half-faded as if pressed between pages decades ago. - **The seal.** A single oxblood wax-seal SVG — irregular round edge, slight smudge, embossed initial T inside — stamped at the bottom of every "chapter". It is the only repeating motif across viewports. - **Marginalia layer.** Above the leather, a translucent cream paper layer (z-index: 2) carries the typography. Where paper meets leather at edges, a 2px aged-paper torn edge SVG, hand-irregular. - **No icons.** No emoji, no Material symbols, no rounded play buttons. Play is signaled by a **typeset triangular fleuron (▶ rendered via Cormorant Upright)** in tarnished brass, never filled, never centered. ## Prompts for Implementation This is a **scroll-driven full-screen narrative**. There is no menu, no nav, no search bar visible above the fold. The viewer enters the library, walks past the frontispiece, sits at the pulpit, browses the stacks, leaves through the colophon. Implementation must honor that procession. - Use `IntersectionObserver` to drive variable-font axis morphing on `Fraunces` headings — `SOFT` and `WONK` axes lerp toward their warm values as a heading enters viewport center. - Bind `scroll velocity` (calculated via `requestAnimationFrame` deltas) to a CSS custom property `--scroll-velocity`. Type weight, plate rotation jitter, and skeleton pulse rate all read from it. Fast scroll = sharper, more rigid; rest = softer, breathing. - **Skeleton-loading is choreographed, not incidental.** Plates render in three stages, each ≥ 250ms, regardless of network: (1) blind-impression leather rectangle with faint pulse, (2) cream gradient "ink rising" from bottom edge upward, (3) image emerges via `mask-image` reveal that traces a slow horizontal sweep like a press lifting. Even on cache hit. - The **organic-flow river** is achieved with `shape-outside: polygon(...)` floats bound to the invisible spine SVG. Plates `float: left` or `float: right` alternately along the river, never side-by-side. - The **whip-stitch threads** are a single inline SVG with `stroke-dasharray` and a `pathLength` of 1. As the user scrolls past each plate's anchor point, that segment of thread `stroke-dashoffset` animates from 1 to 0 — the thread "sews itself" into existence at reading pace. - Hover on a plate triggers a 600ms `filter: sepia()` reduction + a 0.5° rotation correction toward true vertical, as if the reader has nudged the page straight. Move away, and the plate slowly drifts back to its original tilt over 1.2s. - Cursor is a **brass quill nib** SVG with a faint oxblood ink trail (last 8 mouse positions, fading). On hover over a plate, the nib rotates 12° as if poised to annotate. - The frontispiece title `tsundere.tube` is set with `text-shadow` mimicking embossed gold-leaf foil: a 1px oxblood inner shadow plus a 1px aged-paper inset highlight. On scroll initiation, the bookplate dips 4px into the page and stays there as a fixed watermark behind subsequent content. - All transitions use a custom cubic-bezier `cubic-bezier(0.22, 0.61, 0.36, 1)` — eased like a heavy book closing. - Audio (optional, off by default): a 4-second loop of distant page-turn rustle + brass clock tick, mixed at -32dB, behind a single `Begin reading` cream toggle on the frontispiece. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, hero-with-three-features composition, pill-shaped buttons, gradient-fill icons, any rectangle-on-rectangle card grid, sans-serif body type, neon accents, glassmorphism, parallax stars, code-rain, bento-box layouts, and anything centered-aligned in the body. No emoji. No "subscribe" rectangles. No "trending" carousels. No nav drawer. **BIAS toward:** the hush of a closed library, the slow theatre of waiting, type that breathes, plates that tilt, threads that sew, leather that smells almost real. ## Uniqueness Notes Differentiators from other designs in this codebase: 1. **Skeleton-loading promoted to primary motif** — most sites hide loading; here it is choreographed in three stages and persists ≥ 800ms even on cache hit. The act of waiting is the experience, framed as a printer's blind-impression ritual. 2. **No grid, anywhere.** Layout is a single SVG-spine river with `shape-outside` polygons and `float` placement at irregular angles (-2° to +2°). No cards, no columns, no rectangular content blocks — the inverse of every other tsundere.* sibling. 3. **Variable-font axes wired to scroll velocity** — `Fraunces` SOFT and WONK axes lerp toward warm values when the reader rests, sharpen when they scroll fast. The typography itself enacts the tsundere arc: cold in motion, soft at pause. 4. **Leather-texture substrate as continuous background**, not a hero panel — the entire site is one tooled-leather page, with a single brass-lamp radial glow centered on the viewport regardless of scroll position. No section breaks, no hero/footer divide. 5. **Whip-stitch SVG threads** physically connecting plates to the invisible spine, sewing themselves into being on scroll — a per-element narrative thread no sibling site uses. 6. **Brass-quill cursor with ink trail** replacing the system pointer, rotating 12° on hoverable plates — a custom diegetic cursor specific to the library conceit. 7. **Wax-seal SVG** as the only repeating per-chapter mark, oxblood enamel with off-register smudge — replaces all conventional dividers, footers, and section markers. 8. **No iconography library.** Play is a typeset fleuron in `Cormorant Upright`. There are no Material/Heroicon/Lucide imports. **Chosen seed:** aesthetic: `light-academia`, layout: `organic-flow`, typography: `variable-fluid`, palette: `deep-burgundy`, patterns: `skeleton-loading`, imagery: `leather-texture`, motifs: `vintage`, tone: `raw-authentic`. **Avoided patterns** (per frequency analysis): rectangular card grids, hero+three-feature CTA blocks, sans-serif body stacks, neon/cyberpunk palettes, glassmorphism panels, bento-box matrices, centered-feature layouts, light-mode defaults, emoji/icon-font reliance, parallax-starfield backgrounds, pricing tables, stat counter rows.