# Design Language for tsundere.life ## Aesthetics and Tone tsundere.life is built as **a confiscated diary that argues with itself in the margins** — a shoujo-manga interior monologue rendered as a printed object: half-tone newsprint, riso-misregistered spot colors, the visible fiber of cheap paper. The whole site performs the emotional grammar of the word *tsundere* — the lurch between `tsun` (spiky, dismissive, arms-crossed, "it's not like I made this site for you") and `dere` (the involuntary warmth that leaks through anyway). Every section literally has two states and refuses to stay in either. The conceit: this is not a site *about* tsundere characters; it is a site that **is** one. It greets you coldly. It claims it doesn't care if you read it. Then — on hover, on dwell, on scroll-pause — the layout blushes: a pink halftone gradient bleeds up from the baseline, the cold grotesque headline softens into a rounded hand-lettered one, a heart-shaped speech bubble pops with a paper *thwip* and immediately gets crossed out with a ballpoint scribble. The tone is **whimsical-creative** wearing an **edgy-rebellious** jacket two sizes too big. Think: the printed-zine energy of 90s scanlation groups, the misprinted-CMYK look of riso art books, and the specific visual rhetoric of manga emotion marks (sweat-drops, vein-pop `#`, sparkle bursts, the four-line shock screentone). Nothing here is glassy, glossy, or corporate. It is matte, slightly crooked, photocopied a generation too many times, and emotionally unreliable in a way the visitor is meant to find funny and a little tender. ## Layout Motifs and Structure The governing structure is the **manga page** — specifically the **broken-grid panel layout** of a shoujo two-page spread, never the tidy 4-up of a comic strip. Panels are irregular quadrilaterals with 2–4px black ink borders, tilted ±1.5° to ±4°, and they overlap: a smaller panel breaks the gutter and sits on top of its neighbor with a hard drop-shadow offset down-right (no blur — printed paper casts hard shadows under a copier lamp). Gutters are not empty white; they are **off-white #F4EDE2 paper showing through**, sometimes with a faint coffee-ring or a thumbprint smudge in the corner. Reading order is **diagonal-sections** down the page, top-right to bottom-left within each spread, the way a manga eye travels — implemented as a long vertical scroll (~600vh) divided into six "spreads," each a self-contained beat of the same argument. Page-turn moments between spreads use a literal **paper-flip** transition: the bottom edge of the current spread peels up showing its grey back-of-page, revealing the next. The dual-state mechanic is structural, not decorative. Each spread has a **`.tsun` resting layout** (cold: cramped panels, hard left-aligned sans, monochrome ink, arms-crossed silhouette in the corner) and a **`.dere` activated layout** (warm: a panel swings open like a locker door on a hinge in its top-left corner, pink halftone floods in, a hidden hand-written panel slides out from behind the cold one, the silhouette uncrosses its arms). The site loads in `.tsun`. It only goes `.dere` when the visitor *stays* — scroll-velocity near zero for 1.2s, or hover-dwell on a panel for 600ms. Move too fast and it snaps back to `.tsun` with a `#`-vein-pop and a "tch." Navigation is **minimal-navigation**: no nav bar. A single vertical "spine" runs down the left margin — a stitched manga-binding graphic — with six tiny notches you can click to jump spreads. The notches are unlabeled until hovered, at which point a hand-written tab flips out. ## Typography and Palette **Three Google Fonts, cast by emotional register:** - **Bagel Fat One** — the *dere* display voice. A fat, rounded, almost edible headline face. Used only when the site has gone warm: confessions, the soft heading that replaces the cold one, the heart-bubble text. Set huge (clamp 3rem–7rem), warm ink color, slight rotation, often with a doubled offset "ghost" copy behind it in pink like a misregistered print layer. - **Zen Kaku Gothic New** — the *tsun* voice and the workhorse. A crisp, cool Japanese-influenced grotesque. Carries all the cold headlines, the dismissive captions ("whatever.", "don't get the wrong idea."), and all running body text. Set tight, hard-edged, `letter-spacing: -0.01em`, frequently `text-transform: lowercase` to feel mumbled. In `.tsun` state headlines are pure ink #1B1A17; the moment a spread blushes, the *same* text node cross-fades to Bagel Fat One — the typographic equivalent of a stammer. - **Yomogi** — the margin-scribble voice. A wobbly handwritten brush-pen face. Used exclusively for the marginalia: corrections scrawled over the cold text, the crossed-out "I lov—", the panic notes ("DELETE THIS"), the tiny apologies in the gutter. Always set at a jaunty angle, always small, always feels like it was added in pencil after the fact. **Palette — riso-misprint CMYK on cheap paper, minimum five:** - `#F4EDE2` — newsprint paper base (the gutters, the page back is `#D8D2C6` cool grey). - `#1B1A17` — ink black, the panel borders and all `.tsun` text. Never pure `#000`. - `#FF5A8C` — riso fluoro pink, the **dere** color: the blush halftone, the heart bubbles, the misregistered ghost type. This is the site's emotional tell. - `#2BB6C4` — riso aqua, the **tsun** accent: the cold sparkle, the speed lines, the "tch" sound effects. Cold to the pink's warm. - `#FFD23F` — riso yellow, used sparingly for shock-bursts and the sweat-drop highlights, and where pink+yellow overprint to a warm orange `#FF8A3D` at transition moments. - Overprint logic: where pink and aqua halftone dots overlap they multiply to a bruised violet `#7A4FA8` — used at the exact knife-edge between the two states, the "I'm conflicted" zone. ## Imagery and Motifs Everything is **hand-drawn line-illustration** plus **halftone screentone**, never photography. - **The corner companion**: a single inked silhouette of a tsundere figure (twin-tails, oversized cardigan, arms crossed) lives in the bottom-right of every spread. It is the site's avatar. In `.tsun` it faces away, arms crossed, a `#` vein-pop floating near its head. In `.dere` it half-turns, one arm drops, a tiny `♡` escapes and it immediately swats at it. Drawn as flat SVG paths so it can be posed by CSS. - **Manga emotion marks as UI**: sweat-drops (animated SVG, they bead and fall on error/fast-scroll), the four-radial-line shock screentone (flashes behind a panel when it's clicked), sparkle quartets `✦` (orbit the cursor only when warm), motion/speed lines (rake across a panel diagonally when you scroll past it fast — these are the "you're moving too fast, I don't like it" cue). - **Screentone fills**: dot halftone (Ben-Day), line halftone, and the radial "flustered" tone — applied as CSS `radial-gradient` dot patterns and SVG `` tiles, with deliberate 1–2px misregistration so the dots don't sit inside their ink outlines. - **Speech bubbles**: jagged-edge "shout" bubbles for `.tsun` lines, round cloud bubbles with a wobbly tail for `.dere` lines, and a special **crossed-out bubble** — a soft confession bubble with a hard ballpoint scribble SVG-pathing across it, animated to scrawl on as if someone panicked. - **Paper texture**: a subtle fiber/grain noise overlay on the whole page (low opacity), plus per-spread imperfections — a coffee ring, a dog-eared corner, a strip of washi tape holding a panel down. - **The locker-door panel**: the recurring reveal device — a panel in each spread that is hinged and swings open on the warm transition, its inside surface a different color (pink halftone) than its outside (ink-on-newsprint). ## Prompts for Implementation Build tsundere.life as **one HTML document, one CSS file, one small vanilla ES module — no framework, no router, no build step beyond a single bundler pass**. It is a single continuous vertical scroll, ~600vh, six "spreads," each a beat in one running argument the site has with itself about whether it's glad you came. **Storytelling is the spine, not navigation.** The six spreads, in order: (1) **"who said you could be here"** — cold open, cramped panels, the companion's back turned, a doormat that says "GO AWAY" in tiny letters underneath "welcome"; (2) **"...the door's unlocked, that's all"** — first blush, first locker-panel swing, first crossed-out confession; (3) **"i guess i'll show you around"** — the warmest spread, panels open, pink halftone dominant, hand-lettered captions, the companion almost smiling; (4) **"forget what i said"** — sudden `.tsun` relapse, vein-pop, speed lines, everything snaps cold and cramped, a panel slams shut; (5) **"...are you still there"** — quiet, half-and-half, the violet overprint zone, the companion peeking; (6) **"don't make a big deal out of it"** — resolution, a small warm panel in a cold spread, a postscript in Yomogi marginalia: "the lights stay on. that's it. that's all." **The dual-state engine is the whole site.** Maintain a per-spread state `tsun | warming | dere | cooling`. Drive it from scroll velocity (a smoothed `Math.abs(deltaScroll)` over ~200ms) and hover-dwell timers. `warming`: ~700ms — the cold headline cross-fades node-to-node from Zen Kaku Gothic into Bagel Fat One, panels rotate toward upright via **spring** easing, the pink halftone `background-position`/opacity lerps up from the baseline, the locker panel swings on a CSS 3D hinge, the companion re-poses. `cooling`: snappier, ~250ms, **shake-error**-style — a `#` vein-pop scales in, aqua speed lines rake across, a "tch." sound-effect word stamps in and fades, panels snap back tilted and cramped. Going fast through a spread = it never warms; it just throws speed lines and a sweat-drop at you. Going slow = it can't help itself. **Animation vocabulary** (lean on underused patterns): **path-draw-svg** for the ballpoint scribble crossing out confessions and for the companion's blush strokes; **morph** for jagged shout-bubble ↔ round cloud-bubble; **spring/elastic** for panels swinging upright and heart-bubbles popping with a paper *thwip*; **bounce-enter** for emotion marks; **slide-reveal** for the hidden hand-written panel emerging from behind the cold one; **typewriter-effect** for the Yomogi marginalia scrawling on character-by-character with a wobble; **scroll-triggered** + **blur-focus** for the page-turn paper-flip between spreads. Cursor: in `.dere` only, sparkle quartets orbit it; in `.tsun` it gets a tiny aqua "tch" trailing it. Respect `prefers-reduced-motion` by collapsing transitions but keeping both end states reachable on hover/click. **AVOID:** no CTA stack, no pricing block, no stat-grid, no testimonial carousel, no hero-with-button, no nav bar, no card-grid of features. There is nothing to buy and nothing to sign up for. The "conversion" is: the visitor lingers, the site blushes, and that's the entire payload. ## Uniqueness Notes Differentiators this design commits to (none should be duplicated by another CMassC site): 1. **The literal tsun/dere state machine** — every spread has two fully-authored layouts (cold-cramped vs warm-open) and the *site's emotional state* is driven by the visitor's scroll velocity and dwell time. Move fast = it stays cold and throws speed lines; linger = it involuntarily warms. The interaction model *is* the theme. 2. **Typographic stammer** — the same headline text node cross-fades between two named fonts (cool Zen Kaku Gothic → fat rounded Bagel Fat One) as the spread blushes, with a misregistered pink "ghost" copy behind it. Type *changes its mind* mid-page. 3. **Riso-misprint CMYK-on-newsprint visual system** — deliberate 1–2px screentone misregistration, overprint multiply colors (pink+aqua → bruised violet at the "conflicted" zone), hard no-blur paper shadows, fiber-grain overlay, per-spread coffee rings and washi tape. Pop-art / riso-zine territory, which the frequency analysis shows is essentially unused (pop-art 0%, photography at 98% is rejected here). 4. **Marginalia as a third typographic voice** — Yomogi handwriting exists only to scrawl corrections and crossed-out confessions over the printed text, animated with path-draw and typewriter-with-wobble. The site argues with its own copy in the margins. 5. **The inked corner companion as a CSS-posable SVG avatar** — one figure, twin-tails and oversized cardigan, re-posed (arms cross/uncross, blush, swat at an escaping heart) entirely via CSS state classes; the site's mood made visible in the corner of every spread. 6. **The locker-door reveal panel** — a hinged manga panel in each spread that swings open on a 3D CSS hinge, ink-on-newsprint outside, pink halftone inside; the structural device for "the warm thing was hiding behind the cold thing the whole time." Chosen seed/style: **pop art vibrant showcase** (pop-art, riso-zine, manga-halftone direction — pop-art at 0% in frequency, photography 98% rejected, glassmorphism 85% and hand-drawn 95% steered hard away from the generic-cute reading by anchoring in misprint-CMYK printcraft rather than soft pastel illustration). Avoided overused patterns per frequency analysis: rejected photography (98%), glassmorphism (85%), generic card-grid (93%) and full-bleed-centered hero (85%/80%); steered the near-ubiquitous warm-gradient palette (98%/93%) toward flat riso spot-colors with overprint multiply instead of smooth gradients; used the common hand-drawn aesthetic but recast it as inked-and-screentoned printcraft, not soft sketch.