# gumroad.com

Source: https://gumroad.com/
Captured: 2026-09-13
Tags: saas, landing, light, both, neo-brutalist, playful, organic, playful, confident, energetic, friendly, optimistic
Colors: #f5f5f2, #fb90e9, #d1d0cf, #060506, #b4aab0, #cd77bc, #8f9190, #51464f
Type (h1): ABC Favorit · 96px/96px · 400 · tracking -0.4px — "Go from 0 to $1"
Type (h2): ABC Favorit · 48px/60px · 400 · tracking -0.4px — "We want you to try them, lots of them, and find out what works."
Type (h3): ABC Favorit · 18px/28px · 700 · tracking -0.4px — "Max Ulichney"
Type (body): ABC Favorit · 16px/24px · 400 · tracking -0.4px — "Contribute or fork on GitHub"
Type (button): ABC Favorit · 18px/28px · 400 · tracking -0.4px — "Start selling"
Button (primary): "Start selling" — fill #000000, text #ffffff, radius 0px, border 0px, padding 8px 24px, height 79px, type 18px/400
Button (secondary): "9.7K" — text #000000, radius 9999px, border 1px, padding 6px 6px, height 34px, type 16px/400
Radii: 9999px (96), 24px (10), 4px (6), 16px (2), 6px (1)

## Images

- Hero (desktop): https://media.lvly.design/library/gumroad-com/hero.webp?v=932b3af1
- Page crop (mid-1): https://media.lvly.design/library/gumroad-com/mid-1.webp?v=44a8e1bb
- Page crop (mid-2): https://media.lvly.design/library/gumroad-com/mid-2.webp?v=0320d6b6
- Hero (mobile): https://media.lvly.design/library/gumroad-com/mobile-hero.webp?v=85506b66
- Full page (desktop): https://media.lvly.design/library/gumroad-com/full.jpg?v=9267bef4
- Full page (mobile): https://media.lvly.design/library/gumroad-com/mobile-full.jpg?v=af5f2351
- Clip preview (mp4): https://media.lvly.design/library/gumroad-com/video-7xb88w.preview.mp4?v=5b739a53

Gumroad's homepage is a long, flat, hairline-ruled comic strip on warm off-white (#f4f4f0), set entirely in one grotesk (ABC Favorit). The hero is a 192px "Go from 0 to $1" flanked by bubblegum-pink isometric coins stamped with a black G; then the page loosens into full-bleed illustrated panels — a saturated yellow racetrack loop with a blob-headed pink character, a field of die-cut sticker icons between white category pills, a teal-and-yellow street scene with cartoon creators — before ending on a solid black footer with a pink arrow button. The neo-brutalist bones never change: 1px black rules cell the header into columns, the primary button is a hard-cornered black block, inputs are 1px black outlines, every illustration wears a 2px black contour, and nothing casts a shadow. The result is a marketplace that reads like a zine — rigid grid, loud primaries, hand-drawn people — confident enough to skip every SaaS convention except the CTA.

## Steal-worthy details

- Header as a ruled table: full-height 1px black dividers make "Log in" and the solid-black "Start selling" cell read as grid columns, with the active nav item as the page's one black pill (radius 9999px).
- Hero at 192px / 172.8px line-height, weight 500, −0.4px tracking; the dollar glyph carries the emphasis, no color needed.
- Pink 3D coins (#fb90e9 face, #cd77bc edge) with 2px black outlines, cropped by the viewport so the composition feels bigger than the page.
- Two-cell CTA row: solid black square button (8px 24px padding, 18px, radius 0) beside an outlined search input — one filled, one hollow, identical rule weight and height.
- A giant yellow stadium-shaped "loop" diagram: four steps on an arrowed racetrack with a character standing in it, so the process graphic doubles as the section's hero art.
- Category browser as a sticker sheet: white pill chips (radius 9999px) interleaved with die-cut icon stickers in yellow, coral, lilac, teal and pink, each with a black outline and a white sticker border.
- Full-bleed flat scenes in two-color blocks (yellow road on teal ground) with black-contour cartoon people, used as section breaks instead of whitespace.
- Black footer inverts the system rather than muting it: white 48px display heading, a white outlined email field, and a small pink square arrow button as the single color note.

## Style recipe

Build on a warm off-white ground (#f4f4f0) with pure black (#000000) for every rule, outline, glyph and primary fill. Use one hero accent, bubblegum pink (#fb90e9, shade #cd77bc), and a small saturated supporting set for illustration only — marigold yellow (#ffc900), teal (#23a094), coral (#ff6b4a), lilac (#90a8ed) — never on UI chrome. Set everything in one geometric grotesk (ABC Favorit; substitutes Neue Haas Grotesk, Söhne, Favorit-likes) at weight 400–500, −0.4px tracking: display 160–200px at line-height 0.9, section heads 48–64px, body 16px/24px. Structure with 1px black hairlines that run full width or full height so navs and toolbars become cells of a table. Controls are square: radius 0 on the primary button (solid black, white text, 8px 24px, 18px), 1px black outlines on inputs; reserve radius 9999px for pills, chips and one active-state nav item, 24px for content cards. No shadows, no gradients, no tints. Depth and warmth come from flat illustration with 2px black contours — isometric objects, die-cut sticker icons with a white border, blob-headed cartoon people in two-color full-bleed scenes — used as section breaks in place of whitespace. Invert to a solid black block for the footer, keeping the same rules and one pink control. Copy stays short, declarative and money-literal.