mobbin.com

Mobbin's landing page is a near-monochrome white stage that lets other people's brands supply the color. The hero is pure typographic weight: an 80px near-black grotesk (M Saans at weight 652, −0.6px tracking) set in two centered lines, a light-weight 20px gray subline, and a black pill "Join for free" paired with an outlined ghost pill. Everything is centered, everything is rounded — a floating 24px-radius pill nav that picks up a solid CTA once you scroll, a soft gray squircle app-icon mark, and a pale gray card edge peeking in from the bottom of the viewport. The palette is 94% white with a ladder of grays (#d0d0d0 → #0b0b0b), so when the page scatters real app icons (Mailchimp yellow, Twitch purple, Duolingo green, Airbnb red) around a giant "1,428 apps / 621,500+ screens" counter, those icons read as the only saturated things on the page — the product's inventory is its decoration.

Build on a pure white ground (#ffffff) with a single tonal step for surfaces: a light warm-gray (#f3f3f1-ish, sampled from the nav and icon tile) for the nav pill, cards and section grounds — never a border where a tone shift will do. Text is a gray ladder: display and primary text #0b0b0b–#141414, body #505050, muted captions #909090, hairlines #d0d0d0. Use one variable grotesk with a wide weight range (M Saans; substitute Inter Display / Geist / Söhne): headlines at 64–80px, weight 650, line-height 1.0, tracking −0.6px, sentence case with a terminal full stop; body at 18–20px, weight 300, line-height 1.3. Center everything in the hero and keep the measure to ~14 words per line. Exactly two radii: 24px for containers and 999px for pills and buttons. Buttons are 44px tall, 16px horizontal padding, 16px/600 label: primary = solid #141414 with white text, secondary = transparent with a 1px #d0d0d0 outline and a trailing arrow. Navigation is a floating pill (max-width ~620px, 60px tall) on the gray surface tone, with plain 16px/500 links and no underlines; reveal the primary CTA inside it on scroll. Keep the page itself colourless and let content supply saturation — full-color icons or screenshots on rounded-square tiles (22–28% radius), scattered with generous whitespace around a centered typographic focal point. Third-party logos render in a mid gray (#909090) at a uniform cap height. No drop shadows, no gradients, no decorative illustration; motion is limited to gentle fades and the nav's CTA reveal.