# Design Language for tsundere.quest ## Aesthetics and Tone tsundere.quest is a **Y2K-futurism dual-temperature interface** built around the single most famous emotional algorithm in fan culture: the *tsundere oscillation* — the rapid, involuntary flip between an icy, dismissive outer shell ("It's not like I made this site *for you* or anything") and a molten, embarrassed inner core ("...b-but if you wanted to look around, I guess that's fine"). The whole site is engineered as a **two-faced control panel from a 2002 personal-computer fantasy** — frosted translucent plastic, candy-aqua skeuomorphic chrome, lens-flared progress bars — that keeps *catching itself being warm* and slamming back to cold. The `.quest` is read literally: this is a side-quest the site doesn't want to admit it's on. Every screen is staged as a "route" — a branching dating-sim flowchart — but the routes loop back on each other because the heroine can't commit to an ending. Tone is **edgy-rebellious**, but a very specific flavor of it: pouty, defensive, sardonic, theatrically annoyed — never genuinely hostile. Microcopy bristles ("Why are you still scrolling? ...Fine. Whatever."), then betrays itself ("okay wait — that part I actually like, don't tell anyone"). The mood is *adolescent bedroom at 1 a.m.*: glow-in-the-dark stars, a half-finished diary, a CRT left on, a heart drawn in a notebook margin then scribbled out then traced again. The site is embarrassed to exist and proud of itself in alternating frames. ## Layout Motifs and Structure The page is a strict **vertical split-screen** — a hard seam down the center (or, on mobile, a horizontal seam across the middle) dividing every section into a **COLD half** (left) and a **WARM half** (right). The seam is not decoration: it's the spine of the whole composition, rendered as a jagged "crack" — like ice fractured by sudden heat — that runs the full height of the document, ~3px wide, with a faint heat-shimmer distortion along its edge. - **Left column (COLD):** ~50vw. Pale arctic plastic, wide letter-spacing, clipped sentences, lots of empty space, everything aligned flush-left and a little too tidy. This is the *tsun*. - **Right column (WARM):** ~50vw. Sunset-peach gloss, looser line-height, doodles bleeding past margins, hand-scribbled annotations, a slight rotation on cards (±1.5°). This is the *dere*. - **The flip:** on scroll and on hover, *content migrates across the seam*. A confession written on the cold side will, when you dwell on it, slide through the crack and re-render warm — and vice versa. Roughly every third section the columns *swap sides entirely* with a glitch-stutter, so the reader never settles into "left is always cold." - Sections are framed as **dating-sim route nodes**: each has a route name in a chrome nameplate ("ROUTE 01 — first encounter / 初対面"), a "affection meter" lens-flared bar (purely cosmetic, oscillates), and two dialogue boxes — one per temperature. No card-grid. No bento. No dashboard. The structure is a *flowchart that won't resolve*. - A persistent thin **HUD strip** at the very top: a tiny oscillating gauge needle swinging between a snowflake icon and a flame icon, plus the line "current setting: ...don't ask." ## Typography and Palette **Typefaces (Google Fonts only — verified):** - **Bebas Neue** — the COLD voice. All-caps, tall, condensed, glacial. Used for route titles, the cold dialogue headers, and curt one-word interjections ("WHATEVER.", "OBVIOUSLY.", "FINE."). Set with letter-spacing 0.12em–0.2em so it reads as deliberately, frostily over-spaced. This is the face that defines the *tsun* register. - **Baloo 2** — the WARM voice. Rounded, soft-shouldered, slightly bouncy. Used for the dere dialogue, the embarrassed confessions, the "...okay fine I like you" lines. Set looser, lowercase, with the occasional letter nudged off-baseline like nervous handwriting. - **Caveat** — the *margin scribbles*: hearts crossed out, "(stop reading this)", arrows pointing at things, a doodled chibi face. Strictly for annotation overlays, never body text. - **Share Tech Mono** — the *system layer*: the HUD readouts, the affection-meter numerals, the "ROUTE 0X" codes, error stutters. Cold, machine, Y2K-terminal. **Palette — complementary (icy cyan vs. embarrassed coral), the literal color of the tsundere flip:** - `#0B1A2A` — **deep night-window navy** (page base on the cold side, the 1 a.m. bedroom dark) - `#5BE0E6` — **glacial aqua** (cold UI chrome, frost outlines, the snowflake, tsun text glow) — the Y2K translucent-plastic highlight - `#9FF3F7` — **frost-white-cyan** (cold text, ice-crack rim light) - `#FF6B5A` — **flushed coral** (warm UI, the flame, the dere accent, the "blush" gradient) — the exact complement of the aqua - `#FFB199` — **peach-glow** (warm panel fill, sunset bloom behind dere content) - `#FFE9D6` — **warm cream** (warm text on dark, soft paper for doodles) - `#FF3DAE` — **scribbled-heart magenta** (used *only* for the crossed-out heart and the most extreme dere moment — the "I can't believe I'm saying this" pink) - `#1A2E22` — **a single muted teal-green** for the rare "neutral / route-locked" state node, so it reads as off, parked, unavailable The cold side trends toward `#0B1A2A` + `#5BE0E6`; the warm side toward `#FFB199` + `#FF6B5A`; the seam is where `#5BE0E6` and `#FF6B5A` collide in a 2px gradient that *flickers*. ## Imagery and Motifs - **Glitch-art** as the core texture — but emotional glitch, not cyberpunk decay. When the site gets caught being warm, the cold elements *stutter*: 2–4 frames of RGB-split (cyan/coral channel offset), a horizontal slice-shift, a single dropped scanline. The glitch is the visual sound of "n-no I didn't mean that." - **Bubble-playful** motifs everywhere on the warm side: glossy Y2K aqua bubbles, soft speech balloons with rounded tails, little floating circular "thought" orbs that drift up and pop. On the cold side the same bubbles appear *frozen* — ice-cracked, motionless, with frost feathering inside them. - **Lens flare** on every affection-meter bar: a hard anamorphic streak of `#5BE0E6` when low/cold, blooming to `#FF6B5A` when it spikes — old digital-camera flare, very 2003. - **The crossed-out heart**: recurring SVG motif — a hand-drawn heart in `#FF3DAE` with a single `#9FF3F7` scribble striking it through, that on hover *un-scribbles* (path-draw reverses) to reveal the whole heart, then re-scribbles when you look away. - **Glow-in-the-dark ceiling stars**: faint five-point stars scattered on the navy base, the kind stuck to a teenager's ceiling — they pulse very slowly. - **Skeuomorphic plastic chrome**: every panel edge has a Y2K beveled translucent-plastic rim, like an iMac G3 or a translucent GameBoy — visible "molded" highlights, a faint inner shadow, a screw-head detail in two corners. - **Dating-sim dialogue boxes**: bottom-of-screen visual-novel text frames with a name tag, a tiny blinking ▶ continue-arrow (Share Tech Mono), and a typewriter reveal — one box per temperature. - No photography. No stock imagery. Everything is plastic, ice, glow, doodle, or HUD. ## Prompts for Implementation Build tsundere.quest as **one long single-page visual-novel route map**, scrolled top-to-bottom. There is no SPA router, no nav menu, no pricing block, no CTA button, no testimonial wall, no stat grid, no FAQ accordion, no email capture. The "content" is a *story the site tells about not wanting to tell you a story*. - **The seam first.** Lay the page out as `display: grid; grid-template-columns: 1fr 3px 1fr;` (collapsing to rows on mobile). The center 3px is the ice-crack — a tall SVG with a `feTurbulence`/`feDisplacementMap` heat-shimmer filter and a 2px cyan→coral gradient stroke that animates its `stop-color` on a slow loop. Both side columns share the same vertical rhythm so dialogue boxes line up across the crack. - **Temperature as a CSS custom property.** Drive everything from `--temp` (0 = frozen, 1 = blushing). Scroll position and hover dwell push `--temp` around with a *spring* easing (overshoot, settle) — it should feel involuntary, like the site can't hold a face. Background colors, text glow, bubble motion-speed, card rotation, glitch intensity all interpolate off `--temp`. - **Migration across the seam.** Use `IntersectionObserver` + a dwell timer: when the reader lingers on a cold confession, animate it (transform + clip-path "crack" wipe) *through* the seam to re-render in warm styling on the other column; reverse on scroll-away. Every third `
`, hard-swap which column is cold via a 200ms glitch transition (RGB-split keyframes, `clip-path` slice-shifts, one scanline drop). - **Glitch-on-warmth.** When `--temp` crosses ~0.6, fire a short stutter on the cold elements: a `@keyframes tsun-stutter` doing `text-shadow` RGB offset + `transform: translateX()` jitter + a brief `clip-path` slice, 280ms, then snap back. Pair with a subtle `shake-error`-style tremble on the route nameplate ("...shut up"). - **Affection meter.** A cosmetic ``-styled bar per section: an anamorphic lens-flare pseudo-element rides the fill; the fill value drifts on a `requestAnimationFrame` sine wave, never landing on 100%, occasionally dropping sharply with a glitch ("don't get the wrong idea"). - **Dialogue typewriter.** Each route's two text boxes reveal letter-by-letter (Share Tech Mono blinking ▶), the cold box clipped and clinical, the warm box overrunning its frame with a `#FF3DAE` doodled heart that draws itself (`stroke-dasharray` path-draw) then gets scribbled out by a second `#9FF3F7` path — un-scribbles on hover. - **Bubbles & stars.** Warm side: CSS-only glossy aqua/coral bubbles drifting upward at speeds scaled by `--temp`, popping at the top with a tiny scale-burst. Cold side: the same bubbles rendered frozen — `filter: brightness(0.8)`, a frost-crack SVG overlay, zero motion. Navy base: ~40 glow stars, slow opacity pulse, parallax-drifting a few px on scroll. - **Closing.** The last route loops the reader back to ROUTE 01 with a line that contradicts itself twice ("there's no ending. ...there could be. forget it. — come back though."). No footer links beyond a tiny scribbled "← start over?" arrow. - Honor `prefers-reduced-motion`: freeze the glitch, slow the spring, keep the temperature shift but make it a gentle cross-fade. ## Uniqueness Notes Differentiators from other CMassC designs: 1. **The layout *is* the emotion.** Most sibling sites pick a vibe and decorate it; tsundere.quest makes the hard center-seam split-screen (split-screen is ~3% in the corpus) carry the literal tsun/dere binary, with content physically migrating across the crack and the columns swapping sides on a glitch. The structure dramatizes the archetype rather than illustrating it. 2. **Y2K-futurism at ~1% corpus frequency**, executed as *translucent-plastic emotional hardware* — iMac-G3 chrome, anamorphic lens flare, glow stars — rather than the usual chrome-fashion or vaporwave reading of Y2K. Combined with **Bebas Neue (~2%) vs. Baloo 2** as a deliberate two-voice type war, this avoids the dominant mono (93%) / humanist / hand-drawn (95%) defaults entirely. 3. **Emotional glitch, not cyberpunk glitch.** Glitch-art (~2% imagery) here is the visual stammer of embarrassment — fired by a warmth threshold, paired with a `shake-error` tremble — not data-decay or HUD aesthetics. The crossed-out-heart-that-un-scribbles motif is, as far as the catalogue shows, novel. 4. **Complementary palette as narrative device:** icy `#5BE0E6` and its exact complement coral `#FF6B5A` aren't a color scheme, they're the two faces; the only place they meet is the flickering seam. 5. **Avoided per frequency analysis:** no card-grid, no glassmorphism-frost-SaaS treatment, no warm-gradient pastoral wash, no photography, no cursor-follow-as-the-whole-idea, no dashboard/bento. Underused picks foregrounded: split-screen layout, Y2K-futurism aesthetic, Bebas/rounded type pairing, glitch-art imagery, bubble-playful motifs, shake-error pattern, edgy-rebellious tone. [Documented chosen seed/style: `aesthetic: y2k-futurism, layout: split-screen, typography: bebas-bold, palette: complementary, patterns: shake-error, imagery: glitch-art, motifs: bubble-playful, tone: edgy-rebellious` — synthesized as a *dual-temperature Y2K visual-novel control panel that keeps catching itself being warm and slamming back to cold*.]