---
version: alpha
name: Mobbin
description: "Ink-black type on paper white — a library that shows the work, never shouts."
colors:
  on-surface-variant: "#ADADAD"
  on-surface: "#141414"
  surface: "#FFFFFF"
  outline: "#414141"
  primary: "#0000EE"
  gray-600: "#717171"
  gray-500: "#747474"
  gray-400: "#404040"
  surface-sunk: "#EDEDED"
  surface-line: "#E7E7E7"
typography:
  display:
    fontFamily: M Saans
    fontSize: 80px
    fontWeight: 380
    lineHeight: 1
    letterSpacing: -0.01em
  heading:
    fontFamily: M Saans
    fontSize: 56px
    fontWeight: 380
    lineHeight: 1.05
    letterSpacing: -0.01em
  subheading:
    fontFamily: M Saans
    fontSize: 32px
    fontWeight: 380
    lineHeight: 1.15
    letterSpacing: 0em
  title:
    fontFamily: M Saans
    fontSize: 24px
    fontWeight: 380
    lineHeight: 1.25
    letterSpacing: 0em
  body-large:
    fontFamily: M Saans
    fontSize: 20px
    fontWeight: 380
    lineHeight: 1.4
    letterSpacing: 0em
  body:
    fontFamily: M Saans
    fontSize: 16px
    fontWeight: 380
    lineHeight: 1.5
    letterSpacing: 0em
  caption:
    fontFamily: M Saans
    fontSize: 14px
    fontWeight: 380
    lineHeight: 1.45
    letterSpacing: 0em
rounded:
  buttons-pills-search-field: 999px
  large-card-panel: 30px
  card: 24px
  panel: 20px
  chip-inset: 16px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
---
# Mobbin — Style Reference
> Ink-black type on paper white — a library that shows the work, never shouts.

**Theme:** light

Mobbin is a near-monochrome editorial system: everything is `#141414` ink on `#FFFFFF` paper, with a four-step neutral gray ramp doing all the tonal work in between. There is no chromatic brand accent — the only hue in the scan is a raw `#0000EE` anchor blue that survives on unstyled links, so it reads as editorial artifact, never a CTA. The signature move is the fully-rounded pill: the primary CTA is a solid ink pill (`999px` radius), the secondary a bordered ghost pill of the same shape, and even the search field and nav shell round to `999px`+. Type carries the personality — a bespoke variable sans, **M Saans**, set enormous (80px display) at a tight `652` weight, so the headline itself is the hero graphic. Layout is airy and centered: generous whitespace, a hairline-quiet grayscale logo strip, and soft `rgba(0,0,0,0.04)` shadows that float cards a few pixels off the page rather than dropping hard depth.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Ink | `#141414` | `--color-ink` | Primary text, headings, and the solid CTA pill fill. The system's near-black — the only "dark" anywhere on the light canvas. |
| Paper | `#FFFFFF` | `--color-paper` | Page canvas and text on ink. The default ground; everything else is a tint of gray on top of it. |
| Gray 600 | `#717171` | `--color-gray-600` | Secondary and supporting text (subheads, captions). The step down from ink for hierarchy. |
| Gray 500 | `#747474` | `--color-gray-500` | Dark neutral surface / muted control fill; close cousin of Gray 600 used as a background. |
| Gray 400 | `#404040` | `--color-gray-400` | Dark neutral surface (tooltip / control chrome). Used as a background, not text. |
| Gray 300 | `#ADADAD` | `--color-gray-300` | Muted / disabled text and the grayscale logo strip; deliberately low-contrast. |
| Border | `#414141` | `--color-border` | The one measured border color — a hairline on dark controls. Light-surface dividers rely on the gray tints, not this. |
| Surface Sunk | `#EDEDED` | `--color-surface-sunk` | Recessed panel / search-field fill — a faint step below paper. |
| Surface Line | `#E7E7E7` | `--color-surface-line` | Subtle divider / card-edge tint; slightly deeper than Surface Sunk. |
| Link Blue | `#0000EE` | `--color-link` | Raw UA anchor blue on unstyled links only. Editorial artifact — never a button, never a brand accent. |

## Tokens — Typography
### M Saans — the bespoke variable sans that carries the entire brand · `--font-sans`
Mobbin's proprietary grotesque, shipped as a variable family with numeric-weight instances (`M Saans Variable Light`, `456`, `600`, `652`, plus a `Heavy 900` and a `Medium Italic 570`). It runs everything from the 80px display headline to 14px captions. The signature choice is the odd interpolated weight `652` for headings — heavier than a normal semibold, lighter than bold — giving display type a confident but un-shouty density.
- **Substitute:** Inter (already loaded as fallback), Söhne, Helvetica Neue.
- **Weights:** 300 (Light), 380 (Regular), 456, 570 (Medium Italic), 600 (Semibold), 652 (Heading), 900 (Heavy).
- **Sizes:** 14, 16, 20, 24, 32, 56, 80px.
- **Line height:** Tight on display (~1.0–1.05), ~1.4–1.5 on body.
- **Letter spacing:** Near-zero; slight negative tracking implied at display sizes.
- **Role:** All UI and marketing text — display, headings, body, captions.

### Recital — the editorial serif reserved for accent moments · `--font-serif`
A loaded serif family (`Recital Regular`, `Recital Book`, plus italics) present in the font stack but absent from the hero screenshot — reserved for editorial flourishes, quotes, or awards content rather than product chrome.
- **Substitute:** Freight Text, Newsreader, Georgia.
- **Weights:** 400 (Regular), 450 (Book), plus italics.
- **Sizes:** Not measured in scan.
- **Line height:** ~1.4 *(inferred)*.
- **Letter spacing:** Default.
- **Role:** Editorial accent / long-form serif moments; not used in the core UI.

### Geist Mono — technical / metadata label face · `--font-mono`
A single loaded monospace weight (400), for code-like labels, counts, or metadata.
- **Substitute:** JetBrains Mono, SF Mono, ui-monospace.
- **Weights:** 400.
- **Sizes:** Not measured; likely 12–14px.
- **Line height:** ~1.4.
- **Letter spacing:** Default mono.
- **Role:** Small technical labels and numeric metadata.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Display | 80px | ~1.0 | tight | `--text-display` |
| Heading | 56px | ~1.05 | tight | `--text-heading` |
| Subheading | 32px | ~1.15 | normal | `--text-subheading` |
| Title | 24px | ~1.25 | normal | `--text-title` |
| Body Large | 20px | ~1.4 | normal | `--text-body-lg` |
| Body | 16px | ~1.5 | normal | `--text-body` |
| Caption | 14px | ~1.45 | normal | `--text-caption` |

## Tokens — Spacing & Shapes
**Base unit:** 4px   **Density:** comfortable

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| xs | 4px | `--spacing-xs` |
| sm | 8px | `--spacing-sm` |
| md | 16px | `--spacing-md` |
| lg | 24px | `--spacing-lg` |
| xl | 40px | `--spacing-xl` |

*(Scale inferred from the 4px base unit and the 11px 16px button padding; only the base unit is measured.)*

### Border Radius
| Element | Value |
|---------|-------|
| Buttons / pills / search field | 999px (also 1000px, 99px in scan) |
| Large card / panel | 30px |
| Card | 24px |
| Panel | 20px |
| Chip / inset | 16px |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Float | `rgba(0, 0, 0, 0.04) 0px 8px 40px 0px` | `--shadow-float` |
| Hairline | `rgba(0, 0, 0, 0.04) 0px 1px 2px 0px` | `--shadow-hairline` |
| Focus Ring | `rgb(255, 255, 255) 0px 0px 0px 2px` | `--shadow-ring` |

### Layout
- **Page max-width:** ~1200px, centered.
- **Section gap:** Generous — large vertical whitespace between hero, trust strip, and content shelf.
- **Card padding:** ~24px (matches 24px card radius).
- **Element gap:** 16px within control clusters.

## Components
### Primary CTA Pill
**Role:** The single dominant action ("Join for free").
Solid ink fill `#141414`, white text `#FFFFFF`, weight 600, `999px` radius, `11px 16px` padding, no border, no shadow. Its darkness is the entire visual weight of the page — one per view.

### Secondary Ghost Pill
**Role:** The lower-priority alternative ("See our plans →").
Transparent fill, ink `#141414` text at weight 600, hairline border, same `999px` pill radius and padding as the primary. Often carries a trailing arrow glyph. Reads as quiet twin to the CTA.

### Nav Shell
**Role:** Top navigation container.
A floating rounded-full bar in a faint gray surface holding the wordmark and text links (Pricing, Awards, Log in). Fully pill-shaped, no hard border — depth comes from the `--shadow-hairline` float, not an outline.

### Search Field
**Role:** The library's primary utility — search across screens.
Recessed `#EDEDED`-tint fill inside a rounded container, magnifier glyph left, placeholder in muted gray `#717171`, scan/filter affordance right. Fully rounded to match the pill language.

### Text Link
**Role:** In-nav and inline navigation.
Ink `#141414` text at weight 600, no underline, no background. The unstyled `#0000EE` blue only surfaces on links the system forgot to restyle — treat as a bug color, not a token to reach for.

### Display Headline
**Role:** The hero — the headline IS the graphic.
M Saans at 80px, weight `652`, ink `#141414`, tight leading, centered. No accent color, no decoration; scale and weight do all the work.

### Trust Logo Strip
**Role:** Social proof ("Trusted by design teams at").
A horizontal row of client logos rendered flat in muted gray `#ADADAD` — deliberately desaturated so proof never competes with the CTA. Small `#717171` label above.

### Content Card
**Role:** A library shelf item (category / screen / flow tile).
Paper `#FFFFFF` surface, `24px` radius, ~24px padding, lifted by `--shadow-float` (`0 8px 40px rgba(0,0,0,0.04)`). Category label in gray, title in ink weight 652.

### Avatar / Icon Button
**Role:** Account and utility affordances in the app chrome.
Small circular controls (`999px`), monochrome glyphs, sitting in the rounded chrome bar. Focus states use the `--shadow-ring` white 2px halo.

### Featured App Tile
**Role:** The one place color is allowed in — a showcased app's own icon.
A rounded-square app icon (e.g. a purple "shop" tile) rendered at full saturation. This is content, not brand: Mobbin frames third-party color inside its own neutral chrome, never adopting it.

### Invite Pill
**Role:** Growth affordance ("Invite & earn").
A small bordered ghost pill in the app header — same `999px` language, hairline edge, ink text, compact padding.

## Do's and Don'ts
### Do
- Keep the canvas `#FFFFFF` and text `#141414` — the whole system is monochrome by design.
- Round every interactive control to `999px`; use `16–30px` only for cards and panels.
- Let the 80px `652`-weight headline be the loudest thing on the page; scale is your accent.
- Desaturate proof and secondary content to the gray ramp (`#717171` → `#ADADAD`) so the one ink CTA always wins.
- Use the whisper-soft `rgba(0,0,0,0.04)` shadows to float cards; keep elevation barely there.

### Don't
- Don't introduce a chromatic brand accent. The `#0000EE` link blue and any purple app tiles are content, never UI color.
- Don't give the secondary action a fill — it must stay a bordered ghost of the same pill.
- Don't drop hard, dark shadows; depth here is a 4%-opacity float, never a heavy drop.
- Don't square off the buttons or search field — the pill is the brand's shape signature.
- Don't add underlines to links; ink weight-600 text carries them.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FFFFFF` | Page ground. |
| 1 | Sunk | `#EDEDED` | Recessed fields (search) and faint panels. |
| 2 | Line | `#E7E7E7` | Divider / card-edge tint. |
| — | Ink Surface | `#141414` | Inverted surface: the CTA pill and any dark control. |
| — | Dark Neutral | `#404040` / `#747474` | Dark control chrome / tooltip fills. |

## Elevation
Depth is conveyed almost entirely by luminance and a whisper of shadow — never by hard borders. Cards float on `0 8px 40px rgba(0,0,0,0.04)`; smaller controls carry `0 1px 2px rgba(0,0,0,0.04)`. Focus is a white 2px ring (`0 0 0 2px #FFFFFF`) rather than a colored glow. On light surfaces, dividers are gray tints (`#E7E7E7` / `#EDEDED`), not lines; the only measured hard border (`#414141`) belongs to dark controls. The effect is a page that feels layered but flat — paper stacked on paper.

## Imagery
The brand chrome carries **no photography or illustration of its own** — and that is the point. Mobbin is a library of other people's UI, so the site stays a neutral gray-and-ink frame that lets showcased app screenshots and icons (like the saturated purple "shop" tile) supply all the color and imagery. Client logos in the trust strip are flattened to a single muted gray so proof reads as texture, not decoration. Any color you see is content passing through; the container never competes.

## Layout
Centered and contained (~1200px), full of air. A floating rounded-full nav shell sits detached at the top; the hero centers a featured app icon, an 80px display headline, a muted subline, then the CTA pair — all stacked and center-aligned. Below, a small gray "Trusted by" label leads a horizontal grayscale logo row. Content shelves (Categories / Screens / UI Elements / Flows) run as a multi-column grid inside a large rounded (`30px`) recessed panel with its own search bar. Rhythm is vertical and generous; nothing is full-bleed except that backdrop panel.

## Typography Signature
Mobbin runs a **one-family, weight-driven** hierarchy. Instead of pairing display and body faces, it leans on M Saans across the entire range and lets *weight and scale* create contrast: the interpolated `652` heading weight against a `456`/`300` body reads as authoritative without tipping into bold, and jumping from 16px body to 80px display does the shouting so color doesn't have to. Recital (serif) and Geist Mono sit in reserve for editorial and technical accents but stay off the core UI. The result is typographic restraint as a feature — a design tool that trusts a designer to read hierarchy from weight alone.

## Agent Prompt Guide
## Quick Color Reference
- background: `#FFFFFF` / text: `#141414` / surface: `#EDEDED` / border: `#E7E7E7` (dark controls `#414141`) / accent: none (monochrome) / primary action: `#141414` ink pill (white text)

## Example Component Prompts
1. **Primary CTA**: A pill button, background `#141414`, text `#FFFFFF` weight 600, radius `999px`, padding `11px 16px`, no border, no shadow. Label "Join for free".
2. **Secondary ghost button**: Transparent pill, text `#141414` weight 600 with a trailing arrow, hairline border, radius `999px`, same `11px 16px` padding. Label "See our plans →".
3. **Hero headline**: M Saans (fallback Inter) at 80px, weight 652, color `#141414`, tight line-height, centered, no accent color.
4. **Search field**: Rounded recessed input, fill `#EDEDED`, magnifier glyph left in `#717171`, placeholder text `#717171`, radius `999px`, filter glyph right.
5. **Content card**: Paper `#FFFFFF` tile, radius `24px`, padding 24px, shadow `0 8px 40px rgba(0,0,0,0.04)`, gray `#717171` category label above an ink `#141414` weight-652 title.

## Similar Brands
- **Linear** — the same near-monochrome ink-on-paper discipline with type-and-scale hierarchy over color.
- **Vercel** — black/white geometric restraint, pill and rounded surfaces, color reserved for content.
- **Framer** — the platform Mobbin's site is built on; shares the airy, rounded, whitespace-first marketing rhythm.
- **Cosmos / Savee** — kindred visual-inspiration libraries that stay neutral so curated content supplies the color.
- **Arc / The Browser Company** — bespoke variable-font personality and confident single-family typography.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-ink: #141414;
  --color-paper: #FFFFFF;
  --color-gray-600: #717171;
  --color-gray-500: #747474;
  --color-gray-400: #404040;
  --color-gray-300: #ADADAD;
  --color-border: #414141;
  --color-surface-sunk: #EDEDED;
  --color-surface-line: #E7E7E7;
  --color-link: #0000EE;

  /* Typography — Families */
  --font-sans: 'M Saans', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'Recital', Georgia, 'Times New Roman', serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;

  /* Typography — Scale */
  --text-display: 80px;
  --text-heading: 56px;
  --text-subheading: 32px;
  --text-title: 24px;
  --text-body-lg: 20px;
  --text-body: 16px;
  --text-caption: 14px;
  --leading-tight: 1.05;
  --leading-body: 1.5;

  /* Font weights */
  --weight-light: 300;
  --weight-regular: 456;
  --weight-semibold: 600;
  --weight-heading: 652;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 40px;

  /* Border Radius */
  --radius-pill: 999px;
  --radius-panel-lg: 30px;
  --radius-card: 24px;
  --radius-panel: 20px;
  --radius-chip: 16px;

  /* Shadows */
  --shadow-float: 0px 8px 40px 0px rgba(0, 0, 0, 0.04);
  --shadow-hairline: 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
  --shadow-ring: 0px 0px 0px 2px #FFFFFF;
}
```
### Tailwind v4
```css
@theme {
  /* Colors */
  --color-ink: #141414;
  --color-paper: #FFFFFF;
  --color-gray-600: #717171;
  --color-gray-500: #747474;
  --color-gray-400: #404040;
  --color-gray-300: #ADADAD;
  --color-border: #414141;
  --color-surface-sunk: #EDEDED;
  --color-surface-line: #E7E7E7;
  --color-link: #0000EE;

  /* Typography — Families */
  --font-sans: 'M Saans', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'Recital', Georgia, 'Times New Roman', serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;

  /* Typography — Scale */
  --text-display: 80px;
  --text-heading: 56px;
  --text-subheading: 32px;
  --text-title: 24px;
  --text-body-lg: 20px;
  --text-body: 16px;
  --text-caption: 14px;
  --leading-tight: 1.05;
  --leading-body: 1.5;

  /* Font weights */
  --font-weight-light: 300;
  --font-weight-regular: 456;
  --font-weight-semibold: 600;
  --font-weight-heading: 652;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 40px;

  /* Border Radius */
  --radius-pill: 999px;
  --radius-panel-lg: 30px;
  --radius-card: 24px;
  --radius-panel: 20px;
  --radius-chip: 16px;

  /* Shadows */
  --shadow-float: 0px 8px 40px 0px rgba(0, 0, 0, 0.04);
  --shadow-hairline: 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
  --shadow-ring: 0px 0px 0px 2px #FFFFFF;
}
```