# Design Language for tsundere.bar ## Aesthetics and Tone tsundere.bar is a **neubrutalist after-hours bar that cannot admit it likes you.** The entire site is built around the *tsundere* trope — 「ツンデレ」, the character who is all spiky deflection and folded arms on the outside (*tsun-tsun*) but quietly, helplessly soft on the inside (*dere-dere*) — and the design treats that contradiction as a literal **two-state machine**, not a mood board. State one, the **TSUN face**, is what you land on: harsh, over-saturated, defensive. Thick 4px black outlines on everything. Hard offset drop-shadows that look stamped, not blurred. A wall of clattering, slightly-too-large monospace type that says things like `IT'S NOT LIKE I BUILT THIS BAR FOR YOU OR ANYTHING` and `WE'RE NOT EVEN OPEN. (we're open.)`. The cursor is treated like an intruder — boxes flinch away from it, labels snap into place a beat too late, a little `// don't look at me like that` mutters in the corner. It is loud, geometric, almost rude. Classic raw-edges neubrutalism: ugly-on-purpose, system-font-energy, no gradients allowed in this state, everything a flat field of cream and ink and one scream of red. State two, the **DERE face**, is what the bar actually is once you stay a while (scroll past 60%, or hover-hold any panel for ~900ms): the harsh red drains to a warm amber lamp-glow, the black outlines soften to a deep cocoa brown, the hard stamped shadows go diffuse and warm like candlelight on a counter, the monospace shouting relaxes into a humanist serif murmur, and the copy quietly changes underneath you — `IT'S NOT LIKE I BUILT THIS BAR FOR YOU` re-sets, letter by letter, into `...okay. fine. i kept your seat warm.` The whole page is one long confession it keeps almost taking back. **The contradiction is the structure.** Tone: edgy-rebellious on the surface, warm-inviting underneath, and the *transition between the two* is the entire emotional payload of the page. ## Layout Motifs and Structure The skeleton is a deliberate **broken-grid neubrutalist stack** — a single column of big, blocky, slightly-misaligned panels that look like cork-board flyers nailed up by someone who pretends not to care. Only ~12% of the corpus uses broken-grid and ~1% uses neubrutalism, so this is open territory. **The panels, top to bottom — read as one escalating non-apology:** - **Panel 0 — "THE DOOR (slammed)":** Full-bleed. An oversized lowercase wordmark `tsundere.bar` set in a heavy condensed display face, sitting inside a 4px-outlined box that is rotated exactly **-3°** and clipped at the right edge so it reads as a flyer half-torn off the wall. Beneath it, a monospace sub-line that cycles every few seconds through tsun-mode taglines via a typewriter-effect. A single ❌-shaped "CLOSED" sticker covers part of the wordmark — clicking it peels it off (path-draw-svg curl) to reveal a tiny `(...we're open. obviously.)` underneath. No nav bar. The only nav is a stack of underline-draw links jammed in the bottom-left at a 2° tilt: `the bar` / `the drinks` / `the regulars` / `how to get me to talk`. - **Panel 1 — "WHAT THIS IS (it's nothing)":** Two unequal blocks side by side, the left one wider and shoved 24px lower than the right so the grid visibly *fails to line up*. Left block: a defensive paragraph in mono. Right block: the same paragraph already half-faded into serif, as if it's leaking the truth. A magnetic ❌ button labeled `nevermind` sits between them; if you chase it, the serif version wins and stays. - **Panel 2 — "THE BAR" (the room):** A flat, near-isometric line drawing of a tiny bar interior — one counter, three stools, a hanging lamp, a register — rendered entirely in 4px strokes, no fill. Each object is a hover target. Hover the lamp: the whole panel's `--warmth` ticks up and a hard shadow under the counter goes soft. Hover a stool: a speech-box appears — `that one's taken. ...no one's sitting there. it's just taken, okay.` - **Panel 3 — "THE DRINKS" (the menu, grudgingly):** A broken masonry of outlined menu cards, each rotated ±2–4°, each with a stamped offset shadow. Card fronts are tsun (`"WHATEVER YOU WANT." — ¥whatever`); card-flip on click reveals dere (`...i remembered you don't like it too sweet. so. less syrup.`). Drink names are real-ish bar-menu poetry: *the cold shoulder* (a frozen negroni), *fine. ☆* (a sweet thing it denies making sweet), *not a date special* (two glasses, one bill). - **Panel 4 — "THE REGULARS":** A row of blunt outlined "polaroid" boxes pinned at angles — but the photos are just flat color fields with mono captions: `you`, `you again`, `you (pretending it's the first time)`. Stagger-reveal on scroll. The last frame is empty with a dotted outline and the caption `(your seat)`. - **Panel 5 — "HOW TO GET ME TO TALK":** The dere panel. By the time you reach it the page has fully crossed over: warm amber field, cocoa outlines, soft candle shadows, serif body. A long, low text block — no boxes, no shadows, just words — that finally drops the act: `look. i'm bad at this. but the lamp's on. and the seat's warm. and if you tell anyone i said that, we're done.` Below it, the only un-ironic element on the page: a single soft-outlined button, `pull up a stool`, that does nothing but glow warmer when you hover it. - **Panel 6 — "LAST CALL" (footer):** Snaps *back* to tsun — hard outlines, cold red, mono — and says `WE'RE CLOSING. ...you can stay till you finish that, i guess.` A faint dotted line to a colophon: `built by someone who will deny building it · tsundere.bar`. A persistent **TSUN ⇄ DERE toggle** lives pinned bottom-right inside a 4px box: a hard switch the visitor can flip manually to override the scroll-state, because forcing the bar to be honest is half the fun. Default is TSUN. The switch handle overshoots (elastic) and the label flickers between `tsun` and `...dere` before settling. ## Typography and Palette **Typefaces (Google Fonts only — all real, all on Google Fonts):** - **Archivo Black** — the heavy condensed-feeling display face for the `tsundere.bar` wordmark, panel headers, and the big tsun-mode shouting. Tight, blunt, immovable; set in lowercase for the wordmark, ALL-CAPS for headers, generous negative letter-spacing so it reads as a slammed-down block. - **JetBrains Mono** — the **tech-mono** voice of the *tsun* state: all defensive copy, taglines, card fronts, captions, the toggle label, the colophon. Slightly oversized, line-height a touch loose so it clatters. This is the armor. - **Spectral** — a warm, literary **serif-revival** face for the *dere* state: the confession paragraphs, the flipped card backs, the candle-lit footer line. When a block crosses from tsun to dere, the text doesn't just fade — it re-typesets glyph by glyph from JetBrains Mono into Spectral. This is the inside. **Palette — high-contrast duotone that physically warms (only ~11% of the corpus is duotone, ~28% high-contrast, and almost none animate the swap):** TSUN state: - `--paper` `#F4EFE4` — a flat, slightly sour cream. The wall the flyers are pinned to. - `--ink` `#15110D` — near-black, used for every 4px outline, every stamped shadow, all tsun text. - `--tsun` `#E03A2F` — a loud, blunt vermilion. The ONE accent in tsun mode: the ❌ stickers, the active underline, the toggle's "tsun" side, the angry highlights. Used like a slap. - `--tsun-shadow` `#15110D` — hard offset shadows are pure ink, no alpha, no blur (`6px 6px 0`). DERE state (cross-faded via CSS custom properties): - `--paper` warms to `#F6E8CF` — candlelit cream. - `--ink` softens to `#3B2A1C` — deep cocoa brown; outlines thin perceptually and gain a faint inner glow. - `--dere` `#E8A23D` — warm amber lamp-glow, replaces the vermilion as the single accent (the `pull up a stool` button, the warm underline, the soft highlights). - `--dere-glow` `rgba(232,162,61,0.35)` — diffuse warm shadow that *replaces* the hard offset shadow during the transition. - `--blush` `#D98C7A` — a muted dusty rose that only ever appears on the very last dere panel, on the word that gives the game away (`warm`). It's the actual blush. Used exactly once. The signature move: `--mood` is a single 0→1 CSS variable driven by scroll progress + hover-hold + the manual toggle, and every color above is a `color-mix()` interpolation keyed to it. The page has no discrete "themes" — it's one continuous slide from armor to honesty. ## Imagery and Motifs **Primary imagery: flat line-illustration (~17% of corpus) — everything drawn in uniform 4px outlined strokes, zero fill, like bar coasters doodled on with a marker.** The bar interior, the stools, the hanging lamp, the register, the menu glasses, the "polaroid" frames: all the same blunt, confident, slightly-wobbly hand. In tsun state strokes are pure `--ink` and dead straight; as `--mood` rises the strokes inherit `--ink`'s warming and pick up a 0.5px hand-drawn wobble (subtle `feTurbulence` displacement), as if the bar relaxes its posture. **Recurring motifs:** - **The folded-arms ❌:** A bold X — torn-sticker, button, the "CLOSED" sign, the `nevermind` button, the toggle's tsun-side glyph. It's the trope's body language. Peeling, flicking, or chasing an ❌ always reveals a softer truth beneath it (path-draw-svg curl). - **The misaligned flyer:** Every panel and card is a 4px-outlined box rotated 2–4° with a hard stamped shadow — pinned-up notices by someone who insists they didn't fuss over the layout. On hover they *don't* straighten (that would be admitting effort); they flinch slightly the *other* way. - **The hanging lamp:** The single warmth source. It appears as a literal drawn lamp in Panel 2 and as a glow-origin everywhere else. Proximity to "the lamp" (cursor, scroll-depth) is what drives `--mood` upward. The lamp never turns off — even in the tsun footer it's drawn lit, just ignored. - **The empty stool / the kept seat:** A dotted-outline box captioned `(your seat)` that recurs — in the regulars row, near the dere button. It's the dere-dere admitted in negative space. - **Strikethrough that doesn't commit:** Tsun copy frequently strikes a word and replaces it badly — `WE'RE ~~CLOSED~~ ...open` — the underline-draw animation drawing the strike, then a half-second later a second line crossing out the strike itself. No photography. No icon sets. No gradients in tsun state. No stat grids. The only "data viz" is a tiny mood-meter built into the toggle box — a 4px-outlined bar that fills from vermilion to amber as `--mood` rises, labeled `tsun ▓▓▓░░░ dere`. ## Prompts for Implementation Build as a **single self-contained HTML document** — one `