# Design Language for tsundere.quest ## Aesthetics and Tone **The Burgundy Lab Notebook** — a dopamine-coded research field journal kept by an unreliable scientist who is too proud to admit she likes you. Imagine a freshly-pressed laboratory daybook bound in oxblood leather, opened flat on a workbench under warm, optimistic afternoon sun. The left page is meticulous Frutiger-clean engineering: clean grids, instrument readouts, a confident sans-serif annotating the day's experiments in cool, precise tones. The right page is wet — *literally*. Watercolor blooms have soaked through from the back, smudging the burgundy ink into rosé halos, drowning a transistor diagram in a wash of warm coral, blurring the boundary between *what the scientist measured* and *what she actually felt*. The two pages do not match. They are not supposed to. The mood is **bright, optimistic, and cheerfully self-contradictory** — the digital equivalent of someone in a starched lab coat blushing into a clipboard. Where most "tsundere" sites lean dark, smoky, or sharply contrasted, this one commits to deep burgundy as a *base* color rather than an accent, with the optimistic-bright tone delivered through chalky bone-cream paper, splashes of sun-warmed watercolor coral, and tiny sparks of mint-circuit signal-green. Inspirations: Frutiger's 1970s Roissy signage system, Beatrix Potter's wet-into-wet botanicals, vintage HP-41C calculator manuals, the blush-on-cheek panel from a shoujo manga, and the precise hand-drawn schematics in *The Way Things Work*. The site **never apologizes** for being two things at once. The tension between the clean engineering grid and the unruly watercolor bleed *is* the design. ## Layout Motifs and Structure **True split-screen, vertically bisected, immutable through scroll.** The viewport is divided exactly down the middle by a hand-painted watercolor seam — not a CSS border, an actual SVG bleed of `#5a1a26` ink dispersing into `#f3e4d6` paper. The left half (`50vw`) is the **lab side**: a strict 12-row Frutiger-clean modular grid where every element snaps to a baseline rhythm of `28px`. The right half (`50vw`) is the **journal side**: a free-flowing watercolor-paper canvas where elements float at hand-drawn coordinates, deliberately *not* aligned to the grid, gently rotated `-1.4deg` to `+2.1deg`. Both halves scroll independently (`overflow-y: auto` per pane), but a **cursor-follow scrubber** chains them: when the cursor is in the left pane, scrolling moves the lab side and the journal side drifts at `0.6×` parallax; when the cursor crosses the seam into the right pane, the relationship inverts. The seam itself reacts to the cursor — the watercolor edge swells `+8px` toward whichever side the cursor occupies, as if the ink is being pulled toward attention. On mobile (`<860px`), the split rotates 90deg into a stacked vertical with the seam becoming a horizontal watercolor tide-line; cursor-follow becomes touch-follow with the same swell behavior tied to `touchmove`. Within the lab side: a **fixed instrument-panel header** (`80px` tall, lab-side only) holds a live experiment timestamp, a session-id, and a tiny ECG-styled sparkline of the user's scroll velocity. Below it, content stacks as **engineering plates** — captioned figure-blocks (`Figure 1.1`, `Figure 1.2`) each occupying exactly `4 / 8 / 12` grid rows. Within the journal side: no header, no chrome, just **floating annotation islands** — handwritten notes, marginalia arrows pointing across the seam at lab figures, watercolor-stained Polaroids of the same content rendered emotionally. The two sides are **the same content, twice**: once as engineering report, once as confessional diary. A `4vh`-tall **footer plinth** spans both sides, bone-cream on the left and burgundy on the right, with a single sentence that swaps halves on cursor crossing. ## Typography and Palette **Three Google Fonts, each owning a layer:** - **Archivo** (700, 500, 400) — the Frutiger-clean lab-side workhorse. Used for all engineering captions, instrument labels, headings, body. Letter-spacing `+0.02em` at body sizes, `-0.01em` at heading sizes. Numerals tabular. - **Caveat** (500, 700) — the journal-side handwriting. Used for marginalia, blush-confessions, arrows, "do not show this to the test subject" annotations. Pulled `8deg` askew with `transform: skew(-3deg, -1deg)` on selected runs. - **JetBrains Mono** (400) — the bridge font. Used only in three places: the experiment timestamp in the header, hyperlink anchor strings (`→ §3.2`), and the seam-crossing footnotes. Reinforces the "this is a real instrument readout" feeling without ever screaming "developer site." Type scale (lab side, on `28px` baseline): `64px / 40px / 28px / 18px / 14px / 11px`. Type scale (journal side, deliberately *unscaled*): handwriting renders at organic sizes between `19px` and `42px`, never snapping to the same ladder. **Palette — Deep Burgundy, optimistically lit:** | Token | Hex | Role | |---|---|---| | `--ink-burgundy` | `#5a1a26` | Primary ink, lab-side type, watercolor seam core | | `--ink-burgundy-deep` | `#3a0d18` | Headings, instrument frames, plinth footer (right half) | | `--paper-bone` | `#f3e4d6` | Lab-side ground, journal-side ground (warmer variant) | | `--paper-cream` | `#fbf2e6` | Journal-side ground, slightly warmer than lab side | | `--wash-coral` | `#e89683` | Watercolor bleed primary — sun-warmed coral wash | | `--wash-rose` | `#d97a85` | Watercolor bleed secondary — blush halo around figures | | `--signal-mint` | `#7fc8a3` | Single accent — circuit traces, "experiment running" lights, link underlines | | `--graph-grid` | `#d8c5b1` | Lab-side grid lines, plotted axes, baseline rules | **Critical palette rule:** burgundy is *always* the dominant color (≥ 55% of any composition by ink-area). Coral and rose are *always* present as wash, never as solid fill. Mint appears on **at most one element per viewport** — it is the rare circuit spark that says *the experiment is live*. ## Imagery and Motifs **Two parallel imagery systems running on opposite sides of the seam:** **Lab-side (Frutiger-clean engineering schematics):** every figure is an **inline SVG technical illustration** drawn in `--ink-burgundy` strokes at `1.25px` weight, `--graph-grid` underlay at `0.5px`, no fill except `--paper-bone`. The motifs are deliberately **tech**: a labeled cross-section of a vacuum-tube oscillator with annotations pointing at "anode," "cathode," "the part where she gets nervous"; an exploded-view diagram of a 1970s pocket calculator with each key labeled by what it would say to its crush; a phase-diagram plotting "stated affection" against "expressed affection" with the data points clustering hilariously off-axis; a Smith chart of impedance with one anomalous data point circled and labeled `??? recheck instrument`; a printed-circuit-board trace pattern that, viewed from far enough back, spells the word "fine." Every illustration uses Frutiger-grade clean linework — no shadows, no gradients, no skeuomorphism. Pure engineering deadpan. **Journal-side (watercolor confession):** every lab-side figure has a **journal-side counterpart** rendered as a hand-painted watercolor Polaroid. The same vacuum tube, but soft-focused under a `--wash-coral` bleed, edges feathered by `feTurbulence` + `feDisplacementMap` SVG filters that simulate paper-fiber bleed. The same calculator, but with one key blushed `--wash-rose`. The same phase-diagram, but the off-axis data points have been retraced by hand in `Caveat` font with little hearts beside them, *poorly erased*. Watercolor is rendered as layered SVG `` elements with `filter: url(#wet-paper)` defining a custom turbulence-displacement-blur stack that gives every wash an authentic wet edge with bleed-back into the dry paper. No photographs. No stock imagery. No 3D renders. The right side is **entirely painted**, and the wetness of the paint is the point. **Recurring motifs:** instrument crosshairs (`+`) at every lab-side grid intersection rendered as `4px × 4px` burgundy ticks; oscilloscope-style waveforms used as section dividers on the lab side; on the journal side, **pressed-flower silhouettes** (a single wisteria sprig, a forget-me-not, a four-leaf clover with one leaf scribbled out) tucked into corners; a recurring **paper-clip** at the seam where a lab figure and journal figure are clipped together as a pair; tiny `cursor-follow` particles on both sides — burgundy ink-droplets on the left that snap to the grid, watercolor blooms on the right that *don't*. ## Prompts for Implementation Build this as **a single-page interactive lab notebook**, not a marketing page. There is no nav, no hamburger, no logo wall, no testimonials, no pricing tier, no CTA buttons, no stat-grid, no hero-with-button. The user opens to a notebook already lying flat, mid-experiment. **Skeleton.** One `
` containing two `
` panes: `
` and `
`. Both `position: absolute; top: 0; bottom: 0; width: 50vw; overflow-y: auto;`. The seam is a third element, ``, absolute-positioned at `left: 50%; transform: translateX(-50%); width: 28px; height: 100%`, containing the watercolor bleed path generated with `` using `feTurbulence baseFrequency="0.65" numOctaves="3"` plus `feDisplacementMap scale="6"`. Animate the seam's `feTurbulence seed` attribute with a slow `requestAnimationFrame` loop (`1` increment per `120ms`) so the wetness *breathes*. **Cursor-follow.** A single global mousemove handler tracks `clientX, clientY`. On the lab side, render a `12px × 12px` SVG burgundy droplet that *snaps* to the nearest grid intersection with `transition: transform 80ms ease-out`. On the journal side, render a `28px` watercolor bloom (radial-gradient `--wash-coral → transparent`) that *trails* with spring physics (`lerp 0.18`). On crossing the seam, the droplet dissolves into a bloom and vice versa over `220ms` — this is the only "page transition" the site has. On mobile, replace cursor with `touchmove` and reduce particle count to one trailing bloom only. **Split-screen sync.** Use `IntersectionObserver` per `.figure` on the lab side to detect which engineering plate is currently most-visible. When the active figure changes, scroll the journal side to its paired confession with `behavior: smooth` and `parallax 0.6`. When the user *manually* scrolls the journal side, invert: the lab side scrolls back to the matching figure. Scroll-chain detection by tracking which pane received the last `wheel` or `touch` event within `400ms`. **SVG illustrations.** All lab figures are inline SVG defined in a `` block at the top of the document and referenced via ``. Compose each figure from primitives — ``, ``, ``, `` with `stroke-dasharray` for dimension lines, `` with `font-family: Archivo` for labels. No external assets. The journal-side counterparts are the *same* SVGs wrapped in `` with an additional `` watercolor wash drawn behind. Define `` once: `feTurbulence baseFrequency="0.04" numOctaves="2"` → `feDisplacementMap scale="3.5" in="SourceGraphic"` → `feGaussianBlur stdDeviation="0.4"`. **Watercolor wash technique.** For each wash, draw an irregular blob `` with `fill="var(--wash-coral)" fill-opacity="0.55"`, then a *second* slightly smaller blob `fill="var(--wash-rose)" fill-opacity="0.35"` offset `2px / 3px`, both inside the wet-paper filter group. The double-fill mimics how watercolor pigment separates as it dries. **Storytelling pacing.** Six paired figure sets, each set advancing a *single experimental finding* about a relationship the scientist refuses to name. Lab side reads as deadpan technical report; journal side reads as the same finding re-experienced emotionally. Final pair: the lab side shows a table of measurements concluding `result inconclusive`. The journal-side shows the same table with every cell crossed out and a single `Caveat`-handwritten word: `fine`. **Avoid.** Dark backgrounds (the optimistic-bright tone forbids them — bone-cream paper only). Smoky gradients. Glow effects. Anime-eye photography. Skeuomorphic notebook textures (paper grain comes from SVG turbulence, not raster JPGs). Any layout where left and right halves match content top-to-top — they must drift. Any use of mint outside its single-spark-per-viewport budget. Stat counters, pricing, CTAs, modal overlays, scroll-jacked full-page transitions. ## Uniqueness Notes 1. **Deep-burgundy at 0% corpus incidence + frutiger-clean at 0% + watercolor at 5% + cursor-follow at 2%** — this exact stacked vocabulary is unprecedented across the corpus. Other "luxury" or "moody" sites that reach for burgundy invariably pair it with serif-classic typography, gold accents, and dark-mode photography. Pairing burgundy instead with *Frutiger's optimistic 1970s wayfinding sans* and *wet-edge watercolor* on a *bone-cream paper ground* is a chromatic and typographic territory the corpus has not visited. 2. **True split-screen where the two halves render the SAME content twice** — once as deadpan Frutiger-clean engineering schematic, once as wet watercolor confession. Most split-screen sites in the corpus use the divide for nav/content or before/after; this site uses the divide as the *thesis* — the gap between what the tsundere scientist measures and what she actually feels. 3. **Independently scrolling panes chained by cursor-follow with parallax inversion on seam-crossing.** When the cursor is on the lab side, the journal drifts at 0.6×; when it crosses the painted seam, the relationship flips. The seam itself swells toward attention. This dual-axis scroll-chaining tied to cursor-position is not present elsewhere. 4. **The watercolor seam is a live SVG filter, not a static image.** `feTurbulence` seed animates at `120ms` intervals so the bleed visibly breathes — every pixel of the boundary is procedural. Watercolor in the corpus is overwhelmingly raster PNG; here it is computed. 5. **Tech motif (20%) reframed as 1970s analog instrumentation rather than 2020s digital glow.** Every schematic is a vacuum tube, a Smith chart, an HP-calculator key — *not* a circuit board with neon traces. This dodges the dominant tech-mono / dopamine-neon co-occurrence that owns most "tech" tagged sites. 6. **Optimistic-bright tone delivered through warm bone-cream + sun-coral wash, not the corpus-default gradient pop or saturated electric.** The brightness comes from *paper*, not from light. **Chosen seed (per assignment):** aesthetic: dopamine, layout: split-screen, typography: frutiger-clean, palette: deep-burgundy, patterns: cursor-follow, imagery: watercolor, motifs: tech, tone: optimistic-bright. **Avoided patterns from frequency analysis:** photography (82%) — replaced entirely by inline SVG and computed watercolor; mono typography (dominant) — JetBrains Mono is demoted to micro-instrument-readouts only; minimal imagery (26%) — rejected, this design is *dense*; dark-mode color schemes — rejected for the optimistic-bright tone; serif-classic + burgundy default pairing — explicitly inverted with Frutiger-clean.