Google | DESIGN.md

Colors

Spacing

xs

4px

sm

8px

md

16px

lg

24px

xl

48px

gutter

16px

margin

24px

Rounded

none0px

sm4px

md8px

lg16px

xl24px

full9999px

Shadows

sm

rgba(0,0,0,0.1) 0px 1px 1px 0px

md

rgba(0,0,0,0.12) 0px 2px 6px 0px, rgba(0,0,0,0.08) 0px 1px 2px 0px

lg

rgba(0,0,0,0.14) 0px 4px 12px 0px, rgba(0,0,0,0.08) 0px 2px 4px 0px

xl

rgba(0,0,0,0.16) 0px 8px 24px 0px, rgba(0,0,0,0.10) 0px 4px 8px 0px

Font

Roboto, Arial, sans-serif

Aa Bb Cc 0123

ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz

Google Sans, Roboto, Arial, sans-serif

Aa Bb Cc 0123

ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz

Heading

Headline DisplayGoogle Sans, Roboto, Arial, sans-serif · 36px · 400

Display headline

Headline LGGoogle Sans, Roboto, Arial, sans-serif · 28px · 400

The quick brown fox

Headline MDGoogle Sans, Roboto, Arial, sans-serif · 24px · 400

Design systems at scale

Headline SMGoogle Sans, Roboto, Arial, sans-serif · 20px · 500

Color, type, and spacing

Text

Body LGRoboto, Arial, sans-serif · 16px · 400

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

Body MDRoboto, Arial, sans-serif · 14px · 400

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

Body SMRoboto, Arial, sans-serif · 12px · 400

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

Label LGGoogle Sans, Roboto, Arial, sans-serif · 16px · 500

Button label · Primary action

Label MDGoogle Sans, Roboto, Arial, sans-serif · 14px · 500

Form label · Required field

Label SMRoboto, Arial, sans-serif · 12px · 500

Badge · Tag · Micro-copy