# Design Language for tsundere.download

## Aesthetics and Tone

tsundere.download is an **McBling rhinestone tantrum** — the visual equivalent of someone slamming a bedazzled flip phone shut and muttering "it's not like I made this site *for you* or anything." The whole aesthetic is built on a single emotional engine: a hostile, glossy, over-decorated exterior (chrome bubble letters, candy gloss, sticker chaos, the 2005 mall-kiosk maximalism of Paris Hilton's *Stars Are Blind* era) wrapped around a soft, embarrassed, almost tender interior that only reveals itself when you stop pressuring it.

"Download" is the bait: the site pretends to be a slick fan-archive landing page where you came to grab *something* — a wallpaper pack, a soundboard, a zine. But the site is **tsundere about being downloaded from**. It scoffs at your cursor, it flinches when you hover the big button, it pre-emptively insults your taste, and only after you've scrolled past three sections of performative coldness does the chrome crack open and the page quietly admits it's glad you're here. Tone: **edgy-rebellious** on the surface, **dreamy-ethereal** underneath — the warmth is rationed, never given freely.

Reference texture: Y2K mall photo booths, glitter gel pens bleeding through Lisa Frank folders, the specific cyan-and-hot-pink of a 2004 Bratz doll box, MSN Messenger nudge animations, holographic Pokémon card glare, those "DOWNLOAD NOW" buttons that wobbled. But filtered through 2026 restraint: one rhinestone is a jewel, a thousand rhinestones is a personality disorder — the site flirts with the second and lands on the first.

## Layout Motifs and Structure

The page is built on **diagonal-sections** — every section boundary is a slanted clip-path (roughly 4–7° tilt, alternating direction), so the whole document reads like stacked stickers peeling off at the corners. This is the bratty body language made structural: nothing sits straight, everything is at a *hmph* angle. Diagonal-sections is rare in the corpus (6%); the tilt here is aggressive and load-bearing, not decorative.

**Vertical spine (single document, top to bottom):**

1. **The Cold Open** — full-bleed first viewport. Enormous chrome bubble-letter wordmark `tsundere.download` centered, set on a candy gradient. A single oversized glossy button: `[ DOWNLOAD ]`. When the cursor approaches the button it physically *jerks away* a few pixels (magnetic-repel, the inverse of every magnetic button in the archive). A small line under it, tiny mono type: `don't get the wrong idea.`

2. **The Brush-Off** — diagonal cut. Three "feature" cards laid out in a broken staircase, each tilted opposite to its neighbor. Card headers: `it's fine i guess`, `whatever`, `you're STILL here?`. Each card is a glassmorphic chrome panel with a rhinestone in one corner. Hovering a card makes it *shake* (shake-error pattern — normally an error animation, repurposed as flustered body language) and the body text underneath softens by one shade.

3. **The Reluctant Reveal** — the chrome cracks. Background candy gradient desaturates toward a pale, dreamy lavender-cream. The diagonal cuts get *gentler* (7° → 2°). A long centered column of soft serif text where the site, almost in a whisper, explains what's actually in the download — and it's thoughtful, curated, made with care. The rhinestones here glow softly instead of glaring.

4. **The Actual Button** — the real `[ download for real ]` link, now centered, now *holding still*, now magnetic-*toward* the cursor instead of away. Below it, even tinier mono: `...i'm glad you came. (don't tell anyone i said that.)`

5. **Colophon footer** — chrome bar, off-kilter, with a single blinking heart-pixel and the seed credit.

No nav bar, no pricing, no stat grid, no testimonials. The "story" *is* the layout: coldness → fluster → thaw → quiet warmth, top to bottom, one scroll.

## Typography and Palette

**Typefaces (Google Fonts only):**

- **Bebas Neue** — the **bebas-bold** display face (only 2% of the corpus). Used for the chrome bubble-letter wordmark and every defensive section header (`WHATEVER`, `YOU'RE STILL HERE?`). Set in ALL CAPS, tight tracking, with a CSS chrome treatment: layered text-shadows + a `background-clip: text` metallic gradient. Bebas is tall, narrow, loud — perfect for a brat shouting.
- **Fredoka** — rounded, bubbly sans, used for UI labels, card body text, and buttons. The "soft kid" voice; its roundness is the tell that the hostility is a costume.
- **Gloock** — a high-contrast display serif, used *only* in The Reluctant Reveal section for the whispered confessions. Elegant, vulnerable, completely different register — this is the site without its armor on. Weight 400, generous line-height (1.7), letter-spacing slightly open.
- **Space Mono** — tiny mono captions: the `don't get the wrong idea.` micro-text, timestamps, the colophon. The deadpan footnotes.

**Palette:**

- `#FF4FA3` — **hot bratz pink** (the loud exterior, button fills, the glare)
- `#22D3EE` — **mcbling cyan** (the second loud color, chrome highlights, hover glints)
- `#FBBF24` — **gloss gold** (rhinestone cores, accent sparkles)
- `#C0C8D8` — **chrome silver** (bubble-letter base, glassmorphic panel edges)
- `#0E0B1A` — **midnight plum** (the deep base behind the cold open, text on light)
- `#F4ECFB` — **embarrassed lavender-cream** (the thawed background of the reveal section)
- `#7C5CBF` — **soft amethyst** (the warm-but-shy accent that only appears post-thaw)
- `#FFFFFF` — pure white for the chrome speculars

The candy gradient = `#FF4FA3 → #22D3EE` diagonally, with a `#FBBF24` glint. As you scroll into the reveal it cross-fades to `#F4ECFB` flat with `#7C5CBF` soft accents. High-contrast (candy-bright) at the top, muted-dreamy at the bottom — the saturation literally drains as the site calms down.

## Imagery and Motifs

- **Star-celestial motifs** (6% of corpus) — but rendered as **rhinestone four-point sparkles** (the ✦ "sparkle" glyph, CSS-drawn), not astronomy. They're scattered like bedazzler glue-ups: dense and glaring in the cold open (each one has a CSS radial glare highlight), sparse and softly-glowing in the reveal. A few drift slowly via keyframes.
- **Chrome bubble lettering** — the wordmark and headers get the full Y2K liquid-chrome treatment via stacked text-shadows + clipped metallic gradient + a thin white top-light. No images needed; it's all CSS.
- **Glassmorphic chrome cards** — the feature panels: frosted blur backdrop, 1px chrome-silver border with a gradient sheen, rounded-XL corners, one rhinestone embedded in a corner. They tilt and shake.
- **Sticker peel** — every diagonal section edge has a subtle drop-shadow on the slanted cut so sections look like vinyl stickers lifting at the corner. One section (The Brush-Off) literally has a `::before` triangle "peeled corner" in the top-right.
- **Cursor heart-trail** — a faint trail of tiny ✦ and ♡ glyphs follows the cursor, but it's *pink and aggressive* near the top of the page and fades to *soft amethyst hearts* near the bottom. The cursor itself never gets a custom replacement (keep default for clickability) — only the trail.
- **The flip-phone close** — the colophon's blinking heart-pixel; clicking it does a tiny snap-shut CSS animation. Easter-egg only, no function.
- No stock photography. No 3D renders. Everything is CSS-drawn glyphs, gradients, blur, and clip-paths.

## Prompts for Implementation

Build as a **single self-contained HTML document** — one `<style>` block, one small `<script>`, a Google Fonts `<link>` for Bebas Neue / Fredoka / Gloock / Space Mono. Target under 70KB before fonts. No framework, no build step, no SPA router.

**Storytelling spine — make the page *act* tsundere:**

1. **The repelling button.** On the cold-open `[ DOWNLOAD ]`, attach a `pointermove` listener: when the cursor enters a ~140px radius, translate the button *away* from the cursor with a springy ease (`cubic-bezier(.34,1.56,.64,1)`), capped so it never leaves its section. After ~3 dodge attempts, it gives a tiny resigned wobble and a mono line fades in: `fine. it's at the bottom. happy now?` — which becomes an anchor link to section 4. (This is the inverse of the corpus-ubiquitous magnetic button — 78% of sites pull toward the cursor; this one flees.)

2. **Fluster, not error.** Reuse the `shake-error` keyframe (a quick ±3px horizontal jitter) but trigger it on `:hover` of the feature cards and on focus of any interactive element. Pair each shake with a one-shade color softening of the card's body text and a quick rhinestone twinkle. The shake reads as *flustered*, not broken — keep it short (~280ms) and slightly damped.

3. **The thaw, driven by scroll.** Use one `IntersectionObserver` watching 3–4 sentinels down the page. As each fires, lerp CSS custom properties on `:root`: `--bg` from candy-gradient toward `#F4ECFB`, `--accent` from `#FF4FA3` toward `#7C5CBF`, `--section-tilt` from `6deg` toward `1.5deg`, `--sparkle-glare` opacity from 1 toward 0.25, and swap the cursor-trail glyph set from `[✦, ✧]` pink to `[♡, ·]` amethyst. The whole page should *visibly relax* as you descend. Respect `prefers-reduced-motion`: skip the repel, skip the shake, keep the color/tilt transitions but make them instant on section entry.

4. **Typewriter the confession.** In The Reluctant Reveal, the whispered Gloock-serif paragraph types itself out (typewriter-effect, ~28ms/char) the first time it scrolls into view — with occasional longer pauses mid-sentence, like the site is hesitating. A single ✦ blinks at the end as a "cursor."

5. **The real button.** Section 4's `[ download for real ]` is genuinely magnetic *toward* the cursor (gentle, ~0.15 strength), holds a soft amethyst glow, and on click triggers a brief burst of falling ✦/♡ glyphs from the button before navigating. Under it the mono line: `...i'm glad you came. (don't tell anyone i said that.)` — set at `opacity: .55`, never animated, never loud.

6. **Diagonal sections.** Each `<section>` gets a `clip-path: polygon(...)` slanted top and bottom edge, alternating slant direction, with the slant angle bound to `--section-tilt`. Add a soft drop-shadow on the slanted edges (sticker-peel). Background of each section is the current `--bg`. Stagger child elements in on entry (translateY + fade, ~80ms stagger).

7. **Sparkles.** Generate ~24 CSS sparkle elements absolutely positioned at random spots, denser in the top third. Each is a `::before`/`::after` four-point star with a tiny radial-gradient glare. A handful drift via `@keyframes` (slow translate + rotate, 8–14s). Their glare opacity is bound to `--sparkle-glare`.

**Hard avoids:** no CTA-stacked hero, no pricing tiers, no stat/number grids, no testimonial carousel, no feature-comparison table, no newsletter modal, no hamburger nav. The download link appears exactly twice (once fleeing, once welcoming). Keep copy short, bratty, and human.

## Uniqueness Notes

Differentiators from the rest of the corpus:

1. **The repelling button.** The corpus is saturated with magnetic buttons that *pull toward* the cursor (78% use `magnetic`). This site does the literal inverse as its central interaction — the primary CTA *flees* your cursor and insults you for trying. The interaction model is the personality.

2. **`shake-error` repurposed as emotional language.** Only ~2% of sites use `shake-error`, and where they do it's an actual error state. Here it's the site being *flustered* — a UI failure animation reframed as a blush. No other site in the archive uses a negative-feedback animation as affection.

3. **Scroll-driven emotional thaw via a single state variable.** The page doesn't just change scenery on scroll — its saturation, tilt, accent color, sparkle-glare, and cursor-trail glyphs all lerp together along one "warmth" axis, so the *entire visual system* relaxes from candy-bright hostility to muted-dreamy tenderness. The narrative arc is encoded in CSS custom properties.

4. **McBling + bebas-bold + diagonal-sections + star-celestial-as-rhinestones.** McBling (1%), bebas-bold (2%), and diagonal-sections (6%) are all rare; combining the Y2K mall-bling aesthetic with aggressive sticker-peel diagonals and a celestial motif demoted to bedazzler-rhinestones is a position no other site holds. Most Y2K-adjacent sites in the corpus lean frutiger-aero glossy-clean; this one is loud, slanted, and emotionally volatile.

5. **The site has a *character arc*, not a vibe.** It performs coldness, gets flustered, reluctantly reveals it cares, and ends with a whispered admission — a beginning, middle, and end driven entirely by scroll position. The `.download` TLD is treated as an emotional premise ("being downloaded from makes it nervous"), not a utility.

Chosen seed/style: `aesthetic: mcbling, layout: diagonal-sections, typography: bebas-bold, palette: candy-bright, patterns: shake-error, imagery: glassmorphic-cards, motifs: star-celestial, tone: edgy-rebellious` (with a secondary dreamy-ethereal register in the thaw). Avoided overused patterns from frequency analysis: no glassmorphism-as-whole-aesthetic (85%), no hand-drawn (95%), no warm/gradient default palette as the resting state (98%/93%), no cursor-follow-pulling magnetic button (78%/89%), no card-grid (93%) — the cards here are a broken diagonal staircase, not a grid.
<!-- DESIGN STAMP
  timestamp: 2026-05-11T08:52:58
  seed: aesthetic: mcbling, layout: diagonal-sections, typography: bebas-bold, palette: candy-bright, patterns: shake-error, imagery: glassmorphic-cards, motifs: star-celestial, tone: edgy-rebellious
  aesthetic: tsundere.download is an **McBling rhinestone tantrum** — the visual equivalent o...
  content_hash: 69741549a135
-->