spetskabel.ru1
Colors
Spacing
xs
4px
sm
12px
md
20px
lg
32px
xl
48px
gutter
12px
margin
16px
Rounded
none0px
sm4px
md5px
lg8px
xl10px
full9999px
Shadows
sm
0 1px 1px rgba(0,0,0,0.075)
md
0 0 8px rgba(102,175,233,0.6)
lg
0 0 5px rgba(255,182,181,0.5)
xl
0 4px 16px rgba(0,0,0,0.12)
Font
PT Sans
Aa Bb Cc 0123
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz
Exo 2
Aa Bb Cc 0123
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz
Heading
Headline DisplayExo 2 · 30px · 900
Display headline
Headline LGExo 2 · 24px · 700
The quick brown fox
Headline MDExo 2 · 20px · 700
Design systems at scale
Headline SMExo 2 · 15px · 700
Color, type, and spacing
Text
Body LGExo 2 · 17px · 400
The quick brown fox jumps over the lazy dog. Lead paragraph copy for marketing pages.
Body MDPT Sans · 15px · 500
The quick brown fox jumps over the lazy dog. Standard body copy throughout the application.
Body SMPT Sans · 14px · 400
Supporting text, captions, and metadata appear at this size.
Label LGExo 2 · 17px · 700
Button label · Primary action
Label MDExo 2 · 15px · 600
Form label · Required field
Label SMExo 2 · 14px · 700
Badge · Tag · Micro-copy