# Design Language for tsundere.day ## Aesthetics and Tone tsundere.day is a **bedazzled mid-2000s mall-rat diary that is loudly pretending it doesn't care about you** — McBling maximalism (rhinestones, glossy lip-gloss highlights, flip-phone charms, gel pens, sticker bombs) channelled into a self-aware "it's not like I built this site *for* you or anything, b-baka" voice. The tone is the tsundere archetype made literal in chrome and glitter: prickly captions, defensive footnotes, hearts that the page tries to scribble out and fails to hide. Every interaction has two faces — a cold default state ("tsun") that, when you push it, snaps into a flushed warm state ("dere"), pink bleeding in at the edges before the page yanks it back. Mood: candy-coated armour. Think Paris-Hilton-era Sidekick wallpapers, MySpace top-8 drama, claw-machine plush, Lisa Frank gone slightly goth, Y2K chrome bevels, and the specific texture of a Five Below gel-pen aisle — but art-directed with restraint so it reads as *designed* nostalgia, not a junk drawer. The site behaves like a person crossing their arms and looking away while their ears go red. ## Layout Motifs and Structure A **single-route, vertically scrolled "diary spread"** built as a sequence of full-bleed pages that look like laminated scrapbook leaves clipped into a bedazzled ring binder. The structural gimmick is the **two-column "tsun / dere" split that is never balanced** — the cold column dominates (about 62/38), set in stark charcoal-on-ice, while the warm column hides in the margin as a thin pink gutter strip until a section is "provoked" (scrolled into, hovered, or clicked), at which point the warm column elastically shoves the cold column aside, then slowly retreats. - **Binder rings & tabs**: three chrome ring-binder loops run down the left edge as a fixed spine; section "tabs" (handwritten on masking-tape labels) jut from the right edge as a sticky mini-nav. - **Sticker layer**: a parallax layer of die-cut stickers (hearts with X's through them, "WHATEVER ♡", star bursts, a cracked-heart enamel pin, a tiny padlock) floats above the content at a different scroll rate; some are peeling at one corner. - **Asymmetric, deliberately "bad" alignment**: captions are rotated ±2–4°, pinned with washi tape, photo-corner mounts at jaunty angles — broken-grid on purpose, like a real diary page, but the underlying baseline grid stays disciplined. - **No bento boxes, no card-grid, no dashboard, no stat-grid, no pricing block, no testimonial row.** Sections are *leaves*, not modules. - **Footer = "the back cover"**: a scuffed glossy slab where the page finally writes the honest thing in tiny letters and immediately covers it with a sticker. ## Typography and Palette **Typography (all Google Fonts):** - **Display / "tsun" voice**: `Bricolage Grotesque` at heavy weights — squarish, slightly tense, used oversized for the cold declarations. - **"dere" voice / annotations**: `Gochi Hand` — wobbly gel-pen handwriting, used for the flustered margin notes, crossed-out words, and masking-tape labels. - **Body / captions**: `Hanken Grotesk` — clean, neutral, keeps the longer text legible so the page doesn't collapse into noise. - **Accent stamps**: `Sixtyfour` or `Pixelify Sans` used sparingly for tiny "SYSTEM: DENIED" style pixel stamps on stickers (a nod to flip-phone UI). **Palette:** - `#0E0E12` — *cold-shoulder ink* (near-black charcoal, the dominant text + tsun backgrounds) - `#EDEFF3` — *fluorescent-tube white* (ice paper, the cold column ground) - `#FF4FA3` — *caught-blushing magenta* (the dere accent — hearts, blush gradients, the warm column) - `#FFC7E2` — *bubblegum-eraser pink* (soft fills, washi tape, peeled-sticker undersides) - `#C9CDE0` — *chrome bevel grey-lilac* (Y2K metallic gradients, ring binder loops) - `#7A5CFF` — *gel-pen violet* (secondary handwriting ink, link underlines) - `#FFE45E` — *star-sticker yellow* (rare third pop, used only on burst stickers) Chrome surfaces use a 3-stop linear gradient `#EDEFF3 → #C9CDE0 → #9AA0BE` with a hard white specular line. Blush gradients are radial `#FF4FA3` at 22% opacity fading to transparent, layered with `mix-blend-mode: multiply` on the ice ground. ## Imagery and Motifs - **Crossed-out hearts**: the signature motif — a heart with two strikethrough lines, sometimes scribbled over with `Gochi Hand` loops, that on interaction the scribble *fails to fully cover*. - **Rhinestone clusters**: small SVG gem shapes with faceted highlights, scattered like a phone case; they catch a glint that follows the cursor. - **Washi tape & masking tape**: torn-edge translucent strips holding everything down; the navigation tabs are masking-tape labels with hand-lettering. - **Photo-corner mounts & peeling stickers**: every "photo" leaf is held by triangular corner slots; stickers have a curled corner with a faint drop shadow underneath. - **Flip-phone charm chain**: a beaded charm dangles from the top-right of the binder, swaying with scroll momentum. - **Padlock + tiny key**: a recurring "diary lock" motif — closed by default, rattles when you try to skip ahead, never actually opens. - **Lens-flare star sparkles** on chrome edges, kept to single small bursts so it stays McBling-elegant rather than gaudy. - No photography of people; all imagery is illustrative SVG + CSS — stickers, gems, tape, gel-pen marks, chrome plates. ## Prompts for Implementation Build tsundere.day as **one HTML file, one CSS file, one JS module** — a vertically scrolled, ~70-second walk through a bedazzled binder diary that keeps insisting it doesn't care. No CTA buttons, no pricing, no stat grids, no testimonial rows, no email signup, no contact form. Just leaves of the diary. **Narrative arc (leaves, vertical scroll, slide/elastic transitions):** 1. **The Cover (tsun).** Oversized `Bricolage Grotesque`: "i made a website. NOT for you." Below, in tiny `Gochi Hand`, half-erased: "...okay maybe a little." Three chrome ring loops fade in down the left; a single rhinestone glints toward the cursor. A crossed-out heart sticker sits in the corner, peeling. 2. **The Lock Leaf.** A glossy diary lock fills the page; scrolling "rattles" it (spring shake), a margin note snaps in: "h-hey. you can't just *read* it." After a beat the lock springs open with an elastic over-bounce and the page tips into the binder. 3. **Tsun Manifesto.** The cold column declares short cold lines, stacked, charcoal-on-ice; each line, when scrolled past center, gets a `Gochi Hand` rebuttal that elastically pushes in from the pink gutter ("that's not what i— ugh, forget it"), then retreats halfway, leaving a smear. 4. **The Blush Leaf (dere peak).** The warm column finally wins: pink radial gradients bloom under `mix-blend-mode: multiply`, rhinestones scatter and twinkle in staggered sequence, a chrome banner reads in handwriting "...fine. i'm glad you're here." Then — three seconds later — a big crossed-out-heart sticker slaps over it (slide-reveal from offscreen) and the cold column shoves back. This is the emotional climax: don't soften it gradually, *snap* between states. 5. **The Charm Chain.** A scroll-momentum-driven beaded charm sways across the leaf; tiny pixel stamps ("SYSTEM: DENIED ♡") pop on each bead as it passes. 6. **The Back Cover.** Scuffed glossy chrome slab; in the smallest legible `Hanken Grotesk`: "thanks for reading my dumb site." A washi-tape sticker peels down over it on load, half-covering it — you have to *want* to read it. **Motion vocabulary (PREFER these — underused in the corpus):** lead with **elastic** and **spring** snaps for the tsun↔dere flips and the lock; **shake** when the user tries to skip; **ripple** on rhinestone taps; **path-draw-svg** for the gel-pen scribbles drawing themselves over hearts then *not quite* covering them; **counter-animate** is irrelevant — avoid it; minimal **parallax** only on the sticker layer; a cursor-following **glint** (not a full cursor-follow blob — just a specular highlight on chrome). Honour `prefers-reduced-motion` by replacing snaps with crossfades and freezing the charm chain. **Texture & polish:** subtle film grain over chrome plates; hard white specular line on every metallic edge; washi tape at ~85% opacity with a 1px torn-edge mask; stickers always cast a soft contact shadow and curl one corner. Keep glitter *sparse* — single bursts, never a field — so it reads as art-directed McBling, not clutter. ## Uniqueness Notes 1. **Tsun/dere as a literal interaction model.** Every component has a cold default and a warm provoked state, and the page *snaps* between them with elastic over-bounce — then deliberately retreats. No site in the corpus models bipolar component states as a personality; this is the core differentiator and it drives layout (the unbalanced 62/38 split), color (blush gradients that intrude and withdraw), and motion (snap, not ease). 2. **McBling done with restraint.** McBling/mcbling sits at ~0% in the aesthetic frequency analysis. Rather than the usual maximalist junk-drawer take, this design art-directs rhinestones, washi tape, and chrome with a disciplined baseline grid and a 7-color cap — designed nostalgia, not a sticker dump. Pairs `Bricolage Grotesque` + `Gochi Hand` (a combination absent from the corpus's mono-dominated typography). 3. **Diary-binder structure instead of card-grid / bento.** Card-grid (93%) and bento-box (17%) are everywhere; this site uses laminated scrapbook *leaves* in a chrome ring binder with masking-tape tabs and photo-corner mounts — broken-grid on purpose, no modules, no dashboard, no stat grid. 4. **A locked-diary skip-defense.** Trying to scroll past sections rattles a padlock that never opens — a narrative gate, not a CTA. Combined with the back-cover sticker that half-hides the one sincere line, the whole site withholds rather than converts. 5. **Avoided patterns:** no glassmorphism, no hand-drawn pastoral, no warm-gradient hero, no photography, no cursor-follow blob, no typewriter effect, no stat counters, no card-grid, no bento-box — all heavily overused per the frequency analysis. Chosen Seed: **mcbling** (McBling — bedazzled Y2K-bling maximalism), recontextualized as a tsundere diary; layered with `mcbling`/`y2k-futurism` aesthetics, `broken-grid` + `single-column` layout, `elastic`/`spring`/`shake`/`ripple`/`path-draw-svg` patterns, `candy-bright` + `chrome-metallic` palette, `bubble-playful` + `star-celestial` motifs, `whimsical-creative` tone.