---
name: Mobbin
description: "An excellent example of a 'content-first' UI where the design framework intentionally recedes to highlight the diverse screenshots it displays."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#141414"
  secondary: "#707070"
  neutral: "#ADADAD"
  bg-soft: "#F5F5F5"
  line: "rgba(64, 64, 64, 0.08)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 80px
    lineHeight: 1.0
    fontWeight: 652
    letterSpacing: "-1px"
  heading:
    fontFamily: grotesque-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 652
    letterSpacing: "-0.6px"
  subheading:
    fontFamily: grotesque-sans
    fontSize: 32px
    lineHeight: 1.125
    fontWeight: 456
    letterSpacing: "0px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0.2px"

rounded:
  sm: 4px
  md: 16px
  lg: 24px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

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

*A premium, organized gallery for design professionals.*

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#141414`)** — uses `ink` token
- **Secondary text (`#707070`)** — uses `ink-soft` token
- **Muted (`#ADADAD`)** — uses `muted` token
- **Borders (`rgba(64, 64, 64, 0.08)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** 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

## Layout

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

*Rhythm:* Consistent 4px base with 16px and 24px standard gutters.

## Elevation & Depth

- 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)

## Shapes

- `sm`: 4px
- `md`: 16px
- `lg`: 24px
- `pill`: 9999px

## Components

- **button:** Pill-shaped primary buttons (black) and secondary buttons (white with border).
- **card:** Large, rounded cards (24px radius) designed to showcase screenshots.
- **chip:** Pill-shaped toggles or tags with subtle backgrounds.
- **input:** Minimal, borderless or subtly bordered inputs.
- **hero:** Centered headline with rotating app icons above and trusted logos below.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

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