# Design Language for undo.sh ## Aesthetics and Tone undo.sh channels a graffiti aesthetic — the spray-painted urgency, subversive artistry, and street-level authenticity of graffiti culture applied to a shell-script undo tool — a command-line utility that gives developers the power to reverse terminal actions with the urgency of spray-painting over a mistake on a wall. The site tags — with the aerosol energy of Keith Haring's subway chalk drawings, the systematic rebellion of Banksy's political stencils, and the command-line directness of a .sh tool that does one thing with maximum speed and zero ceremony. Inspiration draws from the wildstyle graffiti lettering of New York subway art, the stencil-and-spray techniques of political street art, the terminal aesthetics of hacker culture, and the single-purpose tool philosophy of Unix command design. The tone is calm-serene — unexpectedly peaceful language that creates productive tension with graffiti's visual urgency, suggesting that undoing mistakes brings deep tranquility. The graffiti treatment transforms a shell utility from dry developer documentation into street-art manifesto — installation commands spray-painted across terminal surfaces, usage examples tagged with the urgency of time-limited wall art, and error recovery documented with the spray-can-rattle energy of an artist working before dawn. The sh suffix is literal — this is a shell tool. Each component carries graffiti's raw energy paired with calm serenity — bold spray-painted visuals that shout, balanced by language that whispers reassuringly about the peace that comes from knowing you can undo anything. ## Layout Motifs and Structure The layout uses a **bento-box** architecture — compact compartmentalized sections creating the organized-chaos quality of a graffiti artist's supply case where each spray can has its designated slot. **Bento-Box Grid System:** - Bento grid: 3x3 on desktop with mixed span sizes - Feature cell: spans 2x2 for primary tool documentation - Utility cells: 1x1 for individual commands and options - Container: max-width: 1000px centered with 12px gap (tight, energetic) - The bento creates the organized-toolkit quality of command-line options arranged for rapid access **Section Sequence:** 1. **First Tag:** Hero with rounded-sans typography over graffiti-texture ground, retro-patterns spray-stencil decorative motifs, ripple interactive spray-impact wave effects 2. **Tool Rack:** Core undo.sh commands in bento grid — ripple interactive spray-ripple feedback with retro-patterns simplified stencil decorations 3. **Technique Wall:** Advanced usage in featured bento cells with retro-patterns detailed spray-art motifs and botanical-illustration organic spray-paint forms 4. **Quick Reference:** Command cheatsheet in compact bento cells with retro-patterns minimal stencil accents 5. **Final Tag:** Footer as artist signature — calm farewell with retro-patterns final spray-stencil mark **Spatial Philosophy:** - Bento compartments create the organized-toolkit quality of developer commands arranged for efficiency - Tight gaps create the dense energy of graffiti pieces painted edge-to-edge - The supply-case metaphor makes browsing documentation feel like selecting the right tool for the job ## Typography and Palette **Typography:** - **Headlines:** "Nunito" (Google Fonts) — rounded-sans at 2.0rem-3.0rem, weight 800. Its rounded terminals create the friendly-bold quality of spray-painted letterforms with soft edges from aerosol dispersion. - **Body Text:** "Nunito Sans" (Google Fonts) — clean sans at 0.9rem, weight 400, line height 1.7. - **Code:** "JetBrains Mono" (Google Fonts) — monospace at 0.85rem for shell commands, code examples, and terminal output. - **Labels:** "Nunito" at 0.6rem, weight 700, uppercase, letter-spacing 0.12em. **Color Palette:** - **Night Wall:** #0a0a14 — deep dark for primary background - **Concrete Panel:** #1a1a28 — slightly lighter for bento cells - **Neon Green:** #22e86a — vivid green for primary accent (terminal green) - **Spray Pink:** #e84a8a — hot pink for secondary accent - **Electric Yellow:** #e8d44a — bright yellow for tertiary accent - **Chalk White:** #f0eee8 — warm white for primary text - **Dust Gray:** #6a6a78 — medium gray for secondary text - **Spray Border:** rgba(34,232,106,0.1) — green-tinted border for terminal elements ## Imagery and Motifs **Botanical-Illustration Organic Spray Forms:** Decorative elements combining botanical forms with spray-paint quality — SVG vine and leaf patterns rendered with spray-painted edges (2px stroke with slight opacity falloff at edges, Neon Green at 0.06 opacity) creating the eco-graffiti quality of nature reclaiming urban surfaces. **Ripple Spray-Impact Waves:** Interactive elements trigger concentric ripple from click point — expanding circles (border: 1px solid Neon Green, fading from 0.3 to 0 opacity over 400ms) creating the impact quality of spray paint hitting a surface and the aerosol mist expanding outward. **Retro-Patterns Spray-Stencil Motifs:** Decorative elements using stencil-cut geometric patterns — SVG shapes with hard edges and spray-paint-softened fills (solid shapes with 0.04 opacity creating ghost-stencil quality), arranged in repeating patterns suggesting the systematic quality of stencil-art production. **Terminal Code Blocks:** Command examples styled as spray-painted terminals — background: #0a0a14; border-left: 3px solid #22e86a; padding: 24px 28px; font-family: 'JetBrains Mono'; creating the command-line quality of shell scripts running on dark terminals. **Bento Cell Spray Treatment:** Each bento cell with subtle spray-texture background — fine speckle pattern at 0.015 opacity suggesting aerosol overspray on concrete surfaces. ## Prompts for Implementation Build the page as a graffiti shell-tool documentation platform. Bento: .bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 1000px; margin: 0 auto; } .bento-feature { grid-column: span 2; grid-row: span 2; } .bento-cell { background: #1a1a28; border: 1px solid rgba(34,232,106,0.06); padding: 24px; } Ripple: .spray-ripple { position: relative; overflow: hidden; } /* JS: create expanding circles at click position */ Terminal: .terminal-block { background: #0a0a14; border-left: 3px solid #22e86a; border-radius: 0 4px 4px 0; padding: 24px 28px; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; } AVOID: Standard developer documentation, corporate CLI tool pages, and clean API reference sites. Let graffiti urgency and calm-serene reassurance create a shell-tool platform where undoing terminal mistakes feels like spray-painting peace over chaos. ## Uniqueness Notes 1. **Graffiti for shell tools:** Street-art urgency transforms dry CLI documentation into visually energetic developer experience. 2. **Bento-box as supply case:** Compartmentalized grid creates the organized-toolkit quality of developer commands arranged for rapid access. 3. **Calm-serene tone as undo peace:** Peaceful language transforms error recovery from panic into tranquil practice. 4. **Retro-patterns as stencil art:** Repeated geometric patterns create the production quality of stencil-based street art. 5. **Ripple as spray impact:** Expanding circles from interaction points create the aerosol-mist quality of spray paint hitting surfaces. **Seed/Style:** aesthetic: graffiti, layout: bento-box, typography: rounded-sans, palette: dopamine-neon, patterns: ripple, imagery: botanical-illustration, motifs: retro-patterns, tone: calm-serene **Avoided Overused Patterns:** corporate aesthetic, parallax patterns, asymmetric layout, mono typography, warm palette, friendly tone, minimal imagery. This design uses graffiti aesthetic, bento-box layout, rounded-sans typography, dopamine-neon palette, ripple patterns, botanical-illustration imagery, and calm-serene tone.