# Design Language for undo.sh ## Aesthetics and Tone The visual identity of undo.sh channels the raw, unapologetic energy of neubrutalism -- thick black borders, visible structural seams, elements that refuse to hide behind polish -- but filtered through the conceptual lens of a magical "undo" button for life's mistakes. Imagine a library of regret where every shelf holds a 3D-rendered book you can pull off the wall to rewind a decision. The aesthetic is deliberately chunky: oversized UI primitives, exaggerated drop shadows (not subtle box-shadows but hard-offset blocks of solid color like 8px 8px 0px #000000), and interactive elements that look like physical buttons begging to be pressed. The neubrutalist framework is tempered by candy-bright colors that keep the mood from veering into severity -- this is not grim brutalism but a sugar-coated rebellion against sleek homogeneity. The tone is playful in the specific register of a mischievous librarian: intellectual but never stuffy, winking at the absurdity of wanting to ctrl-Z reality. Every surface communicates tactility -- thick borders make divs feel like stacked cardboard, shadows make panels feel like they hover above the page on invisible shelves, and the entire experience has the kinetic joy of rearranging blocks on a desk. ## Layout Motifs and Structure The layout eschews centered symmetry in favor of a **minimal-navigation** philosophy: there is no traditional navbar. Instead, a single floating "UNDO" button sits fixed in the bottom-right corner, rendered as a chunky 3D pill shape with a thick black border and a candy-pink (#FF6B9D) background. Pressing it triggers a page-wide rewind animation that scrolls back to the previous section. The page itself is structured as a vertical stack of **offset panels** -- rectangular content blocks that are deliberately misaligned, each shifted 20-40px left or right of center, creating a visual rhythm like books pulled partway off a shelf. Each panel has a thick 4px black border and a hard drop-shadow offset (8px right, 8px down, solid black). The grid uses a **2-column stagger** on desktop: content alternates between occupying the left 60% and the right 60% of the viewport, with the remaining 40% showing the background color or a decorative 3D book illustration. On mobile, panels stack vertically but maintain their slight horizontal offsets (10-15px) to preserve the neubrutalist character. Sections are separated not by whitespace but by bold, visible horizontal rules -- 4px solid lines in alternating candy colors (#FFD93D, #6BCB77, #4D96FF). The hero section occupies the full viewport and features a massive 3D-rendered open book as its centerpiece, with the domain name "undo.sh" stamped across its pages in a retro display typeface. ## Typography and Palette **Typography:** - **Headlines / Display:** "Bungee" (Google Fonts) -- a blocky, ultra-bold display typeface designed for vertical and horizontal signage, with a retro-display character that evokes marquee lettering and arcade cabinets. Used at 4rem-8rem for section titles. Weight 400 (its only weight, already extra-bold by design). Set with `letter-spacing: 0.04em` and `text-transform: uppercase` for maximum impact. Headlines use hard text-shadows: `3px 3px 0px #000000` to reinforce the neubrutalist depth. - **Subheadings:** "Lexend Mega" (Google Fonts) -- a wide, geometric sans-serif with exaggerated letter-spacing built into its design, creating a sense of authority and readability. Used at 1.5rem-2.5rem, weight 700. Color alternates between #FF6B9D and #4D96FF depending on section. - **Body Text:** "Space Grotesk" (Google Fonts) -- a proportional sans-serif with a technical, slightly retro character. Weight 400 for body, 500 for emphasis. Size 1.1rem with `line-height: 1.7`. Color: #2D2D2D on light backgrounds, #F5F5F5 on dark panels. - **Code / Accents:** "JetBrains Mono" (Google Fonts) -- used sparingly for terminal-style flourishes (the ".sh" in the domain, inline code snippets, the floating undo button label). Weight 500, size 0.9rem. **Palette:** | Role | Color | Hex | |------|-------|-----| | Background (primary) | Cream White | #FFF8E7 | | Background (alt panels) | Soft Lavender | #E8D5F5 | | Accent 1 (primary CTA, borders) | Candy Pink | #FF6B9D | | Accent 2 (highlights) | Electric Blue | #4D96FF | | Accent 3 (success/positive) | Mint Green | #6BCB77 | | Accent 4 (warning/attention) | Sunshine Yellow | #FFD93D | | Text (primary) | Near Black | #2D2D2D | | Text (inverted) | Off White | #F5F5F5 | | Borders / Shadows | True Black | #000000 | | Deep panel background | Rich Purple | #4A1A6B | The candy-bright palette deliberately avoids the warm-muted tones that dominate the portfolio. Every accent color is cranked to high saturation. The combination of cream backgrounds with punchy candy accents and hard black borders creates the signature neubrutalist tension between playfulness and structural rigidity. ## Imagery and Motifs **3D-Rendered Book Objects:** The primary visual motif is a series of 3D-rendered books -- thick, chunky, slightly cartoonish volumes with visible spine text, embossed covers, and exaggerated proportions. These are not photorealistic renders but stylized, almost toy-like objects with flat-shaded surfaces, bold edge highlights, and candy-colored covers that match the palette. Each section of the site features a different book-object: the hero has an open book with glowing pages, the "about" section shows a stack of tilted books, the "features" section displays books arranged in a circular formation like Stonehenge. These are implemented as static PNG/WebP images with CSS transforms (rotate, scale, translateZ) to simulate depth on hover. **Book-Scholarly Motifs:** Beyond the 3D books, scholarly motifs permeate the design: decorative elements include thick horizontal rules styled as bookmark ribbons (using CSS `clip-path` to create pointed ends), section numbers rendered in oversized circled numerals (like chapter markers), pull-quote blocks styled as marginalia with a vertical candy-pink border-left of 6px and italic "Lexend Mega" text, and footnote-style annotations that appear on hover as chunky tooltip boxes with the characteristic neubrutalist border treatment. **Decorative Patterns:** Between sections, thin repeating SVG patterns of tiny book silhouettes tile horizontally as dividers -- a scholarly wallpaper strip. The background of the hero section uses a subtle repeating pattern of faint grid dots (#E0D8C8 on #FFF8E7) reminiscent of dot-grid notebook paper, reinforcing the scholarly-stationery theme without overwhelming the 3D renders. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site should tell the story of "undo" as a philosophical concept -- each section is a chapter in a visual essay about the desire to reverse, rewind, and revise. The hero opens with the massive 3D book and the headline "WHAT WOULD YOU UNDO?" in Bungee, hard-shadowed, filling the viewport. As the user scrolls, each subsequent panel slides into view with a deliberate, mechanical animation -- not a smooth fade but a **snap-in** transition (elements translate from 30px below and snap to position with a CSS `transition-timing-function: steps(4, end)` to create a stuttery, lo-fi feel that contrasts with smooth modern web conventions). **Micro-Interactions:** Every interactive element must feel physically responsive: - Buttons depress on click: `transform: translate(4px, 4px)` with simultaneous shadow reduction from `8px 8px 0px` to `0px 0px 0px`, creating the illusion of a physical button being pushed into the surface. - Hover states on panels: border color shifts from black to the section's accent color, and the hard shadow changes color to match (e.g., `8px 8px 0px #FF6B9D`). - The floating UNDO button rotates 360 degrees on click with a `cubic-bezier(0.68, -0.55, 0.265, 1.55)` timing function before triggering the scroll-back. - Book images tilt on hover using CSS `transform: perspective(600px) rotateY(-8deg) rotateX(4deg)` creating a 3D pick-up-off-shelf effect. - Section chapter numbers increment with a CSS counter and pulse with a scale animation (`1.0 -> 1.15 -> 1.0` over 300ms) when they enter the viewport via IntersectionObserver. **Scroll Behavior:** Use `scroll-snap-type: y mandatory` on the main container so each section locks into the viewport like turning a page. Each snap-point section is `min-height: 100vh` with `scroll-snap-align: start`. The mechanical "page turn" sensation reinforces the book metaphor. Between sections, the candy-colored horizontal rules serve as visual "binding" that holds the book together. **Animation Guidelines:** All animations should feel chunky and deliberate, never smooth and polished. Prefer `steps()` timing functions over `ease-in-out`. Prefer `translate` snaps over gradual slides. The overall motion language should feel like stop-motion animation or a flip-book -- each frame is a distinct position rather than a continuous interpolation. This lo-fi motion aesthetic is the kinetic expression of the neubrutalist visual language. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, smooth gradient transitions, glassmorphism blur effects, corporate testimonial carousels. ## Uniqueness Notes **Differentiators from other designs:** 1. **Neubrutalism + Scholarly Book Motif Fusion:** No other design in the portfolio combines the raw, thick-bordered neubrutalist framework with academic book-scholarly motifs. The typical neubrutalist site leans into tech/startup aesthetics; undo.sh instead inhabits the world of libraries, chapters, and marginalia, creating a novel "punk librarian" visual identity that is structurally brutal but thematically intellectual. 2. **3D-Rendered Toy-Book Imagery:** While other designs use photography, illustration, or abstract shapes, undo.sh centers on stylized 3D-rendered book objects with candy-colored flat shading. These chunky, almost Playmobil-like books are neither photorealistic nor hand-drawn -- they occupy a unique visual register that feels tactile and collectible, like objects you want to pick up and examine. 3. **Stepped / Lo-Fi Motion Language:** Instead of the smooth, spring-physics animations that dominate the portfolio (spring: 32%, elastic: 13%, stagger: 60%), undo.sh uses CSS `steps()` timing functions and snap-position transitions to create a deliberately stuttery, stop-motion quality. This lo-fi motion vocabulary -- combined with the scroll-snap page-turn mechanic -- makes the site feel like a physical flip-book or a zoetrope, not a slick web app. 4. **Candy-Bright on Cream with Hard Black Borders:** The palette breaks from the warm-muted-gradient combinations that appear in 88-100% of existing designs. The specific combination of cream (#FFF8E7) background, hard black (#000000) structural borders, and punchy candy accents (#FF6B9D, #4D96FF, #6BCB77, #FFD93D) at full saturation creates a visual identity closer to a children's educational book than a typical web landing page -- joyful, legible, and unapologetically bold. 5. **Navigation-Free Floating UNDO Button:** Rather than a conventional navigation bar or hamburger menu, the entire navigation concept is reduced to a single thematic element -- the floating UNDO button that scrolls backward through sections. This minimal-navigation approach (3% frequency in existing designs) turns the site's own concept into its interface paradigm. **Chosen seed/style:** aesthetic: neubrutalism, layout: minimal-navigation, typography: retro-display, palette: candy-bright, patterns: micro-interactions, imagery: 3d-render, motifs: book-scholarly, tone: playful **Avoided overused patterns:** centered layout (99%), warm palette (100%), scroll-triggered as sole animation (97%), mono typography (99%), minimal imagery (95%), vintage motifs (89%), gradient palette (88%), friendly tone (99%). Instead chose underused: neubrutalism (2%), minimal-navigation (3%), retro-display (1%), candy-bright (1%), book-scholarly (4%).