# Design Language for undo.sh ## Aesthetics and Tone undo.sh is a flat-design developer tool interface where the ".sh" extension signals shell scripting and the "undo" concept becomes a playful exploration of version control and reversibility in code. The aesthetic is deliberately flat -- no shadows, no gradients, no 3D effects -- just crisp edges, solid fills, and the confident simplicity of well-designed developer documentation. Think of the visual clarity of Stripe's docs crossed with the playful palette of a Wes Anderson film set. The tone is friendly and approachable -- a patient senior developer explaining git revert to a junior, using colorful diagrams and gentle humor. Inspiration from flat-design icon systems (Material Design's earliest iterations), bento box lunch arrangements, and the colorful simplicity of LEGO instruction manuals. ## Layout Motifs and Structure A **bento-box** layout where content is organized into tightly-fitted, varied-size rectangular compartments, like a Japanese lunch box -- everything has its precise place. **Primary structure:** - **Shell prompt hero (100vh):** A burgundy-cream background (#f5efe8) with a large simulated terminal prompt at center: "$ undo.sh" in expressive-variable type, with a blinking green cursor. Below, a subtitle: "Every mistake is just an uncommitted change." The terminal prompt is styled flat -- no shadows, just a solid-bordered rectangle with rounded corners. - **Bento grid:** A CSS grid with named areas creating a bento layout (3 columns, varied row heights). Cells contain: concept explanations, code snippets (with syntax highlighting in flat colors), diagrams (CSS-only flow charts), and whimsical illustrations. Each cell has a solid-color background from the palette, with 2px borders and no shadows. - **Nature pattern band:** A horizontal strip featuring a repeating leaf/branch pattern (CSS-generated) in muted green, representing organic growth -- the natural counterpart to code versioning. - **Changelog footer:** A scrollable list styled as a git log, each entry with a colored dot (commit status) and flat-styled metadata. **Spatial relationships:** Bento grid cells have 2px gap (the border IS the gap). Grid uses grid-template-areas for named placement. Overall max-width: 1100px. Internal cell padding: 24px. ## Typography and Palette **Fonts:** - **Display/Hero:** "Recursive" (Google Fonts) -- a variable font spanning sans to mono with casual to linear axes, used at clamp(36px, 6vw, 72px). The font's expressiveness (variable CASL axis) allows playful display headlines that can shift between casual and formal. Weight 800. - **Body text:** "Atkinson Hyperlegible" (Google Fonts) -- specifically designed for maximum legibility at 16px/1.7 line-height. Weight 400 for body, 700 for emphasis. Its clarity matches the flat-design ethos of functional simplicity. - **Code/Terminal:** "Fira Code" (Google Fonts) -- monospace with programming ligatures at 14px for all code elements. Weight 400. **Color Palette:** - **Background cream:** #f5efe8 (warm burgundy-cream base) - **Burgundy:** #7a3040 (primary accent -- headers, key elements) - **Burgundy light:** #a85060 (lighter burgundy for hover states) - **Sage green:** #6a8a60 (nature elements, success states) - **Flat blue:** #4a7aaa (code blocks, links) - **Flat amber:** #c8943a (warnings, highlights) - **Text primary:** #2a2020 (dark warm brown) - **Cell surface:** #faf7f2 (slightly lighter cream for bento cells) ## Imagery and Motifs **Core visual motifs:** - **Organic blobs as soft backgrounds:** Behind bento cells, subtle organic blob shapes (border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%) in very light tints (0.05 opacity) of the palette colors add gentle visual interest to the otherwise flat surfaces. - **Nature leaf patterns:** A CSS-generated repeating pattern of simple leaf shapes (rotated ellipses with a line through center) in sage green (#6a8a60 at 0.1 opacity), used as background in the nature band and subtly in certain bento cells. - **Glitch-style undo animations:** When interactive elements are "undone" (e.g., clicking a revert button), a brief glitch effect plays -- 2 frames of horizontal offset (translateX ±3px) with color channel separation (text-shadow with red/blue offset) over 150ms. The glitch represents the moment of reversal. - **Flat CSS-only diagrams:** Flow charts and state diagrams rendered entirely in CSS (flexbox, borders, pseudo-elements for arrows) using flat colors. No images, no SVG -- pure CSS geometry representing undo/redo state machines. ## Prompts for Implementation **Flat bento developer experience:** The site should feel like opening a perfectly organized toolbox. Every element has a clear boundary, a solid color, and a purpose. Zero decorative shadows. Zero gradients. The beauty comes from arrangement and color harmony. **Bento grid implementation:** - display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; - grid-template-areas: "hero hero hero" "a b c" "d d e" "f g g"; - Each named area maps to a bento cell with its own background color. - 2px gap with matching border color creates the bento divider lines. **Glitch undo animation:** - @keyframes glitch { 0% { transform: translateX(0); } 25% { transform: translateX(-3px); text-shadow: 2px 0 #7a3040, -2px 0 #4a7aaa; } 50% { transform: translateX(3px); text-shadow: -2px 0 #7a3040, 2px 0 #4a7aaa; } 100% { transform: translateX(0); text-shadow: none; } } - Duration: 150ms, triggered on click for interactive "undo" elements. **Terminal prompt hero:** - Flat-bordered box (2px solid #7a3040, border-radius: 8px, background: #2a2020, color: #f5efe8). - Blinking cursor: span with CSS animation (opacity step-end). - No box-shadow -- the flat aesthetic must be maintained. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, gradients, box-shadows, 3D effects. Embrace absolute flatness. ## Uniqueness Notes **Differentiators from other designs:** 1. **Strict flat-design bento with zero shadows/gradients:** While other designs use bento layouts, this is the only one that enforces absolute flat design -- no shadows, no gradients, no 3D effects. The beauty comes purely from color and arrangement. 2. **Glitch animation as "undo" moment:** The brief glitch effect triggered on interactive reversal actions creates a unique visual metaphor -- the screen "breaks" for an instant during the undo, then resolves to a clean state. 3. **CSS-only flow diagrams for undo state machines:** Rendering technical diagrams (undo/redo state transitions) entirely in CSS without SVG or images creates a unique technical-aesthetic statement about the site's developer-tool identity. **Chosen seed/style:** aesthetic: flat-design, layout: bento-box, typography: expressive-variable, palette: burgundy-cream, patterns: glitch, imagery: organic-blobs, motifs: nature, tone: friendly **Avoided overused patterns:** photography imagery (90%), centered layout (98%), card-grid layout (96%), warm palette (94%), parallax patterns (99%), mono typography (81%), mysterious-moody tone (70%).