dot-see.com4
Colors
Spacing
xs
4px
sm
12px
md
20px
lg
32px
xl
55px
gutter
16px
margin
40px
Rounded
none0px
sm2px
md3px
lg8px
xl35px
full9999px
Shadows
sm
rgba(21, 0, 31, 0.25) 0px 0px 4px 0px
md
rgba(0, 0, 0, 0.4) 0px 0px 10px 0px
lg
0 10px 30px -4px rgba(0, 0, 0, 0.5)
xl
0 20px 50px -8px rgba(0, 0, 0, 0.6)
Font
AllianceNo.1-Regular
Aa Bb Cc 0123
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz
AllianceNo.2-Bold
Aa Bb Cc 0123
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz
Heading
Headline DisplayAllianceNo.2-Regular · 67px · 500
Display headline
Headline LGAllianceNo.2-Bold · 51px · 700
The quick brown fox
Headline MDAllianceNo.2-Bold · 36px · 700
Design systems at scale
Headline SMAllianceNo.2-Bold · 24px · 700
Color, type, and spacing
Text
Body LGAllianceNo.1-Regular · 18px · 400
The quick brown fox jumps over the lazy dog. Lead paragraph copy for marketing pages.
Body MDAllianceNo.1-Regular · 16px · 400
The quick brown fox jumps over the lazy dog. Standard body copy throughout the application.
Body SMAllianceNo.1-Regular · 14px · 400
Supporting text, captions, and metadata appear at this size.
Label LGAllianceNo.2-Bold · 20px · 400
Button label · Primary action
Label MDAllianceNo.2-Bold · 16px · 400
Form label · Required field
Label SMAllianceNo.1-Regular · 14px · 400
Badge · Tag · Micro-copy