rippling.com2
Colors
Spacing
xs
4px
sm
12px
md
16px
lg
24px
xl
42px
gutter
24px
margin
16px
Rounded
none0px
sm2px
md4px
lg8px
xl12px
full9999px
Shadows
sm
0 1px 2px 0 rgba(0, 0, 0, 0.06)
md
0 4px 12px 0 rgba(0, 0, 0, 0.10)
lg
0 8px 24px 0 rgba(0, 0, 0, 0.12)
xl
0 16px 40px 0 rgba(0, 0, 0, 0.14)
Font
Basel
Aa Bb Cc 0123
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz
Heading
Headline DisplayBasel · 48px · 500
Display headline
Headline LGBasel · 36px · 500
The quick brown fox
Headline MDBasel · 24px · 500
Design systems at scale
Headline SMBasel · 20px · 500
Color, type, and spacing
Text
Body LGBasel · 16px · 400
The quick brown fox jumps over the lazy dog. Lead paragraph copy for marketing pages.
Body MDBasel · 15px · 400
The quick brown fox jumps over the lazy dog. Standard body copy throughout the application.
Body SMBasel · 12px · 400
Supporting text, captions, and metadata appear at this size.
Label LGBasel · 16px · 500
Button label · Primary action
Label MDBasel · 15px · 500
Form label · Required field
Label SMBasel · 12px · 400
Badge · Tag · Micro-copy