Specification Version 1.0 • Strictly Monochrome + Single Electric Blue Accent.

Mobbin Design System.

An engineered reference library of real product interfaces. Strictly monochrome near-black ink (#141414) on pure white canvas (#ffffff), structured by a ladder of neutral tints, stadium pills (rounded.full), and variable weights.

1. Colors & Neutral Tint Ladder.

Shadow-free elevation carried by fill differences and 1px hairlines. Electric Blue is reserved exclusively for commercial decisions.

Ink Black
--colors-ink: #141414

Primary CTA pills, display headings, polarity-inverted footer.

Electric Blue
--colors-accent: #0066ff

The ONLY chromatic accent. Reserved for "Popular" badges & savings.

Canvas
--colors-canvas: #ffffff

Default page background, standard cards, and active toggle pills.

Soft Canvas (6%)
--colors-canvas-soft: #f3f3f3

Workhorse tint: floating nav-pill, featured cards, FAQ rows.

Field (8%)
--colors-field: #f0f0f0

Fill for form inputs, borderless at rest with 2px ink focus ring.

Hairline (16%)
--colors-hairline: #e0e0e0

1px control border for outlined buttons and resting cards.

2. Typography & Variable Weights.

Set in Inter / Saans with signature variable weights: 650 for chunky headings with 1.0–1.13 line-height, 450 for running text, and airy 300 for lead subtitles. Zero letter-spacing everywhere.

Role Size Weight Leading Live Preview
type-display 80px 650 1.0 Headline statement.
type-heading-1 56px 650 1.0 Design like a Pro.
type-heading-2 44px 650 1.13 The votes are in.
type-heading-3 32px 650 1.13 Card-level headline.
type-heading-4 24px 650 1.25 Sub-section plan name.
type-body-lg 20px 300 1.38 Hero subtitles and airy lead paragraphs.
type-body 16px 450 1.38 Default body copy and testimonial quote text.
type-body-sm 14px 450 1.43 Supporting copy, plan feature lists, fine print.
type-label 12px 600 1.33 Badge and pill labels.

3. Stadium-Pill Interaction Language ({rounded.full}).

Every button, toggle, and interactive element is a stadium shape. A rectangular button does not exist in this system.

Fill #141414, on-primary text
Fill #fff, 1px #e0e0e0 hairline
Fill #f3f3f3, no border
badge-popular
#0066ff Electric Blue
badge-overlay
Translucent Scrim

segmented-control

Billing cycle toggle. Active option lifts off the #f3f3f3 track as a #ffffff white pill with subtle soft shadow.

4. Signature Components.

iOS-style 30% squircle icons, brand marquee chips, and form input primitives.

app-icon-squircle

30% corner radius, rendering clean product and system icons.

📱
📁
⚡

text-input & focus

Field tint fill (#f0f0f0), borderless at rest, 2px ink focus ring.

5. Kit-Mirror Demonstration Surfaces (ex-*).

Every single ex-* primitive specified in the Mobbin Kit Mirror specification implemented with exact token properties.

EX-PRICING-TIER

Team Plan

$15 / seat / mo

For small product teams organizing screenshots and building design libraries.

  • ✓ Unlimited flows & screens
  • ✓ Export to Figma in 1 click
  • ✓ 5 team workspaces
EX-PRICING-TIER-FEATURED
Popular

Pro Plan

$8 / mo (billed yearly)

For individual designers and researchers who need uninterrupted access.

  • ✓ All 350,000+ iOS, Android & Web screens
  • ✓ Advanced search by pattern & UI element
  • ✓ Zero watermarks, full-res downloads
EX-PRODUCT-SELECTOR

What's Included

SaaS subscription features summary card.

Core Platform API Active
Enterprise SSO (SAML) Add-on
EX-CART-DRAWER

Subscription Summary

Pro Membership (Annual) $96.00
Figma Plugin License $24.00
Total Due $120.00
EX-APP-SHELL-ROW

Sidebar Navigation

Overview
Shared Folders
Diagnostics Log
Security Settings
EX-AUTH-FORM-CARD

Sign in.

Access your design inspiration library.

EX-MODAL-CARD

Delete Shared Folder?

This will only remove the network SMB registration. Your local files on disk will never be deleted.

EX-EMPTY-STATE-CARD
📁

No shared folders yet.

Create your first local SMB share in 1 click.

EX-TOAST
✓ Share \\DESKTOP-PC\OBSHAYA copied to clipboard.

6. Design System Principles (Do's & Don'ts).

Core design governance rules directly from the Mobbin design lead specification.

✓ DO

  • Gallery-white canvas: Keep #ffffff canvas and let imported content supply all saturation.
  • Stadium pills: Use rounded.full for every button, nav pill, badge, and toggle.
  • Variable weights: Set 650 for chunky headings with 1.0–1.13 leading and terminal periods.
  • Scarcity of blue: Reserve #0066ff strictly for commercial decisions (Popular badge & savings).
  • iOS Squircles: Render icons with 30% corner radius.
  • Polarity Inversion: Close pages with the near-black #141414 footer rounded at 24px top.

✕ DON'T

  • No drop shadows: Elevation is built solely by tint fills and 1px hairlines.
  • No blue CTAs: Primary actions are always ink black #141414 pills, never electric blue.
  • No rectangular buttons: Square-cornered buttons do not exist in Mobbin.
  • No borders on resting fields: Form inputs are #f0f0f0 fills; 2px ink ring only on focus.
  • No letter-spacing: Let typography run naturally at 0 letter-spacing.
  • No extra colors: Do not introduce random green, purple, or decorative gradients.