# Design Language for tsundere.style ## Aesthetics and Tone tsundere.style is **a vending-machine compact mirror from a 2003 that never happened** — a chrome-shelled object that snaps open with a cold metallic *clack* and reveals, against all expectations, a soft strawberry-milk interior that has been quietly warm the whole time. The site is built entirely around the *tsundere* archetype as a literal material contradiction: a **cold, frosted, liquid-chrome exterior** that the user must physically pry open, scuff, and provoke before it admits — reluctantly, with a visible flinch — that it is actually a **blushing, glossy, candy-bubbly interior** that wanted to be looked at all along. The aesthetic is **y2k chrome-metallic fashion run through an mcbling lip-gloss filter** — think Sony MiniDisc bodywork, Motorola Razr hinge-snap, the liquid-mercury blobs of early-2000s screensavers, the holographic foil on a limited-edition flip-phone, and the over-saturated bubblegum sheen of a Hello-Kitty face-plate, all colliding on one surface. Nothing here is matte. Nothing here is honest about its feelings on the first hover. The tone oscillates on a dial the user can actually turn: at the cold end it is **clipped, dismissive, arms-crossed, "i-it's not like I built this site for you"**; at the warm end it goes **soft, fizzy, over-eager, dropping its guard mid-sentence and then immediately overcorrecting**. The whole experience is a personality with a temperature, and the temperature is a CSS variable. Mood references: the chrome bevel on a 2002 car stereo faceplate · condensation forming on a pink aluminum can pulled from a freezer · the specific lavender-to-silver gradient of a holographic Pokémon card edge · the *kachunk* of a hard plastic case latch · a glitter pen that skips · the moment a frosted shower door fogs up and someone draws a heart in it and then wipes it away. ## Layout Motifs and Structure The site is a **single vertical descent through a chrome shell that is slowly being forced open** — structured as **stacked-sections** (only 3% in the frequency corpus) where each section is a *panel of the casing*, hinged, beveled, and reluctant. There is no card-grid. There is no bento-box. There is no dashboard. There is one device, scrolled top to bottom, being talked into opening up. - **The Hinge Seam.** Every section boundary is a horizontal *seam* — a 3px bright-chrome highlight line above a 2px charcoal shadow line — rendered as if two pieces of injection-molded casing meet there. As the user scrolls past a seam, the panel above tilts back ~6° on that hinge (CSS `transform-origin` on the seam, `rotateX`), like a flip-phone opening one notch. - **The Temperature Rail.** A fixed vertical element pinned to the right edge (desktop) / bottom edge (mobile): a **chrome thermometer slider** the user can drag. Its position is the global `--warmth` variable (0 = cold, 1 = melted). Everything on the page — copy, color, gloss intensity, animation springiness, the narrator's punctuation — interpolates against it. The page literally warms up or cools down under the user's thumb. This rail replaces all navigation. - **Asymmetric inset blobs.** Within each panel, content sits inside **liquid-chrome blobs** — irregular, organic-edged `border-radius` superellipse shapes (the "screensaver mercury" silhouette) — never rectangles. Text wraps to the blob via `shape-outside`. Blobs are off-center, alternating left/right margin per section, so the descent reads as a chrome lava lamp, not a stack of slides. - **Five panels of the casing:** 1. **Faceplate (Cold).** Mirror-finish chrome. The wordmark "tsundere.style" embossed (debossed, really) into the metal. A line of dismissive copy. The hinge below is sealed. 2. **The Pry.** User scrolls; the seam cracks. A sliver of pink light leaks through the gap. The narrator: "—hey. what do you think you're doing." The casing tilts one notch. 3. **The Scuff.** Cursor leaves smudge-trails on the chrome (see Imagery). The more the user moves, the more fingerprints accumulate, the more the surface "gives." Copy here is the longest stretch of denial — three or four reluctant paragraphs about how this is *definitely not* a site that cares whether you stay. 4. **The Blush.** The shell is now mostly open. Interior revealed: strawberry-milk pink, glossy bubbles, holo-foil. The narrator's voice cracks: "...fine. okay. maybe I— ...don't make it weird." Color floods the page. Bubbles rise. 5. **The Snap-Shut (or not).** At the bottom, a single chrome latch. If `--warmth` < 0.5, the casing slams shut on scroll-up with a *kachunk* and the cold copy returns ("forget it. you saw nothing."). If `--warmth` ≥ 0.5, the latch stays open, a tiny heart fogs onto the chrome, and the narrator mutters "...you can come back. if you want. whatever." — the page remembers via `localStorage`. - **No CTA, no pricing, no stat grid, no testimonials, no email capture.** The only interactive "goal" is the temperature dial and the act of prying. ## Typography and Palette **Fonts (Google Fonts only — a chrome shell with a soft interior needs two opposing voices plus a tiny gloss accent):** - **Display & Wordmark — *Orbitron* (wght 900).** Used for "tsundere.style" and all panel headers. Orbitron's geometric, slightly-too-confident, console-faceplate letterforms are *peak* y2k device-branding — it looks debossed into chrome. Set in `letter-spacing: 0.18em`, uppercase, with a CSS bevel (light text-shadow above, dark below, plus a thin chrome gradient `background-clip: text`). At cold warmth it's tracked wide and rigid; as warmth rises, a subtle `font-stretch`/scale wobble creeps in like the metal is softening. - **Body & Narrator Voice — *Zen Maru Gothic* (wght 400 / 500).** A rounded Japanese-influenced gothic sans with soft, dumpling-like terminals — this is the *interior* leaking out even when the words are cold. The contradiction is the point: a brittle dismissive sentence rendered in a font that physically cannot stop looking gentle. Line-height generous (1.8). At warm end, weight bumps to 500 and letter-spacing loosens slightly, like a held breath releasing. - **Gloss Accent / Stage Directions — *Yusei Magic* (wght 400).** A handwritten-marker face used *only* for the parenthetical asides — the "(she looks away)", "(the chrome creaks)", "(fogging up the mirror)" stage directions that punctuate the narration. It reads like someone scrawled it on the casing with a glitter pen. Tiny (0.8rem), pink, slightly rotated. **Palette — Cold Shell → Warm Core (the `--warmth` variable interpolates between these two columns):** | Role | Cold (warmth 0) | Warm (warmth 1) | |---|---|---| | Background base | `#C8CDD6` chilled aluminum | `#FFE3EE` strawberry milk | | Surface / chrome blob | `#E9EDF2` mirror-silver → `#9AA3B0` bevel-shadow gradient | `#FFB7D2` glossy bubblegum → `#FF7AAE` | | Ink / narrator text | `#2A2E38` gunmetal | `#7A2548` deep raspberry | | Highlight / leak-light | `#B8E3FF` cold cyan flare | `#FFF0A8` warm honey flare | | Holo-foil shimmer (always animated) | `#A98FE0` lavender ↔ `#7FE8D8` mint ↔ `#F5A3C7` rose — a 3-stop conic gradient that slowly rotates regardless of warmth | | Accent / heart / blush | `#FF5C9A` hot pink (only fully visible past warmth 0.5) | Two anchor extremes always present regardless of dial: **`#1B1E26` (the deepest seam-shadow, the line of true cold)** and **`#FFFFFF` (the chrome specular hotspot, the catchlight that never warms)**. Everything has a glossy top-edge highlight; nothing is allowed to be flat. ## Imagery and Motifs **No photography. No 3D renders. No stock illustration. Everything is SVG, CSS gradient, or `` — built to look like injection-molded plastic, brushed chrome, and lip gloss.** - **The Chrome Blob (hero motif).** Liquid-mercury superellipse shapes with animated specular highlights — a moving white hotspot that drifts across the surface as the cursor moves (radial-gradient following pointer). These are the "screensaver bubbles" frozen mid-merge. They reflect a faint distorted gradient of whatever's behind them. - **Smudge & Fingerprint trails.** The cursor leaves **temporary oily smudges** on the chrome — soft, low-opacity organic blobs with concentric fingerprint-ridge SVG patterns inside, fading over ~4 seconds. Accumulated smudges near a seam visibly "loosen" it. This is the *provocation* mechanic made visible: you have to get your fingerprints on the cold surface before it gives. - **The Hinge Highlight.** Every seam is a CSS-drawn bevel: 1px white, 2px `#E9EDF2`, 1px `#1B1E26` — the unmistakable edge of two casing halves. On hinge-tilt, a sharp animated specular sweep runs along it. - **Holo-foil edges.** Section blobs and the wordmark have a **1.5px holographic foil rim** — a slowly-rotating conic gradient (lavender→mint→rose) clipped to the border, like the edge of a special-edition trading card. Always alive even when the page is "cold." - **Rising bubbles (warm only).** Past warmth 0.5, translucent pink soap-bubbles drift upward from the bottom — each a tiny chrome blob itself, with a rainbow film sheen, popping silently at the top. Density scales with `--warmth`. - **The Fogged Heart.** The end-state motif: a heart "breathed" onto the chrome (a soft-edged `filter: blur` white shape with a faint condensation-droplet texture), drawn with an SVG path-stroke animation, that the narrator immediately tries to wipe (a quick eraser-swipe mask) and only half-succeeds — a smudgy heart-ghost remains. - **Glitter-pen scribbles.** The Yusei Magic stage directions sit beside tiny hand-drawn SVG sparkle marks (4-point stars, the glitter-pen kind) that twinkle on a stagger. - **Casing screws & vents.** Decorative faux Phillips-head screws in panel corners and tiny molded speaker-grille dot-grids — pure y2k device skeuomorphism, debossed into the chrome with inset shadows. ## Prompts for Implementation Build tsundere.style as **one HTML file, one CSS file, one JS module** — a single vertical scroll through a chrome device being talked into opening up. The whole site is the act of warming a tsundere. Target ~70–90 seconds of scrolling. **No CTA. No pricing block. No stat grid. No testimonial row. No contact form. No email signup. No nav bar.** Just the casing and the temperature dial. **The `--warmth` engine.** A single root CSS custom property `--warmth` (0→1), driven by (a) the chrome thermometer slider the user drags, and (b) a slow auto-creep as the user scrolls deeper and leaves more smudges (provocation = warmth). Use `color-mix(in oklab, var(--cold-x), var(--warm-x), calc(var(--warmth)))` for every interpolated color. JS reads `--warmth` to switch the narrator's copy register, animation spring stiffness (cold = stiff/snappy `cubic-bezier(.9,.03,.69,.22)`, warm = bouncy spring overshoot), and bubble density. Persist final state in `localStorage` so a returning visitor finds the shell where they left it ("...oh. it's you again."). **Scroll storytelling (five casing panels, hinge-seam transitions):** 1. **Faceplate.** Full-bleed mirror chrome. "tsundere.style" debossed in Orbitron, holo-foil rim crawling. One line of Zen Maru Gothic: *"...what. it's just a website. don't look at me like that."* A `(arms crossed)` in Yusei Magic. The seam below is sealed shut — a hairline. 2. **The Pry.** On scroll, the seam cracks open ~12px; pink light (`#FFB7D2` at low opacity, blooming) leaks through. The faceplate hinge-tilts back 6°. Narrator: *"—h-hey! who said you could keep scrolling?"* `(the chrome creaks)`. First smudge trails become enabled here. 3. **The Scuff.** The longest panel. Chrome surface fully smudge-reactive — cursor leaves fading fingerprint blobs; a small visible "give" meter is implied by how loose the next seam looks. Three reluctant Zen-Maru paragraphs of pure denial — about how this is *definitely* not a site that was made carefully, that the gradients *definitely* weren't tuned for hours, that it *doesn't care* if you bookmark it. Each paragraph ends with a `(...)` Yusei Magic aside that undercuts the previous sentence. Holo-foil intensifies subtly with warmth. 4. **The Blush.** The casing splits wide. Interior floods in: strawberry-milk background, glossy bubblegum blobs, holo everywhere, bubbles begin rising if warmth ≥ 0.5. Orbitron header softens its tracking. Narrator's voice cracks mid-line — render the break literally with a CSS `::after` ellipsis that types in: *"...okay fine. maybe I— ...maybe I'm glad you stayed. there. I said it. don't— don't make it a whole thing."* Big pink heart starts to fog onto a chrome inset. 5. **The Latch.** A single chrome latch at the very bottom. The Fogged Heart finishes drawing, then a quick eraser-swipe half-wipes it (smudge-ghost remains). If `--warmth` < 0.5 by now: scrolling up triggers a `kachunk` snap-shut animation (whole page chrome-flips closed, cold copy returns: *"forget it. you didn't see anything."*). If `--warmth` ≥ 0.5: latch stays open, heart-ghost stays, footer-whisper in tiny Zen Maru: *"...you can come back. if you want. it's not like I'll be waiting or anything."* **Motion vocabulary:** hinge `rotateX` tilts on seams · pointer-following specular hotspots on every chrome surface · smudge-trail spawn-and-fade on `mousemove` (throttled) · `kachunk` latch snap (sharp scale+rotate, audible-feeling easing) · holo conic-gradient slow rotation (always, ~20s loop) · bubble rise on warm · SVG path-draw for the fogged heart · stagger-twinkle on glitter sparkles · the Orbitron wordmark does a tiny involuntary "flinch" (1px jitter) the first time the cursor touches it. Prefer `transform`/`opacity`. Honor `prefers-reduced-motion` by freezing hinges open at a neutral warmth and disabling bubbles/jitter — the device just sits there, slightly ajar, mildly embarrassed. **Tone of copy:** every sentence is a tsundere line. Cold register = clipped, defensive, second-guessing the visitor's motives. Warm register = fizzy, over-explaining, then panicking and walking it back. Never break character. The site never says "welcome" — it says "...you're still here?" ## Uniqueness Notes Differentiators, each a deliberate departure from the frequency corpus: 1. **Temperature as a literal UI control replacing navigation.** No nav bar, no menu — the only persistent control is a chrome thermometer slider that drives a global `--warmth` variable interpolating *every* color, animation curve, copy register, and particle density via `color-mix`/`oklab`. The user physically warms up a personality. I have not seen "drag-to-warm a tsundere" used as a navigation paradigm anywhere in the corpus. 2. **y2k chrome-metallic + mcbling as a *contradiction material*, not a vibe.** y2k-futurism sits at 2% and mcbling at 1% in the aesthetic frequency analysis; both there are usually played straight (glossy fashion, chrome product shots). Here the cold chrome shell and the warm lip-gloss interior are two literal halves of an injection-molded casing the user has to pry open — the archetype made physical. 3. **Stacked-sections + hinge-seam transitions instead of card-grid/bento-box.** stacked-sections is 3% in the layout corpus; this site uses each section as a *panel of a flip-phone casing* with `rotateX` hinge-tilts on beveled chrome seams — the dominant card-grid (93%) / bento-box (17%) / dashboard (35%) patterns are entirely refused. 4. **The smudge/fingerprint provocation mechanic.** Cursor movement leaves fading oily fingerprint trails on the chrome that visibly "loosen" the next seam — provocation literally becomes warmth. Cursor-follow exists at 89% but as a decorative parallax dot; here it is a tactile, accumulative mechanic with narrative consequence. 5. **In-character copy with a register that mutates on the warmth dial.** The narrator's punctuation, vocabulary, and self-correction patterns change as `--warmth` rises — and the end-state ("snap shut" vs "stays ajar, heart-ghost remains") persists in `localStorage`. No "welcome", no CTA, no testimonials — the site greets returning visitors with "...oh. it's you again." **Avoided patterns from frequency analysis:** card-grid (93%), full-bleed-as-default, glassmorphism (85%), hand-drawn (94%), photography (98%), warm-default palette (98%) — refused in favor of a *cold-default* chrome palette that only warms under interaction; cursor-follow-as-decoration; bento-box; dashboard; CTA/pricing/stat-grid layouts. **Chosen seed/style:** *y2k chrome metallic fashion* — expressed as `aesthetic: y2k-futurism, layout: stacked-sections, typography: futura-geometric, palette: chrome-metallic, patterns: morph, imagery: glassmorphic-cards, motifs: futuristic, tone: playful` — recombined into a tsundere-archetype device that the visitor warms up by hand.