# mobbin.com

Source: https://mobbin.com/
Captured: 2026-09-13
Tags: saas, landing, light, both, minimal, corporate-clean, calm, confident, trustworthy, friendly
Colors: #fefefe, #d0d0d0, #505050, #707070, #afafaf, #313131, #909090, #0b0b0b
Type (h1): M Saans 652 · 80px/80px · 652 · tracking -0.6px — "Discover real-world design inspiration."
Type (h2): M Saans 652 · 24px/30px · 652 — "A growing library of"
Type (h3): M Saans 600 · 20px/26px · 600 — "Video"
Type (body): M Saans Variable Light · 20px/26px · 300 — "Featuring over 1,000 iOS & Web apps, and 200 sites — New content weekly."
Type (button): M Saans 600 · 16px/22px · 600 · tracking 0.2px — "Join for free"
Button (primary): "Join for free" — fill #141414, text #ffffff, radius 999px, border 0px, padding 11px 16px, height 44px, type 16px/600
Button (secondary): "See our plans" — text #141414, radius 999px, border 1px, padding 10px 16px, height 44px, type 16px/600
Radii: 24px (92), 999px (3), 99px (2)

## Images

- Hero (desktop): https://media.lvly.design/library/mobbin-com/hero.webp?v=a9faef02
- Page crop (mid-1): https://media.lvly.design/library/mobbin-com/mid-1.webp?v=7ea31f53
- Page crop (mid-2): https://media.lvly.design/library/mobbin-com/mid-2.webp?v=2201f9de
- Hero (mobile): https://media.lvly.design/library/mobbin-com/mobile-hero.webp?v=b321b031
- Full page (desktop): https://media.lvly.design/library/mobbin-com/full.jpg?v=c80b58ff
- Full page (mobile): https://media.lvly.design/library/mobbin-com/mobile-full.jpg?v=d3c4cd42
- Clip preview (mp4): https://media.lvly.design/library/mobbin-com/video-tajweb.preview.mp4?v=f243e948

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.

## Steal-worthy details

- Floating pill navbar (24px radius, light gray ground) that is sparse at rest and grows a black "Join for free" pill on scroll — the CTA arrives when intent does.
- Hero type does the whole job: 80px/80px, weight ~650, −0.6px tracking, near-black on white, no gradient, no illustration beyond a small gray squircle icon.
- Primary vs secondary CTA expressed by fill alone — solid #141414 pill next to a hairline-outlined pill with an arrow — same height (44px), same radius (999px).
- Grayscale logo strip ("Trusted by design teams at") keeps third-party marks from competing with the hero.
- A stats section that scatters real, full-color app icons as squircles around giant centered numerals; the gray page ground makes borrowed brand color feel intentional rather than noisy.
- Numbers as headline copy (1,428 apps / 621,500+ screens / 323,900 flows) in the same display face as the hero — the library's size is the pitch.
- Consistent 24px radius on every container (92 occurrences) with 999px reserved for pills — two radii, no exceptions.

## Style recipe

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.