# Design Language for undo.sh ## Aesthetics and Tone undo.sh should feel like a command issued to the universe at the exact second before impact: stark, cinematic, black-and-white, and impossibly confident. The visual world is a high-contrast reversal chamber where mistakes are treated as dramatic celestial events rather than errors. Imagine a moonless observatory, a terminal prompt projected across a planetarium dome, and a film trailer freeze-frame that rewinds time with one keystroke. The tone is bold, compressed, and declarative. The site should not apologize, explain too much, or behave like a conventional developer tool page. It should stage the domain as a mythic shell command: `undo.sh` is the black-box ritual for rolling back bad choices, collapsed timelines, broken deploys, mistaken commits, and late-night production panic. Every section should feel like a scene in a monochrome sci-fi courtroom where time itself is being cross-examined. ## Layout Motifs and Structure Use a modular-blocks layout, but treat the blocks as cinematic slabs rather than cards. The page is built from large rectangular “time fragments” that lock together like frames on an editing table: some full viewport, some tall narrow command strips, some offset black panels interrupting white space. Avoid centered hero-card stacks; the composition should feel like a director cutting between hard black title cards, white command-line evidence panels, and star-map diagrams. Structure the experience as five full-screen narrative beats: 1. **The Mistake:** an almost empty black viewport with `undo.sh` huge in one corner, a blinking cursor orbiting nearby like a satellite, and a thin celestial horizon line. 2. **The Reversal:** modular blocks slide in from opposite edges, each containing terse reversal language: rollback, restore, rewind, amend, unbreak. 3. **The Evidence:** a stark white scene of command output fragments arranged like legal exhibits, not a feature grid. 4. **The Star Map:** a dark observatory panel where version histories become constellations, with one bright “undo” path cutting backward through the stars. 5. **The Return:** a final full-screen black-and-white title frame where the page visually snaps back to calm. Use generous negative space, hard edges, oversized margins, and occasional off-grid alignments. Blocks should overlap slightly like strips of film laid on a light table, with hairline borders and coordinate labels anchoring them. ## Typography and Palette Use a neo-grotesque system with a restrained command-line accent. - **Display / Title Font:** "Space Grotesk" from Google Fonts, weights 600–700. Use for `undo.sh`, scene titles, and massive one-word declarations. Keep tracking slightly tight at `-0.04em` for the cinematic title-card feel. - **Body / Interface Font:** "Inter" from Google Fonts, weights 400–600. Use for short narrative fragments, labels, and quiet explanatory copy. - **Command Accent Font:** "IBM Plex Mono" from Google Fonts, weights 400–600. Use sparingly for shell prompts, timestamps, hashes, coordinates, and reversal logs. Monochrome palette with tiny spectral hints: - Absolute Black: `#050505` for primary background and title-card scenes. - Paper White: `#F7F7F2` for inverse panels and large negative-space fields. - Lunar Gray: `#B7B7AE` for captions, borders, and dim command output. - Eclipse Charcoal: `#171717` for secondary panels and hidden-depth layers. - Star Pinpoint: `#FFFFFF` for celestial dots and cursor highlights. - Reversal Silver: `#DCDCDC` for active paths and animated timeline strokes. The palette must remain overwhelmingly monochrome. Do not introduce colorful gradients. Any glow should be white, gray, or barely silver. ## Imagery and Motifs Imagery is minimal and generated entirely through CSS/SVG: no photography, no illustrated mascots, no icon packs. The central motif is a **cursor-follow comet**: a small white square cursor with a faint orbital trail that follows pointer movement and subtly distorts nearby star points. It should feel like the user is steering a reversal probe through a dark archive. Use star-celestial motifs as structural evidence rather than decoration: - **Undo Constellations:** tiny dots connected by thin SVG lines, representing previous states in a timeline. One line always travels backward, brighter than the rest. - **Eclipse Rings:** partial circular outlines around key command blocks, like orbital mechanics diagrams or rewind halos. - **Film-Edit Ticks:** vertical ruler marks along the viewport edges, implying frames can be cut out of time. - **Shell Prompt Artifacts:** `$`, `--revert`, `HEAD~1`, `rollback`, and timestamp fragments appear as quiet annotations in margins. - **Inverted Blocks:** black blocks on white fields and white blocks on black fields should snap between states, visually performing an undo. Keep motifs spare and intentional. The beauty comes from severe contrast, precise alignment, and the suspense of one animated cursor changing the scene. ## Prompts for Implementation Build a full-screen narrative experience in a single page. Favor theatrical sequencing over marketing conversion. Use `section.scene` panels with `min-height: 100vh`, a fixed cursor-follow element, and modular `.time-block` components that can invert between black and white states. The first viewport should be almost silent: giant `undo.sh`, one blinking prompt, sparse stars, and enough empty space to feel dangerous. Use CSS custom properties for monochrome colors and scene inversion. Implement cursor-follow with JavaScript that updates CSS variables `--mx` and `--my`; use those variables for the comet cursor, a subtle radial light mask, and star displacement illusions. Modular blocks should enter with hard cinematic cuts, not bouncy app animations: use clip-path wipes, transform snaps, and opacity changes with short delays. Let scroll position trigger scene classes such as `.is-rewinding`, `.is-inverted`, and `.is-restored`. Tell a story through microcopy: begin with a mistake, show a command being issued, map the lost state as a constellation, then resolve into restored calm. Use HTML/CSS/JS to create a few precise moments: a command line that erases itself backward, a constellation line that redraws in reverse, and a final panel that briefly flashes white before returning to black. Avoid CTA-heavy layouts, pricing blocks, feature card grids, testimonial bands, logo clouds, and statistic grids. If a button exists, it should feel like a command key or final title-card caption, not a sales CTA. ## Uniqueness Notes - Uses cinematic monochrome reversal as the core visual metaphor, avoiding the batch's dominant warm corporate gradient look. - Treats modular-blocks as film-edit slabs and command evidence panels rather than overused card grids or centered content stacks. - Uses cursor-follow as the main interactive storytelling device: a comet-like prompt that makes the user feel they are steering the undo action. - Star-celestial motifs become a version-history constellation, giving the domain a mythic time-reversal identity without relying on photography. - Chosen seed/style: aesthetic: cinematic, layout: modular-blocks, typography: grotesque-neo, palette: monochrome, patterns: cursor-follow, imagery: minimal, motifs: star-celestial, tone: bold-confident. - Frequency analysis patterns intentionally avoided: corporate aesthetic, warm gradients, card-grid layouts, centered layouts, photography, parallax-heavy storytelling, stagger animations, mono-dominant typography, and authoritative SaaS tone.