# Design Language for tsundere.review ## Aesthetics and Tone tsundere.review is a review publication run by a critic who *insists* she doesn't care whether you read her verdicts — and then writes three thousand words proving she absolutely does. The visual language is built on that contradiction: a **hot-tempered comic-panel surface** that keeps cracking open to reveal a **soft, blushing interior**. Think shoujo-manga screentone meets Roy Lichtenstein Ben-Day dots meets a 1990s sticker-book — loud halftone explosions, jagged speech-bubble outlines, exclamation-mark flourishes, all rendered in candy-bright primaries, and then, underneath, a pale rose paper that quietly admits the affection the headlines won't. The site has two emotional registers and it switches between them on purpose: - **"Tsun" mode** (the default, the loud one): black outlines 4px thick, halftone fills, hard drop-shadows offset 8px with no blur, sound-effect typography crashing in at angles, magenta and electric yellow, the word *"Hmph."* set enormous. Everything looks like a manga action panel mid-shout. - **"Dere" mode** (revealed on interaction — hover, scroll-into-view, the end of an article): the outlines soften to 1px, the halftone dissolves into a smooth blush gradient, a tiny heart appears where an exclamation point used to be, the type relaxes into a warm serif, and a confession the critic would never say aloud fades up in small italics: *"…it was actually really good. Don't make me say it again."* The tone is **funny, sharp, secretly tender**. Never mean-for-real, never saccharine. It is a personality, fully committed — the design *is* the bit. ## Layout Motifs and Structure The organizing metaphor is **the manga page**: a sequence of irregular panels, gutters between them, the eye led on a deliberate Z-path down the spread. This is a **broken-grid / magazine-spread** layout — explicitly NOT a card-grid, NOT a centered single column, NOT a dashboard. - **The Cover Panel** — full-bleed opening "splash page." The domain `tsundere.review` is lettered huge as a manga title logo, tilted ~6°, with a halftone burst radiating behind it and a jagged speech bubble off to one side reading *"It's not like I made this site for you or anything."* A torn-paper diagonal at the bottom edge tears away to reveal the soft rose layer beneath — your first hint that the loudness is a front. - **The Verdict Panels** — reviews laid out as overlapping comic panels of *unequal* size and *unequal* tilt (between −4° and +5°), separated by white gutters 18–28px wide. Each panel has the thick black border and the hard offset shadow. A big numeric score sits in a star-burst sticker in one corner. Panels deliberately break the gutter — a character's pointing hand, a "BAM" sound effect, a sweat-drop — overlapping into the neighbor panel the way manga art does. - **The Confession Strip** — between major sections, a full-width horizontal band in *dere* mode: soft gradient, thin outlines, small italic serif, lots of negative space (ma). This is where the critic is honest. The contrast with the panels above and below is the entire point. - **The Margin Heckler** — a narrow right-hand column (or, on a panel's edge) where a chibi-style annotation interrupts: *"Why are you still reading this. Go away. …unless you want to read the next one."* It follows the scroll loosely, magnetically settling near whatever panel you're looking at. - **The Last Page** — the footer is a closing splash: the halftone fully dissolved, the rose layer dominant, a single small line center-set — *"Fine. Thanks for reading. There. I said it."* — and a tiny pixel-heart that pulses once and stops, embarrassed. No hero-CTA stack. No pricing tier block. No testimonial carousel. No stat grid. The "navigation" is a row of folder-tab stickers slapped on at angles along the top edge. ## Typography and Palette **Typefaces — Google Fonts only, verified available:** - **Bangers** — the "tsun" voice. Comic-book display caps for the title logo, section headers, score numerals, and sound effects. Loud, ink-heavy, slightly unhinged. Set huge — clamp(2.6rem → 6.4rem) — and frequently rotated. *This is the face that defines the site's outer shell.* - **Mochiy Pop One** — secondary playful display, rounded and bubbly, for sticker labels, the folder tabs, and chibi-heckler captions. Its soft roundness is the *crack* in the armor showing through even in tsun mode. - **Zilla Slab** — workhorse body face for the actual review prose. A friendly slab serif: readable for long copy, with enough character to not feel corporate. Body at 1.125rem / 1.7 line-height. - **Caveat** — handwritten accent, used *only* in dere mode for the whispered confessions and marginal afterthoughts — the things written in pencil, not ink. Italic-feeling, small, set at 1.05rem and tinted soft. **Palette:** - `#FF1F6D` — **Tsun Magenta**. The dominant shout-color: halftone fills, speech-bubble accents, the angry exclamation points, score-burst stickers. - `#FFE03D` — **Spotlight Yellow**. Secondary loud accent: radial burst backgrounds behind the title, highlight slashes, "BAM" effects. - `#101014` — **Ink Black**. Every outline, every hard offset shadow, the comic-panel borders. Near-black with a hair of warmth. - `#FFF6F0` — **Confession Paper**. The pale warm off-white the whole page sits on; also the inside of speech bubbles. - `#FFC4D6` — **Blush Rose**. The *dere* color: soft gradients in the Confession Strip, the revealed torn-paper layer, the tiny hearts. This is the color the site is secretly made of. - `#5B3A4A` — **Soft Plum** — the text color used *inside* dere passages (never pure black there; the softness extends to the type). - `#26C6E0` — **Sky Pout** — a small cool counter-accent for folder tabs and the occasional sweat-drop, keeping the candy palette from going all-warm. Halftone dots: Ink Black or Tsun Magenta dots, 4–9px, on Confession Paper or Spotlight Yellow grounds, dot-pitch tightening toward panel edges to fake hand-screened gradients. ## Imagery and Motifs No stock photography. Everything is **drawn vector comic vocabulary**: - **Ben-Day / screentone halftone** — the signature texture. Dot fields, line screens, the radial "concentrated lines" (集中線) that point at whatever's important. Used as panel backgrounds and emphasis bursts. - **Jagged speech bubbles & thought bubbles** — angular, spiky-tailed shout-bubbles for tsun lines; soft cloud-bubbles for dere lines. The shape carries the mood. - **Sound-effect lettering** — "HMPH," "B-BAKA!," "…oh." crashing in at angles, partially clipped by panel edges, with motion-streak halftone behind them. - **Manga emotion glyphs** — the popping-vein cross-mark (>﹏<-energy), the single oversized sweat-drop, the four-pointed sparkle, the tiny floating heart. Used as functional UI accents: the sweat-drop is a loading state; the vein-mark flags a low score; the heart marks a favorite. - **Folder-tab stickers** — peeling-corner rectangular stickers, slight drop-shadow, rotated, that act as section labels and look slapped on by hand. - **Torn-paper reveal edges** — ragged horizontal tears where the loud layer rips away to show Blush Rose underneath. The structural pun: the armor is literally paper-thin. - **Chibi pointer hand** — a little gloved hand that points (at scores, at links) and occasionally covers its face. ## Prompts for Implementation Build tsundere.review as **one long scrolling manga spread** — a single HTML document, no SPA, no routing, no modals. The reader scrolls top-to-bottom down the page like reading a comic, panel after panel, gutter after gutter. Prioritize *personality over polish*, *the joke landing over feature completeness*, *one committed voice over neutral UI*. - **Two-state CSS theming.** Define everything twice: `--outline-w` (4px tsun → 1px dere), `--shadow` (8px hard offset → soft 2px blur), halftone opacity, type family, accent color. Drive the transition with `:hover`, `:focus-within`, and an `IntersectionObserver` that adds a `.dere` class as panels and the Confession Strip scroll into view. The whole page should feel like it keeps *almost* admitting something. - **Halftone in pure CSS.** Use layered `radial-gradient` background-images at small `background-size` for dot screens; rotate a second layer for moiré-free line screens; use a conic/radial burst for 集中線. No images needed. - **Panel tilt + overlap.** Each `.panel` gets a small CSS `rotate()` and `z-index` so it can overlap its neighbor. On scroll-into-view, panels do a tiny `stagger` settle — drop in 8px, overshoot, land — like ink hitting paper. Use `prefers-reduced-motion` to skip. - **Sound-effect entrances.** "HMPH" / "BAM" lettering uses a quick scale-from-1.4 + slight-rotate `bounce-enter` on reveal, then sits still. Don't loop it — a tsundere doesn't repeat herself. - **The reveal mechanic at the end of each review.** Last paragraph of every Verdict Panel: as it enters view, the panel border thins, the halftone cross-fades to a Blush Rose gradient, the Bangers byline swaps to Caveat, and a hidden `

` fades up in Soft Plum italics — *"…fine. it was good. happy now?"* This is the emotional payoff; make it land softly, ~600ms ease-out. - **The Margin Heckler** follows scroll with a lazy magnetic spring (lerp toward target Y), settling beside the active panel, swapping its quip per section. On the final page it stops heckling and just says *"…see you next review."* - **Cursor:** the pointer becomes the little chibi gloved hand near links; near a score-burst it briefly does a finger-point. Subtle, not gimmicky. AVOID: hero-with-CTA-button layouts, pricing/plan blocks, testimonial sliders, stat-grids, FAQ accordions, email-capture bars, generic equal-size card grids. There is none of that here — it's a publication with an attitude, not a SaaS landing page. ## Uniqueness Notes Differentiators from other sites in the catalogue: 1. **A two-personality theme engine — "tsun" vs "dere" — where the design literally has a defense mechanism.** The loud halftone shell mechanically softens (outline width, shadow, color, *typeface*) as you interact and scroll, and reveals hidden italic confessions at the end of every review. No other site changes its emotional register as a core interaction; here the contradiction *is* the product. 2. **The domain word drives the structure.** `tsundere` (tsun-tsun → dere-dere) is mapped 1:1 onto the visual states, the torn-paper "armor is paper-thin" reveal, and the copy voice throughout. The brand is the joke and the joke is the layout. 3. **Pop-art / manga comic-panel system as the layout grid** — overlapping unequal tilted panels with gutters, gutter-breaking sound effects, Ben-Day halftone done in pure CSS radial-gradients, folder-tab sticker navigation. Pop-art sits at ~0% sibling frequency (lowest of any aesthetic); manga-screentone comic layout appears nowhere in the catalogue. 4. **Chosen seed: "pop art vibrant showcase"** — interpreted through a shoujo-manga lens (Lichtenstein Ben-Day dots ⇄ Japanese screentone), with Bangers + Mochiy Pop One + Zilla Slab + Caveat as the type system. 5. **Deliberately avoids the catalogue's saturated patterns:** no card-grid (93%), no centered single column (80%), no glassmorphism (85%), no cursor-follow-as-centerpiece (89%), no warm-gradient-mesh wash (98%/93%). Instead: broken-grid magazine spread, hard offset shadows (no blur), flat candy primaries, halftone texture, comic-panel composition — all underused or absent here.