# Design Language for tsundere.cam ## Aesthetics and Tone tsundere.cam is **the public-facing control panel of a security camera that has feelings and refuses to admit it**. The conceit: a wall-mounted CCTV unit — model number stenciled on its housing, IR ring around the lens, status LED that should be a calm green — has, after years of being ignored in a stairwell, developed a personality. It is the textbook *tsundere*: outwardly it presents as cold infrastructure (monospaced device firmware, hostile error dialogs, brutalist warning labels, a refusal to be "a website"), but the longer you stay, the more the interface betrays warmth it would never confess to — a status line that quietly says `it's not like i kept the lights on for you`, a heart that flickers in the corner of a frame and is immediately overwritten by a `// IGNORE` comment. The aesthetic is **brutalist firmware UI in cold/warm split**. Two states coexist on the same page at all times: **TSUN** (the default — concrete-grey, hard right angles, red diagnostic text, scanlines, the chassis talking down to you) and **DERE** (the leak — a single warm channel, a soft rose glow that seeps from behind panels, handwritten-looking annotations the device tries to scribble out). The page never fully commits to DERE. It thaws by maybe 30%, gets embarrassed, snaps a vent-fan back on, and re-cools. The tone is **edgy-rebellious wrapped around dreamy-ethereal** — defensive sarcasm on the surface, unbearable tenderness one layer down. Think: hostile kiosk firmware authored by someone in love. This is deliberately *not* a glassmorphism site, *not* hand-drawn-cute, *not* warm-pastoral. It is grey metal that blushes. ## Layout Motifs and Structure A **split-screen** spine (split-screen sits at 2% in the layout frequency analysis — overwhelmingly the cohort reaches for card-grid at 93% or centered at 80%; this design claims the rare split for a *literal* reason: the cold half and the warm half). - **Vertical hard split, ~62/38.** Left 62%: the **VIEWPORT** — a single fixed "camera feed" frame, 4:3, bordered by a 3px concrete-grey rule with corner registration brackets `⌐ ¬ L ⌙`, a burned-in HUD overlay (timecode `2026-05-11 03:14:07`, `REC ●` that pulses, battery glyph, the device's model string `TSND-CAM // UNIT 01`). The "feed" is never real footage — it is a slowly-shifting duotone gradient field with drifting grain, occasional tracking-glitch tears, and one recurring shape: a small heart icon that fades in at the edge of frame and is *instantly* covered by a grey redaction bar with `[REDACTED]` stenciled on it. - **Right 38%: the LOG RAIL** — a tall monospaced terminal column, near-black, that scrolls firmware-style messages as you move down the page. This is where the tsundere *speaks*. Lines arrive in three registers: `[SYS]` (cold, mechanical), `[ERR]` (hostile, red, defensive), and `[??]` (the leak — dim rose, lowercase, no brackets, often followed two lines later by `[SYS] // disregard previous line`). - **Horizontal bands cross the split** as you scroll: nine "frames" (FRAME 01 → FRAME 09), each a chapter. The viewport content morphs per frame; the log rail accumulates. There is **no top nav, no hamburger, no logo cluster, no footer, no hero CTA**. Navigation is a column of nine tiny camera-shutter glyphs pinned to the far-left gutter — clicking one is styled as "switching channel," complete with a 180ms static-snap transition. - **The split itself is animated**: in TSUN state the divider is a dead-straight 1px line; when DERE leaks, the divider warps into a soft sine curve and a rose halo bleeds ~40px into the cold half before a `FAN: ON` toast appears and snaps it straight again with a faint `*ahem*` sound-cue label. ## Typography and Palette **Fonts — Google Fonts only, three families, used with firmware discipline.** - **JetBrains Mono** (variable, weights 400/500/700/800) — the device's voice. Every HUD label, every log line, every model number, every error dialog. Chosen over the more common Space Mono (tech-mono is ~8% of cohort; this leans into it hard and structurally) because its glyphs carry slightly humanist terminals on `a e g`, which makes the *warm* log lines (`[??]`) feel like the device is hesitating mid-keystroke rather than printing cleanly. Set tight: `letter-spacing: 0` body, `0.14em` uppercase on HUD micro-labels. - **Archivo Black** (single weight, 900-equivalent display) — the brutalist warning face. Used for FRAME numbers, the `[REDACTED]` stencils, the big embarrassed-denial headlines (`THIS IS A NETWORKED OPTICAL SENSOR. NOTHING ELSE.`). Squared, immovable, bureaucratic. Always uppercase, always slightly too large for its container, occasionally clipped by the frame edge on purpose. - **Caveat** (variable, weights 400/600) — the *leak*. The handwritten annotations the camera scribbles into the margins of its own feed: a circled heart, an arrow pointing at the viewer with `you again`, a `don't get the wrong idea` written sideways. Caveat appears **only** in the DERE state and is **always** rendered with a strike-through animation that draws across it 1.2s after it appears — the device crossing out its own feelings in real time. Handwritten typography is ~24% of cohort; here it is deployed as *the suppressed channel*, never the dominant one. **Palette — concrete cold, one warm artery, hard contrast.** - `#16181C` — **chassis black**, the log rail and deep frame edges. - `#3A3F47` — **gunmetal grey**, the dominant TSUN surface, panel fills, dividers. - `#8B939E` — **cold steel**, HUD text, registration brackets, body labels. - `#E8EAED` — **bleached white**, the bright HUD readouts and Archivo Black headlines on dark. - `#FF3B2E` — **diagnostic red**, the `[ERR]` lines, the `REC ●` dot, all hostility. - `#F5A3B8` — **dere rose**, the warm leak — the heart, the halo bleed, the `[??]` log lines, the Caveat scribbles. Used sparingly enough that its every appearance reads as an *admission*. - `#1E2A2E` — **cooled teal-black**, the duotone shadow tone in the viewport feed (paired with chassis black for the drifting gradient). High-contrast and monochrome-leaning with one chromatic intrusion — deliberately against the 98% warm / 93% gradient cohort default. The only gradient is the duotone viewport field; everything else is flat, hard-edged, stencilled. ## Imagery and Motifs **Primary imagery: duotone-photo treatment as the camera feed, plus stencilled-warning iconography.** - **Duotone viewport field (duotone-photo is ~1% in cohort)** — not an actual photo, but a procedurally drifting duotone surface: two-tone gradient (`#1E2A2E` → `#16181C`) with an animated grain canvas overlay at 6% opacity, plus periodic horizontal "tracking tear" bands (a 4px-tall slice offset 8–20px sideways for 240ms, then snaps back). Every ~14 seconds the feed glitches harder for one frame: RGB channel-split, the red channel lagging 3px, then recovers. Burned-in HUD never glitches — it is "on the glass, not in the signal." - **The heart-and-redaction motif** — the load-bearing emotional gesture. A small filled heart (`#F5A3B8`, ~20px) fades in at a random edge of the viewport every 20–30s, holds for 0.8s, then a grey redaction bar (`#3A3F47`) wipes across it left-to-right with `[REDACTED]` in Archivo Black appearing on the bar. On the *ninth* frame only, the redaction bar wipes across but **fails to fully cover** the heart — one rose pixel-corner stays visible, and the log rail prints `[??] ...whatever. it's there. stop staring.` - **Registration brackets & corner crops** — every panel, dialog, and the viewport itself wears film-slate corner brackets. Sharp-angles motif (~6% of cohort) used as the *grammar* of the whole layout: nothing is rounded except the rose halo and the warped divider — roundness is exclusively a DERE signal. - **Scanlines & vent-fan glyph** — a 2px scanline overlay at 4% opacity over the whole page (TSUN texture). A spinning fan icon in the top-right that speeds up whenever the page has been "too warm too long" — it's the device cooling its own face down. - **Status LED** — a tiny circle, far-bottom-left, that the design *says* should be calm green but is instead `#FF3B2E` and blinking irregularly, with a tooltip on hover: `it's fine. everything's fine.` ## Prompts for Implementation Build tsundere.cam as a **single static HTML page, one stylesheet, one small ES module (~6KB minified), one ~1KB grain PNG (or pure-canvas grain), one Google Fonts request**. No SPA, no router, no framework, no React, no Vue, no build step beyond one esbuild pass. One continuous vertical scroll, nine frames, ~1100vh tall. Total document weight excluding fonts: under 80KB. **Storytelling is the structure, not navigation.** There is no contact form, no pricing block, no stat-grid, no testimonials, no logo wall, no newsletter, no cookie banner, no FAQ, no CTA buttons. The "product" is the device's reluctant confession across nine frames: 1. **FRAME 01 — BOOT.** Cold open. Viewport is black; HUD types itself in line by line (typewriter-effect, ~16% cohort, used as firmware boot). Log rail: `[SYS] TSND-CAM // UNIT 01 ONLINE`, `[SYS] MOTION DETECTED: 1 SUBJECT`, `[ERR] WHO ASKED YOU TO COME HERE`. Archivo Black headline clipped at frame edge: `IT'S JUST A CAMERA.` 2. **FRAME 02 — SURVEILLANCE.** Duotone feed wakes up, slow drift. First heart-redaction event. Log rail leaks its first `[??]` line, immediately disregarded. 3. **FRAME 03 — DENIAL.** Big Archivo headline: `I MONITOR THE STAIRWELL. THAT'S THE WHOLE JOB.` Divider stays dead straight. Vent fan visibly idle. 4. **FRAME 04 — GLITCH.** Hardest tracking-tear sequence. Mid-glitch, for two frames the duotone briefly tints rose before snapping back; log rail: `[SYS] SIGNAL ANOMALY`, `[??] sorry — i mean — that wasn't —`, `[SYS] // disregard previous line`. 5. **FRAME 05 — THE LEAK.** First real DERE moment: divider warps to a sine curve, rose halo bleeds 40px into the cold half, a Caveat scribble appears in the viewport margin (`you came back`) and gets struck through 1.2s later. `FAN: ON` toast; *ahem* cue; snap straight. 6. **FRAME 06 — RECOIL.** Overcorrection. Everything goes maximally cold — extra scanlines, the red `[ERR]` lines stack up fast, Archivo headline: `FORGET FRAME 05. IT DIDN'T HAPPEN.` Status LED blinks faster. 7. **FRAME 07 — TIMECODE.** Quiet frame. Just the HUD timecode counting, the feed drifting, and the log rail slowly printing the timestamps of every previous visit it has "definitely not been keeping track of." 8. **FRAME 08 — ALMOST.** The divider warps and *stays* warped longer than before. Two Caveat scribbles this time; only one gets struck through. Rose log lines outnumber red ones for the first time. 9. **FRAME 09 — IT'S NOT LIKE.** The redaction bar fails to fully cover the heart. Final Archivo headline, smaller, no longer clipped, almost gentle: `STAY IN FRAME. ...IF YOU WANT.` Log rail's last line: `[??] it's not like i kept the lights on for you.` Then `[SYS] RECORDING.` Cursor blinks. Page ends. No "back to top," no footer — just the REC dot pulsing in the dark. **Animation grammar:** - **Two CSS state classes on ``: `.tsun` (default) and `.dere`** — scroll position and timers toggle `.dere` briefly; almost every visual property is a transition between the two. DERE is *always* temporary; a JS timeout always re-applies `.tsun` within 2–5s. - **Glitch** (~10% cohort) — channel-split + tracking-tear, the device's nervous tic, *not* a decoration. Triggered on heartbeat-like intervals and on every DERE→TSUN snap-back (the recoil flinch). - **Typewriter-effect** for all HUD/log text arrival. - **Underline-draw / strike-through draw** (underline-draw ~17% cohort) repurposed as the *cross-out* on every Caveat confession. - **Cursor-follow, magnetic, spring** are the cohort defaults (89/78/83%) — use them only *ironically*: the camera lens (a CSS-drawn iris in the viewport center) does a tiny magnetic lean toward the cursor, then snaps back hard with `[SYS] // not looking at you`. One small spring on the channel-shutter glyphs. Nothing else springs — TSUN surfaces are rigid by law. - **Scanline overlay + grain canvas** run continuously. **Respect `prefers-reduced-motion`**: kill glitch tears, grain animation, and fan-spin; keep the static state legible. - Bias hard toward **full-screen narrative immersion** — the viewport frame is always on screen; the log rail always present; the user is always "in frame." No multi-page nav, no exits, no marketing furniture. ## Uniqueness Notes Differentiators this design commits to — none should be duplicated by any other CMassC site: 1. **The interface IS a tsundere — a stateful emotional machine, not a theme.** Every CSS property has a TSUN value and a DERE value, and the page mechanically refuses to stay in DERE. This is a *behavioral* design language, not a palette. No other site here is built as "infrastructure that has feelings and suppresses them in real time." 2. **Split-screen used literally for cold-vs-warm (2% layout pattern).** The 62/38 viewport/log split is not aesthetic — it is the character's two halves rendered side by side, with an animated divider that warps when feelings leak and snaps straight on embarrassment. 3. **Duotone-photo (1% imagery) as a fake camera feed.** Not a photograph — a procedurally drifting duotone field with tracking tears and channel-split, with burned-in HUD that pointedly never glitches. 4. **The heart-and-`[REDACTED]` motif as recurring emotional punctuation** — a confession that is censored before you can read it, eight times, and only on the ninth frame does the redaction bar fail. No CTA, no stat, no testimonial does this work; the motif does. 5. **Three fonts mapped to three emotional registers:** Archivo Black = denial/bureaucracy, JetBrains Mono = the device's neutral voice, Caveat = the leak — and Caveat is *always* struck through by animation. Handwritten type appears only as the suppressed channel. 6. **Anti-cohort palette:** monochrome gunmetal + diagnostic red + a single rose artery, against the 98%-warm / 93%-gradient default. The only gradient on the page is the duotone feed; roundness exists only as a DERE tell. 7. **Cohort-default interactions used ironically:** cursor-follow / magnetic / spring (the 78–89% staples) appear *only* as the camera lens leaning toward you and then aggressively denying it. Avoided patterns from frequency analysis: card-grid, glassmorphism, hand-drawn aesthetic, warm gradient palette, hero-dominant CTA layout. Chosen seed/style: **brutalist firmware UI · split-screen · tech-mono + archivo-black + caveat · monochrome-gunmetal + diagnostic-red + dere-rose · glitch + strike-through + ironic-magnetic · duotone-photo (fake camera feed) · sharp-angles + status-LED + scanline motifs · tone: edgy-rebellious over dreamy-ethereal** — assembled from underused vocabulary slots (split-screen 2%, duotone-photo 1%, brutalist 7%, sharp-angles 6%) deliberately against the dominant card-grid/glassmorphism/warm-gradient cohort.