# Design Language for tsundere.monster ## Aesthetics and Tone tsundere.monster is **a vending-machine-sized monster that does not want you here, and is furious that it cares whether you stay**. The conceit: somewhere in a fluorescent-lit underpass there lives a TSUN-DERE — a 1.9-meter, riveted-steel-and-bubblegum creature shaped like a malfunctioning arcade cabinet crossed with a hedgehog. Its outer plating is industrial: cold-rolled steel, exposed bolts, a CRT face that displays nothing but `>:(` and error glyphs. It snarls. It crosses its arms. It puts up barricades. It tells you to "go away," "stop touching that," "I didn't make this site FOR you or anything." But every barricade has a soft pink interior the monster forgot to hide; every "go away" button, when you finally press it, blooms into a warm confession the monster immediately regrets. The whole website is the **tsundere arc compressed into a scroll**: it starts as a hostile, over-fortified, all-caps neubrutalist wall — thick black borders, hard offset drop-shadows, clashing warning-tape yellows — and as you descend, the armor plating peels back to reveal a blushing, hand-warm interior of dusty rose, cream, and felt-soft shadows. The page is **embarrassed to have a personality**. Aesthetically this is **neubrutalism (2% of the cohort) fused with a "blushing" warm-pastel reveal** — a deliberate genre collision: the harsh raw-edges-blog look as a *defense mechanism*, the soft pastel as the *true self leaking through*. Tone sits between **edgy-rebellious and warm-inviting**, oscillating per-section like a flustered argument with itself. Inspiration: Japanese pachinko-parlor signage, 90s denpa game UI, riot-grrrl zine photocopier brutalism, the specific shade of pink that means someone is mad at you for noticing they were kind. Nothing here is calm. The monster would die before admitting the site is calm. ## Layout Motifs and Structure A **brutally over-built modular-blocks layout** (modular-blocks: 2% in the layout frequency analysis — almost nobody commits to it; the cohort overwhelmingly reaches for card-grid 93% or centered 80%). Every section is a literal *block*: a rectangle with a 3px solid border, a 6–10px hard offset shadow (no blur, like a sticker peeled and re-stuck), and a slightly wrong rotation (−1.4° to +2.1°) as if slammed down by an irritable hand. Blocks **overlap and collide** — corners of one section poke under the next, "DO NOT ENTER" tape strips diagonally across panel seams, a barricade-A-frame icon wedges between two stacked blocks. The spine is a single vertical column **but it does not run straight**: it zig-zags left and right by ±64px per section, because the monster keeps shoving the content out of your way. There is **no top navigation bar** (minimal-navigation: 5% in the cohort) — instead a chunky steel "GO AWAY →" tab is bolted to the right gutter; it is the only nav, and it scrolls you *down*, deeper into the monster, despite saying go away. Five acts: (1) **THE WALL** — full-bleed all-caps refusal, barricades, a CRT face glaring; (2) **THE INTERROGATION** — the monster grilling you about why you came, blocks tilted aggressively, warning tape everywhere; (3) **THE CRACK** — one steel plate visibly bent open, the first sliver of pink showing through a torn edge; (4) **THE BLUSH** — borders soften from 3px black to 2px dusty-rose, shadows gain a faint blur, rotations relax toward 0°, the copy turns into a flustered half-confession; (5) **THE DENIAL** — footer where the armor SLAMS BACK SHUT, all-caps again, "I MEANT NONE OF THAT. LEAVE." — but the shadow underneath is now warm pink, not black. The structural arc *is* the content; scrolling is the act of wearing the monster down. ## Typography and Palette **Fonts — Google Fonts only, three families, cast as three emotional registers.** - **Bricolage Grotesque** (variable, weights 400/600/800, optical-size aware) — the **armor voice**: every all-caps refusal, every section headline, every "GO AWAY." Set at 800 weight, tight tracking, slammed at large sizes (clamp 2.6rem → 6rem). Bricolage Grotesque is chosen over the cohort-default Space Grotesque/Bebas because its slightly *broken*, irregular curves and chunky ink traps read as **hand-welded and angry**, not corporate-bold. Headlines get a 4px black text-stroke offset and sometimes a yellow highlight-marker swipe behind them. - **Gabarito** (variable, weights 400/500/700) — the **true-self voice**: every line of body copy in THE CRACK and THE BLUSH, every accidentally-warm aside, every parenthetical the monster wishes it hadn't typed. Gabarito is a rounded humanist sans — soft terminals, generous counters — so the *moment the writing turns vulnerable, the letterforms physically soften* mid-page. This is the typographic punchline of the whole site. - **DM Mono** (weights 400/500) — the **system voice**: the CRT face glyphs (`>:(`, `:|`, `>///<`, `ERR_TOO_CLOSE`), error toasts, the "GO AWAY" gutter tab label, tiny status text bolted to block corners ("PANEL 03 // SEALED"). Mono = the monster pretending to be a machine instead of having feelings. **Palette — eight values, in two warring families.** - `#0B0B0C` — **rivet black**: borders, hard shadows, all-caps armor text (Acts 1–2 and footer). - `#F2F0E9` — **pressed-paper cream**: the base page, the photocopier-zine ground everything sits on. - `#FFE03A` — **warning-tape yellow**: barricade stripes, highlight swipes behind headlines, "DO NOT ENTER" tape. Loud, hostile, hazard-coded. - `#1F1F22` — **gunmetal**: the steel plating panels, the CRT bezel, the "GO AWAY" gutter tab. - `#E58FA6` — **dusty rose**: THE BLUSH section borders, the soft offset shadows of the late blocks, the warm pink under the footer shadow. The "true self" color. - `#F7C9D5` — **blush mist**: pale wash behind THE CRACK / THE BLUSH copy, the inside-of-the-armor color glimpsed through the bent plate. - `#7A2E40` — **bruised plum**: the soft-self text color in THE BLUSH (warm, never pure black), and the seam where rose meets cream. - `#3CC9B4` — **glitch teal**: the *one* accent that crashes both palettes — used for the CRT scanline flicker, the moment-of-fluster error toast, link underlines. The color of being caught off guard. Used in <8% of surface area, always as a stutter. Contrast policy: Acts 1–2 are near-pure black-on-cream-on-yellow, maximum aggression. Acts 3–5 the contrast *deliberately softens* — rose-on-blush-mist, plum-on-cream — the page literally loses its edge as the monster does. ## Imagery and Motifs **Primary imagery: hand-drawn SVG armor-and-blush iconography, plus warning-tape and rivet textures — all CSS/SVG, no photography (photography sits at 98% in the cohort; this site uses zero).** - **The CRT face** — a single inline SVG: a rounded-rect gunmetal bezel, a faintly green-tinted "screen" with 2px scanlines (CSS `repeating-linear-gradient`), and a glyph that *changes per scroll-act*: `>:(` (Act 1) → `>:|` (Act 2) → `o_o` (Act 3, the crack) → `>///<` (Act 4, the blush, with two CSS-animated pink cheek-blobs that pulse) → `>:(` again (Act 5, slammed shut) but the cheek-blobs don't fully fade. Subtle horizontal-hold "jitter" every 7s. - **Barricades & warning tape** — repeating SVG patterns: yellow/black 45° hazard stripes as section dividers; little A-frame barricade glyphs (`▲ KEEP OUT ▲`) wedged at block corners; "tape" strips that are actual rotated divs with torn-edge SVG masks, peeling at one corner on hover (the corner curls up, magnetically, then snaps back). - **Rivets & bolts** — every steel panel has 4–8 tiny SVG hex-bolt circles at its corners; in THE CRACK, two bolts on one panel are drawn *sheared off*, the panel edge torn open with a jagged SVG path, pink (`#F7C9D5`) visible in the gap. - **The blush bloom** — in THE BLUSH, decorative soft radial-gradient blobs (`#F7C9D5` core → transparent, `blur(60px)`) drift behind the copy like heat rising off embarrassed skin; on the "GO AWAY" button's eventual press, a single rose bloom expands from the cursor (`path-draw-svg` + `scale`), then a `glitch-teal` error toast fires: `ERR: feelings.exe stopped responding`. - **Crossed-arms motif** — the monster's silhouette (chunky, armored, arms folded) appears as a flat 2-color SVG mascot: hostile pose in Acts 1–2, arms slowly *unfolding* frame-by-frame as you scroll through Acts 3–4, re-folding hard in Act 5. CSS keyframes on `transform` of two arm groups. - **Texture:** a faint 8%-opacity photocopier-grain noise overlay (tiny tiled SVG `feTurbulence`) across the cream ground, slightly heavier in Acts 1–2 (xeroxed-too-many-times) and lighter as the page "warms." ## Prompts for Implementation Build tsundere.monster as **a single static HTML page, one stylesheet, one small ES module (~6KB minified), inline SVGs, one Google Fonts request**. No SPA, no router, no framework, no React, no Vue, no build step beyond one esbuild pass. One continuous vertical scroll, ~900vh, five acts, alive with flustered micro-motion throughout. Total document weight excluding fonts: under 80KB. **Storytelling is the organizing principle, not navigation.** There is exactly one nav element — the bolted-on "GO AWAY →" gutter tab — and it lies: it scrolls you *deeper in*. No CTAs, no pricing blocks, no stat-grids, no feature cards, no testimonials. The "content" is the monster's escalating-then-collapsing argument with itself, written in second person, addressed to you, the unwanted visitor it secretly wants to stay. Copy is short, punchy, all-caps in the armor sections, lowercase and parenthetical in the blush. **The central mechanic: the page physically softens as you scroll.** Drive a single scroll-progress variable `--warmth` (0 → 1) and let it interpolate, in CSS via `calc()` and custom properties: border-width 3px→2px; border-color `#0B0B0C`→`#E58FA6`; box-shadow offset 8px→3px and blur 0px→14px; section rotation magnitude ±2°→0°; body-text color `#0B0B0C`→`#7A2E40`; grain opacity 8%→2%; zig-zag offset ±64px→±8px. Acts 1–2 hold `--warmth ≈ 0`, Act 3 ramps it, Acts 4 settles near 1, Act 5 *snaps it back toward 0.2 in 200ms* (the denial) — but never all the way; the warm-pink footer shadow is the tell that the monster failed. **Motion vocabulary (use sparingly — fluster, not flair):** - **Magnetic peel** on warning-tape corners and the crack edge — corner lifts toward cursor (translate, max 18px), then `spring`-snaps back when you leave (underused-ish: `magnetic` is 78% but here it's *reluctant*, with a recoil overshoot — the monster yanking its hand back). - **Hard-slam reveal** for blocks entering viewport: instead of soft fade-up, blocks drop in 24px with a 1-frame overshoot and a tiny `shake-error`-style 3px wobble + faint thud shadow flash. They arrive *annoyed*. - **Glitch stutter** on the CRT face and on links: `glitch` (10% in cohort) — RGB-split by 2px, scanline jump, 80ms, triggered on hover and every 7s idle. The teal channel offsets most. - **Arms unfold** tied to scroll, not hover — `path`/`transform` keyframes sampled off `--warmth`. - **The confession bloom**: when the user actually clicks "GO AWAY," prevent default scroll-jump on the *last* click, instead bloom a rose SVG from the cursor, soft-fade in a single centered line ("…fine. you can stay. not because i want you to."), then immediately fire the teal `ERR: feelings.exe stopped responding` toast that slides up from the bottom and auto-dismisses in 4s. One-time; sets a flag. - Honor `prefers-reduced-motion`: kill glitch/shake/jitter, keep the `--warmth` color/border interpolation (it's narrative, not decoration), make the bloom an instant cross-fade. **Layout build:** flexbox column, each act a `
` with its own `--rot` and `--zig` custom props; overlap via negative `margin-top` and `z-index` stagger; warning-tape dividers are `::before` pseudo-elements with `repeating-linear-gradient(45deg, #FFE03A 0 18px, #0B0B0C 18px 36px)` clipped to a 22px-tall torn-edge SVG mask. The "GO AWAY" tab is `position: sticky; top: 40vh` in the right gutter, rotated 90°, gunmetal with rivet dots. Mobile: zig-zag offsets collapse to ±10px, blocks stack with smaller shadows, tape dividers stay; the monster is just as mad on a phone. **Voice samples for the implementer (tone reference, not literal required copy):** ACT 1 — "THE SITE IS CLOSED. IT WAS NEVER OPEN. WHY ARE YOU SCROLLING." / ACT 2 — "WHO SENT YOU. WHAT DO YOU WANT. STOP READING THE BORDERS, THEY'RE NOT FOR YOU." / ACT 3 — "…that bolt was already loose. don't look at it. don't—okay it's pink inside. SO WHAT." / ACT 4 — "(i kept the lights on. that's all. it gets cold down here and i thought—) ANYWAY. it's not a big deal." / ACT 5 — "I MEANT NONE OF THAT. THE WALL IS BACK UP. LEAVE." (footer shadow: warm rose, betraying it.) ## Uniqueness Notes Seven differentiators this design commits to. None should be duplicated by any other CMassC site. 1. **The layout is a personality with a defense mechanism.** Most neubrutalist sites in the wild use thick borders and hard shadows as a *static style choice*. Here the brutalism is *diegetic armor* that measurably degrades as you scroll — border-width, shadow-blur, rotation, text-color and grain all interpolate off one `--warmth` variable from "hostile" to "blushing." The aesthetic *is* the character arc. **Neubrutalism is 2% of the aesthetic cohort, and none of those 2% pair it with a programmatic warm-pastel reveal.** 2. **A modular-blocks layout (2% of cohort) that physically zig-zags out of the user's way** — the content column shoves left/right ±64px per section because the monster keeps blocking you, then relaxes toward straight as it gives in. Nobody else weaponizes column offset as emotional state. 3. **Typography as emotion-by-typeface:** Bricolage Grotesque = the angry armor; Gabarito (rounded humanist) = the soft true self; DM Mono = the machine it pretends to be. The page *changes typeface mid-scroll the moment it gets vulnerable.* The cohort is 93% mono and 43% humanist but never uses the switch between them as a plot device. 4. **A lying navigation element.** The single nav — a bolted steel "GO AWAY →" gutter tab — scrolls you *deeper into* the site, and on its final click triggers a confession bloom + a `feelings.exe stopped responding` glitch-teal error toast. Anti-CTA, in-character, one-time. 5. **Reluctant magnetism with recoil.** `magnetic` is 78% of the cohort, always smooth/eager. Here tape corners and the torn crack-edge follow the cursor *then yank back with a spring overshoot* — the monster catching itself being interested. Same primitive, opposite emotional sign. 6. **Zero photography (cohort: 98% use it), zero card-grid (cohort: 93%), zero centered hero (cohort: 80%).** Everything is hand-drawn 2-color SVG: a glaring CRT face whose glyph changes per act, a crossed-arms mascot whose arms unfold on scroll, sheared-off rivets, warning tape with torn-edge masks, photocopier grain that thins as the page warms. 7. **The footer denial.** Most pages end calm or with a CTA. This one *slams the armor back shut* — all-caps black "LEAVE" — but renders its drop-shadow in warm rose (`#E58FA6`) instead of black, so the closing frame quietly contradicts the closing words. The site can't help it. Chosen seed/style: **"neubrutalism raw edges blog"** — taken literally (thick black borders, hard offset shadows, all-caps, warning-tape clash) for Acts 1–2, then *betrayed* by the warm-pastel blush reveal of Acts 3–5. Avoided overused patterns from frequency analysis: hand-drawn-as-cozy (95%), glassmorphism (85%), card-grid (93%), full-bleed-centered hero (80%/85%), photography (98%), warm-gradient palette (98%/93%), cursor-follow-as-eager (89%) — here cursor-follow exists only as *reluctant recoil*. Preferred underused patterns: neubrutalism (2%), modular-blocks (2%), glitch (10%), shake-error (2%), no top nav / minimal-navigation (5%), zero-photography illustration.