# Design Language for undo.systems ## Aesthetics and Tone undo.systems should feel like a cinematic command chamber for reversing consequences: not a cheerful productivity tool, but an authoritative system of recall, rollback, and restoration. The visual mood is cold, geological, and ritualistic — like an archive built into a slab of blue-gray marble, lit by emergency beacons that pulse only when the system detects a decision worth rewinding. Treat “undo” as a serious infrastructure verb rather than a keyboard shortcut: the site is about recovering branches of possibility, restoring context, and proving that mistakes can be made observable before they become permanent. The aesthetic direction is a restrained thriller: slow camera moves, deep shadows, cool mineral surfaces, and bold typography that lands with the force of a chapter title. Avoid shiny SaaS optimism. The tone is calm but absolute, as if the page is narrated by a black-box recorder after an incident review. Organic leaf forms soften the severity, suggesting regrowth after reversal, but they should appear like fossil impressions in stone rather than decorative garden elements. ## Layout Motifs and Structure Use a single-column cinematic scroll structured as a sequence of full-screen “reversal chambers.” Each chamber occupies most of the viewport and advances the story from irreversible chaos to controlled restoration. The column should not feel like stacked marketing sections; it should feel like descending through a vault where each level reveals a different layer of the undo mechanism. Composition rules: - Begin with a near-empty opening frame: massive centered wordmark, a faint marble plane, and one slow pulse beneath the letters like a system heartbeat. - Keep content in a narrow authoritative reading column, but allow background motifs to bleed full-screen: marble veins, leaf silhouettes, timeline scratches, and ghosted previous states. - Use offset vertical anchors rather than card grids. Important statements can sit slightly above or below center, as if aligned to invisible film subtitles. - Build a “rollback spine” down the page: a thin vertical line that occasionally branches backward into translucent afterimages, then recombines into the main column. - Section transitions should feel like film cuts, aperture wipes, or forensic overlays, not generic fades. One chamber may look like a frozen incident log; another like a restored branch of living foliage emerging from stone. Avoid card-grid, centered corporate blocks, dashboards, pricing panels, feature tiles, and stat grids. The single-column structure should be dramatic, quiet, and sequential. ## Typography and Palette Typography should be bold, compressed, and authoritative, balanced by a precise technical text voice. - Display headings: **Archivo Black** from Google Fonts. Use for the hero, chapter labels, and decisive declarations. Set in uppercase or severe title case with tight tracking (`-0.045em`) and large cinematic sizes such as `clamp(4.5rem, 14vw, 13rem)`. - Secondary headings and narrative statements: **Space Grotesk** from Google Fonts. Use weights 500–700 for confident explanatory text, with wide line spacing and deliberate short sentences. - System annotations, timestamps, and rollback labels: **IBM Plex Mono** from Google Fonts. Use small caps, tabular figures, and cool gray opacity for audit-trail authority. Palette: cool grays with mineral depth and one disciplined signal accent. - Obsidian black: `#070A0D` — primary background, deep cinematic void. - Cold slate: `#1A222B` — panels, shadowed marble undertone. - Marble gray: `#AEB7C2` — primary text, veins, quiet UI lines. - Mist white: `#EEF3F7` — high-emphasis text and restored-state highlights. - Blue steel: `#5E768F` — secondary accents, frozen overlays. - Pulse cyan: `#70E4FF` — rare attention pulse, active rollback node. - Leaf graphite green: `#263F37` — organic motif shadow, restrained regrowth cue. Use gradients sparingly: subtle radial cold light behind the hero and low-contrast marble veining. The palette should remain primarily cool-grays, avoiding warm beige, orange, purple, and sales-page blue. ## Imagery and Motifs The core imagery is marble as memory: a surface where every vein is a previous branch, scar, or reverted path. Generate the marble texture with layered CSS gradients and SVG noise-like veins, not stock photography. Veins should drift diagonally and occasionally split like version-control branches, then fade into the rollback spine. Motifs to include: - **Marble rollback slab:** a full-screen mineral plane that slowly shifts under the content, implying buried histories. - **Pulse-attention nodes:** restrained cyan rings that expand from key words such as “restore,” “branch,” “replay,” and “undo.” Pulses should be slow and consequential, never playful. - **Leaf-organic impressions:** graphite-green leaf silhouettes pressed into the marble like fossils. They symbolize recovered growth after reversal. Use long elliptical leaves, branching stems, and subtle negative-space cutouts. - **Ghost states:** translucent duplicate text or UI fragments offset behind current content, representing previous versions being recalled. - **Forensic marks:** small mono labels, crop marks, frame numbers, and rollback timestamps along the vertical spine. Do not use generic product screenshots, smiling people, floating app cards, dashboard analytics, or icon packs. The visual world should be generated through CSS, SVG, and typography. ## Prompts for Implementation Build as a full-screen narrative experience in a single `index.html` with embedded CSS and JavaScript. Load Google Fonts for Archivo Black, Space Grotesk, and IBM Plex Mono. The experience should read like a cinematic incident reconstruction: the visitor scrolls through a system learning how to reverse itself. Implementation guidance: - Create five immersive scenes: “Before,” “Trace,” “Branch,” “Restore,” and “Afterimage.” Each scene should be nearly viewport-height and contain one dominant statement plus minimal supporting text. - Use CSS pseudo-elements for marble veining: layered linear/radial gradients, blurred streaks, and mask-like overlays. Add SVG leaves as inline decorative elements that appear carved into the background. - Animate pulse-attention only at meaningful narrative beats. A cyan ring can expand from a rollback node, fade, then leave a faint halo. - On scroll, let the rollback spine draw downward and occasionally branch backward. Branches should retract or dissolve when the next scene resolves. - Use ghost text layers: duplicate a phrase behind itself with `filter: blur(2px)`, reduced opacity, and a slight negative horizontal offset, then align it back into focus during the scene. - Favor slow filmic movement: 8–14 second background drifts, delayed cuts, aperture wipes, and subtle scale changes. Avoid bouncy animations, hover-heavy interactions, and noisy micro-interaction clutter. - Keep the ending quiet: a restored leaf impression brightens from graphite green to mist white while the final statement holds still. AVOID: CTA-heavy layouts, pricing blocks, stat-grids, feature-card grids, dashboard mockups, stock photography, cheerful gradient SaaS styling, and centered corporate hero-with-buttons formulas. ## Uniqueness Notes - Chosen seed/style: **aesthetic: cinematic, layout: single-column, typography: display-bold, palette: cool-grays, patterns: pulse-attention, imagery: marble-texture, motifs: leaf-organic, tone: authoritative**. - Differentiator 1: frames “undo” as forensic infrastructure and cinematic restoration, not as a generic productivity command or developer tool. - Differentiator 2: uses marble veining as a version-history metaphor, turning stone texture into branching timelines and recovered states. - Differentiator 3: combines severe display typography with fossilized organic leaf impressions, creating a tension between machine auditability and biological regrowth. - Differentiator 4: relies on a single rollback spine and full-screen chambers rather than the batch’s overused card-grid, centered layout, and dashboard conventions. - Differentiator 5: pulse-attention is used as a rare narrative signal, avoiding common parallax-heavy, scroll-triggered, staggered animation patterns. - Frequency analysis to avoid: corporate appears heavily overused, card-grid and centered structures dominate, warm/gradient palettes are common, and parallax/scroll-triggered/stagger patterns are saturated. This design instead leans into underused cool-grays, marble-texture, leaf-organic, display-bold, and pulse-attention.