Skip to content

Search design systems

Search for a design system by domain or name

Mobbin — UI & UX design inspiration for mobile & web apps
2

Colors

Spacing

xs
4px
sm
8px
md
16px
lg
24px
xl
48px
gutter
16px
margin
24px

Rounded

none0px
sm4px
md8px
lg10px
xl16px
full9999px

Shadows

sm

0 1px 2px 0 rgb(0 0 0 / 0.06)

md

0 4px 8px -2px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.05)

lg

0 12px 24px -4px rgb(0 0 0 / 0.10)

xl

0 24px 40px -6px rgb(0 0 0 / 0.12)

Font

M Saans Variable Light

Aa Bb Cc 0123

ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz

M Saans 456

Aa Bb Cc 0123

ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz

M Saans 600

Aa Bb Cc 0123

ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz

Heading

Headline DisplayM Saans 652 · 80px · 652

Display headline

Headline LGM Saans 600 · 48px · 600

The quick brown fox

Headline MDM Saans 600 · 32px · 600

Design systems at scale

Headline SMM Saans 600 · 24px · 600

Color, type, and spacing

Text

Body LGM Saans Variable Light · 20px · 300

The quick brown fox jumps over the lazy dog. Lead paragraph copy for marketing pages.

Body MDM Saans Variable Light · 16px · 300

The quick brown fox jumps over the lazy dog. Standard body copy throughout the application.

Body SMM Saans Variable Light · 14px · 300

Supporting text, captions, and metadata appear at this size.

Label LGM Saans 456 · 16px · 456

Button label · Primary action

Label MDM Saans 456 · 14px · 456

Form label · Required field

Label SMInter · 12px · 400

Badge · Tag · Micro-copy