Mobbin

Overview

Mobbin is a design research platform that democratizes access to real-world UI patterns and interaction models from 400,000+ mobile and web app screenshots. The brand embodies a philosophy of 'Minimalist Clarity'—stripping away visual noise to surface actionable design insights. The aesthetic is deliberately austere: pure white backgrounds (#ffffff), near-black typography (#141414), and a surgical use of blue accents (#0065ff) for interactive elements. This creates a calm, focused environment where design patterns are the hero, not the interface itself. The emotional response is one of discovery without friction: users feel empowered to explore, compare, and extract inspiration quickly.

Mobbin's voice is direct, confident, and design-literate. The brand speaks to professionals who value precision and speed—no marketing fluff, no jargon. Vocabulary patterns favor concrete nouns (patterns, screenshots, inspiration) over abstract adjectives. The tone is matter-of-fact, almost journalistic: 'Discover real-world design inspiration' not 'Unlock your creative potential.' Example sentence in brand voice: 'Find design patterns in seconds—no scrolling through design blogs.'

Colors

The color system is anchored in a high-contrast, light-dominant palette designed for readability and focus. Primary (#141414) is the near-black used for all body text, buttons, and primary interactive elements—it is the workhorse color, appearing in 163 instances across the site. On-primary (#ffffff) provides maximum contrast for text on dark buttons. Secondary (#0065ff) is a vivid, saturated blue reserved exclusively for links, focus states, and secondary CTAs; it appears in 29+ instances and commands attention without overwhelming. Tertiary (#217f08) is a muted green used sparingly for success states and positive indicators. The surface stack is entirely white and light grays: surface (#ffffff) is the page background, surface-container-low (#f0f0f0) is used for input fields and subtle co

Typography

The type system is built on M Saans, a custom variable typeface that communicates precision and modernity. Display (80px, weight 652) is reserved for hero headlines and sets the tone with its generous size and tight line-height (88px). Headline-lg (56px, weight 652) is used for section titles and maintains the same visual weight. Headline-md (40px, weight 600) steps down for subsections. Title-lg (24px, weight 600) is the workhorse for card titles and feature names. Body-lg (18px, weight 456) and body-md (16px, weight 456) use a lighter weight (456 instead of 600) to create visual distinction from headings and improve readability at smaller sizes. Label-md (16px, weight 600) and label-sm (14px, weight 600) are used for buttons, badges, and UI labels. Letter-spacing is subtle across all lev

Layout

The page uses a fluid, centered layout with a max-width of 1280px, ensuring content remains readable on ultra-wide displays while maintaining focus on mobile. The grid is 12 columns with a 24px gutter, providing flexibility for 2-column, 3-column, and 4-column layouts depending on content type. White-space is generous: section separation uses lg spacing (40px) vertically, creating clear visual rhythm and preventing cognitive overload. Container padding uses md spacing (24px) on desktop, reducing to sm spacing (12px) on mobile. The hero section spans full-width with centered content, using display typography (80px) for the headline and body-lg (18px) for supporting text. Cards and list items use md spacing (24px) for internal padding, with sm spacing (12px) between list items. The spacing s

Elevation & Depth

Depth is conveyed through subtle shadows and border treatments rather than color shifts or blur effects. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle separation of UI elements like input fields and small components; md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards, modals, and interactive surfaces that require clear visual distinction from the background; and lg (0 8px 40px rgba(0, 0, 0, 0.1)) for floating elements like popovers and expanded cards on hover. All cards and containers use a 1px solid border at #d0d0d0 (outline-variant) to define edges without

Shapes

The shape philosophy is 'Geometric Precision'—rounded corners are used strategically to soften hard edges while maintaining a modern, technical aesthetic. Buttons use full rounding (999px border-radius) to create pill-shaped affordances that feel approachable and clickable. Cards and containers use lg rounding (16px) to balance softness with structure, preventing the design from feeling too organic or playful. Input fields use DEFAULT rounding (8px), a middle ground that signals form elements without excessive softness. Dividers and small UI elements use sm rounding (4px) or none at all, maint

Components

Action Elements Buttons are the primary call-to-action mechanism. Button-primary uses primary color (#141414) background with on-primary (#ffffff) text, label-md typography (16px, weight 600), full rounding (999px), and padding of 11px 24px for a 44px total height. On hover, the background shifts to primary-container (#262626), maintaining contrast while signaling interactivity. On active/pressed, the background darkens to primary-fixed-dim (#1a1a1a). Button-secondary is transparent with a 1px border at outline (#adadad), primary text color, and identical padding and rounding. On hover, the background fills with surface-container-high (#e8e8e8). All buttons use a 200ms ease-out transition for background-color changes. Focus states apply a 3px blur shadow at rgba(0, 101, 255, 0.1) aroun

Do's and Don'ts

**Do**

• Do use primary (#141414) for all body text, button labels, and primary interactive elements—it is the workhorse color and ensures maximum readability.
• Do reserve secondary (#0065ff) exclusively for links, focus states, and secondary CTAs—never use it for large surfaces or body text.
• Do apply full rounding (999px) to all buttons to make them unmistakably clickable and approachable.
• Do use md spacing (24px) as the default padding for cards and containers; use lg spacing (40px) for section breaks to create clear visual rhythm.
• Do include a visible focus state (3px blur shadow at rgba(0, 101, 255, 0.1)) on all interactive elements for keyboard navigation accessibility.
• Do maintain high contrast between text and background—minimum 7:1 ratio for body text, 4.5:1 for UI labels.
• Do use M Saans 652 (weight 652) for display and headline-lg to communicate precision and modernity.
• Do apply 200ms ease-out transitions to all color and shadow changes for smooth, professional interactions.

**Don't**

• Don't use secondary (#0065ff) as a primary button color or large surface—it is an accent only and will overwhelm the interface.
• Don't apply shadows to buttons; rely on color contrast and rounding to signal interactivity.
• Don't use border-radius values between 20px and 50% on non-circular elements—stick to the defined scale (sm, DEFAULT, md, lg, xl, full).
• Don't reduce padding below sm (12px) on interactive elements; this creates poor touch targets and feels cramped.
• Don't use outline (#adadad) or outline-variant (#d0d0d0) for text—these are border colors only; use on-surface (#141414) or on-surface-variant (#717171) for text.
• Don't apply letter-spacing greater than 0.1em on body text—it reduces readability and feels artificial.
• Don't mix M Saans weights arbitrarily; use the defined typography scale (display, headline-lg, headline-md, title-lg, body-lg, body-md, label-md, label-sm).
• Don't omit focus states on interactive elements—keyboard users depend on visible focus indicators for navigation.