1
Colors
Spacing
xs
4px
sm
8px
md
16px
lg
24px
xl
32px
gutter
24px
margin
24px
Rounded
none0px
sm2px
md4px
lg8px
xl12px
full1000px
Shadows
sm
0px 2px 2px 0px rgba(65,65,65,.19)
md
0px 3px 10px 0px rgba(65,65,65,.19)
lg
0px 8px 24px 0px rgba(65,65,65,.19)
xl
0px 2px 20px 3px rgba(65,65,65,.11), 0px 2px 20px 10px rgba(65,65,65,.03)
Font
BlinkMacSystemFont, -apple-system, Roboto, Helvetica, "Segoe UI", Arial, sans-serif
Aa Bb Cc 0123
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz
TeleNeo
Aa Bb Cc 0123
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz
Heading
Headline DisplayTeleNeo · 68px · 800
Display headline
Headline LGTeleNeo · 48px · 800
The quick brown fox
Headline MDTeleNeo · 40px · 800
Design systems at scale
Headline SMTeleNeo · 32px · 700
Color, type, and spacing
Text
Body LGBlinkMacSystemFont, -apple-system, Roboto, Helvetica, "Segoe UI", Arial, sans-serif · 18px · 400
The quick brown fox jumps over the lazy dog. Lead paragraph copy for marketing pages.
Body MDBlinkMacSystemFont, -apple-system, Roboto, Helvetica, "Segoe UI", Arial, sans-serif · 16px · 400
The quick brown fox jumps over the lazy dog. Standard body copy throughout the application.
Body SMBlinkMacSystemFont, -apple-system, Roboto, Helvetica, "Segoe UI", Arial, sans-serif · 14px · 400
Supporting text, captions, and metadata appear at this size.
Label LGBlinkMacSystemFont, -apple-system, Roboto, Helvetica, "Segoe UI", Arial, sans-serif · 16px · 600
Button label · Primary action
Label MDBlinkMacSystemFont, -apple-system, Roboto, Helvetica, "Segoe UI", Arial, sans-serif · 14px · 600
Form label · Required field
Label SMBlinkMacSystemFont, -apple-system, Roboto, Helvetica, "Segoe UI", Arial, sans-serif · 12px · 600
Badge · Tag · Micro-copy