Skip to content

Search design systems

Search for a design system by domain or name

Google One
2

Colors

Spacing

xs
4px
sm
12px
md
24px
lg
40px
xl
64px
gutter
24px
margin
40px

Rounded

none0px
sm4px
md8px
lg16px
xl32px
full9999px

Shadows

sm

0 1px 2px 0 rgba(60, 64, 67, 0.30), 0 1px 4px 0 rgba(60, 64, 67, 0.25)

md

0 2px 6px 2px rgba(60, 64, 67, 0.15), 0 1px 2px 0 rgba(60, 64, 67, 0.30)

lg

0 4px 12px 3px rgba(60, 64, 67, 0.12), 0 2px 4px 0 rgba(60, 64, 67, 0.20)

xl

0 8px 24px 4px rgba(60, 64, 67, 0.10), 0 4px 8px 0 rgba(60, 64, 67, 0.15)

Font

Google Sans

Aa Bb Cc 0123

ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz

Google Sans Text

Aa Bb Cc 0123

ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz

Heading

Headline DisplayGoogle Sans · 96px · 700

Display headline

Headline LGGoogle Sans · 48px · 700

The quick brown fox

Headline MDGoogle Sans · 32px · 700

Design systems at scale

Headline SMGoogle Sans · 24px · 700

Color, type, and spacing

Text

Body LGGoogle Sans · 18px · 400

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

Body MDGoogle Sans · 16px · 400

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

Body SMGoogle Sans · 14px · 400

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

Label LGGoogle Sans · 16px · 500

Button label · Primary action

Label MDGoogle Sans Text · 14px · 500

Form label · Required field

Label SMGoogle Sans Text · 12px · 500

Badge · Tag · Micro-copy