CURATED · OPEN · FREE

Mobbin

A clean, content-focused platform for discovering real-world mobile and web design inspiration.

ReferenceMobile UILibraryGrid
Mobbin screenshot
↓ Download design system (9 MB)Open in OpenDesign

Visit: https://mobbin.com

📦 Browse pack contents →

01

Identity DNA

Design InspirationMobile UIReferenceCurationLibrary

A premium, organized gallery for design professionals.

02

Color

#141414Ink
#707070Ink soft
#FFFFFFBG
#F5F5F5BG soft
#ADADADMuted
rgba(64, 64, 64, 0.08)Line

Monochromatic and minimal, using high-contrast black and white with subtle grays to let the colorful content screenshots stand out.

03

Typography

grotesque-sans

Headlines use tight line-height (1.0) and negative letter-spacing · Body text uses a relaxed line-height (1.5) for readability · Weights are primarily 400 for body and 600-650 for emphasis

04

Spacing

4px
8px
16px
24px
32px
48px
64px
96px

Consistent 4px base with 16px and 24px standard gutters.

05

Surfaces

sm · 4px
md · 16px
lg · 24px
pill · 9999px

1px solid rgba(64, 64, 64, 0.08)

0px 1px 2px 0px rgba(0, 0, 0, 0.04) · 0px 8px 40px 0px rgba(0, 0, 0, 0.04)

06

Layout

1280container
12columns
24pxgutter
768 / 1024breakpoints

Centered, single-column hero leading into a wide, multi-column grid for content.

07

Motion & Interaction

150msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth color and background transitions on hover · Subtle fading for interactive elements

Subtle color or opacity transitions · Immediate visual feedback via state changes

08

Components

09

Voice & Don'ts

10

Inside the pack — real screenshots

Mobbin — 桌面首屏（hero）
桌面首屏（hero）
Mobbin — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mobbin — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mobbin — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mobbin — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mobbin — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mobbin — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mobbin — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mobbin — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mobbin — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mobbin — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mobbin — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mobbin — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mobbin — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mobbin — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mobbin — 移动首屏
移动首屏

Captured from the live site · real computed styles

11

System prompt

Mobbin is a premium design reference tool for mobile and web UI. The design DNA is clean, monochromatic, and content-focused, using a strict black (#141414) and white (#FFFFFF) palette with subtle grays (#707070, #ADADAD) to let screenshots take center stage. Typography uses a clean grotesque-sans category with very bold, tight headlines and generous body text. Critical donts include: never use vibrant UI colors, never use serif fonts for headlines, and never crowd the layout with excessive elements. The layout follows a centered hero-to-grid pattern with generous white space and consistent 4px-based spacing.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko