# Design Language for tsundere.xyz
## Aesthetics and Tone
tsundere.xyz is a **website with a personality disorder it refuses to apologize for** — an anti-design experiment built around a single emotional engine: the oscillation between *tsun* (cold, prickly, dismissive, arms-crossed) and *dere* (flustered, warm, secretly tender, looking-at-the-floor). The site does not "teach you about tsundere characters." The site *is* one. It greets you with disdain. It tells you to leave. It pretends it didn't make itself look nice for you. And then — if you stay, if you scroll, if you hover the things it told you not to hover — it cracks, just slightly, and the whole palette blushes.
The aesthetic is **anti-design with intent**: brutal flat color planes, fonts at sizes that are obviously too big, hairlines that don't align on purpose, captions that argue with their own headlines, a layout split down the middle like a face turned half-away. It is *not* messy-for-the-sake-of-messy — every "mistake" is a tell. The left half of the screen is the mask: charcoal, ice, sans-serif shouting, sharp 30° wedges, error-shake micro-twitches. The right half is what's underneath: a soft coral that the site keeps trying to cover back up. Inspiration: Y2K anime DVD-menu chrome, 4chan-era image-board minimalism, Jenny Holzer truisms rendered in Helvetica-bold rage, the specific shade of pink that means "I-it's not like I wanted you here," and the visual grammar of a character sprite that has exactly two facial expressions and switches between them mid-sentence.
It should feel **funny, a little hostile, and then disarmingly sincere** — the way the trope actually works. The humor is dry. The tenderness, when it finally arrives near the bottom of the page, should land like an actual confession: quiet, lowercase, and over before you're sure it happened.
## Layout Motifs and Structure
The spine of the site is a **hard vertical split-screen** — a single `100vw` page divided by one 2px seam at roughly the 52/48 mark (deliberately *not* 50/50; the mask is slightly bigger than the truth). Left panel = TSUN. Right panel = DERE. The seam is the only straight, honest line on the page; everything else leans.
- **Asymmetric, never centered.** Headlines hang off the seam into the wrong panel. A word that belongs to TSUN bleeds two letters into DERE's coral. The reader's eye is constantly being pulled across the divide — which is the point: you're not supposed to be able to look at one side without the other.
- **Sharp-angle wedges as structural furniture.** Sections are clipped with `clip-path` polygons at consistent 30° and 150° angles — diagonal gutters slicing the charcoal into shards. The DERE side has *no* angles: it's all soft 24px corner radii and overlapping rounded blobs, like the geometry itself relaxes when it crosses the seam.
- **Scroll = the thaw.** The page is one long scroll, ~6 "moods" deep. At the top, the split is 70/30 in TSUN's favor and the seam is jagged. As you descend, the seam straightens, the coral panel widens, and by the final mood the ratio has flipped to 35/65 — DERE wins, quietly, and the last section is a single full-bleed coral field with one short line of text and nothing else.
- **No nav bar, no menu, no footer links, no CTA.** Navigation is four chunky diagonal tabs welded to the left edge — labeled `whatever.`, `fine, read this.`, `i guess you can ask.`, `...thanks for coming.` — that the site insists you don't need. No pricing. No stats grid. No "Get Started." The only button on the entire page says **`don't click this`** and clicking it triggers the biggest dere reveal.
- **Mismatched, arguing pairs everywhere.** Every headline on TSUN has a hand-set caption on DERE that contradicts it. H1: "I DIDN'T MAKE THIS FOR YOU." Caption: *(i stayed up until 4am on the gradient.)* This pairing — bold cold statement / small warm parenthetical — is the layout's repeating unit, like verse and refrain.
## Typography and Palette
**Type stack — Google Fonts only:**
- **The mask voice (TSUN headlines):** `Archivo Black` — a single ultra-heavy grotesque weight, set ENORMOUS (clamp 64px → 168px), tracked tight (`letter-spacing: -0.03em`), `text-transform: uppercase`, frequently overflowing its container so a word gets cropped by the seam. This is the "arms crossed, looking away" font. Used only for declarations.
- **The body / mask paragraphs:** `Space Grotesk` (400 / 500 / 700) — clipped, mechanical, slightly hostile humanist-grotesque. Used for the TSUN side's running text, set in a narrow measure (~52ch) flush-left, ragged-right, no justification.
- **The true voice (DERE captions, confessions, the ending):** `Caveat` — a genuine handwriting face, set at 22–34px, lowercase, with a faint rotation of -1.5°. This is the font of the parentheticals, the marginalia, the things the site says when it thinks the headline isn't listening. The entire final mood is set in `Caveat`.
- **Numerals / labels / the "system" voice:** `DM Mono` (400) — for the diagonal nav tabs, the section markers (`MOOD 03 / 06`), and tiny UI scaffolding text. Cold, monospaced, indifferent.
**Palette — high-contrast, two-faced, with a controlled blush:**
- `#15161A` — **Cold Shoulder** (near-black charcoal; the TSUN panel ground, the wedges, the mask)
- `#E8EAF0` — **Frost** (cool off-white; TSUN text on charcoal, and the page's "neutral" before any feeling shows)
- `#FF6F8F` — **Caught Blushing** (the load-bearing coral-pink; the DERE panel, the confession text, every place the mask slips)
- `#FFD9E0` — **Soft Tell** (pale pink tint; DERE backgrounds, blob fills, the final full-bleed field)
- `#7C8A99` — **Averted Eyes** (muted slate-blue; secondary captions, the seam line, disabled-looking states that aren't actually disabled)
- `#FFF4D6` — **Almost a Smile** (warm cream; used *once*, in the final mood, as a single highlight stripe behind the last word — the only warm-yellow on the entire site, deployed like a held breath let go)
Rule: the page begins essentially monochrome (`#15161A` + `#E8EAF0`). `#FF6F8F` enters only on hover and on scroll-thaw. By the bottom it has taken over. `#FFF4D6` appears for exactly one element, ever.
## Imagery and Motifs
- **The glitch-twitch as emotional flinch.** No photography. The recurring visual is a *RGB-split glitch* — applied to the big `Archivo Black` headlines on TSUN, where for 90ms every few seconds the text shudders into red/cyan fringes and snaps back. This isn't "cyberpunk glitch"; it's a *flinch* — the mask cracking and re-sealing. On the DERE side, glitch never happens; instead, text gently `wobble`s like it's embarrassed.
- **Two-expression sprite logic.** A single recurring SVG mascot — a flat, two-color, almost-emoji face built from `#15161A` strokes — that has precisely two states: `>:(` (frown, sharp eyebrows, on TSUN) and a flustered `>///<` (closed eyes, three little blush ticks, on DERE). It snaps between them on cursor proximity. It is never animated *between* expressions — only the binary switch, because that's the whole joke.
- **Sharp-angle shards vs. soft blobs.** TSUN's decorative layer: scattered charcoal triangles and 30° wedge slivers, like shattered glass from the mask. DERE's decorative layer: overlapping translucent `#FFD9E0` blobs with `mix-blend-mode: multiply`, slow-drifting, deliberately *too soft*. The two layers overlap across the seam and clash — which they should.
- **Crossed-out text.** Throughout the body copy, words appear `struck through` and replaced — "this site is stupid *(fine.)* good actually." The strikethrough is drawn as an animated SVG line that draws itself on scroll-in. It's the site editing itself in real time, failing to stay cold.
- **The seam as a zipper.** The 2px center seam has tiny `DM Mono` tick-marks along it like a ruler — or a zipper. Near the bottom, on the big dere reveal, the seam visibly "unzips": the ticks scatter and the two panels lean into each other.
## Prompts for Implementation
Build tsundere.xyz as **one long single HTML document** — no SPA, no routing, no build step beyond CSS + vanilla JS. The reader's experience: opening a door, being told to go away, and slowly being let in.
**The split-screen frame:**
- Wrap everything in a `position: relative` container with two children: `.tsun` (left, `width: 52%`, `background: #15161A`, `color: #E8EAF0`) and `.dere` (right, `width: 48%`, `background: #15161A` initially, transitioning toward `#FF6F8F` / `#FFD9E0` as scroll progresses). The 2px seam is a `::after` pseudo-element with the `DM Mono` tick-marks rendered as a repeating linear-gradient.
- The two panels share a scroll context but content is staggered: a TSUN headline at scroll Y, its arguing `Caveat` caption at the same Y on the DERE side. Use CSS `subgrid` or matched `padding-top` per mood block to keep the verse/refrain pairs aligned.
- **Scroll-thaw mechanic:** an `IntersectionObserver` (or `scroll` listener throttled with `requestAnimationFrame`) computes a `--thaw` custom property from `0` (top) to `1` (bottom). Drive everything off it: `.dere`'s background interpolates `#15161A → #FFD9E0`; the `52%/48%` split tweens to `35%/65%`; the seam's jaggedness (a `clip-path` on the panel edge) smooths out; the body text color warms from `#E8EAF0` to `#15161A` on the DERE side. Keep transitions to `transform` and `opacity` and `background-color`; respect `prefers-reduced-motion` by jumping straight to the warm end-state.
**The flinch / wobble system:**
- TSUN `h1`/`h2` get a CSS keyframe `flinch`: at random offsets, apply `text-shadow: 2px 0 #FF3B3B, -2px 0 #00E5FF; transform: translateX(1px)` for ~90ms, then reset. Stagger each headline's timer in JS so they don't sync — the page should feel *twitchy*, not rhythmic.
- DERE text gets `wobble`: a slow `±1.5° rotate` + `±2px translateY` sine loop, very subtle, like fidgeting.
- On hover of *any* TSUN element, that element briefly leaks `#FF6F8F` — a border, a glow, a background flash — then snaps back to charcoal a beat too late, like it got caught. This is the core micro-interaction; it should happen *everywhere*.
**The mascot:**
- One inline SVG, two `` groups (`#face-tsun`, `#face-dere`), only one visible at a time. JS listens to `mousemove`; when the cursor is within ~180px, swap to `#face-dere` (with the three blush ticks fading in via `opacity`), instantly — no tween. When the cursor leaves, swap back to `#face-tsun`. It should feel like the face is *embarrassed to be looked at*.
**The forbidden button:**
- A single chunky `Archivo Black` button reading `don't click this`, in `#E8EAF0` on `#15161A`. On `:hover` it shakes (`shake-error` keyframe — rapid ±4px X jitter) and the label crossfades to `seriously, don't`. On `:active`/click: the whole DERE panel floods to `#FF6F8F`, the mascot locks to `>///<`, the big `Archivo Black` headline above it gets replaced (typewriter-style in `Caveat`) with *"...okay. fine. i'm glad you came. don't make it weird."* — and a `#FFF4D6` highlight stripe wipes in behind the last three words. This is the climax. It happens once; afterward the button just says `you already did that.`
**The ending mood:**
- The final section is full-bleed `#FFD9E0`, no split, no charcoal. One short line of `Caveat` text, lowercase, left-aligned, generously spaced from everything: *"the site likes you. it'll deny it. that's the deal."* No links. No "back to top." No newsletter. Just that, and a lot of soft pink space, and the seam-ticks scattered like loose pixels across the bottom margin.
**Strictly avoid:** hero CTAs, pricing tables, stat counters, feature-card grids, testimonial carousels, "trusted by" logo strips, hamburger menus, cookie-banner-shaped anything. If a section looks like it's selling, delete it — tsundere.xyz isn't selling, it's *resisting*.
## Uniqueness Notes
Distinct departures from the rest of the registry and from every generic anti-design / glitch template:
1. **Anti-design as a *characterization device*, not an excuse.** The frequency analysis shows `anti-design` at 5% and `brutalist anti-design experiment` rarely realized — and where it appears, it's nihilist/Web-1.0 cosplay. Here every broken alignment, oversized type, and arguing caption is *load-bearing narrative*: the site has a personality and the "bad design" is how it expresses it. No one else in the registry uses misalignment as dialogue.
2. **The hard split-screen as a literal divided face.** `split-screen` layout sits at 3% (deeply underused) and is normally just "image left / text right." tsundere.xyz makes the seam the *thesis*: TSUN panel vs. DERE panel, charcoal vs. coral, sharp-angle wedges vs. soft blobs, `Archivo Black` shouting vs. `Caveat` whispering — and the split *ratio animates* across the scroll as the character thaws. That mechanic exists nowhere else here.
3. **Glitch reframed as a flinch, wobble as a blush.** Against the registry's `glitch-art` (2%) cyberpunk cliché, this site uses RGB-split for exactly 90ms as an *emotional flinch* and a gentle sine `wobble` as *embarrassment* — animation as feeling, not as "futuristic texture."
4. **A button whose only job is to be disobeyed.** Zero CTAs, zero pricing, zero stat grids (per the brief) — the entire interactive payload is one `don't click this` button (`shake-error` pattern, also underused at 2%) that triggers a sincere confession. The site's "conversion goal" is *being liked despite itself*.
5. **Palette that physically blushes over the scroll.** Begins monochrome `#15161A` / `#E8EAF0`; `#FF6F8F` Caught Blushing leaks in only on hover and via the `--thaw` scroll property until it dominates; `#FFF4D6` Almost a Smile is spent on exactly one element, ever. High-contrast duotone (11%) used as a *plot*, not a vibe.
Chosen seed / style: `aesthetic: anti-design, layout: split-screen, typography: oversized-display, palette: high-contrast, patterns: shake-error, imagery: glitch-art, motifs: sharp-angles, tone: edgy-rebellious` — every axis among the registry's least-used.
Avoided patterns from frequency analysis: no `hand-drawn` (94%) or `glassmorphism` (85%) aesthetics; no `card-grid` (93%), `full-bleed`-everything (85%), or `centered` (79%) layouts; no `photography` (98%) or `gradient-mesh` imagery; no `warm` (98%) `gradient` (93%) palette default; no `cursor-follow`/`parallax`/`spring`/`magnetic` reflex (the mascot snaps, it does not lerp); no `pastoral-romantic` (31%) or `warm-inviting` (21%) tone. The seam-zipper, the arguing verse/refrain caption pairs, the two-state binary mascot, and the scroll-thaw split-ratio are not present anywhere in the registry.