# Design Language for tsundere.boo ## Aesthetics and Tone tsundere.boo is **a Y2K chrome compact-mirror that talks back** — the homepage behaves like the flip-open lid of an early-2000s glitter phone charm: liquid-metal bezels, holographic bubble stickers, a built-in mood that can't decide whether it likes you. The governing aesthetic is **MCBling Y2K-futurism** — that hyper-glossy 2001–2006 visual dialect of chrome lettering, gel buttons, butterfly clips, beaded curtains, frosted aqua plastic, and "bootlicious" sticker-bombed surfaces — but the *tone* is a deliberately bratty **tsundere persona**: cold, jagged, deflecting headlines on the surface, with warm, fond, secretly-pleased microcopy revealed underneath every interaction. "It's not like I built this site *for* you or anything." The whole page is a single character study: a chrome interface that crosses its arms when you arrive, scoffs when you scroll, and softens — visibly, in color and motion — only when you keep paying attention. The mood word is **defiant-glittery**: high-shine surfaces, a hard candy-bright top layer, and an undertone of genuine affection that leaks through the seams. No corporate calm, no muted earthy warmth, no hand-drawn whimsy — this is loud, reflective, plasticky, emotionally volatile, and proud of it. Think of a Lisa Frank trapper-keeper engineered by a chrome-obsessed automotive designer who is also, privately, blushing. ## Layout Motifs and Structure The page is a **vertical stack of "flip-panels"** — five full-viewport sections, each one styled as a hinged compact-mirror leaf with a thick beveled chrome frame (`border-image` gradient, ~18–28px). Sections do not scroll as a continuous document; each snaps into view (`scroll-snap-type: y mandatory`) like clicking the charm shut and open again. This is **immersive-scroll layout with diagonal-section seams** — every panel boundary is a tilted chrome hinge bar at roughly -4°, with two visible "screws" rendered as radial-gradient gel dots. Inside each panel: a **broken, off-grid composition** — never centered, never a card-grid. The headline sits flush to one edge (alternating left/right per panel) in oversized chrome display type; a "sticker cluster" of 3–6 holographic bubble-stickers floats at an opposing corner, each slightly rotated, slightly overlapping, with peel-up drop shadows. A thin vertical "bead string" runs down one margin — a column of small chrome spheres connected by a hairline — acting as a progress indicator that fills with iridescence as you advance. The five panels, in narrative order: 1. **`THE COLD OPEN`** — arms-crossed hero. Giant chrome wordmark "tsundere.boo", a dismissive headline ("Oh. *You're* here."), sticker cluster reading things like "whatever ★", "don't get the wrong idea", "← back is that way". Background: brushed-steel radial sheen, dead still. 2. **`THE SCOFF`** — three "reasons you should leave" presented as gel-button pills the visitor is dared to press; pressing each one flips it (`card-flip`) to reveal the soft truth on the back ("...fine, stay. but quietly."). 3. **`THE SOFTENING`** — the panel where the palette warms: cold cyan-chrome gradients bleed toward warm peach-pink as the section enters view (scroll-triggered). A confessional paragraph set in script type, half-hidden behind a frosted aqua plastic overlay that wipes away on hover. 4. **`THE FLUSTER`** — kinetic chaos: butterfly-clip shapes and beaded-curtain strands sway on a spring physics rig; the headline letters jitter and overcorrect ("I-it's a good website, OKAY?"). Holographic glare sweeps repeatedly across the chrome. 5. **`THE QUIET PART`** — the compact clicks almost-shut. Near-black mirrored panel, one small line of warm copy reflected upside-down at the bottom edge like a real mirror ("...come back tomorrow. i'll deny i said that."), a single slow-pulsing chrome heart sticker. On narrow screens the chrome frames thin to ~10px, sticker clusters drop to 2–3 stickers, the bead-string moves to the top as a horizontal row, and scroll-snap stays on. ## Typography and Palette **Type system (Google Fonts only):** - **`Orbitron`** (700, 900) — the chrome display voice. All five panel headlines and the wordmark. Set enormous: `clamp(2.8rem, 9vw, 7rem)`, `letter-spacing: 0.02em`, rendered with a layered text treatment (see Implementation) so its geometric, slightly-retro-futuristic forms read as polished metal. This is the *cold surface* of the character. - **`Audiowide`** (400) — secondary display / sticker labels / the bead-string captions / panel kicker labels like `THE SCOFF`. Its rounded-but-techy single weight has that DVD-menu, gel-button quality. Used at 0.8–1.4rem, often `text-transform: uppercase`, `letter-spacing: 0.18em`. - **`Caveat`** (500, 600) — the *secret warm voice*: every confessional line, every flip-card back, the reflected closing line, all the "...fine." asides. Handwritten-feeling, intimate, the exact opposite of the chrome. Set 1.3–2.2rem, slight rotation (-1.5°), color always in the warm range. The contrast between Orbitron's hard chrome and Caveat's soft scrawl *is* the tsundere. - **`Inter`** (400, 500) — the tiny functional substrate: alt-style fine print, the cookie-free footer line, any genuinely neutral text. Kept small and unglamorous on purpose. **Palette (cold surface → warm core):** - `#0A0E14` — **gunmetal void**, near-black backdrop and the final mirrored panel. - `#C7D0DA` — **brushed chrome base**, the dominant metallic mid-tone. - `#EAF1F7` — **mirror highlight**, the hot specular edge on every beveled frame and letter. - `#3FC9E8` — **frost aqua**, the cold-mood accent (Y2K translucent-plastic cyan), used in the first two panels' gradients and the frosted overlays. - `#7A5BFF` — **holo violet**, the iridescent shift color in stickers, bead-string fill, glare sweeps. - `#FF8FB1` — **fluster pink**, the warm "blush" that bleeds in from panel 3 onward. - `#FFC36E` — **soft peach glow**, the warmest core tone — confession backgrounds, the closing heart, flip-card backs. - `#FF4D6D` — **deny-it red**, a single sharp warm punch used sparingly (the heart pulse, key reveal underlines). Chrome is always rendered as a *gradient*, never a flat fill: a steep 5-stop linear gradient from `#0A0E14 → #C7D0DA → #EAF1F7 → #C7D0DA → #7A5BFF` clipped to text/borders, plus a thin animated specular streak. ## Imagery and Motifs **No photography, no AI raster.** Everything is **CSS gradients + inline SVG**, all hand-built. The unifying motif kit is **early-2000s charm-bracelet hardware**: - **Chrome bevels** — every framed element gets a 4-stop conic/linear gradient border that reads as machined metal with a top-left highlight and bottom-right shadow lobe. - **Holographic bubble-stickers** — rounded-rect SVGs with a `feSpecularLighting` / layered radial-gradient sheen, each carrying a short bratty or fond phrase, each peeled slightly up at one corner with a soft cast shadow. Hovering one makes its iridescent layer rotate hue. - **Bead-string** — a vertical (or horizontal on mobile) run of small chrome spheres on a hairline; doubles as scroll progress; fills with the holo-violet→pink gradient as you descend. - **Butterfly clips** — flat two-loop SVG butterfly shapes (the hair-clip kind), scattered in panel 4, gently rotating on spring physics. - **Beaded-curtain strands** — vertical strings of alternating chrome/aqua beads at panel edges that sway with a damped pendulum motion responding to scroll velocity. - **Frosted-aqua plastic overlays** — semi-opaque cyan `backdrop-filter`-free panels (use layered semi-transparent gradients + noise) that sit over the confessional text and wipe/dissolve on interaction. - **Glare sweeps** — a single bright diagonal band (`linear-gradient`, ~110°) that travels across chrome surfaces; near-instant on the cold panels, lingering and repeated on the fluster panel. - **The heart** — exactly one chrome-rimmed heart, appears only in the last panel, slow `deny-it red` pulse. Decorative grain: a faint film-grain noise layer over everything (subtle, ~3% opacity) so the chrome doesn't look sterile — gives it that slightly-worn trapper-keeper feel. ## Prompts for Implementation Build tsundere.boo as **one HTML file, one CSS file, one ES module** — no framework, no build step. The page is a single five-act character study; the visitor scroll-snaps through a chrome compact-mirror that thaws from cold to fond. **Hard exclusions — DO NOT include any of these:** no call-to-action button, no pricing block, no stat-grid / counter row, no testimonial section, no logo wall, no email capture or newsletter signup, no contact form, no FAQ accordion, no feature-comparison table, no cookie banner, no chatbot. The five flip-panels *are* the entire site. **Structure & motion:** - `scroll-snap-type: y mandatory` on the container; each `
` is `100svh` with `scroll-snap-align: start`. Panel seams are -4° tilted chrome hinge bars with two gel-dot "screws". - **Chrome text:** Orbitron headlines get `background-clip: text; color: transparent;` over the 5-stop chrome gradient, plus a pseudo-element duplicate offset 2px down/right at low opacity for a beveled-edge feel, plus an animated narrow specular streak (`background-position` keyframe loop, ~6s) that slides across the letters. No `text-shadow` glow — this is reflective, not neon. - **The thaw (core mechanic):** an `IntersectionObserver` (or scroll progress 0→1) drives a single CSS custom property `--warmth: 0 → 1`. At 0 the page is gunmetal + frost-aqua + holo-violet, motion is stiff (fast, linear easings, near-zero amplitude sway). As `--warmth` rises (panels 3→5), backgrounds interpolate toward `fluster pink` / `soft peach glow`, the bead-string fill warms, and the spring/pendulum rigs gain amplitude and softer easing. The visitor should *feel* the character softening, not be told. - **Flip-cards (panel 2):** the three "reasons to leave" gel pills flip on click (`transform: rotateY(180deg)`, `transform-style: preserve-3d`) — front is Orbitron/Audiowide and cold-toned, back is Caveat on a peach-glow ground with a warm admission. Stagger their entrance. - **Frosted overlay (panel 3):** the confession paragraph sits behind a layered semi-transparent cyan "plastic" sheet; on hover/tap it dissolves via a `mask-image` radial wipe revealing the Caveat text. - **Fluster (panel 4):** small JS spring loop (no library — a simple Hooke's-law integrator) animates butterfly-clip rotations and beaded-curtain strand swing; headline letters individually `transform`-jitter then overcorrect back. A glare sweep runs on a loop here, ~2.5s, lingering. - **Closing mirror (panel 5):** near-black panel, the single Caveat line at the bottom is duplicated below with `transform: scaleY(-1)` and a fade-to-transparent mask so it reads as a real reflection on the mirror surface. The chrome heart pulses on a ~3s ease. - **Cursor:** a subtle one — the cursor leaves a tiny brief chrome-glint trail (a few fading specks), nothing that follows or lags heavily. Optional; degrade gracefully. - **Microcopy voice everywhere:** surface text is dismissive ("don't read too much into this", "the exit's behind you", "I guess it loaded fine"); hidden/revealed text is fond ("...okay I'm glad you're here", "stay as long as you want", "i'll deny saying that"). Every interaction should swing between the two registers. - Respect `prefers-reduced-motion`: kill the sway/jitter/glare loops and the specular streak; keep the warmth color interpolation as instant state changes per panel. Aim for a **full-screen narrative experience** that reads as one continuous personality, not a marketing page. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **MCBling / Y2K-futurism chrome is essentially unused here** — `mcbling` registers at 0% and `y2k-futurism` at 1% in the corpus's aesthetic distribution; `chrome-metallic` palette is 3%. This site is built entirely on that liquid-metal, gel-button, holographic-sticker dialect, which almost nothing else in the codebase touches. 2. **The layout is a literal compact-mirror flip-charm** — vertical scroll-snapped "flip-panels" with -4° chrome hinge seams, gel-dot screws, and a bead-string progress rail. It is explicitly *not* card-grid (93% of corpus), not centered (80%), not full-bleed-document — it's broken-grid + diagonal-section + immersive-scroll, with every panel composed flush to alternating edges. 3. **Emotional state is the design system.** A single `--warmth` 0→1 variable simultaneously drives palette interpolation (gunmetal/aqua/violet → pink/peach), motion physics (stiff fast easings → soft springy ones), and microcopy register (cold deflection → warm admission). The visitor watches a chrome character literally thaw — a behavioral concept, not a static style. 4. **Typographic dissonance as characterization** — `Orbitron` chrome display (the cold armor) hard-cut against `Caveat` handwriting (the secret soft voice), with the contrast itself carrying the tsundere meaning. The codebase leans heavily on `mono` (93%) and `humanist` (43%); neither Orbitron-as-chrome nor this Orbitron/Caveat pairing is a common move. 5. **Anti-conversion by design** — zero CTAs, pricing, stats, testimonials, forms, or capture of any kind; the page actively *tells the visitor to leave* on its surface while quietly hoping they stay. The "product" is a five-act personality. **Avoided overused patterns (from frequency analysis):** no `hand-drawn` aesthetic (94%), no `glassmorphism` (85% — frosted-aqua here is opaque layered plastic, not blurred glass), no dominant `warm` palette as the *base* (98% — warm is the earned core, cold metal is the surface), no `card-grid` (93%), no `centered`/`full-bleed`-document layout, no `cursor-follow` heavy effect (89% — only a faint optional glint trail), restrained on `parallax` (89%) in favor of scroll-snap flip-panels, and `mono` typography (93%) replaced with chrome display + handwriting. **Chosen seed/style:** `y2k chrome metallic fashion` — *aesthetic: y2k-futurism (MCBling), layout: diagonal-sections + immersive-scroll, typography: futura-geometric→here realized as Orbitron chrome display + Caveat handwritten, palette: chrome-metallic shifting to warm, patterns: spring + card-flip + scroll-triggered + morph, imagery: noise-texture + custom SVG (chrome bevels, holo stickers, butterfly clips), motifs: futuristic + crystalline (faceted chrome), tone: edgy-rebellious surface over warm-inviting core.*