# Mobbin · Design system migration spec

> Source: https://mobbin.com  ·  Curated by OpenDesign  ·  en

> An excellent example of a 'content-first' UI where the design framework intentionally recedes to highlight the diverse screenshots it displays.

## 1. Identity DNA

Mobbin is a well-organized visual encyclopedia for digital design. Its identity is defined by extreme restraint, where the system’s monochromatic palette and structured grid serve as a clear, unadorned frame for the thousands of real-world UI patterns it catalogs.

**One-liner:** A clean, content-focused platform for discovering real-world mobile and web design inspiration.
**Keywords:** Design Inspiration · Mobile UI · Reference · Curation · Library
**Analogy:** A premium, organized gallery for design professionals.

## 2. Color

The color system is a study in strict monochromatics, using black for primary text, white for backgrounds, and carefully selected grays for secondary information. This eliminates chromatic distraction, ensuring the design references themselves remain the focal point.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F5F5F5` | card background |
| `--ink` | `#141414` | body text |
| `--ink-soft` | `#707070` | secondary text |
| `--muted` | `#ADADAD` | placeholder |
| `--line` | `rgba(64, 64, 64, 0.08)` | divider |

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

The guiding principle is clarity through high-contrast typography and neutral backgrounds.

## 3. Typography

The typographic voice is exclusively a clean grotesque-sans, deployed with tight letter-spacing for commanding headlines and generous line-height for readable body text. This consistent, professional category choice reinforces the platform’s authoritative and reference-focused tone.

- **Display:** grotesque-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 80px | 1.0 | 652 | -1px | Large hero headlines |
| heading | 56px | 1.0 | 652 | -0.6px | Section headlines |
| subheading | 32px | 1.125 | 456 | 0px | Card titles and secondary headings |
| body | 16px | 1.5 | 400 | 0.2px | Body text and navigation |

**Type rules:**
- 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

## 4. Spacing

A consistent 8px grid provides the foundational rhythm, with generous vertical spacing used deliberately to create breathing room and a sense of order.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base with 16px and 24px standard gutters.

## 5. Surfaces

Depth is suggested with exceptional subtlety through minimal, low-opacity shadows on cards and a single-pixel solid border on inputs and containers. These cues are functional, defining separate surfaces without introducing visual weight or three-dimensionality.

- **Radius:** sm 4px · md 16px · lg 24px · pill 9999px
- **Shadows:**
  - 0px 1px 2px 0px rgba(0, 0, 0, 0.04)
  - 0px 8px 40px 0px rgba(0, 0, 0, 0.04)
- **Borders:** 1px solid rgba(64, 64, 64, 0.08)

## 6. Layout

The layout skeleton begins with a centered, whitespace-heavy hero that establishes a clear visual hierarchy. It then transitions to a structured, browsable grid designed for efficient scanning and discovery of content.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion philosophy is one of near-invisible performance, using subtle opacity changes or color shifts for hover states and immediate, slight scale reduction for click feedback. Transitions between states and navigation are smooth but brief, prioritizing utility over flourish.

- **Durations:** micro 150ms · small 200ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color and background transitions on hover
  - Subtle fading for interactive elements

- **Hover:** Subtle color or opacity transitions
- **Click:** Immediate visual feedback via state changes
- **Transition:** 150ms-200ms duration with ease-in-out timing
- **Keyboard:** Standard focus outlines and tab navigation

## 8. Voice & Don'ts

The editorial voice is professional, clear, and authoritative, delivering value directly through bold, concise headlines and action-oriented calls to action. It deliberately avoids jargon, overly technical language, and all forms of marketing fluff.

- **Tone:** Professional, confident, and direct.
- **Headline style:** Bold, short, and punchy statements of value.
- **CTA style:** Action-oriented and benefit-driven (e.g., 'Join for free').
- **Avoid:** Playful or overly casual language / Excessive exclamation points / Technical jargon in hero copy / Cluttered or busy layouts

### Don'ts
- ❌ Don't use vibrant accent colors for the UI frame — screenshot shows a strict monochromatic palette.
- ❌ Don't use serif fonts for headlines — screenshot shows a clean, modern grotesque-sans.
- ❌ Don't use heavily shadowed cards — screenshot shows minimal, soft shadows.
- ❌ Don't use square corners on primary buttons — screenshot shows pill-shaped (9999px) buttons.
- ❌ Don't use small, cramped hero text — screenshot shows very large (80px) bold headlines.
- ❌ Don't clutter the interface with too many competing visual elements — screenshot shows a spacious, centered layout.

The system deliberately avoids vibrant accent colors, serif fonts, excessive shadows, and center-aligned text blocks, committing fully to its monochromatic, restrained foundation.

## System Prompt (paste into AI tool)

```
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.
```
