Mobbin

Overview

Mobbin is a design research platform that democratizes access to real-world UI/UX patterns from 400,000+ mobile and web app screenshots. The brand embodies "Minimalist Clarity"—a design philosophy that strips away visual noise to expose pure, actionable inspiration. The aesthetic is deliberately austere: a white canvas (rgb(255, 255, 255)), near-black typography (rgb(20, 20, 20)), and surgical use of a single accent blue (#0065ff) that draws the eye to discovery moments. The emotional response is one of focused efficiency: users feel they can find what they need without distraction, as if browsing a curated archive rather than a chaotic database. Mobbin's voice is direct, confident, and unpretentious—it speaks to working designers who value speed and substance over marketing flourish. Example sentence in brand voice: "Find design patterns in seconds. No fluff, no filters—just the work that matters."

Colors

The Mobbin color system is built on a foundation of extreme contrast and functional restraint. Primary (#141414, rgb(20, 20, 20)) is the near-black used for all body text, headings, and the dominant CTA button ("Join for free"). This is not a neutral gray—it is intentionally dark enough to create maximum legibility and visual weight on the white surface. Secondary (#0065ff) is a saturated, medium-blue accent reserved for interactive elements, links, focus states, and secondary CTAs ("See our plans"). It appears sparingly but decisively, signaling interactivity without overwhelming. Tertiary (#217f08) is a success green used for status indicators and positive feedback. Error (#ce2b04) is a burnt-orange red for destructive actions and warnings. The surface stack is minimal: surface (#ffffff)

Typography

The type system is anchored by M Saans, a custom sans-serif family with distinctive weight variations (300, 380, 456, 570, 600, 652, 900) that allow for nuanced hierarchy without changing typeface. Display (80px, weight 652, -0.02em letter-spacing) is reserved for hero headlines like "Discover real-world design inspiration." and commands the page with its scale and weight. Headline-lg (56px, 652) and headline-md (40px, 600) are used for section titles and major content blocks, maintaining the bold, confident tone. Title-lg (24px, 600) anchors card titles and subsections. Body-lg (18px, weight 456) and body-md (16px, 456) are the workhorse sizes for descriptive text and UI labels, using the lighter 456 weight to reduce visual heaviness at smaller sizes. Label-md (16px, 600) and label-sm (14

Layout

Mobbin uses a fluid, center-aligned layout with a max-width container of 1280px (1262px observed in practice) to maintain focus on content without excessive horizontal sprawl. The page rhythm is built on a 12-column grid with consistent gutter spacing of 24px between columns. White-space is generous and intentional: the hero section uses lg spacing (40px) for vertical separation between the headline, subheading, and CTA buttons, creating breathing room that reinforces the minimalist aesthetic. Section-to-section transitions use xl spacing (64px) to signal major content shifts. The spacing scale is semantic: xs (4px) for micro-interactions like icon padding, sm (12px) for compact component spacing, md (24px) for standard padding and margins, lg (40px) for section breaks, and xl (64px) for m

Elevation & Depth

Elevation in Mobbin is achieved through subtle, layered shadows rather than color shifts or borders. The shadow system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for resting state cards and subtle depth, md (0 3px 8px rgba(0, 0, 0, 0.15)) for hovered cards and interactive elements, and lg (0 8px 40px rgba(0, 0, 0, 0.1)) for modals and elevated surfaces. The opacity values (0.06 to 0.15) are deliberately low to avoid darkening the white surface; the effect is one of gentle lift rather than dramatic shadow. Cards use a 1px solid border at #d0d0d0 (outline-variant) in addition to sm sh

Shapes

The shape philosophy is "Soft-Technical Minimalism"—rounded corners are used strategically to soften the austere geometry without introducing organic or playful aesthetics. Buttons use full rounding (999px border-radius) to create pill-shaped forms that feel modern and approachable while maintaining the clean, geometric aesthetic. Cards and containers use lg rounding (16px) to provide subtle softness; this is the most common radius on the page. Input fields use DEFAULT rounding (8px) for a more structured, technical appearance that signals form-based interaction. Small UI elements like badges

Components

Action Elements Buttons are the primary interactive element and use two distinct styles. Primary buttons ("Join for free") have backgroundColor: rgb(20, 20, 20), textColor: rgb(255, 255, 255), padding: 11px 24px, height: 44px, and border-radius: 999px. On hover, the background transitions to rgb(38, 38, 38) over 200ms (ease-out), providing tactile feedback without changing shape. Secondary buttons ("See our plans") use a transparent background with a 1px border at #adadad (outline), same padding and height, and the same border-radius. On hover, the background becomes #f0f0f0 (surface-container-low) while the border remains visible. Both button styles use label-md typography (M Saans 600, 16px, 600 weight) with 0.01em letter-spacing for clarity.

Containers & Surfaces Cards are the