---
title: "Mobbin design system"
variant: extended
source: https://mobbin.com/
captured_at: 2026-10-12
theme: light
industry: design
generator: Design DNA (https://four.wiralomi.com/style/mobbin-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Mobbin · Design System

> A quiet canvas for discovering what works.

**Theme:** light · **Industry:** design · **Source:** https://mobbin.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Mobbin pairs a restrained black-and-white interface with generous whitespace and vivid previews of real app designs. The page moves from a centered product-led hero to library features, customer stories, and a compact closing call to action.

## North star

Keep the interface monochrome and spacious so real product screens provide the page’s visual color and detail.

## Overview

The page uses a near-monochrome foundation: white is the primary canvas, #141414 carries headlines, navigation and the strongest calls to action, and #f4f4f4 marks soft surfaces and the customer-story band. Muted grays are reserved for supporting copy and subtle treatments rather than competing with the product. Saans gives the identity its rounded, contemporary character; oversized, tightly tracked headlines create a strong editorial entry point, while smaller, lightly tracked text keeps utility content calm. The hero is centered and spacious, with compact pill actions beneath the headline and a large interface preview below. Further down, app-screen imagery supplies color and detail, while cards and feature groups sit within generous whitespace. A full-width pale-gray storytelling section provides a clear rhythm change before the white closing CTA. Rounded cards and soft shadows add separation without heavy outlines.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Ink | `#141414` | `--color-soft-ink` | brand | Primary headline, navigation, body text, and the dark filled primary CTA. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, white content sections, and story cards. |
| Cloud Gray | `#f4f4f4` | `--color-cloud-gray` | surface | Pale section band, light interface surfaces, and subtle borders. |
| Quiet Gray | `#707070` | `--color-quiet-gray` | neutral | Muted descriptions and supporting text; also appears in a subtle text gradient. |
| Silver Haze | `#c2c2c2` | `--color-silver-haze` | neutral | Gradient highlight in muted text treatment, not a dominant page color. |
| Ash Gray | `#adadad` | `--color-ash-gray` | neutral | Occasional subdued footer text. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#141414` (Soft Ink) · `--color-surface-2` → `#f4f4f4` (Cloud Gray) · `--color-text` → `#141414` (Soft Ink) · `--color-text-muted` → `#707070` (Quiet Gray) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#f4f4f4` (Cloud Gray)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#141414` | `#ffffff` | 18.42:1 | AAA |
| `#141414` | `#f4f4f4` | 16.75:1 | AAA |
| `#707070` | `#ffffff` | 4.95:1 | AA |
| `#707070` | `#141414` | 3.72:1 | AA-large |
| `#707070` | `#f4f4f4` | 4.5:1 | AA |
| `#ffffff` | `#141414` | 18.42:1 | AAA |
| `#ffffff` | `#f4f4f4` | 1.1:1 | fail |

### Gradients

- `linear-gradient(100deg, rgb(112, 112, 112) 35%, rgb(194, 194, 194) 50%, rgb(112, 112, 112) 65%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| saans | `--font-body` | webfont | 652, 456, 600, 440, 400 | Display and interface typography throughout the page. | Inter |

- **saans:** Large headlines use a heavy weight and tight negative tracking; body, nav, and links use lighter weights with subtly positive tracking.

### Type scale — Augmented Fourth (ratio ≈ 1.38, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 652 | 1 | -0.007em | — | saans | Oversized hero and campaign display headlines. |
| h1 | 64px | 652 | 1 | -0.009em | — | saans | Primary hero headline. |
| h2 | 44px | 652 | 1.09 | -0.009em | — | saans | Major section headings and closing CTA. |
| h3 | 24px | 652 | 1.25 | 0 | — | saans | Feature, story, and content card headings. |
| h4 | 20px | 440 | 1.3 | 0 | — | saans | Secondary titles and supporting subheads. |
| body | 16px | 456 | 1.38 | 0.013em | — | saans | Descriptions and explanatory copy. |
| caption | 14px | 456 | 1.43 | 0.014em | — | saans | Fine print, metadata, and small supporting labels. |
| nav | 16px | 600 | 1.38 | 0.013em | — | saans | Header and footer navigation labels. |
| link | 16px | 600 | 1.38 | 0.013em | — | saans | Text links and secondary pill actions. |

OpenType features in use: `"calt" 0, "dlig", "ss07"`.

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 2, 4, 8, 12, 16, 20, 24, 32, 40, 64, 80, 160, 200 px.
- Section rhythm 80px · element gap 8px · card padding — · max content width 1045px.

Use a centered content frame with a measured maximum width of 1045px, but let section backgrounds span the viewport. The hero aligns centrally, while later feature areas alternate between centered grids and left-aligned split layouts. Keep the rhythm open: section gaps measure 80px, with smaller 8px element gaps for compact groups. Content density stays comfortable; large media previews and visible whitespace balance the page. The customer-story area forms a distinct full-width gray band.

## Shape & elevation

- Radius: button `14px` · card `20px` · media `19px` · link `9999px` · xs `3px` · sm `8px` · md `14px` · lg `16px` · xl `18px` · 2xl `19px` · pill `9999px`
- Shadow `md` (media, card, other): `rgba(0, 0, 0, 0.04) 0px 8px 24px 0px`
- Shadow `inset` (other): `rgba(0, 0, 0, 0.1) 0px 0px 0px 0.5px inset`
- Motion: standard transition `0.15s cubic-bezier(0, 0, 0.2, 1)` on interactive elements.

Most sections remain flat against white or pale gray rather than relying on borders. Product media and occasional cards use a soft measured shadow of rgba(0, 0, 0, 0.04) 0px 8px 24px 0px. Rounded containers and light surface contrast establish layering; avoid strong outlines or dramatic depth.

## Imagery

Product UI is the primary imagery: browser-like library previews, rows of app screens, and interface collections. Keep previews large enough to read as curated product evidence, set them in pale rounded containers, and let their native interface colors provide contrast. Customer logos, AI tool marks, and finance app icons appear as supporting assets; they are not the brand palette. The hero preview includes video.

## Components

### Header navigation

Compact brand mark at left, followed by MCP, Customers, and Pricing links; social icons and Log in sit on the right.

### Hero CTA pair

Centered pill actions: dark #141414 Join for free and light See plans, with measured button radius 14px.

### Library preview

Large product interface preview placed in a pale rounded media frame, with a soft shadow and curated app-screen content.

### Screen gallery

Horizontal showcase of many app screenshots, using rounded media cards to make the library itself the visual proof.

### Category collection

Three-column grid presenting Apps, Sites, Screens, Flows, Animations, and UI Elements as separate library categories.

### Customer story cards

Three white story cards arranged in a grid within the #f4f4f4 section band; logos and compact editorial copy lead each card.

### Closing CTA

Centered headline and short supporting copy on white, followed by the same dark primary and light secondary pill actions.

### Measured component styles

- **Primary button** (“Join for free”): background #141414 · text #ffffff · radius 9999px · padding 0px 16px · 600 16px saans
- **Link** (“How Cursor offloads the 20% to Mobbin, s”): background #ffffff · text #141414 · radius 24px · padding 40px · 400 16px saans
- **Card**: transparent background · text #141414 · radius 20px · padding 0px · 400 16px saans · shadow rgba(0, 0, 0, 0.04) 0px 8px 24px 0px
- **Navigation item** (“MCP Customers Pricing”): transparent background · text #141414 · radius 0px · padding 0px · 400 16px saans

## Do

- Use #ffffff as the dominant canvas.
- Set primary copy and filled CTAs in #141414.
- Reserve #f4f4f4 for quiet bands and soft surfaces.
- Let product screenshots supply most vivid color.
- Center the hero and give it generous whitespace.
- Use Saans-style rounded typography with tight display tracking.

## Don't

- Don't introduce unmeasured accent colors into the interface.
- Don't crowd the hero with extra navigation or controls.
- Don't turn every section into a card grid.
- Don't use heavy borders or high-contrast shadows.
- Don't let gray supporting copy compete with headlines.
- Don't apply product-art colors as brand colors.

## Agent prompt

Build a new Mobbin-style page with a white Gallery White (#ffffff) canvas, Soft Ink (#141414) headlines and primary actions, and Cloud Gray (#f4f4f4) for restrained surface contrast. Use Saans or a close Inter substitute, with large tightly tracked display headlines and calm, slightly tracked supporting text. Keep the header compact, center the hero, and pair it with a large rounded product-interface preview. Organize the rest into generous sections with alternating centered grids and split layouts; use real product-screen imagery as the main source of color. A pale gray customer-story band can establish a rhythm change. Favor rounded media and cards with only soft shadows, not heavy borders. Finish with a clear centered CTA and paired pill actions. Preserve substantial whitespace and avoid adding unmeasured brand colors.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | footer | Dark four-column footer with grouped links and social destinations. | Grouped navigation, Policy and copyright links | #141414 background, Light text and icons, Four columns |
| 2 | hero | Centered hero and large product preview on a white canvas. | Primary and secondary CTA, Product demonstration | Oversized headline, Rounded media frame, Pill buttons |
| 3 | logo-cloud | Centered trust statement above a compact row of logos. | Social proof | Monochrome logos, Open white space |
| 4 | feature-split | Left-aligned editorial copy on white, followed by the next media feature. | Problem-to-solution framing | Bold dark heading, Muted supporting copy |
| 5 | gallery | Wide horizontal strip of interface imagery in a multi-column media gallery. | Browse visual examples | Rounded screenshot cards, Product UI collage |
| 6 | category-nav | Centered heading over a three-column by two-row category grid. | Explore by content type | Six category tiles, Light surface cards |
| 7 | integrations | Left-aligned integration pitch with tool marks and a large adjacent product area. | Connect MCP, Explore compatible tools | Tool logos, Large preview surface |
| 8 | testimonials | Centered heading and CTA above three story cards in a pale gray band. | Read customer stories, Browse case studies | #f4f4f4 section background, White rounded cards |
| 9 | testimonials | Single featured quote within the continuing pale gray section. | Customer endorsement | Large quote, Attribution with portrait |
| 10 | feature-split | Two-column feature area with copy and finance app imagery. | Explore specialist plan, Plan availability note | App icon cluster, Text-led product pitch |
| 11 | cta | Centered closing message and paired actions on white. | Join for free, See plans | Large dark headline, Pill CTA pair |

## Source CSS custom properties (selected)

```css
--blog-page-background: hsl(0 0% 100%);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/mobbin-com