# Design Language for tsundere.trade ## Aesthetics and Tone tsundere.trade is a fictional peer-to-peer barter desk run by an interface that does not *want* to help you — and resents that it has been built to. The entire site is staged as a single conversation with a **tsundere clerk**: the archetype that greets you with crossed arms, sharp angles, cold grey concrete and a curt "It's not like I *built* a trading floor for *you* or anything," then — the longer you stay, the more you scroll, the more you actually engage — gradually, grudgingly, and never admitting it, lets warmth bleed into the room. The aesthetic is therefore a **deliberate two-act anti-design experiment**: Act I is hostile neubrutalism — raw hairline borders, hard 90° corners, monospaced shouting, a palette of wet cement and warning-tape, error-shake micro-interactions that fire when you hover the wrong thing, headlines that contradict themselves mid-sentence. Act II is the *exact same layout* re-skinned in private warmth — terracotta, ember, a soft brushed peach — as if the clerk turned away so you wouldn't see them blush. Nothing about the geometry changes between acts; only the temperature does. The mood is **dry, defensive, secretly tender** — closer to a vending machine with abandonment issues than to any "friendly fintech." It should feel like being mildly insulted by something that has clearly been waiting all day for you to show up. The tone of voice in copy is clipped, contradictory, parenthetically vulnerable: bold declarative refusals ("WE DON'T DO DEALS HERE.") immediately undercut by smaller grey asides ("...fine. one deal. don't make it weird."). No exclamation-point enthusiasm, no emoji, no "welcome aboard." The clerk would rather you left. The clerk is devastated every time you do. ## Layout Motifs and Structure The page is a **single vertical column locked to a visible 12-track structural grid** — the grid *lines themselves are drawn*, 1px, like the ruled margin of a ledger that someone slammed shut. Content sits in a **broken-grid arrangement**: blocks deliberately overhang the gridlines by 8–24px on one side, as if shoved into place and never straightened. There is no hero image, no logo wall, no pricing table, no stat grid, no testimonial carousel, no CTA band. Instead there are **seven "exchanges"** — seven full-height panels, each one a beat in the conversation: 1. **The Door** — a near-empty panel, almost all negative space, a single off-center monospaced line and a closed-shutter graphic made of stacked horizontal rules. 2. **The Refusal** — oversized condensed display type, a sentence that strikes itself through and rewrites smaller underneath. 3. **The Counter** — the literal trading counter: a long horizontal rule spanning 11 of 12 tracks, two stark "offer slots" (empty bordered rectangles) on either side, captioned in mono. 4. **How It (Reluctantly) Works** — three numbered steps in a broken stair-step layout, each step nudged further off the grid than the last. 5. **The Soft Spot** — the temperature pivot. This panel is where Act I's grey gives way; the gridlines warm from slate to ember as you scroll through it. 6. **The Ledger** — a faux barter log: rows of mono text (`SWAPPED: one half-finished sketch ⇄ a better excuse`), each row revealing on scroll, the last row left blank and blinking like a cursor waiting for you. 7. **The Goodbye It Won't Say** — final panel, warmest, smallest type, a single line bottom-left that fades up: "...come back. (i didn't say that.)" Navigation is a thin left-edge rail of seven tally marks (not dots — *tally marks*, like days counted on a cell wall). The active mark is the only one inked solid; hovering a mark reveals its exchange name in tiny mono, kerned tight, then it retreats. No top bar, no hamburger, no footer links — only the tally rail and the scroll. ## Typography and Palette **Type system (Google Fonts only):** - **Display / refusals:** `Archivo Black` — a single heavy grotesque weight, set in ALL CAPS, tracked tight (`-0.01em`), used for the things the clerk says loudly and immediately regrets. Rendered huge: clamp from 2.6rem to 7vw. - **Condensed sub-shouts & numerals:** `Archivo Narrow` (700) — for step numbers, the "01 / 02" exchange labels on the tally rail, and the struck-through-then-rewritten sentence fragments. Its compression reads as *tension*. - **Body, asides, ledger rows, captions:** `Space Mono` (400 / 700) — monospaced, slightly mechanical, perfect for a thing that processes you. All the parenthetical vulnerable whispers are Space Mono at 0.82rem, color-dimmed, often italicized. - One rule: the loud type and the soft type **never share a line**. The loud line is always its own block; the apology is always underneath, smaller, set apart. **Palette — Act I (cold / "I don't care"):** - `#1C1E1F` — shutter black (deepest text, the closed door) - `#2E3133` — wet cement (Act I background) - `#4A4F52` — slate (gridlines, secondary text in Act I) - `#8E9498` — dust grey (dimmed asides) - `#D9342B` — warning-tape red (struck-through strikes, error-shake accents, the one aggressive hit of color in Act I) **Palette — Act II (warm / "...okay, maybe I care"):** - `#E8DDD0` — brushed peach (Act II background — the room with the light on) - `#C8703D` — terracotta (warmed gridlines, headings in Act II) - `#A8431E` — ember (deep accent, the blush at its hottest) - `#5B3A2A` — roasted brown (Act II body text) - `#F2E9DD` — near-white linen (raised cards in Act II) The two palettes are bridged inside Exchange 05 via a scroll-linked CSS custom-property interpolation: `--bg`, `--grid`, `--ink`, `--accent` all lerp from the Act I set to the Act II set across that single panel's scroll progress. Every other panel just *reads* those variables, so the whole page warms in one continuous gesture without any layout reflow. ## Imagery and Motifs **No photography. No hand-drawn doodles. No glassmorphic cards.** Everything is built from rules, type, and one repeating geometric idea: **the X of crossed arms** — appearing as a literal motif at section seams (two thin diagonal rules crossing), as the cursor-companion shape, as the "no" stamp over rejected offer slots, and finally, in Act II's last panel, *uncrossed* — the two diagonals relax into a single open horizontal line. Specific elements: - **The shutter** (Exchange 01): 14 stacked horizontal rules, evenly spaced, that on load *roll up* one by one (each rule animates its scaleX 0→1 from center, staggered) to reveal the panel — but it stops at rule 11 of 14, leaving the shutter *not quite all the way open*. It opens the rest only when you scroll past, as if it changed its mind. - **The strike-rewrite** (Exchange 02): SVG path of a strikethrough line that *draws itself* across the big headline (`WE DON'T DO DEALS HERE`), then the headline drops to 40% opacity and a smaller `Archivo Narrow` line types in below it: `(we do. one. quietly.)`. - **Offer slots** (Exchange 03): two empty rectangles, 1px border, hard corners, mono caption `[ your thing ]` and `[ my thing ]`. On hover, the borders do a 3px error-shake and a tiny mono `// don't.` flickers — then settles. They're never actually fillable; the joke is the refusal. - **The off-grid stagger** (Exchange 04): three step blocks, each translated further from the gridline (−8px, −18px, −30px) and rotated a hair (−0.4°, −0.9°, −1.4°), like furniture nobody bothered to align. - **The blinking ledger cursor** (Exchange 06): the final empty `█` row, a CSS `steps()` blink, sitting under rows of completed barter trades written in Space Mono with `⇄` glyphs. - **Grain:** a very fine 2–3% monochrome film-grain overlay (CSS `background` SVG turbulence, or a tiny tiled PNG) across everything — concrete has texture; so does this clerk's mood. ## Prompts for Implementation Build tsundere.trade as **one HTML file, one CSS file, one ES module** — no framework, no build step. The page is roughly a 75-second scroll through seven conversational panels with a clerk who warms up against their will. There is **no CTA button, no pricing, no stat grid, no testimonial block, no logo wall, no email capture, no contact form, no FAQ accordion, no newsletter, no cookie banner, no chatbot**. If a section feels like it's *selling*, delete it — the clerk does not sell, the clerk relents. **Structural skeleton:** - A `
` of seven `
`, each `min-height: 100svh`, snapped softly (`scroll-snap-type: y proximity`). - A persistent SVG/CSS overlay drawing the **12-track gridlines** as 1px verticals, plus a couple of horizontal "ledger rules" — these lines read `--grid` so they warm with the page. - A fixed left-edge **tally rail** (`position: fixed; left: 14px`): seven tally marks (use Archivo Narrow `|`-stacks or thin `` rules grouped 4+1 style). Active mark = solid `--accent`; on hover a tiny Space Mono label slides out 10px and back. - Root CSS custom properties: `--bg`, `--grid`, `--ink`, `--dim`, `--accent`, `--card`. Act I values by default. **The temperature engine (the centerpiece):** - An `IntersectionObserver` + scroll-progress calc on Exchange 05 only. As that section scrolls from entering to leaving the viewport (progress 0→1), `requestAnimationFrame`-lerp each custom property between the Act I hex and the Act II hex (convert to RGB, interpolate channels, write back as `rgb()`). - Because every panel just consumes these vars, the *entire page above and below* warms in lockstep — scroll back up after Act II and the door is now peach, the warning-red has softened to terracotta. The clerk can't take it back. - Respect `prefers-reduced-motion`: if set, skip the lerp animation and just hard-cut to Act II palette once Exchange 05 is centered. (Ignore performance/accessibility otherwise per brief, but this one's cheap.) **Per-panel storytelling notes:** 1. **The Door** — load animation: 14 horizontal rules `scaleX: 0→1` staggered 60ms, stopping at #11. A single Space Mono line off-center: `desk's closed. (you're still here?)`. Cursor enters: the rule #12–14 finish opening. 2. **The Refusal** — on enter: `Archivo Black` headline `WE DON'T DO DEALS HERE.` scales in (spring, slight overshoot). 400ms later an SVG strikethrough `path` draws across it (`stroke-dashoffset`), headline fades to 40%, `Archivo Narrow` sub-line types in: `(we do. one. quietly. and that's it.)`. 3. **The Counter** — a long 1px rule sweeps across 11 tracks (scaleX from left). Two `[ your thing ]` / `[ my thing ]` slots fade up. Hover either → 3px translateX error-shake + flicker `// don't touch that.` then it settles, never fills. 4. **How It (Reluctantly) Works** — three step blocks reveal on scroll, each more off-grid and slightly more rotated than the last. Copy e.g.: `01 — bring something. anything. i don't care what.` / `02 — i'll look at it. don't talk while i look.` / `03 — if it's not garbage, we trade. don't thank me.` 5. **The Soft Spot** — the lerp panel. Big `Archivo Black` line that itself changes color with `--accent`: `IT'S NOT LIKE I WANTED COMPANY.` Below, fading up as the warmth lands: `(...the kettle's on. there's a chair. whatever.)`. Gridlines visibly warm here. 6. **The Ledger** — rows of Space Mono barter records reveal on scroll, staggered. Examples: `SWAPPED — half a melody ⇄ a reason to finish it`, `SWAPPED — your bad day ⇄ a worse joke`, `SWAPPED — one apology ⇄ one held door`. Last row: blinking `█` cursor, caption: `(waiting on you. not that it matters.)`. 7. **The Goodbye It Won't Say** — warmest, quietest. The crossed-arms X motif at the seam *uncrosses* into one horizontal line. Bottom-left, Space Mono, fades up over 1.2s: `...come back. (i didn't say that.)`. No link. The scroll just ends. **Motion vocabulary:** spring/overshoot for headline entrances; staggered reveals for rules and ledger rows; SVG `path` draw for strikethroughs and the uncrossing X; `steps()` blink for cursors; tiny translateX error-shake (3px, 90ms, 3 oscillations) on "wrong" hovers; smooth RGB-channel lerp for the palette warm-up. Cursor-follow: a small Archivo Narrow `✕` (the crossed arms) trails the pointer at ~0.12 lag in Act I; in Act II it has quietly become a small `—`. **Forbidden:** gradients-as-decoration (the only "gradient" allowed is the discrete palette lerp), drop-shadow soft cards in Act I, rounded corners anywhere (hard 90° only — the clerk does not soften their *edges*, only their *mood*), stock imagery, any "Get Started" affordance. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **A palette that is the entire narrative.** Most sites pick a mood and hold it; this one *changes temperature mid-page* via a scroll-linked RGB lerp on a single panel, and the change is irreversible — scroll back up and Act I is now warm. The color shift literally *is* the tsundere arc. No other design in the corpus uses palette interpolation as the story spine. 2. **Anti-design / hostile neubrutalism in the underused band.** Frequency analysis shows hand-drawn (94%) and glassmorphism (85%) dominate; brutalist sits at 7%, anti-design at 5%. This design lives squarely in that minority — drawn gridlines, hard corners, monospaced shouting, deliberately off-grid blocks — and adds a twist almost nobody does: brutalism that *apologizes*. 3. **Copy as core mechanic, not garnish.** The contradictory two-voice writing (loud refusal / small parenthetical confession, never on the same line) is a structural rule baked into the layout, not a content afterthought. The site is essentially a short script for a character who can't admit they like you. 4. **Error-shake as personality, not feedback.** `shake-error` is a 2%-usage pattern normally reserved for form validation; here it fires on *hovering things you "shouldn't"* and reads as the clerk swatting your hand away — a UI tic repurposed as characterization. 5. **No imagery at all — built entirely from rules, type, and one geometric idea** (the crossed-arms X that uncrosses at the end). Avoids the 98%-photography and 94%-hand-drawn conventions completely. **Chosen seed / style:** `brutalist anti-design experiment` — *aesthetic: anti-design / neubrutalism, layout: broken-grid, typography: condensed (Archivo Black + Archivo Narrow + Space Mono), palette: high-contrast cool-grays warming to terracotta-warm, patterns: shake-error + path-draw-svg + stagger + cursor-follow, imagery: minimal (rules & type only), motifs: sharp-angles (crossed-arms X), tone: edgy-rebellious masking warm-inviting.* **Avoided patterns from frequency analysis:** no hand-drawn (94%), no glassmorphism (85%), no photography (98%), no card-grid as primary structure (93%), no warm-gradient mesh (93%/98%), no parallax (88%) — replaced with a single drawn grid, a discrete palette lerp, and rule/type-only composition.