# Design Language for tsundere.today ## Aesthetics and Tone tsundere.today is a **daily emotional oracle that refuses to admit it cares about you.** Every day it generates one reading — a mood, a forecast, a sliver of unsolicited advice — and delivers it through an interface that is *prickly on the surface and helplessly tender underneath.* The name says it: tsun-tsun (cold, sharp, dismissive) over dere-dere (warm, devoted, blushing). The whole site is a personality, and the personality is a contradiction held in tension. The visual language is **Y2K-futurism by way of mcbling** — the turn-of-the-millennium chrome-and-gloss aesthetic of flip-phone charm dangles, holographic trapper-keepers, lip-gloss tubes with glitter suspended inside, Hello-Kitty-meets-Windows-XP, the bubblegum-cyber optimism of 1999–2004. Liquid chrome lettering. Aqua-style glass buttons that look *edible.* Tiny rhinestone studs. Star-burst sparkles. Pearlescent gradients that shift hot-pink → lavender → ice-blue as you move. But this is not nostalgia for its own sake — the chrome is *armor.* The site presents hard, reflective, deflecting surfaces (the tsun), and only when you linger, hover, idle, or scroll deeper do the surfaces fog up, warm to skin temperature, and leak the soft pink underglow (the dere). Mood: **defensive sweetness.** Sharp typographic asides ("don't read into this." / "i didn't make this for you." / "...whatever."). Then, a half-beat later, the same UI quietly does something kind — saves your last reading, dims itself when you've been staring too long, leaves a little heart in the corner that it pretends it didn't draw. The tone is *flustered, contrary, secretly attentive.* Never cynical, never mean — a tsundere is never actually cruel, just bad at vulnerability. It is **not** a horoscope app, not a wellness brand, not a chatbot. It is one page that wakes up each day in a slightly different mood and tells you about it whether you asked or not. ## Layout Motifs and Structure **Layered-depth** composition — the page is built from stacked translucent panes (a "compact case" metaphor: like the hinged lid of a glittered cosmetics compact, or a Y2K flip-phone). Three z-planes: 1. **The Shell (back plane):** a slow-moving pearlescent chrome gradient field, edge-to-edge full-bleed, with faint embossed star outlines and a hairline rhinestone-stud border that runs the full perimeter of the viewport like the trim on a jeweled phone case. 2. **The Compact (mid plane):** a single large rounded-rectangle "lid" — heavy radius (28–40px), thick glossy bevel, a specular highlight streak across the top third that tracks the cursor like light sliding off lacquer. This is where today's reading lives. It opens with a hinge-flip animation on load. 3. **The Charms (front plane):** small floating UI ornaments — a draggable heart pendant, a tiny mirror-tile that reflects a blurred copy of the gradient, a "do not read" sticker peeling at one corner, a rotating star-burst — that drift with subtle parallax and physics (spring + elastic), bumping gently off the compact's edges. Vertical flow, **single long descent**, but staged as a sequence of *moods rather than sections*: - **Overture — "...what."** Black-mirror screen. A chrome bead of light slides down from top, hits center, blooms into the title `tsundere.today` rendered in liquid metal. A typed line appears character by character: `you're early. i wasn't ready. ...fine.` Then the compact flips open. - **Mood I — Today's Reading.** The headline reading in oversized chrome display type. Below it, in small humanist type, the "real" message — softer, lowercase, almost apologetic. A date stamp styled like an engraved serial number on the back of a device. - **Mood II — The Forecast.** A horizontal row of 3–5 glossy "candy" tiles (one per upcoming day), each pearlescent, each with a one-word mood. They look like pressed gummies. Hovering one makes it wobble (elastic) and fog with a warm pink bloom; the tile murmurs a half-sentence it clearly didn't want to share. - **Mood III — Unsolicited Advice.** A single sentence, centered, in the largest type on the page, kinetic — the words assemble from scattered chrome fragments that magnetically snap into place. Underneath, tiny: `i'm not saying it for your sake.` - **Mood IV — The Drawer.** A pull-tab at the bottom labeled `don't open this`. Dragging it open reveals a small archive of the last several readings, each on a little holographic card, plus a hidden line: `i kept these. so what.` - **Coda — Sign-off.** The compact flips shut. The screen darkens. A single tiny heart fades in at bottom-center, then the cursor-light catches it and it skitters away. `...come back tomorrow. or don't. i don't care.` No nav bar. No hamburger. No footer links. No max-width content well — the Shell bleeds to all four edges; the Compact is centered with generous negative space (the chrome breathing room is the point). No CTAs, no pricing, no stat grids, no testimonials, no email capture beyond the diegetic "drawer." ## Typography and Palette **Typefaces (all Google Fonts, all verified available):** - **Orbitron** — the chrome display face. Used *only* for `tsundere.today`, the daily reading headline, and the big "unsolicited advice" line. Geometric, slightly techno, just retro-futuristic enough to read as a 2002 product logo. Rendered with a CSS liquid-metal treatment: layered text-shadows, a clipped linear-gradient fill (silver → white-hot highlight → cool steel), and a soft drop bevel. Heavy weights (700–900). Tight letter-spacing on the wordmark, slightly looser on headlines. - **Baloo 2** — the "dere" voice. Rounded, soft, bubbly — almost gummy. Used for the small confessional lines, the forecast mood words, button labels, the drawer's secret notes. Always lowercase. Weights 400–600. This is the typeface that's bad at hiding feelings. - **Inter** — the neutral connective tissue: dates, captions, the "serial number" stamp, fine print on the holographic cards. Tight, quiet, unsentimental. 400/500, occasionally tracked-out for the engraved-metal labels. Hierarchy: Orbitron for the loud deflecting surface; Baloo 2 for the soft contradicting whisper directly beneath it; Inter for anything procedural. **Palette:** - `#0B0B12` — *Mirror Black.* The overture screen, the compact-shut state, deepest shadow. The black a chrome phone reflects when it's off. - `#E9EDF5` — *Liquid Silver.* The base of all chrome surfaces — the cool, hard, reflective default. - `#FFFFFF` — *Specular White.* Highlight streaks, the hottest point of every gradient, the rhinestone glints. - `#FF6FB5` — *Tsun Pink (Blush).* The dere underglow — bloom on hover, the heart, the warm fog that creeps in when you idle. Hot bubblegum. - `#C8A8FF` — *Lavender Holo.* The pearlescent mid-tone; the holographic shift between pink and ice. - `#A6E3FF` — *Ice Aqua.* The cool end of the pearlescent shift; the "...whatever" coolness; Aqua-button glass. - `#7A8194` — *Steel Cool.* The recessed chrome, bevels, the under-shadow of every glossy element. Default state skews **silver + steel + ice** (cold, metallic, deflecting). Warmth (pink, lavender) is *earned* — it blooms in on dwell, hover, scroll-depth, and idle, then slowly recedes when you move away, like someone catching themselves being nice and going cold again. ## Imagery and Motifs - **Liquid chrome lettering.** The signature. Built purely in CSS — no raster images. Gradient-clipped text, multi-layer shadows for the bevel, an animated specular streak that follows the cursor's x-position across the wordmark. - **The compact / flip-phone shell.** A heavy glossy rounded rectangle with a visible "hinge" seam, a bevel that catches light, and a screen-glass overlay (subtle inner shadow + a single diagonal highlight gleam). - **Rhinestone studs & sparkle bursts.** Tiny CSS-drawn 4-point star-bursts and circular "rhinestone" dots (radial-gradient + bright highlight pixel) scattered sparsely along borders and at moments of emotional leakage. They twinkle (opacity + scale shimmer) on a slow random cadence — never gaudy, just enough glint. - **Pearlescent / oil-slick gradients.** Conic and linear gradients that cycle pink → lavender → aqua, slowly drifting and reacting to pointer movement (the angle of the gradient tilts toward the cursor like light on a CD-R). - **Candy / gummy tiles.** The forecast days: glossy, slightly translucent, soft inner highlight, a faint sugar-grain noise texture. They look pressed and edible. - **The peeling sticker.** A small "don't read this" / "do not open" label, drawn flat, with one corner curled (CSS transform + a drop shadow under the curl). It re-sticks itself if you try to peel it fully, then mutters about it. - **The heart it pretends it didn't draw.** A single small heart that appears at quiet moments (idle, coda), gets "noticed," and flees from the cursor with spring physics. Never permanent. Plausible deniability. - **Engraved serial-number stamps.** Dates and metadata set like the laser-etched fine print on the back of a 2003 gadget — Inter, tracked out, low-contrast, slightly inset. - **Fog-on-glass.** When you dwell, a soft pink-white fog (blurred radial gradient, low opacity) creeps over the chrome from the edges inward, as if the cold surface is warming and condensing. It clears when you move on. ## Prompts for Implementation Build **one long full-bleed HTML page** — no SPA router, no modals, no nav chrome, no footer. Five moods + overture + coda, scrolled top to bottom. Every surface is CSS-rendered chrome and glass; no photographs, no stock imagery — the entire visual is gradients, shadows, blurs, and a few SVG sparkle/heart shapes inlined. Prioritize *atmosphere and character over information.* This is a daily ritual object, not a product page. **The core dramatic device — tsun → dere transitions.** Everything starts cold (silver/steel/ice, hard bevels, sharp deflecting copy). Warmth is *triggered, not default.* Implement: - **Cursor-follow specular light:** a bright highlight streak across chrome surfaces (especially the wordmark and the compact lid) whose position maps to pointer x; the pearlescent gradient angle tilts subtly toward the pointer. Magnetic pull on the floating charms. - **Dwell/idle warming:** if the pointer rests near an element (or the page goes idle ~6s), pink/lavender fog blooms in over the chrome, the heart fades up, copy softens (a "real" line cross-fades over a dismissive one). On movement, it cools back over ~1.5s — caught being nice, retreating. - **Scroll-triggered reveals (stagger):** each mood enters as scattered chrome fragments that magnetically snap together (the "unsolicited advice" line especially); forecast tiles stagger in with elastic overshoot. - **Hover physics:** forecast gummy tiles wobble (elastic), fog warm, and reveal a half-whispered line. Buttons are Aqua-glass: glossy, with a press-down squish (spring) and a tiny ripple of sparkle on release. - **The compact flip:** on load, after the overture, the lid does a 3D hinge-open (rotateX, perspective, with a chrome glint sweeping across mid-flip). On the coda it flips shut and the screen goes Mirror Black. - **Typewriter overture:** the opening lines type in character-by-character with a blinking caret, with deliberate `...` pauses (the hesitation is the personality). - **The drawer:** a draggable pull-tab at the bottom; dragging it open (with spring resistance) slides up the archive of holographic reading cards. It says `don't open this` until opened, then `...fine. i kept them.` - **Peeling sticker micro-interaction:** drag the "do not read" corner; it stretches then snaps back with an elastic re-stick and a muttered aside. - **The fleeing heart:** spawns at idle/coda, then on cursor proximity darts away with spring physics, leaving a tiny sparkle trail, and the page pretends nothing happened. Daily content: the page should *feel* like it changes each day even if the build is static — seed the reading/forecast/advice from the current date so it's deterministic-per-day. Copy voice throughout: clipped, contrary, lowercase confessions; an em-dash and a `...` are the punctuation of a tsundere. Examples of the rhythm — headline (Orbitron, loud): `TODAY: SHARP EDGES.` then beneath (Baloo 2, small, soft): `...but i hope you're being gentle with yourself. don't tell anyone i said that.` **AVOID:** no CTA buttons ("Get Started", "Sign Up"), no pricing tables, no stat/number grids, no testimonial carousels, no feature-comparison blocks, no email-capture forms outside the diegetic drawer, no FAQ accordion. No generic SaaS hero with a screenshot. No corporate friendliness — the warmth here is *reluctant.* ## Uniqueness Notes **Differentiators from sibling designs:** 1. **The interface has a personality disorder by design.** Other sites have a consistent mood; tsundere.today *contradicts itself in real time* — every cold surface is wired to a warm one, and the warmth is earned through dwell/idle/scroll rather than given freely. The tsun→dere state machine (cool default → triggered bloom → reluctant retreat) is the entire interaction model and appears nowhere else in the corpus. 2. **Y2K-futurism / mcbling chrome-and-gloss aesthetic** — liquid-metal CSS lettering, Aqua-style glass buttons, rhinestone studs, pearlescent oil-slick gradients, a flip-phone-compact layout metaphor. This is a deliberately *underused* aesthetic family (y2k-futurism ~2%, mcbling ~1% in the corpus) and it's executed without a single raster image. 3. **A "daily ritual object" rather than a website.** Content is date-seeded so the page feels like it woke up in a new mood today; the structure is a sequence of *moods*, not sections; it opens and closes like a physical compact. No other site frames itself as a once-a-day check-in delivered by a reluctant oracle. 4. **Diegetic UI ornaments with plausible deniability** — the fleeing heart, the self-re-sticking "don't read this" sticker, the drawer labeled `don't open this`, the dwell-triggered fog-on-glass. Interactions that perform embarrassment. 5. **Copy is the design.** Lowercase, clipped, em-dash-and-ellipsis confessions layered under loud chrome headlines — the typographic relationship between Orbitron (deflection) and Baloo 2 (the soft truth right beneath it) is a structural motif, not decoration. **Chosen seed/style:** `y2k chrome metallic fashion` — expressed as `aesthetic: y2k-futurism (+ mcbling), layout: layered-depth, typography: futura-geometric / playful-rounded, palette: chrome-metallic (+ candy-bright accents), patterns: cursor-follow + elastic + spring + magnetic, imagery: glassmorphic-cards (CSS-only, no photography), motifs: star-celestial / floating-elements, tone: playful (defensive-sweet)`. **Avoided overused patterns (per frequency analysis):** no hand-drawn aesthetic (94%), no glassmorphism-as-default frosted-card look (85% — the glass here is glossy Aqua chrome, not frosted blur), no photography imagery (98% — zero raster images), no card-grid layout (93%), no warm-gradient-by-default palette (98% — warmth is *earned*, default is cold chrome), no mono typography (93%), no centered-text-blocks template, no pastoral-romantic tone (31%).