Gumroad Landing Page with Bento Grid

Overview

This landing page is a premier example of 'Neo-Brutalist' web design, combining high-contrast layouts with playful illustrations and a robust bento grid structure. It effectively balances a professional SaaS offering with a creative, approachable aesthetic, making it an excellent reference for builders looking to create high-impact, content-rich marketing pages.

Design System

• Color Palette & Visual Hierarchy: The palette relies on a stark high-contrast base of pure black (#000000) and white, accented by vibrant 'candy' colors like bubblegum pink, bright yellow, and orange. Hierarchy is established through thick black borders (1px to 2px) and 'hard' drop shadows that create a physical, layered feel.
• Typography: The site uses 'ABC Favorit' (a geometric grotesque). Headlines are massive (reaching up to text-9xl or 12rem for data points), while body copy remains legible with generous leading. Bold weighting is used extensively for labels and calls to action.
• Page Structure: The flow starts with a high-concept hero (Go from 0 to $1) followed by a asymmetrical bento grid of features. It transitions into a high-visibility social proof section (the large dollar counter), followed by a masonry-style testimonial layout and multiple marquee-driven discovery sections.
• Reusable Components:
  • Brutalist Buttons: Features a triple-layered effect (black/red/yellow) that shifts on hover.
  • Feature Bento Cards: Rounded-corner rectangles (3xl) with distinct 'order' properties to swap image and text positions based on screen size.
  • Animated Marquees: Fast-moving ticker tapes using CSS transforms for category discovery.
  • Sticky Header: A clean, white-to-black transition header with GitHub star integration.
• Interaction & Motion: Hover states are tactile and reactive, typically involving a -2px translation and a corresponding 2px shadow shift to simulate a button press. The use of Lottie animations and CSS-based infinite marquees adds constant micro-kinetic energy to the page.
• Mobile Behavior: The layout is highly responsive, utilizing Tailwind-style utilities (lg:basis-2/3, md:h-120). On smaller screens, the side-by-side bento items stack vertically, and the navigation collapses into a full-width black overlay menu.

Use Cases

• Who Should Clone This: Creative marketplaces, portfolio sites, and niche SaaS platforms that want to stand out from the typical 'minimalist' startup aesthetic.
• Remix Directions:
  • Brand Swap: Keep the bento grid logic and hard-shadow buttons but replace the pink/yellow palette with a more corporate blue/emerald for a 'Professional Brutalism' look.
  • Information Architecture: Reuse the 'Sell Anything' masonry section to showcase different product tiers or service categories.
  • Social Proof: The large income counter ($2,109,823) can be remixed into a 'Users Served' or 'Projects Completed' milestone block.
• Clone Scope:
  • Quick Clone: The animated marquee and 'Brutalist' button hover effects.
  • Full Clone: The entire landing page structure for a creator-focused marketplace or an educational course platform.