gumroad.com

Earn your first dollar online with Gumroadsaved 26d ago · captured 26d ago

Eight details, eight pinned.

View as Markdown ↗

Colors8 colors · ground #F5F5F2

ground#f5f5f2·78.43%accent#fb90e9·5.11%#d1d0cf·4.15%#060506·2.56%#b4aab0·2.37%#cd77bc·1.65%#8f9190·1.50%#51464f·0.98%

Sized by coverage · click to copy.

Typography1 family · 4 styles · ABC Favorit

Go from 0 to $1

ABC Favorit · 96/96 · 400 · -0.4px

We want you to try them, lots of them, and find out what works.

ABC Favorit · 48/60 · 400 · -0.4px

Max Ulichney

ABC Favorit · 18/28 · 700 · -0.4px

Body

Contribute or fork on GitHub

ABC Favorit · 16/24 · 400 · -0.4px

Specimens are the page's own words at their measured metrics; shown in Inter when the family is not loaded.

ButtonsStart selling2 styles

Start selling9.7K

primary · fill #000000 · label #ffffff · radius 0px · border 0px · padding 8px 24px · height 79px · type 18px / 400

secondary · fill — · label #000000 · radius 9999px · border 1px · padding 6px 6px · height 34px · type 16px / 400

Shape5 radii · 115 uses

9999px96 uses · 83%

24px10 uses · 9%

4px6 uses · 5%

16px2 uses · 2%

6px1 use · 1%

AnalysisGumroad's homepage is a long, flat, hairline-ruled comic strip on warm off-white (#f4f4f0), set entirely in one grotesk (ABC Favorit).

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.

Style recipeBuild on a warm off-white ground (#f4f4f0) with pure black (#000000) for every rule, outline, glyph and primary fill.

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.

Details8 worth noting

gumroad.com — the captured page — Landing, 1440 × 900 · captured Sep 13, 2026

1Header as a ruled table
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).
2192px hero with a dollar glyph
Hero at 192px / 172.8px line-height, weight 500, −0.4px tracking; the dollar glyph carries the emphasis, no color needed.
3Pink 3D coins cropped by the viewport
Pink 3D coins (#fb90e9 face, #cd77bc edge) with 2px black outlines, cropped by the viewport so the composition feels bigger than the page.
4Two-cell CTA row
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.
5Racetrack loop as process diagram
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.
6Category browser as a sticker sheet
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.
7Full-bleed flat scenes as section breaks
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.
8Inverted black footer
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.

saas · landing · light · neo-brutalist, playful, organic · playful, confident, energetic, friendly, optimistic

sohna.dev/waterlemon0

folk.com0

gumroad.com

More like this