# Design Language for tsundere.party ## Aesthetics and Tone tsundere.party is a site that does not want you here — and is desperate for you to stay. The whole design is built on a single behavioral gag: the **tsundere personality rendered as an interface**. The outer shell is cold, blunt, and slightly hostile — a **neubrutalist** concrete-and-rebar landing page with hairline-thin borders, ALL-CAPS condensed headlines, exposed structural grid, and a palette of slate, chalk, and ink. It looks like a municipal parking authority that resents being looked at. "It's not like this party is *for* you or anything." But the warmth is real and it leaks. Hover, scroll, dwell — and the brutalism *blushes*. Borders that were 1px charcoal swell and soften to a rounded blush stroke. Cold gray panels warm at the edges into a powder-pink gradient like a face caught off guard. A flat municipal sans-serif headline grows a single hand-drawn heart over the dot of an "i" and then pretends it didn't. The site is two-faced **on purpose** — the "tsun" (prickly, cold) state and the "dere" (lovestruck, sweet) state are not themes you toggle; they are emotional weather that the page genuinely cannot keep hidden the longer you interact with it. Tone register: **edgy-rebellious** on the surface (clipped copy, eye-rolls, "whatever", deflection) sitting on top of a **warm-inviting** core that keeps slipping through the cracks. The .party TLD is taken literally — this *is* an invitation to a party — but issued by a host who would rather die than admit they spent all afternoon decorating. Think shoujo-manga screentone meets a Soviet-era pamphlet meets a hand-passed note folded into a triangle. ## Layout Motifs and Structure The skeleton is **diagonal-sections** — the page is sliced by hard 7° shear lines, like a brutalist building photographed from a low corner, or like the speed-lines and dramatic panel-cuts of a manga page at an emotional climax. Diagonal-sections sit at ~6% in the corpus, so the slanted composition reads as deliberate, not default. Nothing here is a comfortable horizontal band. - **The Cold Slab (hero):** Full-bleed, top of page. A massive condensed headline jammed hard against the left margin — `tsundere.party` set in heavy uppercase, letter-spacing slightly *too* tight, like clenched teeth. A thin "DON'T GET THE WRONG IDEA." kicker above it in mono. Background: bare slate `#2B2D33` with a faint blueprint grid. A single visible "structural" element — a vertical I-beam rule in chalk — runs the full height on the right third. No hero image. No button shouting at you. Just the title, arms crossed. - **The Cracks (transitional strips):** Between every major section, a thin diagonal seam of exposed "rebar" — a 2px dashed line in blush `#F5A7C0` running through the concrete. These are the only warm thing visible at rest. As you scroll past, each seam draws itself (path-draw-svg) and a tiny line-illustration heart blooms at the seam's midpoint, then the page scrolls on and it's gone. - **The Confession Cards (content modules):** Content lives on rigid, sharp-cornered cards arranged on a strict broken grid — but each card is a **card-flip**. Front face: cold. Concrete texture, mono label, terse one-liner ("RSVP. or don't."). On hover/tap the card flips on a spring with overshoot — back face: powder-pink, rounded corners *on the back only*, a hand-drawn doodle, and the actual sincere version of the message ("ok fine. i made cupcakes. there's a lot of cupcakes. please come."). The flip is the core interaction and the whole emotional joke of the site. - **The Margin Notes:** Down the left gutter, a vertical column of small ALL-CAPS labels (PROGRAM / GUESTS / RULES / WHATEVER) acting as section index — brutalist signage. Each one, on hover, very briefly turns lowercase and cursive before snapping back: "rules" → catches itself → "RULES". - **The Doorway (footer):** The diagonal seams converge at the bottom into a single warm wedge — the page finally just *is* pink here, fully dere, no more pretending. A hand-lettered "you actually came." and a folded-note RSVP form. The shear angle resolves to 0°; the building stops leaning. ## Typography and Palette **Typefaces (Google Fonts only):** - **Archivo Black** — the brutalist voice. Used for the wordmark and all major headlines, ALL CAPS, tight tracking. Blunt, structural, immovable. This is the "tsun" speaking. - **Archivo** (the variable family, weights 400–600) — for body copy and the mono-adjacent UI labels set in its narrow-tracked uppercase. Keeps the cold register coherent. - **Caveat** — the "dere" voice. A casual handwriting face used *only* on card backs, the rebar-seam heart captions, the footer hand-lettering, and the momentary cursive flickers in the margin index. It is never used at rest on the cold surface — it only appears when the page slips. - **Space Mono** — the deflection layer. Kickers, RSVP form labels, the eye-roll asides ("// whatever"). Monospace as the sound of someone looking away while they talk to you. Pairing logic: Archivo Black vs. Caveat is the entire personality split made typographic — geometric municipal slab against unguarded handwriting. Space Mono is the awkward throat-clear in between. **Palette — `burgundy-cream` warmed toward blush (a 1%-rare base):** - `#2B2D33` — Wet Slate. Primary cold background, the resting state. - `#E7E4DC` — Chalk Cream. Cold text on slate, card fronts, the "neutral mask". - `#5C1A2B` — Sulk Burgundy. Deep wine accent — the color of a flush you're trying to suppress; used for the I-beam rule shadow, hover underlines, footer ground. - `#F5A7C0` — Blush Wire. The rebar pink. The warm thing leaking through every seam. - `#FBE3EA` — Cupcake. The full-dere card-back background and the footer wedge — the secret made visible. - `#9BA0A8` — Concrete Gray. Mid-tone for blueprint grid lines, dashed structure, disabled-looking deflection text. Rule: at rest, the page is ~85% slate/chalk/gray and only ~15% blush (just the seams). Through interaction the blush ratio climbs; by the footer it's inverted — ~80% cream/blush. The site literally warms up the more attention it gets. ## Imagery and Motifs - **Imagery: line-illustration + collage.** Hand-drawn single-weight ink doodles (1.5px) — party hats worn at a grumpy angle, a single balloon on a too-short string, crossed arms, a turned-away face with three blush ticks, cupcakes, a folded triangle note, confetti drawn as sharp little shards. On card fronts these are reduced to a faint embossed *outline only*, almost hidden; on card backs they're full, warm, slightly wobbly. Collage layer: torn-paper edges and a faint screentone dot halftone (the manga blush gradient) bleeding from behind diagonal seams. - **The blueprint grid** — a faint `#9BA0A8` graph-paper underlay on all cold sections, like the page is a construction document. It quietly fades out wherever the blush has "warmed" an area. - **Speed-lines / shear-lines** — the diagonal section cuts double as manga emotional speed-lines; on big scroll jumps, a brief burst of radiating thin lines from the cursor (cursor-follow but used sparingly, only on dramatic transitions). - **The recurring heart** — never decorative-by-default. It only ever appears *mid-animation* and is *removed* when the animation settles, so it always feels like something the page is trying to take back. This restraint is the motif's whole point. - **Screentone halftone** — small CSS radial-gradient dot pattern, the classic shoujo blush texture, used as the transition mask between tsun and dere states of any element. - **Folded-note shapes** — the RSVP form, the footer, and any "real" message is housed in a shape with one corner folded down, like a passed note. ## Prompts for Implementation Build as a single self-contained HTML document — one `