# Design Language for tsundere.science ## Aesthetics and Tone tsundere.science is **a thermographic research laboratory that refuses to admit it cares about you.** The premise: a fictional institute — the *Bureau of Affective Thermodynamics* — has spent decades measuring the "tsundere phenomenon," the documented gap between a surface that reads ice-cold and an interior that runs warm. The entire site is the institute's public-facing terminal, and it behaves exactly like its subject of study: it opens **clinical, blue, terse, almost hostile** — monospaced readouts, a flat charcoal void, a blinking cursor that seems annoyed you showed up — and then, the longer you stay and the more you touch it, the page **physically warms**: the global color temperature drifts from 6500K daylight-fluorescent toward a 2200K candle glow, hairline-thin handwritten margin notes bleed in from the gutters, and the cold instrument labels turn out to have been hiding tenderness in their footnotes the whole time. The tone is **dry, deadpan, scientific-on-the-outside and quietly fond underneath** — never cute, never anime-pastel, never winking at the meme. It is the aesthetic of a thermal-imaging camera pointed at a heart: false-color, gridded, calibrated, and, if you read the small print, devastating. Think of a cold-storage facility lit by emergency sodium lamps; a lab notebook where the data tables are immaculate but someone has pencilled "*hmph. fine. it matters.*" in the margin; the moment a forehead-thermometer reads higher than expected and nobody says anything. The site should feel like it is **embarrassed to be warm and doing it anyway.** ## Layout Motifs and Structure The spine is a **single tall column of "instrument panels"** scrolled vertically — *not* a dashboard grid (dashboards sit at 35% in the frequency analysis and feel corporate; this is one calibrated strip, read top to bottom like a chart recorder unspooling). Down the **left edge runs a fixed vertical "thermocouple rail"**: a thin 2px line with a travelling bead that rises as you scroll, and beside it a live temperature readout in Kelvin that *actually changes* — 6500 K at the top of the page, ticking down toward 2200 K at the bottom. The rail is the protagonist. Everything else is annotation hanging off it. - **Eleven panels, each a "measurement."** Hero (the cold open) → "Subject Definition" → "Apparatus" → "Trial 001: Surface Temperature" → "Trial 014: Latency to Warmth" → "Anomaly Log" → "The Margin Notes" (the turn) → "Reproducibility" → "Calibration & Honesty" → "Open Questions" → "Sign-off." No CTA panel, no pricing, no stat-grid wall, no testimonial carousel. The "data" is the content. - **Asymmetric gutter, deliberately.** The measured content sits in a strict left-aligned 62-character monospace measure (asymmetric layout is at 40% but rarely *this* lopsided). The **entire right third is reserved as "margin"** — empty and cold for the first half of the page, then progressively colonised by handwritten annotations, arrows, underlines, and one or two crossed-out admissions as the page warms. - **Gridlines that fade.** A faint thermographic measurement grid (8px minor, 64px major) overlays the whole page at the top — clinical, calibrated. As temperature drops/warms, the grid's opacity and color anneal away, so the bottom of the page is gridless and soft. The structure literally relaxes. - **Section headers as instrument labels.** Each panel header is set like a gauge plate: a mono label in small caps, a thin rule, a "range" notation (e.g. `RANGE: 36.1–41.7 °C`), and a tiny false-color swatch strip. Headers stay cold-blue even at the bottom — only the *body* warms — because the institute, like its subject, will never officially update its labels. ## Typography and Palette **Fonts — all Google Fonts only. Three voices: the instrument, the data, and the confession.** - **The Instrument — `IBM Plex Mono`** (weights 400, 500, 600). Every label, axis, readout, header plate, footnote marker, and the Kelvin counter. Tracked +0.04em in small caps for headers. This is the cold, official voice — precise, slightly clinical, never warms up typographically even as the colors do. - **The Data / Body — `IBM Plex Sans`** (400, 500, 600). The running explanatory prose inside each panel — the institute "explaining itself." Chosen as the humanist sibling of Plex Mono so the family stays coherent; set at a comfortable 62ch measure, generous line-height (1.7), left-aligned ragged-right like a typed report. - **The Confession — `Caveat`** (400, 600), with `Gloria Hallelujah` as the alternate for crossed-out admissions. This is the *only* warm typeface, and it appears *only* in the right-hand margin and in pencilled interlinear notes. It must look genuinely hand-scrawled, slightly too fast, occasionally pressed hard enough to be the boldface. It is the warmth the rest of the page won't say out loud. **Palette — a thermographic ramp from clinical cold to candle warmth.** - `#0B0E14` — *Cold-Storage Charcoal.* The base void. Almost-black with a blue undertone, like a darkroom or a chest-freezer interior. - `#1A2230` — *Instrument Panel Slate.* Raised panel surfaces, gauge plates, code-block backgrounds. - `#5BC8F2` — *Calibration Cyan.* The cold-data accent: gridlines, axis ticks, the "6500 K" readout, the annoyed cursor. The dominant color of the top half. - `#8FA3B8` — *Fluorescent Grey.* The cold body-text color — readable, neutral, faintly chilly. - `#F4F1EA` — *Lab-Paper White.* High-contrast headings and the warmest plain-text color reached near the bottom (warm white, never pure white). - `#FF6F61` — *Thermography Coral.* The mid-ramp warming color — false-color "hot spots" on charts, the travelling bead's color once it crosses the halfway mark, link underlines as they anneal. - `#FFB347` — *Sodium-Lamp Amber.* The deep-warm accent at the bottom of the page: candle-glow page tint, the "2200 K" readout, the highlight behind the most tender margin note. - `#E8A0A8` — *Flushed Rose.* The handwriting ink color for `Caveat` margin notes — the color of a face that won't admit it's blushing. The global page applies a CSS `filter: sepia()/hue-rotate()/saturate()` *whisper* (kept under 8% so it never looks Instagram-filtered) that increases with scroll, plus a fixed full-bleed radial "candle" overlay (`#FFB347` at 0% → ~14% opacity) — the mechanism by which "the room warms." ## Imagery and Motifs **No photography, no stock 3D, no anime art. Everything is SVG instrumentation, false-color data, and handwriting — hand-built, thermal-themed.** - **The Thermocouple Rail.** Left-edge fixed: a 2px vertical line, a small soldered "junction" node at top, and a travelling bead that's a tiny circle whose fill interpolates Calibration-Cyan → Thermography-Coral → Sodium-Amber by scroll position. A faint dotted "expected vs. observed" twin line runs beside it and diverges (observed runs warmer than expected — the whole thesis in one graphic). - **False-color thermograms.** Each "Trial" panel carries an SVG plot: stepped line charts, a forehead-temperature scatter, a "latency to warmth" decay curve — all rendered in a classic thermal LUT (deep blue → cyan → coral → amber → near-white) with thin mono axis labels and gridlines. Animate the trace drawing on scroll with `path-draw-svg` (50% in the corpus but apt here: it's literally a chart recorder). - **Gauge plates & dymo labels.** Section headers framed like physical instrument faceplates — beveled 1px border, four corner screws (tiny circles), an embossed serial number, a false-color swatch strip. A few "dymo tape" labels (mono, letter-spaced, on a darker chip) stuck at slight angles. - **Margin marginalia.** The right-third annotations: `Caveat`-set notes, hand-drawn circling ovals around a data point, freehand arrows, a wavy underline, and *one* visibly crossed-out line (strike rendered as a shaky hand-stroke) above its rewritten, gentler version. These fade/slide in from the right gutter as the panel warms. - **The annoyed cursor.** A block cursor `▌` in Calibration-Cyan that blinks at the hero and occasionally "sighs" — pauses its blink for an extra beat — near cold copy; near the bottom it has quietly turned coral and stopped blinking, just resting there, warm. - **Honeycomb of thermistors (one motif touch).** In the "Apparatus" panel only, a small hexagonal sensor array diagram — a nod to thermistor grids — drawn in thin cyan line, one cell glowing coral as if reading a hotspot. - **Frost-to-condensation texture.** A barely-there SVG noise/fractal overlay reading as frost crystals at the top of the page that, by the bottom, has melted into a few soft "condensation" droplet specks. Subtle — felt, not seen. ## Prompts for Implementation Build tsundere.science as **one route, one HTML file, one CSS file, one JS module — a ~70-second vertical scroll through eleven instrument panels, during which the page warms from 6500 K to 2200 K.** This is a narrative experience, not a product page: there is no CTA, no pricing block, no stat-grid wall, no testimonial row, no signup form. The "conversion" is simply: did you read the margin notes. **The warming engine (the core mechanic):** - Map `scrollProgress` (0→1) to a "temperature" `T = lerp(6500, 2200, eased(progress))`. Drive everything from `T`: the Kelvin readout text, a `--warmth` CSS custom property (0→1), the radial candle overlay opacity (0 → 0.14), a near-imperceptible global `filter` warm-shift (cap ~7%), gridline opacity (0.18 → 0), panel border-radius (2px → 16px), and the thermocouple bead's color stop. - Reveal margin handwriting per-panel with `fade-reveal` + a slight `slide-reveal` from the right gutter, staggered, *only past panel 6* ("The Margin Notes" is the turn). Before that, the right third stays demonstratively empty. - The cursor: CSS blink animation near the top; via IntersectionObserver, at the hero add an occasional 600ms "sigh" pause; by panel 9 swap class to stop the blink and tween fill to coral. **Panel-by-panel beats:** 1. **Cold Open / Hero.** Black void, faint frost grid, the annoyed cyan block cursor, then mono types out: `> tsundere.science` … `> Bureau of Affective Thermodynamics` … `> it's not like we built this site for *you* or anything.` The Kelvin readout reads `6500 K · cold start`. Scroll cue is a thin downward tick mark, no bouncing chevron. 2. **Subject Definition.** Dictionary-style: `tsun·de·re (n.)` set as an instrument label; clinical definition in Plex Sans; one tiny `Caveat` asterisk-note in the margin that just says `(you know one. so do we.)`. 3. **Apparatus.** The thermistor honeycomb diagram + a parts list as a mono table (`forehead probe`, `latency timer`, `blush spectrometer`). Deadpan. 4. **Trial 001 — Surface Temperature.** Stepped thermogram, all blue/cyan, axis "°C vs. provocation index." Caption: surface reads cold. Confidence: high. Mood: unbothered (allegedly). Bead still cyan. 5. **Trial 014 — Latency to Warmth.** A decay curve in coral over cyan — "time from contact to measurable warmth." The trace draws as you scroll. First coral appears on the page here. First real margin arrow circling the curve's tail: `see — it always gets here eventually.` 6. **Anomaly Log.** Mono log lines, timestamps, each an observation that contradicts "cold": `14:02 subject left soup. claimed coincidence.` `14:40 walked you home. 'wrong direction anyway.'` Grid starts visibly fading. 7. **The Margin Notes (THE TURN).** Layout inverts emphasis: the cold column shrinks to a narrow strip, the right margin floods with `Caveat`/`Flushed-Rose` handwriting — the things the institute never put in the official report. One line is crossed out (`I don't —`) and rewritten below in steadier hand (`I do.`). Candle overlay now clearly present. Kelvin ~3400 K. 8. **Reproducibility.** "Can warmth be reproduced?" — a small interactive: hover/press a "probe" button and a mini-gauge needle swings into the red; release and it *doesn't* fully fall back. Caption: hysteresis. once warmed, never fully cold again. 9. **Calibration & Honesty.** The institute drops the act for one panel: warm Lab-Paper white text on a near-candle background, plain language, Plex Sans not mono — "we measured this in ourselves, mostly." The cursor has gone coral and still. 10. **Open Questions.** A short list in the margin's handwriting now bleeding into the main column too — questions, not answers. Soft. Gridless. ~2400 K. 11. **Sign-off.** `2200 K · candle.` A single hand-drawn underline under the words: *measured warm. case open.* Faint condensation droplets. The thermocouple bead rests at the bottom, amber, not blinking. Footer is one mono line, small, almost shy: `Bureau of Affective Thermodynamics — readings taken in good faith.` **Technical notes:** prefers-reduced-motion → skip the scroll-typed hero (show text immediately), skip trace-drawing (show final paths), keep the temperature ramp but jump it on section enter rather than continuous. All charts are inline SVG with hand-tuned thermal-LUT stops. Keep the global warm `filter` extremely subtle — the magic dies if it reads as a photo filter. Margin handwriting must use real handwriting fonts (`Caveat`, `Gloria Hallelujah`) at 1.15–1.4em with slight per-note rotation (−3° to +4°) so it never looks like a typeset pull-quote. ## Uniqueness Notes Differentiators, each a deliberate departure from the frequency analysis: 1. **The page warms as a literal mechanic.** No design in the corpus drives a continuous CSS color-temperature ramp (6500 K → 2200 K) off scroll position as its central narrative device. It is the tsundere arc rendered as physics — cold open, latency, warmth, hysteresis — not as decoration. 2. **Thermography as the entire visual language.** False-color thermal LUTs, Kelvin readouts, a thermocouple rail, hysteresis gauges — instrument design, not "data-viz dashboard" (dashboards 35%, this is one chart-recorder strip). The hidden warmth lives in handwritten *margin notes*, not in glassmorphism (85%) or hand-drawn whimsy (95%) — the dominant aesthetics are both refused. 3. **Deliberately extreme asymmetry: a reserved empty margin that fills.** A 62ch left column with a demonstratively *empty* right third for half the page, then progressively colonised by `Flushed-Rose` handwriting. Asymmetric layouts are common (40%) but a structurally-reserved-then-invaded gutter as a plot beat is not. 4. **Crossed-out-and-rewritten admissions.** A shaky hand-strike over `I don't —` rewritten as `I do.` — narrative typography as confession. Typewriter-effect (16%) is used only for the cold hero open and then abandoned; the emotional payload is handwriting, not terminal text. 5. **The cursor as a character with an arc.** A block cursor that "sighs," blinks annoyed at the top, and ends up coral and still at the bottom — anthropomorphised UI chrome, not a loading affordance. Avoided patterns from the frequency analysis: no glassmorphism, no hand-drawn-everything aesthetic, no card-grid (93%) or bento-box, no warm-gradient-hero default (warm 98% / gradient 93% — here warmth is *earned* over the scroll, not the opening state), no cursor-follow (89%) parallax (88%) spring-magnetic combo as the default toy, no photography (98%), no stat-grid / pricing / CTA / testimonial blocks. Chosen seed/style: **cyberpunk data-viz dashboard** — reframed entirely as a *clinical thermographic instrument that warms up*, i.e. *aesthetic: sci-fi · layout: immersive-scroll · typography: tech-mono · palette: midnight-blue→sunset-warm thermal ramp · patterns: path-draw-svg + fade-reveal · imagery: data-viz · motifs: abstract-tech / circuit · tone: mysterious-moody softening to warm-inviting.*