Mobbin

Mobbin's own interface is engineered to disappear behind the content it curates: near-black ink (#141414) on a pure white canvas, structure carried by a ladder of barely-there neutral tints instead of shadows, stadium-pill controls on every interactive element, 24px card geometry and iOS-style squircle icon tiles. The Saans typeface runs at unusual variable weights (652 display, 456 text, 300 light) and a single electric blue (#0066ff) is reserved for commercial signals.

Homepage Example

Mobbin
PricingAwardsLog in Join for free
Discover real-world
design inspiration.
Real product interfaces, ready to reference.
iOS Web Popular
Screen library
1,150 apps · 592,400 screens
Explore
© Mobbin — inverse footer

Color Palette (11)

Ink Black#141414
Soft Ink#262626
Text Muted#707070
Text Faint#adadad
Canvas#ffffff
Soft Canvas#f3f3f3
Field#f0f0f0
Hairline Soft#f0f0f0
Hairline#e0e0e0
Electric Blue#0066ff
On-primary#ffffff

Typography (12)

display
display80px · weight 652
heading-1
heading-156px · weight 652
heading-2
heading-244px · weight 652
heading-3
heading-332px · weight 652
heading-4
heading-424px · weight 652
title
title20px · weight 600
body-lg
body-lg20px · weight 300
body
body16px · weight 456
body-sm
body-sm14px · weight 456
link
link16px · weight 600
label
label12px · weight 600
caption
caption12px · weight 456

Components (14)

nav-pill
nav-pill
button-primary
button-primary
button-outline
button-outline
button-pill-soft
button-pill-soft
text-input
text-input
badge-popular
badge-popular
badge-overlay
badge-overlay
pricing-card
pricing-card
pricing-card-featured
pricing-card-featured
segmented-control
segmented-control
testimonial-card
testimonial-card
faq-row
faq-row
app-icon-squircle
app-icon-squircle
footer
footer

Border Radius

0 (0px)
16 (16px)
24 (24px)
pill (9999px)

Design Philosophy

Overview

Mobbin is a reference library of real product interfaces, and its own interface is engineered to get out of the way. The system is strictly monochrome: near-black ink (#141414) on a pure white canvas (#ffffff), with structure carried by a ladder of barely-perceptible neutral tints rather than by shadows or colour. The thousands of app screenshots, icon tiles and brand logos the site exists to show are the only saturated elements on any page — the chrome frames them the way a gallery wall frames paintings.

Key Characteristics

  • Gallery-white monochrome palette — ink on canvas, zero brand chroma outside the single electric blue (#0066ff) accent
  • Stadium-pill interaction language: floating nav bar, every button, the segmented toggle and all badges sit at full pill radius
  • Shadow-free elevation — hierarchy built from a neutral tint ladder (#f3f3f3, #f0f0f0, #e0e0e0) and 1px hairlines
  • Saans at signature variable weights: 652 headings with tight 1.0-1.13 line-height, 456 body, 300 light subtitles, zero letter-spacing
  • iOS-style squircle icon tiles (30% radius) recur across library counters and brand marquees
  • Content supplies the colour: app screenshots, brand icons and grayscale curator portraits carry all visual richness
  • A full-bleed near-black footer with 24px top corners closes every page in polarity inversion

Do's and Don'ts

Keep the canvas white and let imported content supply all saturation. Use full pills for every interactive element — a rectangular button does not exist in this system. Build emphasis with the tint ladder instead of shadows, and reserve the blue accent for commercial signals only: one or two blue elements per page at most. Don't add drop shadows, don't apply letter-spacing or all-caps styling, and don't let full-colour portraits into the curator grids — they stay strictly black-and-white.

개요

몹빈은 실제 제품 인터페이스의 레퍼런스 라이브러리이며, 자체 인터페이스는 그 앞을 가리지 않도록 설계되었습니다. 시스템은 철저히 모노크롬입니다. 근접 블랙 잉크(#141414)가 순백 캔버스(#ffffff) 위에 놓이고, 구조는 그림자나 색이 아니라 거의 느껴지지 않는 뉴트럴 틴트 사다리로 표현됩니다. 사이트가 보여주기 위해 존재하는 수천 개의 앱 스크린샷, 아이콘 타일, 브랜드 로고만이 유일하게 채도를 가진 요소입니다 — 크롬은 갤러리 벽이 그림을 프레임하듯 그들을 프레임합니다.

핵심 특징

  • 갤러리 화이트 모노크롬 팔레트 — 잉크 온 캔버스, 단 하나의 일렉트릭 블루(#0066ff) 액센트 외에는 브랜드 색상이 없음
  • 스타디움 필 인터랙션 언어: 플로팅 내비 바, 모든 버튼, 세그먼트 토글, 모든 배지가 풀 필 반경
  • 섀도우 프리 엘리베이션 — 뉴트럴 틴트 사다리(#f3f3f3, #f0f0f0, #e0e0e0)와 1px 헤어라인으로 위계 구성
  • 사인처 가변 굵기의 Saans: 1.0-1.13의 타이트한 행간의 652 헤드라인, 456 본문, 300 라이트 서브타이틀, 자간은 제로
  • iOS 스타일 스퀘어클 아이콘 타일(30% 반경)이 라이브러리 카운터와 브랜드 마퀴에 반복 등장
  • 콘텐츠가 색을 공급: 앱 스크린샷, 브랜드 아이콘, 그레이스케일 큐레이터 초상이 모든 시각적 풍부함을 담당
  • 24px 상단 모서리를 가진 풀블리드 니어 블랙 푸터가 극성 반전으로 페이지를 마무리

Do's and Don'ts

캔버스는 화이트로 유지하고 가져온 콘텐츠가 모든 채도를 공급하게 하세요. 모든 인터랙티브 요소에 풀 필을 사용합니다 — 이 시스템에는 직사각형 버튼이 존재하지 않습니다. 강조는 섀도우가 아닌 틴트 사다리로 만들고, 블루 액센트는 상업적 신호에만, 페이지당 최대 하나 둘만 사용하세요. 드롭 섀도우를 추가하지 말고, 자간이나 대문자 스타일을 적용하지 마세요. 컐러 인물 사진은 큐레이터 그리드에 넣지 않고 흑백으로 유지합니다.

概要

Mobbin は実際のプロダクト・インターフェースのリファレンスライブラリであり、その自社インターフェースは前を塞がないように設計されている。システムは厳格なモノクローム: ニアブラックのインク(#141414)が純白のキャンバス(#ffffff)の上にあり、構造は影や色ではなく、ほとんど感じられないニュートラルなティントの階段で示される。サイトが見せるために存在する数千のアプリスクリーンショット、アイコンタイル、ブランドロゴだけが、いかなるページでも唯一の彩度を持つ要素だ — クロムはギャラリーの壁が絵画を額装するようにそれらを額装する。

主要な特徴

  • ギャラリー・ホワイトのモノクロームパレット — インク・オン・キャンバス、単一のエレクトリックブルー(#0066ff)アクセント以外にブランドカラーは存在しない
  • スタジアムピルのインタラクション言語: フローティングナビ、すべてのボタン、セグメントトグル、すべてのバッジがフルピル半径
  • シャドウフリーの階層 — ニュートラルなティントの階段(#f3f3f3, #f0f0f0, #e0e0e0)と 1px のヘアラインで構成
  • セイチャーな可変ウェイトの Saans: 行間 1.0-1.13 の 652 見出し、456 本文、300 のライトサブタイトル、字間はゼロ
  • iOS スタイルのスクォークルアイコンタイル(30% 半径)がライブラリカウンターやブランドマーキーに反復登場
  • コンテンツが色を供給: アプリのスクリーンショット、ブランドアイコン、グレースケールのキュレーター肖像が視覚的な豊かさを担う
  • 24px の上部角を持つフルブリードのニアブラックフッターが極性反転でページを締める

Do's and Don'ts

キャンバスはホワイトに保ち、取り込まれたコンテンツにすべての彩度を供給させる。すべてのインタラクティブ要素にフルピルを使う — このシステムに直角のボタンは存在しない。強調は影ではなくティントの階段で作り、ブルーアクセントは商用シグナル専用、ページあたり最大一つまたは二つだけに。ドロップシャドウを足さず、字間や全大文字の書体を適用せず、フルカラーの人物写真をキュレーターグリッドに入れない — それは常にモノクロで保たれる。

Frequently Asked Questions

Q. What are Mobbin's brand colors?

The Mobbin palette uses 11 colors, led by Ink Black (#141414), Soft Ink (#262626), Text Muted (#707070), Text Faint (#adadad), Canvas (#ffffff). The primary brand color is Ink Black (#141414).

Q. What fonts does the Mobbin design system use?

Display type is set in Saans at 80px / weight 652, while body and UI text uses Saans at 12px / weight 600.

Q. What kind of website is Mobbin?

Mobbin is a Design & Creative Tools brand. Its design system documents 11 colors, 12 type styles and a 4-step border-radius scale.

Q. What border radius values does Mobbin use?

The radius scale runs from 0 (0px) to pill (9999px): 0 (0px), 16 (16px), 24 (24px), pill (9999px).

Q. Where can I see the Mobbin design system?

This page shows Mobbin's color palette, typography scale, components, border radii and design philosophy in English, Korean and Japanese.