# Design Language for tsundere.tube ## Aesthetics and Tone tsundere.tube is a **Frutiger Aero video-portal from a parallel 2008 — a glossy aqua-glass streaming kiosk that is icy-cold on the surface and embarrassingly warm underneath**. The whole site is staged as a single playback shell: a translucent media browser floating in a sunlit aquarium, all wet highlights, beaded condensation, lens-bloom, and that optimistic late-2000s "the future is clean water and blue sky" energy. The "tube" is literal — a tube of light, a glass capillary carrying drifting bubbles of video — and the "tsundere" is the emotional weather of the interface itself: it greets you in clipped, frosty, slightly defiant copy ("I-it's not like I queued these clips *for you* or anything…"), but as you scroll and hover, the cold blue UI quietly blooms with peachy warmth, the bubbles soften, the captions thaw, and by the closing frame the player has fully admitted it's glad you stayed. This is **not** a SaaS landing page, not a creator-economy pitch, not a "start streaming today" funnel. It is a narrative scroll: a personified video tube performing reluctant affection, told through one continuous full-screen playback environment. Tone is **playful + edgy-rebellious thawing into warm-inviting** — sharp, a little tsun, never cute-by-default; the warmth has to be *earned* by scrolling. Think Windows Vista Aero glass and 2007 iPod nano gloss and a desktop aquarium screensaver, fused with a deadpan anime narrator who refuses to make eye contact. ## Layout Motifs and Structure The spine is **immersive-scroll** (only ~15% of sibling sites) built around a single persistent **player chrome**: a frosted-glass video shell pinned center-screen at ~min(82vw, 1040px), 16:9, with rounded 28px corners, a 2px inner highlight rim, and a soft outer bloom. You never leave this shell — instead the *contents* of the "screen" change as you scroll, each scene a "clip" loading into the same tube. A thin glass **scrubber rail** runs down the right edge as the scroll progress bar, beaded like a water-filled pipette, with a single travelling bubble as the playhead. - **Scene 1 — Cold Open / Title Slate:** the player wakes with a frosty boot chime; domain mark `tsundere.tube` etched into the glass; a blunt one-liner refusing to explain itself. - **Scene 2 — The Queue (reluctant):** a horizontal-drifting row of glossy bubble-thumbnails inside the tube; captions in tsun voice; hovering one makes it bob away then sheepishly bob back. - **Scene 3 — Buffering Confession:** a deliberate fake "buffering" beat where the spinner is a ring of water droplets and the loading text slips from "…whatever" to "…fine, I'll wait too." - **Scene 4 — The Warm Frame:** the glass tint cross-fades blue→peach; condensation on the shell wipes itself clear; this is the emotional pivot. - **Scene 5 — Outro Card:** the tube exhales one last bubble that pops into the closing line; the scrubber bubble settles at the bottom. Strictly **no card-grid** (93% overused), **no bento-box**, **no dashboard**, **no stat-grid**, **no pricing tiers**, **no testimonials**, **no email-capture hero**. Negative space is *water* — let the aquarium breathe around the single tube. ## Typography and Palette **Typefaces — Google Fonts only, verified:** - **Quicksand** — primary display + UI face. Its rounded geometric terminals are the canonical Frutiger-Aero "friendly tech" letterform; used for the domain mark, scene titles, button glyphs. Domain mark set clamp(2.6rem → 5.4rem), weight 600, letter-spacing 0.01em, with a 1px white inner-glow to read as etched-into-glass. - **Varela Round** — secondary face for the tsundere narration captions and short body lines; even softer, slightly humanist, reads like spoken text bubbles. Body clamp(1.05rem → 1.3rem), line-height 1.7. - **Space Mono** — accent face for HUD/system bits only: timecodes (`00:00 / 04:12`), buffering percentages, the scrubber readout, tiny "REC"/"LIVE"-style tags. Uppercase, letter-spacing 0.12em, used sparingly so the mono never dominates. **Palette (min. 3, with hex):** - `#0A2E4D` — *deep aqua-night*: the aquarium backdrop, behind-the-glass shadow. - `#1FA8C9` — *Aero cyan*: the cold-state glass tint, scrubber rail, default UI strokes. - `#9BE7F2` — *bubble-frost*: highlights, condensation beads, thumbnail rims, lens-bloom core. - `#F7B7A3` — *thaw-peach*: the warm-state tint that blooms in Scene 4, hover glows, the closing line. - `#FFE7C7` — *sunlit cream*: warm caption text on the peach state, soft inner light of bubbles. - `#F4FBFF` — *glass-white*: primary cold-state text, rim highlights, the etched domain mark. Cold state lives in `#0A2E4D → #1FA8C9 → #9BE7F2`; warm state cross-fades the same surfaces toward `#F7B7A3 → #FFE7C7`. The peach is a *duotone partner*, never a third equal hue — it invades the blue, doesn't sit beside it. ## Imagery and Motifs - **Glossy water-bubbles** as the core motif (only 3% of siblings): video thumbnails are spheres of light, the playhead is a bubble, transitions are bubbles rising and popping. Each bubble: radial-gradient core `#9BE7F2`→transparent, a single hard specular dot top-left, a faint refracted ring of whatever's "behind" it, drifting on slow buoyancy curves. - **Wet glass / condensation:** the player shell carries a procedural condensation layer — tiny droplet sprites with subtle gravity-trails — that the user can "wipe" near the cursor (a clear-radius mask), revealing sharper content beneath. Metaphor for the tsundere thaw. - **Lens-bloom & soft glints:** every highlight blooms; the boot chime triggers a brief screen-wide aqua flare; sunbeam shafts rake diagonally across the aquarium backdrop, drifting ~2px/s. - **HUD overlay (aero, not sci-fi):** rounded glass pill controls, a frosted timecode chip, a battery-style "warmth meter" that fills from cyan to peach as you scroll — diegetic, never a real stat grid. - **No photography** (98% of siblings use it — this site uses *none*): everything is CSS gradients, SVG bubbles, and generated glass. The "video" inside the tube is always abstract drifting light, never stock footage. ## Prompts for Implementation Build tsundere.tube as **one long single-page immersive scroll**, no routes, no SPA framework needed — a fixed/sticky `.player-shell` element that stays centered while five `
` "clips" scroll through and swap the shell's interior via scroll-progress. - **Glass:** layered `backdrop-filter: blur(20px) saturate(1.4)`, 1px `inset` white top-rim via box-shadow, outer bloom via a large soft `drop-shadow` in `#9BE7F2`. Provide a no-backdrop-filter fallback (semi-opaque gradient). - **The thaw (Scene 4):** drive a single CSS custom property `--thaw` (0→1) off scroll position; interpolate `--glass-tint`, `--text-color`, bubble warmth, condensation opacity all from it. This one variable *is* the story — make the cross-fade slow, ~1.5 scene-heights long, with the warmth meter and copy syncing to it. - **Tsundere copy engine:** narration lines mutate as `--thaw` rises — implement as paired strings (`data-cold` / `data-warm`) with a per-character crossfade (stagger ~18ms) so words visibly "soften" rather than swap. Voice rules: cold lines clipped, slightly defensive, em-dashes and ellipses, never explains; warm lines admit feeling but immediately get flustered. - **Bubbles:** spawn 14–22 drifting bubble sprites in the backdrop on buoyancy easing; thumbnails-as-bubbles bob on hover (rise 8px, drift 6px lateral, spring back with overshoot — `cubic-bezier(.34,1.56,.64,1)`); on "play" a bubble scales up and *pops* (quick scale + radial blur + tiny droplet scatter) to transition scenes. - **Condensation wipe:** a canvas or SVG mask layer over the shell; cursor proximity clears droplets within ~120px; droplets slowly re-form. On touch, auto-clear a slow sweeping band instead. - **Boot sequence:** on load, the shell does a 1.2s glassy power-on — thin scanline of light expands top→bottom, aqua flare, soft chime cue (visual only), then the title slate fades in. First scroll dismisses it. - **Scrubber rail:** right-edge vertical pipette; fill level = scroll %; the playhead bubble has a tiny timecode chip (`Space Mono`) that reads scene names as fake timestamps (`01:48 — the warm frame`). - **Motion budget:** everything floats and eases; nothing snaps. Respect `prefers-reduced-motion` by freezing bubbles and the condensation, and making `--thaw` step on scene boundaries instead of continuous. - **AVOID:** CTA buttons, "Sign up", pricing blocks, feature-comparison tables, stat counters, logo walls, FAQ accordions, testimonial carousels. There is no conversion goal — the only "action" is scrolling to the end and watching the tube admit it likes you. ## Uniqueness Notes 1. **The interface itself is the tsundere character** — copy, color temperature, bubble behavior, and condensation all perform reluctant-then-warm affection driven by a single `--thaw` scroll variable. No other sibling site personifies its UI as an emotional arc; the "thaw cross-fade" is the entire narrative engine. 2. **Frutiger-Aero at ~2% sibling frequency, paired with water-bubbles imagery at ~3%** — a deliberate anti-trend move against the catalogue's 94% hand-drawn / 85% glassmorphism-as-decoration / 93% card-grid / 98% photography defaults. Here glass is *diegetic* (it's a literal media player shell), not a styling veneer, and there is zero photography. 3. **A single persistent player shell with swapping interior "clips"** instead of stacked content sections — the page is staged as one continuous video-tube playback, with a beaded-pipette scrubber as the scroll bar and bubble-pop scene transitions. Immersive-scroll (~15%) over the dominant card-grid/dashboard layouts. 4. **The `.tube` TLD is taken literally as a tube of light carrying bubbles**, and `tsundere` is rendered as interface weather rather than mascot art — no anime girl illustration anywhere, just a cold-blue glass kiosk that gradually goes peach. Chosen seed: **`frutiger aero glossy tech`** — expressed as `aesthetic: frutiger-aero, layout: immersive-scroll, typography: rounded-sans, palette: ethereal-blue (→ duotone thaw to peach), patterns: spring, imagery: water-bubbles, motifs: bubble-playful, tone: edgy-rebellious→warm-inviting`. Avoided overused patterns from frequency analysis: hand-drawn (94%), glassmorphism-as-decoration (85%), card-grid (93%), full-bleed-as-default, photography (98%), warm-default palette (98%), cursor-follow-as-gimmick (89%) — cursor here only drives the condensation wipe, with narrative purpose.