# Design Language for tsundere.dev ## Aesthetics and Tone tsundere.dev is built on a single, ruthlessly literal premise: **the site itself is a tsundere.** The word names the trope of a character whose hostile, prickly, dismissive exterior conceals — and only reluctantly reveals — genuine affection. So the page presents, on first contact, as a **slab of riveted industrial concrete-and-steel signage** that is openly annoyed you showed up: clipped error-message copy, a header that reads like a `403`, hairline-thin warning tape, monospace timestamps stamped like demerits, edges so square they could draw blood. It is **neubrutalism with the volume turned to "leave me alone"** — raw 1px hard black borders, zero border-radius, flat fills, drop-shadows offset like stacked cinder blocks (`4px 4px 0 #000`, never blurred), interface chrome that looks photocopied. There is no gradient anywhere on the cold layer. Nothing glows. Nothing breathes. It is deliberately, performatively unwelcoming. And then — only when the visitor lingers, only when they scroll past the point a "normal" cold site would have ended, only when the cursor rests on a heading long enough to count as *staying* — the concrete **warms**. Not melts: warms. A buried sublayer of **honeyed cream, soft terracotta, a single embarrassed blush-pink** seeps up through the cracks between the brutalist plates, like underfloor heating you weren't supposed to know about. The clipped copy gets a parenthetical it tries to take back ("...not that I care if you read it"). A hand-drawn doodle — a tiny scribbled heart, immediately crossed out — appears in a margin. The 90°-square corners on *one* card quietly round themselves when no other card is watching, then snap back square the instant you hover a sibling. The whole design is a **performance of reluctance**: every warm gesture is half-retracted, every soft color is fenced behind a hard black 1px rule, every kind word is followed by "b-baka." Tone: **edgy-rebellious on the surface, warm-inviting underneath, and the comedy is entirely in the gap.** Mysterious-moody is explicitly *avoided* — this isn't dark and brooding, it's bright-cold-fluorescent and *fussy*. Think a vending machine that apologizes. Think a README written by someone who clearly spent eleven hours on your problem and will deny it under oath. ## Layout Motifs and Structure The structural spine is **broken-grid built from rigid modular blocks** — a deliberate paradox: the *blocks* are perfectly rectangular, hard-ruled, gridded like a parts catalog, but the *grid they sit in* is fractured, off-baseline, with blocks jutting 12–40px past their neighbors as if shoved aside in irritation. Nothing is centered. Centering would be *trying too hard*. **Two-layer architecture, vertically stacked, scroll-revealed:** - **The Cold Plate (top ~140vh).** Full-bleed. A header bar styled as a stamped metal plaque: `tsundere.dev` set hard-left in caps mono, a fake status code on the hard-right (`STATUS: TOLERATED`), a 1px black rule under everything, no nav links — just three terse text fragments that look like terminal output. Below: a single oversized headline block, left-aligned, that says something dismissive ("Oh. It's you." / "You're still here?" / "Fine. Come in. Wipe your feet."). Around it, scattered "warning" elements: diagonal hazard-stripe tape (black on cream, 12px stripe, never animated up here), a monospace "log" panel with timestamped entries that read as exasperated commit messages, a boxed disclaimer in all-caps. Everything boxed. Everything bordered. Everything `box-shadow: 5px 5px 0 #1A1A1A`. - **The Warm Substrate (everything below ~140vh).** As the visitor scrolls past the cold plate, the background does NOT crossfade — it **fractures**: the concrete-grey `#E8E6E0` splits along jagged SVG-path seams and slides apart in plates, revealing the honeyed `#F5E6CA` underneath, with a few `#E8A87C` terracotta wedges and exactly one `#F2C9C9` blush patch peeking through near the most personal content. The modular blocks continue, same hard borders — but now the *fills* inside them are warm, and a few have hand-drawn doodle annotations in the margins (always small, always with a strike-through or a "...ignore that"). This is where the actual content lives: it reads like a developer's genuinely-helpful notes, project log, or "things I built for you and will pretend I didn't" — delivered grudgingly, in the second person, with every third sentence walked back. **Scroll behavior is the load-bearing narrative device.** The page is ~480–560vh, structured as a slow thaw in 5 beats: (1) Rebuff, (2) Suspicion, (3) Cracks Forming, (4) Reluctant Help, (5) Denial-of-Affection close. Each beat is a `100–120vh` band. The seam-fracture between cold and warm happens once, at beat 2→3, and is the visual climax. No card-grid-of-equal-tiles. No bento. No dashboard. The grid is broken on purpose and the blocks are brutalist on purpose and the warmth is hidden on purpose. ## Typography and Palette **Typefaces — Google Fonts only, three families, cast strictly by temperament:** - **Space Mono** (Google Fonts) — the *cold voice*. Every piece of "interface" text: the header plaque, status codes, the timestamped log, all-caps disclaimers, navigation fragments, the dismissive headlines. Set tight, often `letter-spacing: 0.04em`, frequently `text-transform: uppercase`. This is the tsundere's *armor* — clipped, technical, monospaced so every character occupies the same defensive width. Headlines run 40–88px, body-mono runs 13–15px. - **Fraunces** (Google Fonts, the soft-but-still-a-little-formal variable serif with its optical "wonky" axis) — the *warm voice*. It only appears below the seam. The genuinely-helpful paragraphs, the moments where the site accidentally says something kind, the section intros in the warm substrate. Set at 17–21px for body, 28–44px for warm headings, generous `line-height: 1.65`. Where Space Mono is rigid armor, Fraunces is the *blush* — it has a slightly soft, almost embarrassed warmth, and its "soft" optical setting at large sizes makes it look like it's leaning away while still talking to you. - **Caveat** (Google Fonts) — the *involuntary voice*. Used ONLY for the marginal doodle-annotations: the "...not that I care," the crossed-out heart caption, the "(ignore this)". Small (14–18px), tilted `-2deg` to `+3deg`, always paired with a hand-drawn SVG strike-through or scribble. This is the part the tsundere can't control — the truth that leaks out in the margins. **Palette — two strata, hard-fenced:** Cold stratum (the armor): - `#E8E6E0` — concrete grey, the default ground above the seam - `#1A1A1A` — ink black, every border, every hard shadow, every cold word - `#C9CCC4` — dust grey, secondary panels, the "photocopied" fills - `#5C5F58` — gunmetal, muted cold text, timestamps Warm stratum (the affection, revealed): - `#F5E6CA` — honeyed cream, the substrate ground below the seam - `#E8A87C` — soft terracotta, warm accent wedges, kind-headline underlines - `#F2C9C9` — blush pink, used SPARINGLY — exactly one patch, exactly one doodle-heart, exactly one "b-baka" highlight - `#7A4A2E` — roasted umber, the warm body-text color (warm but not soft — it's still a little gruff) The single non-negotiable rule: **a warm color may never touch the page edge and may never appear without a `#1A1A1A` 1px border or rule fencing it in.** The affection is always behind bars it put up itself. ## Imagery and Motifs Three motif families, each carrying part of the trope: **1. Sharp-angles / industrial signage (the armor).** Stamped-metal plaque headers with fake rivet dots (4px black circles in corners). Diagonal hazard tape (12px black-on-cream stripes) used as section dividers — *static* above the seam, allowed to *slide slowly* below it (a tiny tell). Boxed all-caps disclaimers with corner brackets `⌐ ¬`. A recurring "status badge" motif: a hard rectangle, 1px border, mono caps, contents like `STATUS: TOLERATED` → `STATUS: ...FINE` → `STATUS: PLEASE STAY` as you descend. Faux-terminal log panels with monospace timestamped lines that drift from hostile to helpful. **2. The seam / fracture (the crack in the armor).** A single jagged SVG path, ~8 sharp zigzag points, that runs full-width at the cold→warm boundary. Above it: grey. Below it: warm. On scroll it doesn't fade — the grey plates above it physically separate (`transform: translateY` + slight `rotate`) along the zigzag and warm color floods up between them. This is the one big "reveal" gesture. Smaller hairline cracks (1px black SVG strokes, 20–60px long) appear sporadically in cold panels lower down, each leaking a 2px sliver of `#E8A87C`. **3. Hand-drawn doodle annotations (the involuntary truth).** Tiny, deliberately rough, single-stroke SVG scribbles, always in the warm substrate, always in margins: a heart immediately crossed out; an arrow pointing at a helpful paragraph labeled "(this one took me a while. whatever.)" in Caveat; a little "← read this" then "...if you want"; underlines that wobble. These are the *only* organic, non-rectangular shapes on the entire site, and they're always small, always apologetic, always half-erased. No photography. No 3D renders. No gradients on the cold layer. No glow. The only "decoration" that breaks the rectilinear discipline is the doodles — and that's the entire point: the warmth shows up as a *flaw in the brutalism*. ## Prompts for Implementation Build tsundere.dev as **one HTML document, one CSS file, one small vanilla ES module — no framework, no router, no build step beyond a single esbuild/minify pass.** It is one continuous vertical scroll, ~480–560vh, five beats, no second page, no outbound links. Storytelling is the organizing principle; navigation barely exists (the "nav" is three terse mono fragments that scroll-jump within the page). **The narrative is a slow thaw, delivered grudgingly.** Write all copy in second person, in-character as a tsundere developer who clearly did a bunch of work for the visitor and refuses to admit they care. Every helpful sentence below the seam should have a half-retraction. Above the seam, copy is pure rebuff: "Oh. It's you." / "STATUS: TOLERATED" / log lines like `09:14 · fixed your thing. don't make it weird.` Below the seam, copy warms: genuinely useful notes, a project log, "things I built" — but always wrapped with "...not that it matters" / "(ignore that)" / "b-baka." The comedy and the warmth both live in the gap between the hard typography and the soft words. **Animation = the reluctance, mechanically expressed.** Use these, all hand-rolled: - **scroll-triggered seam fracture** (the climax): at beat 2→3, the grey plates above the zigzag SVG seam `translateY(-NN px) rotate(±1.5deg)` and `opacity` holds (they don't fade — they *move aside*), revealing warm color flooding up. Drive it off `IntersectionObserver` + a scroll-progress var, eased with a stiff `cubic-bezier(0.2, 0, 0, 1)` (spring-ish but *grudging* — fast then a hard stop, like someone giving in then immediately regretting it). - **the "snap-back" hover tic**: in the warm substrate, ONE card has `border-radius: 14px` by default — but when ANY sibling card is `:hover`ed, that card's radius snaps to `0` in `60ms` (sharp), and returns to `14px` over `400ms` only when nothing is hovered. The site is embarrassed to be caught being soft. - **doodle path-draw**: the Caveat-annotated SVG scribbles `stroke-dasharray` draw-on when scrolled into view (`~500ms`), then the strike-through draws over them `~250ms` later — affection appears, then is immediately crossed out. - **status-badge counter-text**: the `STATUS:` badge text cycles through its stages (`TOLERATED` → `...FINE` → `PLEASE STAY`) tied to scroll depth, with a 1-frame `text` swap (no fade — it's *caught*, not transitioned). - **cursor tells, subtle**: cursor-follow is allowed but minimal — when the cursor hovers a warm heading for >900ms, a tiny `#F2C9C9` underline draws in beneath it (`underline-draw`, ~300ms), then *retracts* the instant the cursor leaves (~150ms, faster than it appeared — taking it back). - **stagger** for warm-substrate content reveal, but with a *terse* 40ms step and a hard ease-out, never bouncy. Cold-plate elements do NOT animate in — they're just *there*, arms crossed. Respect `prefers-reduced-motion`: keep the seam as a static hard boundary, keep doodles drawn-and-struck statically, drop the hover tic. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, hero-with-signup, testimonial carousels, equal-tile card grids, bento boxes, dashboards, glassmorphism, any gradient on the cold layer, glow effects, dark-moody atmospherics, generic centered hero. The page sells nothing and asks for nothing — it's a *character study you can scroll through.* ## Uniqueness Notes Differentiators this design commits to — none should be duplicated by any other CMassC site: 1. **The site is the trope, mechanically.** Not "a site about tsundere," not "a cute anime theme" — the *layout behavior itself* enacts tsundere logic: hard typography over soft copy, warm colors literally fenced behind 1px black borders, a card that snaps square when "caught" being round, affection that draws on then crosses itself out, an underline that retracts faster than it appeared. The interaction model *is* "harsh outside, warm inside, and embarrassed about it." Nothing else in the cohort uses contradiction-as-interaction-design. 2. **Two hard-fenced color strata divided by a physical scroll-fracture.** Most sites with a palette shift crossfade. This one *cracks* — a jagged SVG seam where grey plates slide aside (not fade) to reveal honeyed warmth flooding up. The rule "no warm color touches the edge, no warm color appears without a black border fencing it" is a structural constraint no other design imposes. 3. **Three typefaces cast by emotional function, not hierarchy.** Space Mono = armor, Fraunces = blush, Caveat = the truth that leaks out in margins. The fonts aren't "display / body / accent" — they're "what it says to your face / what it actually means / what it can't help saying." Caveat is used *only* for half-erased doodles. 4. **Performative reluctance as the entire copy voice.** Every kind sentence below the seam is half-retracted ("...not that I care"). The status badge goes `TOLERATED → ...FINE → PLEASE STAY` by scroll depth. This sustained in-character grudging tone over a full 5-beat scroll is the signature of tsundere.dev. 5. **Frequency-aware contrarianism.** Frequency analysis shows neubrutalism at ~1%, broken-grid at ~12%, modular-blocks at ~2% — this design fuses all three and explicitly REJECTS the cohort's saturation: no hand-drawn-everywhere (94%), no glassmorphism (85%), no card-grid (93%), no centered hero (80%), no cursor-follow-as-spectacle (89%), no warm-gradient default (98% warm + 93% gradient — the cold layer here is grey and flat). The doodles are the *only* hand-drawn element and they're tiny and apologetic. Mysterious-moody (12%) is deliberately avoided in favor of bright-fluorescent-fussy. Chosen seed/style: **neubrutalism raw edges blog**