# Design Language for tsundere.design ## Aesthetics and Tone tsundere.design is **a website that doesn't want you here — and then desperately, secretly does.** The entire aesthetic is built on a single emotional mechanic borrowed from the archetype its domain names: a cold, spiky, almost-hostile exterior (the *tsun*) that, under sustained attention and gentle interaction, cracks open to reveal an embarrassingly warm, blushing, hand-lettered interior (the *dere*). The site is not "playful" in the bubbly-rounded sense — it is **prickly-playful**, a slammed door with a note slipped underneath it. The opening state is **deliberate anti-design**: hairline-thin borders that look like they were drawn with a dull pencil, system-default-feeling type set too small and slightly misaligned, an icy near-monochrome wash, and copy that is curt to the point of rudeness ("Fine. You're here. Don't touch anything."). It reads like a brutalist personal blog that resents having a homepage. This is the mask. Then the **warming happens** — not on a timer, but as a *response*. Hovering lingers, the cursor stays still, the scroll slows, a section is read top to bottom: each act of patience nudges a global "affection" value upward. As it rises, the page **physically blushes**: icy grays bleed toward dusty rose and warm cream, the pencil-thin borders thicken and go hand-drawn-wobbly, a second typeface — a flushed, looping handwriting — fades in over the cold mono, and the copy edits itself mid-sentence ("Don't touch anything. ...okay maybe that one thing. It's nice. I made it for— nevermind."). Look away, idle too long, scroll too fast, and it **cools back down**, snapping shut, pretending the warmth never happened ("Forget it. I didn't say that."). Tone words: **edgy-rebellious on the surface, whimsical-creative underneath**, with a thread of **mysterious-moody** in the cooling transitions. The site has a personality and that personality is *tsundere* — the design IS the character. ## Layout Motifs and Structure The composition is a **single vertical document — a "diary that argues with itself"** — built on a deliberately **broken grid**: a strict, cold 12-column skeleton that everything in the *tsun* state snaps rigidly to (left-aligned, cramped, margins too tight on the right like the page is turned away from you), and that the *dere* state gradually *loosens* — elements drift a few degrees off-axis, gain breathing room, overlap slightly, as if relaxing their shoulders. - **The cold spine.** A 1px vertical rule runs down the left third of every section in the *tsun* state — rigid, ruler-straight, the posture of someone with arms crossed. As affection rises, this spine **curves**, becomes a hand-drawn squiggle, sprouts tiny doodled hearts at the section joints that the page immediately tries to erase (a brief scribble-out animation) if you look directly at them. - **Six "moods" stacked vertically**, not "sections" — each is a beat in the same sulking-then-softening cycle, at different intensities: 1. **The Door** (intro / wordmark) — maximally cold, near-empty, hostile. 2. **The Cold Shoulder** (what this is) — text turned away, set in a narrow column hugging the left spine. 3. **The Crack** (the work / examples) — the first place warmth leaks; cards that are gray rectangles until hovered, then blush and reveal hand-lettered captions. 4. **The Confession** (the manifesto / longer prose) — the warmest mood; full-width, looping handwriting, but every few lines a word gets struck through and "corrected" colder. 5. **The Snap-Back** (a deliberate cooldown moment) — the page over-corrects, goes briefly *colder than the start*, copy goes terse and clipped, then slowly thaws again — teaching the visitor the mechanic explicitly. 6. **The Note Under the Door** (footer / sign-off) — small, low, warm but trying not to be; the last line fades between a cold version and a warm version forever, never settling. - **No nav bar.** Navigation, if it appears at all, is a single sulky word in the corner ("up?") that only becomes a real "back to top" control once affection crosses a threshold. - **Asymmetric weighting throughout** — content lives left-of-center in cold states, drifts toward center as it warms, never goes fully symmetric (that would be admitting something). ## Typography and Palette **Fonts (Google Fonts only — a cold voice and a warm voice, in argument, never blended):** - **Cold voice / structure — *Anonymous Pro* (mono).** The default state. Small (14–15px body), tight tracking, used for all the curt copy, labels, the rigid grid annotations, and the wordmark in its closed state. Chosen because it reads like a terminal that doesn't care about you — utilitarian, a little brittle, no warmth in its curves. - **Warm voice / confession — *Caveat* (handwritten).** Fades in *on top of* or *replacing* the mono as affection rises — looping, hurried, slightly slanted, the handwriting of someone writing fast so they can pretend they didn't mean it. Used for the revealed captions, the manifesto's warmest lines, the doodled hearts' "labels," and the final never-settling sign-off. At peak affection it's set large (28–40px) and a touch transparent, like it's blushing through the page. - **The wordmark accent — *Big Shoulders Stencil Display* (display-bold / condensed).** Used ONCE, huge, for "tsundere" in the intro — set in icy gray, all caps, stencil gaps making it look guarded and incomplete. As the page warms the very first time, the stencil gaps **fill in** with rose, and a tiny *Caveat* "...design ♡" appears beside it, then gets half-scribbled-out. **Palette — a duotone that physically warms (cold pole → warm pole), interpolated live:** - **Cold pole (tsun):** - `#E7EAEE` — Frost Paper (the cold background; the color of a turned-away page) - `#9AA3AD` — Pencil Gray (hairline borders, the cold mono text in mid-states) - `#2B2F36` — Slate Ink (cold headline / wordmark; near-black with a blue bias, never truly black — it's *sulking*, not dead) - `#5C7C99` — Cold Stare Blue (the only accent in the closed state; used sparingly, like a glance) - **Warm pole (dere):** - `#FBF3EC` — Cream Confession (the warmed background) - `#E8A4A0` — Blush Rose (the blush; borders thicken into this, type tints toward it) - `#C16B6B` — Flushed Coral (the warm accent; doodled hearts, the filled stencil, hover states at peak) - `#7A3B3B` — Warm Ink (the warm headline color; a deep dusty brick — the warmth is *real* but still a little embarrassed) - **The mechanic:** every color above is a CSS custom property interpolated between its cold and warm value by a single `--affection` variable (0 → 1). At 0 the site is `#E7EAEE`/`#9AA3AD`/`#2B2F36`/`#5C7C99`. At 1 it's `#FBF3EC`/`#E8A4A0`/`#C16B6B`/`#7A3B3B`. Everything in between is a literal blush. ## Imagery and Motifs **No photography. No 3D. No stock anything. Every visual is SVG or CSS, hand-built, and exists in a cold form and a warm form.** The imagery vocabulary is the visual language of a sketchbook someone is hiding: - **The Hairline / The Wobble.** Borders and rules begin as crisp 1px strokes (cold) and, as affection rises, gain a hand-drawn jitter — an SVG `filter` displacement that makes them waver like they were drawn nervously. This is the single most important motif: *straightness = cold, wobble = warm.* - **The Doodled Heart that gets scribbled out.** Tiny hand-drawn hearts (rough SVG paths, never clean) appear at section joints and beside warmed copy as affection rises. The instant the cursor moves near one, a fast scribble-out stroke animates over it (`path-draw-svg`, ~250ms) and the heart "hides." Move away and it sheepishly redraws itself. The visitor can never quite catch the page being affectionate. - **The Struck-Through Word.** In warm prose, individual words get a hand-drawn strikethrough and a colder substitute appears above them — "I worked really hard on" → strike → "this is fine I guess". An ongoing self-editing motif. - **The Crossed Arms.** The left "spine" rule, in its cold state, is doubled — two parallel vertical strokes, the posture of crossed arms. They uncross (rotate apart, become one curve) as warmth peaks. - **The Margin Note.** Small *Caveat* annotations in Blush Rose appear in the outer margin — half-thoughts, the page talking to itself ("...why are they still reading", "stop smiling, idiot"). They fade out the moment that part of the page is scrolled past, as if snatched back. - **The Closing Brackets.** A faint pair of `[ ]` brackets frames the cold wordmark — guarded, contained. As the page warms the first time the brackets soften into `( )` then into a single hand-drawn arc, then vanish. - **Texture:** an extremely subtle paper grain over the whole page, slightly more visible (warmer-toned) at high affection — the page becoming a real, touchable diary rather than a cold screen. ## Prompts for Implementation Build tsundere.design as **one HTML file, one CSS file, one JS module — a single vertically-scrolled "diary that argues with itself."** No CTA, no pricing block, no stat grid, no testimonial row, no contact form, no signup, no feature cards in the marketing sense. There is only the six-mood scroll and the affection mechanic. **The core mechanic — `--affection` (0 → 1):** - A single global float, eased toward a target. **Increases** on: cursor held still over content (the longer the slower-decaying the gain), slow scrolling, a section fully scrolled through, hover-lingering on a "Crack" card past ~800ms, the tab being focused and active. **Decreases** on: fast scrolling (scroll velocity above a threshold), the cursor leaving the viewport, the tab blurring, idle-with-no-scroll beyond ~12s (the page assumes you've lost interest), and one *deliberate* hard drop at the "Snap-Back" mood. - `--affection` drives, via CSS custom-property interpolation: all 8 palette colors (cold pole → warm pole), border-width (1px → ~3px), an SVG turbulence/displacement amount on borders (0 → wobbly), the opacity of the *Caveat* layer (0 → ~0.9), the visibility of doodled hearts, the rotation of off-axis elements (0deg → up to ±2deg of "relaxed" drift), and the swap of copy strings (each blushy line has a cold variant and a warm variant; cross-fade between them on a per-element basis as `--affection` crosses that element's threshold). - Respect `prefers-reduced-motion`: keep the color/copy warming (it's the soul of the site) but disable the wobble displacement, the scribble-out strokes, and the drift rotation — let it warm calmly instead. **Storytelling structure (six moods, vertical scroll):** 1. **The Door.** Near-empty icy screen. `[ tsundere ]` huge in Big Shoulders Stencil, stencil gaps open, in Slate Ink on Frost Paper. One line of Anonymous Pro below: "Fine. You're here. Don't touch anything." A 1px ruler-straight left spine (doubled — crossed arms). First time `--affection` ticks up at all, the stencil gaps begin to fill with coral and a faint "...design ♡" in Caveat ghosts in beside it, then gets a quick scribble-stroke over the heart. 2. **The Cold Shoulder.** Narrow text column hugging the left spine, turned-away feeling, lots of dead space on the right. Anonymous Pro prose, curt: what this place is, told grudgingly. Margin notes in the (still mostly invisible) outer column waiting to bloom. 3. **The Crack.** A loose row/stack of "work" tiles — flat Pencil-Gray rectangles, unlabeled. On hover-linger each one **blushes** (its local affection rises faster), thickens its border into Blush Rose, gains a hand-lettered Caveat caption that writes itself in, and a tiny doodled heart in the corner that scribbles out if you mouse toward it. Mouse away and the tile cools, caption fades, but a *little* warmth lingers (it doesn't fully reset — it remembers you looked). 4. **The Confession.** Full-width, the warmest mood — Caveat large and slightly transparent over a Cream Confession ground, Warm Ink headlines. A genuine little manifesto about caring about design while pretending not to. Every few lines, a word gets a hand-drawn strikethrough and a colder Anonymous-Pro substitute pops in above it. Doodled hearts at the paragraph breaks, all skittish. 5. **The Snap-Back.** A hard, deliberate `--affection` drop on enter — the page goes *colder than the Door*, copy clips to fragments ("Forget it." / "I didn't say that." / "..."), the spine snaps back to crossed arms, borders go knife-straight. Then, slowly, as the visitor stays, it thaws again — this mood teaches the mechanic out loud, in the page's own sulky voice. 6. **The Note Under the Door.** Small, low, near the bottom-left. A Caveat sign-off that **never settles** — it cross-fades on a slow loop between a cold version ("ok bye") and a warm version ("...thanks for staying. don't make it weird.") forever. A single corner control, "up?", that only becomes a working scroll-to-top once `--affection` has crossed ~0.5 at least once. **Implementation notes:** - Border wobble: an SVG `` with `feTurbulence` + `feDisplacementMap`; animate the `baseFrequency`/`scale` via JS in lockstep with `--affection`. Apply selectively to spines, card borders, and the heart paths. - Scribble-out: pre-authored rough SVG stroke paths over each heart; reveal with `stroke-dashoffset` on cursor-proximity, hide on cursor-distance. Keep them fast (~200–250ms) so they feel like a flinch. - Copy-swap: store cold/warm string pairs in data attributes; cross-fade with opacity layering, triggered per element by its own `--affection` threshold so the warming feels uneven and organic, not like one global switch. - Keep all motion *small and reactive* — this is not a parallax spectacle; it's a character study. The biggest "animation" in the site is a background color slowly becoming pink because someone was nice to it. ## Uniqueness Notes Differentiators, each a deliberate departure from the patterns in the frequency analysis: 1. **The design is a character with a mood that responds to your patience.** No other site in the corpus has a single global "affection" state that warms the entire palette, typography, copy, and border geometry in real time based on how gently you interact — and that *cools back down* and pretends it didn't happen. The interactivity isn't decoration; it's the narrative. 2. **anti-design / neubrutalism used as a *mask*, not a *style*.** anti-design sits at ~5% and neubrutalism at ~1% in the aesthetic frequency analysis, and where they appear they're worn straight. Here the cold brutalist shell exists *only to be cracked* — the site is anti-design that secretly wants to be a hand-lettered diary, which inverts how the corpus uses the aesthetic. 3. **Copy that edits itself in front of you.** Struck-through warm words being "corrected" colder, sign-offs that never settle, margin notes snatched back — the text is animated as *behavior*, not as a typewriter effect. Distinct from the corpus's common `typewriter-effect` (16%) and `counter-animate` (18%). 4. **A duotone that is literally a blush.** Duotone sits at ~11% in palette; almost always static. This one is two *poles* interpolated live by `--affection` — Frost Paper → Cream Confession, Pencil Gray → Blush Rose, Cold Stare Blue → Flushed Coral — so the color is a feeling changing, not a fixed scheme. 5. **No nav, no CTA, no spectacle — deliberately small reactive motion.** Against the corpus's heavy lean on `parallax` (89%), `cursor-follow` (89%), and `tilt-3d` (32%), the most dramatic thing this site does is slowly turn pink because you were patient with it. Restraint as personality. Chosen seed / style: **neubrutalism raw edges blog** — reinterpreted as a tsundere mask (aesthetic: anti-design + neubrutalism shell over hand-drawn/handwritten core; layout: broken-grid + asymmetric; typography: mono cold voice + handwritten warm voice + display-bold stencil wordmark; palette: duotone interpolated cold↔warm; patterns: path-draw-svg + fade-reveal + micro-interactions + scroll-triggered; imagery: hand-drawn + noise-texture; motifs: sharp-angles softening to flowing-curves; tone: edgy-rebellious surface, whimsical-creative core). Avoided patterns from the frequency analysis: glassmorphism (85%), hand-drawn-as-default-aesthetic in the bubbly-warm sense (94% — used here only as the *reveal*, contrasted against a cold shell), card-grid (93% — the "Crack" tiles are a loose stack, not a grid), full-bleed hero spectacle, cursor-follow blobs (89%), parallax sections (89%), tilt-3d (32%), gradient-warm-everything (the warmth here is earned and reversible, not a default sunset), and all CTA/pricing/stat-grid/testimonial structures.