# Design Language for tsundere.stream ## Aesthetics and Tone tsundere.stream is a **liquid-chrome Y2K broadcast booth that is too proud to admit it wants you to stay** — picture a Windows-2002 media player skin that has grown a personality, sweating mercury, blushing in 6-bit. The governing image: a late-night personal webcast UI from an alternate 2003, all bevelled aqua buttons and brushed-titanium chrome, except every surface has *softened into a slow-moving blob of liquid metal* and the whole interface keeps **looking away when you hover it, then sneaking glances back**. This is the "tsundere" thesis rendered as material science: the chrome is cold to the touch (cool-grey, blue-steel) but it warms to a flushed pink-rose wherever your cursor lingers, then aggressively cools back down the instant you leave — a UI that visibly *resents* being caught caring. The tone is **flirtatious-mecha-noir**: 90% icy composure, 10% involuntary warmth bleeding through the seams. Think Y2K bling — chrome wordmarks, lens-flare star sparkles, holo-foil — but *muted and embarrassed about it*, the saturation pulled to 40%, the sparkles small and quick rather than gaudy. It is a streaming page that has built an entire armoured chrome shell so you won't notice it left the "ON AIR" light on for you. No hype, no funnel, no CTA wall — just a chrome booth, a single broadcast, and an interface with feelings it is mismanaging in real time. ## Layout Motifs and Structure A **single-column vertical broadcast strip, 720px wide, centered on a vast brushed-metal void** — explicitly NOT a card-grid, NOT a bento, NOT a dashboard. The page reads top-to-bottom like a column of stacked chrome modules in a vintage media-player chassis: (1) the **chrome wordmark plate** — `tsundere.stream` embossed into a slab of liquid titanium that ripples when the cursor passes over it; (2) the **viewport module** — a beveled "screen" bay where the broadcast lives, surrounded by a thick aqua-bevel frame with four corner rivets; (3) a **transcript / now-playing scroll** that behaves like an old skinnable playlist — alternating rows, each row a thin chrome lozenge; (4) the **status console** at the foot — a row of skeuomorphic toggle switches and VU-meter needles that twitch idly. Critically, the strip is **off-center by intent on wide screens**: the column sits at roughly 44% from the left, with the right two-thirds left as empty brushed-metal expanse where slow chrome blobs drift — a deliberate *ma* of cold metal that the warm pink can't reach. The vertical rhythm is built on **64px chassis units**: every module height is a multiple of 64, with 24px of dark-bevel gutter between them, so the column reads as physically machined hardware bolted together. Sub-modules nest with **inset bevel shadows** (light from upper-left, classic Y2K 3D-button lighting) so depth is real and tactile, never flat. No horizontal scrolling, no parallax sections, no diagonal cuts — the discipline is *one honest vertical chassis*. ## Typography and Palette **Typefaces — Google Fonts only, three families, strict roles:** - **Orbitron** (display, 700/900) — the chrome wordmark and all module headers. Its geometric, slightly-mechanical capitals read as Y2K-tech signage; set `tsundere.stream` at **148px** desktop / **72px** mobile, letter-spacing **-0.01em**, line-height **0.9**, filled with a vertical liquid-chrome gradient (see below) and an inset bevel via layered `text-shadow`. This is the only face permitted above 40px. - **Chakra Petch** (body + UI labels, 400/500/600) — a squarish techno-humanist sans with chamfered terminals; used for transcript rows, toggle labels, the small running copy. Set body at **16px / 1.65**, labels at **12px** uppercase, letter-spacing **0.12em**. Its faint mechanical chamfer keeps the body text on-theme without going full stencil. - **Space Mono** (numeric + timecode + status readouts, 400/700) — used ONLY for the VU readouts, timecodes, viewer count, and the tiny "// status" comments that flicker in the console. Tabular, cold, clinical — the part of the interface that refuses to emote. **Palette — cool default, warm intrusion (minimum 3, here 8):** - `#0C0E14` — **deep gunmetal void** (page background, the cold expanse) - `#1A1F2B` — **brushed-steel chassis** (module bodies) - `#C7CDD6` — **liquid chrome light** (top of every chrome gradient, bevel highlights) - `#7E8794` — **liquid chrome shadow** (bottom of chrome gradient, the cool resting state of all interactive metal) - `#5FB6C4` — **aqua bevel** (the Y2K teal piping around the viewport bay, toggle accents) - `#E8A6B8` — **flush rose** (the blush — appears ONLY on hover/lerp, never at rest; warms the chrome where the cursor lingers) - `#F2C9D4` — **flush rose highlight** (the brightest point of a blush, a quick specular bloom) - `#FFE9A8` — **warm signal-amber** (the "ON AIR" pilot light and VU peak — the one warm thing the UI forgot to turn off) Chrome gradient = vertical `#C7CDD6 → #1A1F2B → #7E8794 → #C7CDD6` (the classic mirrored-metal four-stop). Hover state lerps the two mid-grey stops toward `#E8A6B8`/`#F2C9D4` over ~220ms, then *snaps* back to grey over ~90ms on mouse-leave — fast cool-down is the tsundere tell. ## Imagery and Motifs **1. Liquid-chrome blobs (load-bearing).** Two or three large, slow `feTurbulence` + `feDisplacementMap` SVG blobs of brushed metal drift through the empty right-hand void at ~30s loops, gently warping. They are *cold* — pure greys — and they actively *avoid* the cursor: a weak repulsion field pushes them away when you approach, like the interface flinching. **2. Beveled chrome chassis hardware.** Every module is framed in the Y2K vocabulary: 3px aqua-teal piping, 6px brushed-steel bevel, corner rivets (small chrome circles with inset highlights), tiny embossed screw-slots. Toggle switches at the foot are full skeuomorphic — they cast contact shadows, they have a satisfying spring-throw on click, they do nothing but feel good. **3. Lens-flare star sparkles.** Small 4-point Y2K sparkle stars (`#F2C9D4`, 8–14px) bloom briefly — *and only briefly, then vanish, embarrassed* — at the point where the cursor crosses a chrome surface. Never more than two on screen. They are quick, quiet, and slightly apologetic in their timing. **4. The "ON AIR" pilot.** A single amber `#FFE9A8` glow lozenge near the wordmark, always lit, with a faint 3.2s breathing pulse — the emotional leak the chrome can't seal. **5. Holo-foil seam highlights.** Where two chassis modules bolt together, a 1px iridescent seam (thin animated hue-shift from aqua through rose) catches "light" as the page scrolls — the Y2K holographic-sticker shimmer, kept to a hairline. ## Prompts for Implementation Build tsundere.stream as **one HTML document, one CSS file, one ES module** — no framework, no router, no SPA, no second page. The page is a vertical chrome chassis on a gunmetal void; it scrolls only the short distance the column needs. Tell a story across four beats as the user scrolls and hovers, with no CTA, no pricing, no stat-grid, no hero-pitch: - **Beat 1 — the wordmark plate.** `tsundere.stream` embossed in liquid chrome (Orbitron 148px, four-stop vertical gradient via `background-clip:text`, layered inset+drop `text-shadow` for bevel). On `mousemove` over the plate, run an SVG `feDisplacementMap` ripple that follows the cursor x — the chrome surface bulges *toward* the cursor for a beat, then *over-corrects flat* when it leaves. The amber ON AIR lozenge breathes beside it. - **Beat 2 — the viewport bay.** A 16:9 beveled "screen" framed in aqua-teal piping with four corner rivets; inside, a slow generative chrome-blob field (canvas or SVG turbulence) standing in for "the broadcast." Hovering the bay warms its inner bevel from grey toward `#E8A6B8` over 220ms; mouse-leave snaps it back to grey in 90ms (the cool-down). A quick sparkle blooms at the entry point and dies. - **Beat 3 — the transcript scroll.** Alternating thin chrome lozenge rows (Chakra Petch), each row a Y2K playlist line with a Space Mono timecode at left. Scroll-triggered: rows slide in from the right with a 60ms stagger and a slight spring overshoot, then settle. Hovered row: its chrome lerps to rose and a holo-foil seam under it shimmers; un-hover, instant grey. - **Beat 4 — the status console.** A row of skeuomorphic toggles (real spring-throw, real contact shadows — they toggle, do nothing functional, feel great), two VU-meter needles in Space Mono-labelled gauges that twitch on a perlin idle, and a flickering `// status: tsun — — — dere` comment line that occasionally, briefly, glows amber before resetting. Global behavior: cursor-reactive warmth lerp on ALL chrome surfaces (cool→rose on enter ~220ms, rose→cool on leave ~90ms — the asymmetry is the whole personality); the right-void chrome blobs repel from the cursor; sparkles capped at 2; holo seams hue-shift slowly with scroll position. Honor `prefers-reduced-motion` by freezing blobs/sparkles but keeping the static chrome chassis intact. AVOID: card-grids, bento layouts, dashboards, CTA stacks, pricing blocks, stat-grids, testimonial rows, hero-pitch copy. ## Uniqueness Notes Distinct departures from the registry cohort: 1. **Tsundere-as-material-physics.** No other design encodes a personality into a *temperature-asymmetric hover lerp* — chrome that warms slowly on approach and snaps cold the instant you leave. The 220ms-in / 90ms-out asymmetry is the load-bearing concept and is unprecedented here. 2. **Y2K-chrome at 40% saturation, single-column.** Y2K-futurism and mcbling each sit at ~1% in the cohort, and where they appear they go loud, gaudy, and grid-heavy. This design does *muted, embarrassed, vertical* Y2K — a brushed-metal chassis column on a void, not a maximalist collage — a combination with zero prior instances. 3. **Skeuomorphic hardware that does nothing on purpose.** Real beveled toggles, real VU needles, real corner rivets — fully functional-feeling, functionally inert. Skeuomorphic sits at ~4% and is almost always used for "real" UI; here it's pure emotional theatre. 4. **The off-center column with a deliberate cold-metal *ma*.** Most single-column designs center. This one sits at 44% from the left so the right two-thirds stays an empty brushed-metal expanse the warm pink physically cannot reach — negative space used as emotional distance. Chosen seed / style: **y2k chrome metallic fashion** (reinterpreted as a liquid-chrome broadcast booth with a tsundere temperature gradient). Avoided overused patterns from frequency analysis: no hand-drawn (95%), no glassmorphism (85%), no card-grid (93%), no full-bleed photography (98%), no warm-default palette (98%), no humanist body type as primary, no parallax-sections, no bento-box. Kept cursor-follow and spring (common) but bent them to serve the temperature-asymmetry concept rather than generic motion polish.