brineura.com1
Colors
Spacing
xs
4px
sm
8px
md
16px
lg
24px
xl
48px
gutter
16px
margin
24px
Rounded
none0px
sm4px
md6px
lg8px
xl12px
full9999px
Shadows
sm
0px 6px 9px 0px rgba(0,0,0,0.08)
md
0px 10px 16px 0px rgba(0,0,0,0.16)
lg
12px 12px 50px rgba(0,0,0,0.4)
Font
proxima-nova
Aa Bb Cc 0123
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz
futura-pt
Aa Bb Cc 0123
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz
Heading
Headline Displayfutura-pt · 42px · 700
Display headline
Headline LGfutura-pt · 34px · 700
The quick brown fox
Headline MDfutura-pt · 28px · 600
Design systems at scale
Headline SMproxima-nova · 20px · 700
Color, type, and spacing
Text
Body LGproxima-nova · 23.8px · 400
The quick brown fox jumps over the lazy dog. Lead paragraph copy for marketing pages.
Body MDproxima-nova · 17px · 400
The quick brown fox jumps over the lazy dog. Standard body copy throughout the application.
Body SMproxima-nova · 13.6px · 400
Supporting text, captions, and metadata appear at this size.
Label LGproxima-nova · 17px · 700
Button label · Primary action
Label MDproxima-nova · 13.6px · 700
Form label · Required field
Label SMproxima-nova · 13px · 500
Badge · Tag · Micro-copy