# Design Language for undo.sh ## Aesthetics and Tone undo.sh is **a terminal that runs in reverse** — a command-line tool whose entire visual identity is built around the single, almost-impossible gesture of *taking it back*. Picture a developer at 2:13 AM who has just run `rm -rf` in the wrong directory; the screen does not show an error, it shows a slow, deliberate **rewind** — characters un-typing themselves, files un-deleting, the cursor walking backwards through history with the calm of something that has done this a thousand times. The mood is **mysterious-moody confidence**: not panic, not apology, but the quiet authority of a tool that has already seen the catastrophe and is unhurriedly undoing it. Inspiration points: the scrub-bar of a tape deck dragged leftward; the green-on-black of a VT220 reflected in a darkened office window; the moment in a chess game when a grandmaster says "I take that back" and the board obeys; the bibliographic concept of *erratum* rendered as motion. Tonally it is **terminal aesthetic, but inverted** — where most dev-tool sites render the terminal as a triumphant forward-march of green checkmarks, undo.sh renders it as a **retrograde**: time's arrow pointed at the past. Nothing here glows with optimism. The palette is cold metal and deep navy, the kind of blue you only see on an oscilloscope or the inside of a server room at night. Text does not "appear" — it **un-disappears**. Buttons do not invite — they **reconsider**. The whole site should feel like holding your breath and then being allowed, against all natural law, to exhale into yesterday. ## Layout Motifs and Structure The spine of the page is a **timeline-vertical** — but it runs the wrong way. **Scrolling DOWN moves you BACKWARD in time.** The top of the page is "now" (the mistake, fresh and raw); the bottom of the page is the clean state you are restoring to. Every section is a timestamp further into the past. (Timeline-vertical sits at ~6% in the frequency analysis, and a *reversed* timeline appears to be unclaimed entirely — this site takes that empty room.) - **The reverse-history rail.** A single hairline runs down the exact center of the viewport — 1px, in oxidized-steel grey (#6E7A86). Along it, evenly spaced, sit **commit-dot markers**: small hollow squares (not circles — squares, like cursor blocks) that fill in as you scroll past them. Beside each marker, a monospace timestamp counting *down* (`14:07:55`, then `14:07:54`, then `14:06:30`...). The rail is the river of time and you are walking upstream. - **Left ledger / right ledger.** Content alternates across the center rail like a `diff` view: the LEFT column holds the *state being undone* (struck through, dimmed, decaying), the RIGHT column holds the *state being restored* (sharpening into focus). This is a `--- / +++` layout turned vertical and made cinematic — but never use literal red/green diff colors; use **dim-navy for the doomed side and cold-cyan for the recovered side**. - **No hero in the usual sense.** The first screen is a single terminal pane, centered, ~62ch wide, showing the catastrophic command already executed and the cursor sitting beneath it, blinking, waiting. The headline is whatever the terminal types next: `undo.sh: rewinding...`. There is no nav bar floating above it; navigation, if present at all, is a thin column of timestamps pinned to the right edge that lets you "jump to" a moment. - **Section rhythm:** seven "moments" stacked vertically — (1) the mistake, (2) the freeze-frame, (3) the snapshot ledger, (4) the rewind in motion, (5) the un-deletion, (6) the verification, (7) the restored state — each one a full-viewport panel, each transition a *backward* wipe (content slides in from below and *up*, as if rising out of the past). - Generous monospace gutters: everything aligns to an 8px baseline grid AND a character grid (1ch ≈ 9.6px at the body size), so the page feels typeset by a compiler, not a designer. Wide ma-negative-space around the terminal panes — they float in navy darkness like windows in an unlit building. ## Typography and Palette **Fonts (Google Fonts only — a two-voice system: one machine voice, one human aside):** - **Machine voice — `JetBrains Mono`** (weights 400, 500, 700; also its italic). This is the terminal, the timestamps, the commands, the headlines, the body copy of the "moments." Chosen because its generous x-height and unambiguous `0/O`, `1/l/I` make it read as *a real terminal*, not a decorative homage; and because its italic is a true slanted roman, perfect for the "rewind" log lines that should feel like they're being dragged. Headlines set in `JetBrains Mono` 700 at 2.4rem–4rem, letter-spacing -0.01em, often with a `> ` or `$ ` prompt prefix. Body at 1rem / 1.7 line-height, weight 400. - **Human aside — `Inter`** (weights 400, 600). Used *sparingly* — only for the brief explanatory captions that sit outside the terminal frame, the things a human would whisper next to the screen ("this is the part where it un-happens"). Inter at 0.875rem, weight 400, color dimmed. The contrast between the rigid mono and the soft humanist sans is the entire typographic argument: machine restores, human exhales. - Numerals everywhere are tabular (JetBrains Mono is naturally tabular) so the countdown timestamps don't jitter as digits change. **Palette — navy-metallic, cold and nocturnal (navy-metallic sits at ~2% in the frequency analysis):** - `#0B1018` — **abyss navy**, the page background. Almost black, but with enough blue that it reads as *screen*, not *void*. - `#11202E` — **panel navy**, the terminal pane fill, one step lighter, with a 1px inner border in `#1E3343`. - `#C7D2DB` — **fog grey**, the primary body text — the color of text on an old terminal that has been left on too long. - `#5BE9D8` — **recovery cyan**, the accent: the color of restored state, the filled commit-dots, the cursor block. Cold, slightly sick, electric. This is the only saturated color on the site and it appears only on things that are being *brought back*. - `#6E7A86` — **oxidized steel**, the center rail, the struck-through doomed text, the borders, the metallic chrome edges. A dead grey with a faint blue cast. - `#3A4654` — **deep steel**, for dim captions, disabled states, the "this command is gone" text. - `#F25C54` — **erratum red**, used *once and only once*: the original mistaken command at the very top of the page. After that, never again. It is the wound; everything below is the healing. Optional metallic flourish: thin (1px) `linear-gradient(180deg, #2A3744, #6E7A86, #2A3744)` "brushed steel" edges on the terminal panes and the play/rewind controls — just enough to suggest the cold case of a machine, never a glossy chrome bevel. ## Imagery and Motifs **No photography. No 3D renders. No stock illustration. Everything is SVG line-work, monospace text, or CSS-drawn machine parts — because undo.sh is a *command-line tool* and its imagery should look like it was rendered to a framebuffer, not shot in a studio.** - **The reverse-cursor.** The signature motif: a solid square cursor block in recovery-cyan that, instead of blinking in place, occasionally **slides leftward**, deleting nothing — *un-deleting* — characters materializing behind it. It is the page's heartbeat. It appears in the hero, in every terminal pane, and shrunk-down inside the commit-dots. - **Grid-lines as a filesystem.** A faint (4% opacity) grid of oxidized-steel hairlines underlies the whole page — but it is not a generic graph paper grid; it is a **tree of slashes**, like the output of `tree -L 3`, with `├──` and `└──` and `│` glyphs faintly drawn in the margins, so the background literally *is* a directory listing waiting to be restored. - **Scrub-bar / tape-head iconography.** Small SVG line-icons drawn like a tape deck's transport controls — but only ⏪ (rewind) and ⏸ (the held breath) exist; there is no ▶ play, no ⏩ fast-forward. The "undo" itself is drawn as a horizontal scrub-bar whose playhead is being dragged *leftward* by an unseen hand. - **The diff-ledger glyphs.** `---` and `+++` headers, `@@ -1,7 +1,7 @@` hunk markers, line-prefix `-`/`+` columns — used as decorative typographic furniture down the center rail, oversized and dimmed, so the page reads as one enormous, slow, beautiful patch being applied in reverse. - **Decaying / sharpening text.** Doomed text (left ledger) is rendered with a slight `blur(0.4px)` and reduced opacity and a strikethrough that *draws itself*; recovered text (right ledger) starts blurred and *resolves* to crisp. Imagery is the act of focus pulling back toward clarity. - **Snapshot cards as `.tar` headers.** Where the design needs "cards," render them as ASCII-framed boxes (`┌─ snapshot @ 14:06:30 ──┐ … └────────────────────────┘`) — never rounded glassmorphic rectangles. They are file headers, not UI chrome. ## Prompts for Implementation Build undo.sh as **one HTML file, one CSS file, one JS module** — a single vertically-scrolled route that the visitor experiences as **a 70-second rewind**: you arrive at a disaster and you leave at the moment before it. Treat scroll position as a *time index that runs backward*. There is no pricing block, no stat grid, no testimonial row, no feature-card matrix, no email-capture band, no CTA-heavy footer. There is only the rewind. **Storytelling structure (seven full-viewport "moments," scroll down = go further into the past, backward-wipe transitions):** 1. **The Mistake (now / `14:07:55`).** Full-screen abyss navy. A single centered terminal pane (~62ch). It already shows: `$ rm -rf ./src` and the prompt returning clean — `$ ` — cursor blinking. Then, unbidden, the cursor types: `undo.sh: this looks bad. holding…`. The mistaken command line is the *only* thing on the whole site in erratum-red. A faint Inter caption below the pane: "you didn't mean that." 2. **The Freeze-Frame (`14:07:55`, held).** Everything stops. The cursor stops blinking — it becomes a held breath (⏸). The grid-of-slashes background slowly fades up from 0% to 4% opacity. A single line types in fog-grey: `snapshot found · 14:06:30 · 1,204 files · 38 MB`. The scrub-bar appears at the bottom of the pane, playhead at the far right. 3. **The Snapshot Ledger (`14:06:30`).** The center rail draws itself downward (path-draw-svg, ~1.2s). The first commit-dot fills with recovery-cyan. An ASCII-framed snapshot card unfolds on the right ledger listing what will be restored — directory names appearing as if `tree` is being run. On the left ledger, the doomed state (`./src — deleted`) sits struck-through and blurred. 4. **The Rewind in Motion (`14:06:30 → 14:05:00`).** This is the centerpiece. As the visitor scrolls, the scrub-bar playhead is **dragged leftward**, and in lockstep the terminal pane shows lines of the rewind log scrolling *upward but reading downward into the past*: `restoring src/index.ts… restoring src/parser.ts…` — each line's text materializing behind a leftward-sliding cyan cursor (the reverse-cursor motif at full theatrical volume). Timestamps on the right rail tick *down*. A subtle reverse-glitch: every few hundred ms a single character briefly shows two states overlaid before resolving — like a tape head finding its track. 5. **The Un-Deletion (`14:05:00`).** The `tree`-glyph background, until now faint and incomplete, **completes itself** — `├──` and `└──` branches drawing in, filenames fading from deep-steel to fog-grey. The left-ledger doomed text doesn't get crossed out further; it *un-strikes* — the strikethrough line retracts. Files are coming home. 6. **The Verification (`14:04:00`).** The pane runs a check: `verifying 1,204 files… sha256 ok · sha256 ok · sha256 ok …` — a fast vertical stream of `ok`s in fog-grey, the only moment of speed on the whole site. Then it slows, and types: `integrity: clean.` A single recovery-cyan checkmark — the *only* checkmark on the site — appears. Inter caption: "as if it never happened." 7. **The Restored State (`14:03:30` — before the mistake).** The terminal pane is now calm: `$ ls ./src` returning a clean, full listing. The cursor blinks again — normally now, in place, the breath released. The center rail's commit-dots are all filled. The wordmark `undo.sh` resolves at the bottom, set in JetBrains Mono 700, with a single line beneath: `you can always take it back.` and one quiet line: `curl -fsSL undo.sh | sh` — presented as a fact, not a pitch, in deep-steel, no button, no box. **Motion & interaction rules:** - **Everything that animates, animates in reverse where it can.** Text reveals are *un-deletions* (characters appear right-to-left behind a leftward cursor), not left-to-right typewriter reveals. Section entrances rise *from below* (translateY from +40px to 0), as if surfacing from the past. Use the `typewriter-effect` pattern (~17% in frequency) but **inverted** — call it the *un-typewriter*. - **Scroll IS the rewind.** Bind the scrub-bar playhead, the timestamp countdown, and the commit-dot fills directly to scroll progress. Scrolling up should *redo* — the playhead slides right, dots empty — so the visitor can literally drag time back and forth. This bidirectionality is the soul of the thing. - **Cursor-follow, but restrained:** the page's reverse-cursor (the cyan block) gently drifts toward the pointer's horizontal position within the active terminal pane — a hint that *you* are the unseen hand on the scrub-bar — but it never snaps; it eases over ~600ms (`spring`, low stiffness). - **Respect `prefers-reduced-motion`:** the reverse-glitch, the cursor drift, and the scrub-drag all become instant state changes; the timeline still reads correctly, just without theater. - **Sound is off by default**; if implemented, the only sound is the soft mechanical *chunk* of a tape-deck transport — once, on the freeze-frame. Never a success chime. - Performance: prefer CSS transforms and `clip-path` wipes over JS layout thrash; the `tree`-glyph background is a single tiled SVG; the rewind log is a fixed pool of ~24 lines recycled, not infinite DOM growth. **Tone of voice in copy:** terse, lowercase, machine-calm. Never exclaim. Never say "oops" or "don't worry." The tool does not reassure with words; it reassures by *working*. Sentences end without flourish: `holding.` `restoring.` `clean.` `you can always take it back.` ## Uniqueness Notes Differentiators, each a deliberate departure from the patterns in the frequency analysis: 1. **A timeline that runs backward.** Timeline-vertical is rare (~6%) and, of those, essentially all run *forward* (origin story → today). undo.sh inverts the axis: scrolling DOWN goes INTO THE PAST, and scrolling UP "redoes." Bidirectional, scroll-bound time-scrubbing as the core interaction appears unclaimed in the corpus. 2. **The un-typewriter.** Typewriter-effect is common (~17%) and always reveals text left-to-right as if being typed. undo.sh runs it backward — characters *un-disappear* right-to-left behind a leftward-sliding cursor. Same primitive, opposite direction, opposite emotional meaning (un-doing, not doing). 3. **Navy-metallic + terminal, with exactly one wound.** Navy-metallic palette is ~2%; terminal aesthetic is ~22% but almost always rendered in optimistic green-on-black with forward checkmarks. undo.sh renders the terminal cold, nocturnal, and *retrograde*, and permits exactly one saturated red mark (the original mistake) and exactly one cyan checkmark (the final verification) on the entire site — a chromatic discipline that makes color *narrative* rather than decorative. 4. **No CTA, no pricing, no stat-grid — the install command is presented as a fact.** Per the design brief's bias toward narrative experience, the page is a 70-second rewind with the install line (`curl -fsSL undo.sh | sh`) appearing once, in dim deep-steel, in the final calm frame, with no button and no box. The "conversion" is the catharsis. 5. **Background that IS a `tree` listing.** Instead of generic grid-lines (~10%) or gradient-mesh, the underlay is a faint, slowly-completing `tree -L 3` output — `├──`, `└──`, `│` glyphs and filenames — so the page's decoration is literally the filesystem being restored. 6. **Cards rendered as `.tar`/ASCII headers, not glassmorphic rectangles** — sidesteps the glassmorphism-at-85% trap entirely; every "card" is a `┌─ … ─┐` framed box, consistent with a tool that thinks in plaintext. Avoided patterns from frequency analysis: glassmorphism (85%), card-grid (93%), hand-drawn (95%), warm palette (98%), gradient palette (93%), photography (98%), cursor-follow used as a gimmicky magnetic snap (89% — used here only as a restrained ~600ms ease), and forward-marching typewriter triumphalism. Chosen seed/style: *aesthetic: terminal, layout: timeline-vertical, typography: tech-mono, palette: navy-metallic, patterns: typewriter-effect (inverted), imagery: line-illustration, motifs: grid-lines (as tree-listing), tone: mysterious-moody* — "terminal command line dev" seed, recontextualized as a backward-running rewind.