# Design Language for tsundere.tech ## Aesthetics and Tone tsundere.tech is a developer-tools landing page operated by a command-line program that *insists* it doesn't care whether you stay — and then quietly leaves the porch light on. The whole site is staged as a **terminal session that keeps interrupting its own coldness**: prompts that snap at you, man-pages that pretend to be annoyed by your questions, exit codes that say `0` but in a tone that means "fine, I guess you can come back." The visual register is **terminal-brutalist with a single channel of warmth that leaks through the seams** — hard monospace UI, raw 1px hairlines, no shadows, no rounded corners, no gradients on the chrome itself; then, at exactly the moments the copy softens ("...not that I *wanted* to help you, baka"), the screen blushes: a hot pink scanline blooms, the cursor stutters, a heart-shaped glyph flickers in the status bar for 600ms and then is angrily deleted. The mood is **dry, clipped, defensive — and underneath, devoted**. Think of a real TTY: green-on-black is the cliché, so we reject it. Instead the base is a cool slate-graphite "I'm-busy-don't-look-at-me" palette, and the affection is rendered as a **rose/coral phosphor** that the terminal clearly did not authorize and cannot fully suppress. Nothing animates for decoration; everything animates because the program is *flustered*. The tone never breaks character: even the legal-ish footer text is a `whoami` that returns "someone who is NOT blushing." This is anti-design in the deliberate sense — misaligned baselines, deadpan ASCII, a layout that refuses to "sell" — but it is meticulously typeset anti-design, the way a good `vimrc` is meticulous. Cold competence with a leak. ## Layout Motifs and Structure A **single full-bleed terminal pane**, edge to edge, no max-width container, no centered hero card. The page is one continuous **scrollback buffer** read top to bottom — you are scrolling *up through history* the program already wrote. Structure: 1. **Topmost line — the prompt header.** A sticky 1px-bordered bar: `tsundere@tech:~$` on the left, a live blinking block cursor, and on the right a status cluster (`uptime`, `mood:`, a tiny `[♥]` that is visible for only a few frames every ~40s then replaced by `[ ]`). The mood field cycles between `cold`, `busy`, `:|`, and — rarely, briefly — `warm` before snapping back. 2. **Section blocks rendered as command transcripts.** Each "section" of the site is a faux command and its output: - `$ ./tsundere --help` → the pitch, written as a man-page that is irritated to be explaining itself. - `$ cat features.txt` → capabilities as a `ls -la`-style table, deadpan, with one row whose permissions are `-rwx------ secretly_cares`. - `$ man tsundere` → "how it works," formatted like a real man page with `NAME / SYNOPSIS / DESCRIPTION / BUGS` headers, where `BUGS` reads "Occasionally admits things. Will deny it." - `$ tsundere init` → the "get started" transcript: a fake install that grumbles through each step and ends with exit code `0` and the line "...there. Don't make it weird." - `$ history | tail` → a closing scrollback of past lines, the warmest one half-overwritten by a `^C`. 3. **Left gutter = line numbers** (` 1`, ` 2`, …), monospace, dim, never resetting — reinforcing one long buffer. **Right gutter = a sparse vertical "signal" rail**: mostly empty, occasionally a single coral `·` marking a line where the program slipped. 4. **Broken-grid intentionally:** output blocks are flush-left to a hard 2ch margin, but section *headers* are over-indented or under-indented by 1–3ch on purpose, as if typed by someone not making eye contact. Whitespace is generous *vertically* (the program needs room to compose itself) and tight *horizontally*. 5. **No footer chrome.** The page just ends on a final prompt line awaiting input, cursor blinking. The "nav" is a thin fixed mini-map on the far right edge: four tick marks; clicking one types the corresponding command into the prompt and auto-scrolls — you don't jump, you *re-run history*. Explicitly avoided: hero-with-CTA, three-column feature cards, pricing tiers, testimonial carousels, stat counters, logo walls. ## Typography and Palette **Fonts (Google Fonts only):** - **Primary / everything structural:** `JetBrains Mono` — the entire UI, prompts, transcripts, man-pages, line numbers, status bar. Weights 400 and 700; 700 only for command names (`$ ./tsundere`) and man-page `SECTION HEADERS`. Letter-spacing `0` (true monospace), line-height `1.65` for that airy-but-rigid TTY feel. - **The "leak" face — used *only* for blush moments:** `Caveat` (handwritten) — appears for at most a few words at a time, slightly rotated `-2deg`, in coral, as if scrawled in a margin and immediately regretted: e.g. a faint *"...idiot."* trailing a curt sentence, or the word *"please"* hand-scribbled then struck through with a CSS line. - **Accent display for the big `tsundere` wordmark in the help block:** `Major Mono Display` — all-lowercase, wide, mechanical, slightly alien — rendered in graphite with one glyph (the final `e`) tinted coral and jittering. **Palette:** - `#0E1014` — **void slate**, the terminal background (near-black, faint blue bias — colder than pure black, which would feel warm by contrast). - `#E6E8EC` — **bone phosphor**, primary text. Not pure white; a tired off-white. - `#7C828C` — **dim graphite**, line numbers, secondary output, the "I'm-not-looking-at-you" gray. - `#2A2E36` — **hairline**, all 1px borders, table rules, the man-page frame. - `#FF5C8A` — **dere-rose**, the affection phosphor: blush scanlines, the `[♥]` glyph, the stuttering cursor when flustered, struck-through "please", the jittering `e`. Used *sparingly and briefly* — this is the leak, not the theme. - `#FFB3C7` — **soft coral wash**, only as a 6–10% opacity full-pane bloom layered behind text during a blush event, then faded out. - `#39D98A` — **deny-green**, a single tiny accent: appears *only* on exit code `0` and the word `OK` — the program's grudging "fine." Never used elsewhere; it's the smallest possible nod to terminal convention, deployed once. Contrast is high and flat: bone-on-slate everywhere, no mid-tones except the deliberate dim-graphite. The rose never sits on the slate for long. ## Imagery and Motifs - **No photography, no illustration in the conventional sense.** All "imagery" is *typed*: ASCII, box-drawing characters (`│ ─ ┐ └ ┤`), and glyph art. - **The cursor is the protagonist.** A solid block `█` that: blinks at a steady 530ms when calm; double-blinks then holds when "thinking"; and *stutters erratically in coral* (`█ ▓ █ ░ █`) for a beat whenever the copy softens — the program's tell. - **The `[♥]` / `[ ]` toggle** in the status bar: a heart that exists for ~6 frames every ~40 seconds, then is replaced — never fades, always a hard cut, as if angrily backspaced. - **Margin scrawls in `Caveat`:** tiny coral handwriting fragments that appear near (never inside) the rigid monospace blocks — `"don't read into it"`, `"...whatever"`, a single `"♡"` that gets a strikethrough drawn through it on hover. - **The man-page frame:** classic `man` layout reproduced faithfully — `TSUNDERE(1)` top-left and top-right, centered title, `BUGS` and `SEE ALSO` sections — as a recognizable, almost nostalgic motif for developers. - **Scanline texture:** a barely-there 1px horizontal repeating line at 3% opacity over the whole pane (CRT ghost), which **intensifies to a single bright coral sweep line** that travels top-to-bottom once during each blush event, then vanishes. - **Exit codes as emotional punctuation:** `[exit 0]` in deny-green ending grumpy passages; once, near the end, a deliberate `[exit 130]` (`^C` / interrupted) cutting off the warmest line mid-word. - **A faux progress bar** during `tsundere init`: `[####------] 40% ...this doesn't mean anything` — ASCII hashes, no smooth fill, advancing in chunky steps. ## Prompts for Implementation Build as a **single HTML page, one CSS file, one ES module** — no framework, no build step. The experience is a ~75-second read of a terminal scrollback that is emotionally unstable. **Do not build a marketing page; build a personality that happens to also tell you what the product does.** **Narrative spine (one continuous scrollback, top → bottom):** 1. **Prompt header (sticky):** `tsundere@tech:~$ █` with the live status cluster. On load, the cursor blinks, waits ~1.2s "as if deciding whether to bother," then auto-types `./tsundere --help` character by character (typewriter, ~45ms/char, occasional 200ms hesitation), hits "enter," and the help block reveals line-by-line (stagger, ~80ms per line, instant — no fade-decoration, just hard line-by-line print like a real TTY). 2. **`--help` block:** a man-page-flavored pitch. Curt declarative sentences. One sentence per line. Somewhere in the middle, a line softens — and *as it prints*, trigger a **blush event**: the cursor stutters coral, the coral scanline sweeps down once, a 6% coral wash blooms over the pane and fades in 900ms, and a `Caveat` scrawl (`"...not that I care"`) appears rotated `-2deg` near the right gutter and stays. Then the very next line snaps back to cold ("Anyway. Moving on."). 3. **`$ cat features.txt`:** the user (auto) types it; output is an `ls -la`-style table drawn with box characters — permissions, size, name columns — listing real features deadpan. One row's permission string is `-rwx------ secretly_cares`; hovering that row makes its name flicker coral for 400ms then go gray again, and a tiny strikethrough `♡` blinks in the margin. 4. **`$ man tsundere`:** full faithful man-page layout (`TSUNDERE(1)` corners, `NAME / SYNOPSIS / DESCRIPTION / OPTIONS / BUGS / SEE ALSO`). `DESCRIPTION` explains the actual mechanism. `BUGS` = "Occasionally admits things. Will deny it." `SEE ALSO` = "no one." Scroll-triggered: sections print as they enter viewport. 5. **`$ tsundere init`:** the onboarding transcript. Chunky ASCII progress bar advancing in steps, each step labeled with a grudging comment (`resolving deps... fine`, `linking... happy now?`). Ends: `[exit 0]` in deny-green + the line `...there. Don't make it weird.` Right after, another blush event, smaller (no full sweep, just cursor stutter + a faint `"♡"` that immediately gets struck through). 6. **`$ history | tail`:** the closer — five past scrollback lines, dim graphite, the second-warmest one fully shown, the warmest one printing halfway then `^C` interrupting it: `i'm glad you ca^C` followed by `[exit 130]`. Final line of the page: a fresh prompt `tsundere@tech:~$ █` blinking forever, awaiting input that never comes. **Interaction rules:** - **Mini-map (fixed, far-right edge):** four ticks for `--help / cat / man / init`. Clicking one **types that command into the prompt header** (typewriter), then auto-scrolls to it — never an instant jump; you watch it re-run. - **Cursor stutter** is the universal "tell": any time blush copy is on screen, the *currently-relevant* block cursor goes coral and stutters for ~700ms. This is the only "cute" animation; keep it rare. - **Blush events** (max ~3 in the whole page): coral scanline sweep (once, top→bottom, ~1.1s), 6–10% coral pane wash (fade in 0ms / out 900ms), one `Caveat` scrawl that *persists*, optional `[♥]` forced-visible for one extra beat. Never overlap two. - **Status bar `mood:` field** ticks through `cold → busy → :| → cold` every few seconds; lands on `warm` only during a blush event, then hard-cuts back to `cold`. - **`prefers-reduced-motion`:** kill the scanline sweep, typewriter, and cursor stutter; keep line-by-line print as instant reveals and keep the coral wash as a static, dismissible tint. The personality survives without motion — it just gets *quieter*, which is in character. - **Everything is type.** No images, no SVG illustration beyond box-drawing glyphs and the ASCII progress bar. The `tsundere` wordmark in the `--help` block is `Major Mono Display` text, lowercase, with the final `e` coral and given a tiny 2px jitter loop. - **No** CTA buttons styled as buttons (the only "action" is `tsundere init`, which is a *transcript*, not a button), **no** pricing block, **no** stat grid, **no** testimonials, **no** logo wall, **no** newsletter, **no** cookie banner styled as anything other than another grumpy terminal line if absolutely required. **Copy voice cheat-sheet:** clipped. defensive. one idea per line. deflects compliments. uses "baka"/"idiot"/"whatever" *at most twice total* — restraint is funnier than saturation. Exit codes are punchlines. The warmth is always immediately retracted, never dwelt on. The product is genuinely, clearly explained *between* the deflections — a tsundere who is actually good at their job. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **Terminal aesthetic that explicitly refuses the green-on-black cliché.** Where the corpus's rare "terminal" entries (22%) lean retro CRT phosphor-green, this one is cold blue-slate + bone-white, with the *only* green being a single grudging `exit 0`. The terminal here is a personality, not a skin. 2. **Animation motivated entirely by emotion, not decoration.** No parallax, no cursor-follow halo, no tilt-3d cards, no magnetic buttons — the corpus is saturated with cursor-follow (89%), parallax (88%), spring (83%), magnetic (77%). Here the *only* moving parts are: a blinking cursor, a typewriter that *hesitates*, a coral stutter that means "flustered," and ≤3 blush sweeps. Motion = character tell. 3. **The layout is a single scrollback buffer of fake command transcripts** — `--help`, `cat`, `man`, `init`, `history` — with line numbers in the left gutter and a "you re-run history, you don't navigate" mini-map. No hero, no card-grid (vs. 93%), no full-bleed photo (98% photography → 0% here, all type). 4. **A second typeface (`Caveat`) used as an *emotional leak*, not a heading font** — handwriting that appears only as struck-through margin scrawls during blush events, the opposite of decorative pairing. 5. **Anti-design discipline:** deliberately mis-indented section headers, deadpan ASCII tables, exit codes as punctuation, a page that ends mid-`^C` — restraint and dryness instead of the corpus's dominant warm/pastoral-romantic/glassmorphism register. **Chosen seed/style:** `terminal command line dev` — *aesthetic: terminal (+ anti-design / neubrutalism edge), layout: stacked-sections (single scrollback buffer), typography: tech-mono, palette: cool-grays + dere-rose accent, patterns: typewriter-effect (emotion-driven, minimal), imagery: minimal (all-type, box-drawing + ASCII), motifs: abstract-tech / grid-lines (hairline TTY chrome), tone: edgy-rebellious (deadpan-with-a-leak)* **Avoided overused patterns (per frequency analysis):** hand-drawn (94%), glassmorphism (85%), photography (98%), card-grid (93%), full-bleed photo, warm palette (98%), gradient (93%), cursor-follow (89%), parallax (88%), spring (83%), magnetic (77%), stagger-as-decoration. Leaned into underused territory: terminal (22%), anti-design (5%), neubrutalism (2%), all-type/minimal imagery, edgy-rebellious tone (6%).