# Design Language for tsundere.one ## Aesthetics and Tone tsundere.one is a **skeuomorphic refrigerator door, photographed under a single kitchen bulb at 1 a.m.** — a heavy, brushed-aluminum slab that *looks* cold, ungiving, industrial, but is covered, edge to edge, in magnets, sticky notes, a worn paper grocery list, a child's crayon drawing curling at the corners, and a Polaroid going warm-yellow with age. The name is the whole thesis: *tsun* (the cold steel face) versus *dere* (the soft handwritten clutter clinging to it). The site is built as a literal object you approach, hesitate in front of, and then — once you start opening its compartments — discover is full of warmth it would never admit to. Nothing here is flat. Every surface has a bevel, a cast shadow, a hint of fingerprint smudge, a screw head, a rubber gasket. The "cold" half is rendered in honest metal: cool grays, anodized blue-gray, the dull gleam of a hinge. The "warm" half leaks through every gap: butter-yellow lamplight, the pink of a worn eraser, the orange of a citrus magnet. The tone is **mysterious-moody up front, grounded-earthy underneath** — a thing that scowls at you and then quietly leaves the porch light on. The emotional arc the visitor walks: *intimidation → curiosity → the small private joy of being let in.* The fridge door does not want you to know it kept your note. ## Layout Motifs and Structure The page is a **single tall fridge door, presented full-bleed**, scrolled vertically — but the scroll is staged as *opening compartments down the face of the appliance*. No card grid. No bento. No dashboard. The structure, top to bottom: 1. **The Handle** (hero) — a long vertical chrome pull-handle pinned to the right third; the domain name etched into the metal beside it like a manufacturer's plate. The cold face fills the viewport. A single sticky note, slightly peeling, is the only warm thing visible — it's the invitation. 2. **The Magnet Field** — as you scroll, the camera "tilts in" and the door's surface fills with skeuomorphic magnets, receipts, takeout menus, a bus ticket. Each is a content block disguised as fridge clutter. They overlap with real cast shadows (layered-depth: z up to +180px). This is the registry's *layered-depth* axis pushed into genuine occlusion — foreground magnets partially hide the ones behind. 3. **The Crisper Drawer** — a compartment that slides open on scroll, revealing its contents in cool condensation-fogged glass. 4. **The Freezer** (a colder, bluer sub-section) — frost on the inside of the door, content half-buried in rime. 5. **The Inside Light** (footer/close) — the door swings to and the warm interior bulb glows through the seal: the dere reveal. Everything that was cold is now backlit gold. Composition rule: the **vertical chrome handle is a fixed spine** down the right edge at all scroll positions — the one rigid, cold constant. Everything soft accretes around it. Margins are tight and heavy like a real appliance; whitespace is brushed metal, never paper-white. ## Typography and Palette **Typefaces (Google Fonts only):** - **Oswald** — the *tsun* voice. A tall, tight, industrial sans used for the domain mark, section labels, and anything etched, stamped, or embossed into metal. Set in uppercase with 0.08em tracking, often debossed (inset text-shadow trick). This is the cold face's only typeface. Weights 300–600. - **Caveat** — the *dere* voice. A genuine ballpoint-pen handwriting face for every sticky note, grocery list, scribbled annotation, and the warm closing message. Slightly rotated (-2deg to +3deg) per note. Never used for anything structural — only for the things a person wrote by hand. Weights 400–700. - **Spectral** — the quiet connective tissue: body paragraphs on the "old paper" receipts and the Polaroid caption. A warm-bodied serif with low contrast, set at 1.06rem / 1.7 line-height in a faded ink color. Used sparingly, only where there's "real text on real paper." **Palette (the cold half):** - `#3A4048` — anodized graphite, the door's base metal - `#5C6670` — brushed steel mid-tone, panel faces - `#8B97A1` — cool highlight, the gleam along a bevel edge - `#C3CDD4` — pale chrome, the handle's catch-light - `#1F2429` — deep seam shadow between compartments **Palette (the warm half — leaks in):** - `#F2C14E` — kitchen-bulb butter yellow, the interior light - `#E8865A` — citrus-magnet orange - `#D98E9C` — worn-eraser pink, the most-loved sticky note - `#F4E9D3` — aged-paper cream for receipts and lists - `#4A3B2A` — faded ballpoint brown, handwriting ink The duotone law: **above the fold and in the freezer, warm pixels appear only as small, precious accents (<8% of the frame).** Below the fold and in the closing reveal, warm overtakes cool. The transition is never a gradient — it's *more warm objects accumulating* on a cold ground. ## Imagery and Motifs - **Skeuomorphic appliance hardware**: hinges, rubber gaskets, Phillips screw heads, the handle's mounting bolts, a tiny embossed temperature dial. All CSS-drawn with layered box-shadows, radial-gradient sheens, and 1px inset highlight lines — no photos. - **Fridge clutter as content vessels**: alphabet magnets, a round fruit-shaped magnet, a clip magnet pinching a stack of receipts, a curling crayon drawing (CSS, wax-textured strokes), a Polaroid with a hand-written caption strip, a bus ticket, a Chinese-takeout menu corner, a save-the-date. - **Condensation and frost**: blurred white blooms on glass, hexagonal rime crystals along the freezer seam, a single bead of water mid-trickle (animated path). - **The peeling sticky note**: recurring motif — at least one note in every section has a corner lifting, casting a soft curl-shadow, gently flexing on cursor proximity. - **Fingerprint smudges**: faint oily ovals near the handle and any "frequently touched" element — 4% opacity, only visible at certain angles (a barely-there overlay). - **The duotone Polaroid**: the one truly photographic-feeling element is faked — a duotone-photo treatment (cold steel-blue shadows, warm cream highlights) on a CSS-generated abstract "blurry happy moment." This honors the *duotone-photo* lean without a real image. Decorative through-line: **everything warm is slightly crooked, everything cold is perfectly square.** Misalignment = affection. ## Prompts for Implementation Build tsundere.one as **one long, vertically-scrolled HTML document depicting a single refrigerator door** — no SPA routing, no modals, no nav bar, no hamburger. The visitor scrolls down the face of the appliance and the appliance *responds* like a physical object. **Storytelling spine** — five staged scenes, in order: The Handle (cold hero) → The Magnet Field (clutter accretes) → The Crisper Drawer (slides open) → The Freezer (colder sub-zone) → The Inside Light (warm dere reveal as the door closes). Each scene is a full-viewport-ish stage; transitions between them are *mechanical* — a hinge creak, a drawer roll, a magnetic *thunk*. **Motion & interaction (favor the rare vocabulary):** - *counter-animate* is the signature pattern — but subverted: there is exactly ONE counter on the whole site, the embossed temperature dial near the handle. As you scroll from hero to footer it ticks **down** from a cold number toward a warm one (e.g., from a frosty reading toward "warm enough"), the digits flipping on a tiny split-flap. It's the only number anywhere. No stat grids, no metric counters elsewhere. - *layered-depth* with real occlusion: foreground magnets sit on a higher z-plane and genuinely overlap/hide the ones behind; parallax between the metal door (slow), the magnet field (medium), and the peeling sticky-note corners (fast, ~1.4x). - *blur-focus*: the crisper-drawer glass is frosted; on hover/scroll-into-view it clears (backdrop-filter blur 12px → 0) to reveal contents — like wiping condensation. - *spring + magnetic*: alphabet magnets near the cursor lean toward it slightly, then **snap** back with a stiff, slightly-overdamped spring (the appliance is heavy; nothing floats freely). The peeling note corners flex on proximity. - *path-draw-svg*: a single bead of condensation draws its own trickle-path down the freezer glass on scroll. - Cold elements move with **weight and reluctance** (slow easing, short travel); warm elements move with **looseness and a little wobble** (rotation drift, longer settle). The motion itself performs the tsundere split. **Surface craft requirements:** every panel gets a brushed-metal texture (repeating thin linear-gradient stripes at low contrast, plus a subtle radial sheen following an imagined overhead bulb). Every "object on the door" casts a real soft drop-shadow and has a 1px inset top-highlight. Etched text is debossed; magnet labels are slightly raised. Aged-paper receipts get a faint coffee-ring and a torn lower edge (CSS clip-path). **The reveal:** the closing scene must feel *earned and quiet*. The door eases shut, the seam light goes warm gold, and the last handwritten Caveat note — which was peeling cold-side-up at the top of the page — is now readable from the inside, lit from behind. It says something the cold face would never say out loud. That's the payload. No email capture, no CTA button, no pricing tier, no testimonials carousel, no FAQ accordion, no "trusted by" logo wall — the fridge does not sell; it just, eventually, lets you in. ## Uniqueness Notes Differentiators from every other site in the CMassC catalogue: 1. **The site is a literal skeuomorphic refrigerator door** — at ~4% sibling frequency, skeuomorphism is one of the rarest aesthetics in the registry, and no other site builds itself as a single domestic appliance you scroll *down the face of*. The hard structural metaphor (handle / magnet field / crisper / freezer / inside light) is unprecedented here. 2. **"Tsundere" is rendered structurally, not decoratively**: the cold/warm duality isn't a color theme bolted on — it governs *typography* (Oswald-debossed-steel vs. Caveat-handwritten-paper), *motion physics* (heavy reluctant easing vs. loose wobble), *geometry* (everything cold is perfectly square, everything warm is crooked), and the *narrative payoff* (the peeling note you see cold-side-up at the top is finally readable, backlit, at the bottom). The trope is the architecture. 3. **Exactly one number on the entire site**, and it's a split-flap *temperature dial* that counts **down toward warmth** as you scroll — a deliberate inversion of the *counter-animate* axis, which sibling sites overwhelmingly spend on stat-grids and metric tickers. tsundere.one has zero stat grids, zero metric counters, zero data viz. 4. **Deliberately avoids the catalogue's overused patterns**: no glassmorphism-as-default (the only "glass" is a literal frosted crisper drawer that *clears* on interaction), no cursor-follow particle trails, no full-screen gradient meshes, no card-grid clutter — replaced by genuine layered-depth occlusion, weighted spring/magnetic physics, and a hand-built brushed-metal surface system. **Documented chosen seed (no seed provided in assignment; selected from `seeds.json` vocabulary, unused combination):** `aesthetic: skeuomorphic, layout: layered-depth, typography: condensed (Oswald) + handwritten (Caveat), palette: cool-grays leaking into honeyed-neutral/warm, patterns: counter-animate (subverted), imagery: duotone-photo + skeuomorphic hardware, motifs: floating-elements grounded into weighted clutter, tone: mysterious-moody → grounded-earthy`. Avoided per frequency analysis: glassmorphism (85%), hand-drawn (95%), card-grid (93%), cursor-follow (89%), photography (98%), warm-only palette (98%) — each consciously declined or inverted.