armra.com0
Colors
Spacing
xs
4px
sm
12px
md
24px
lg
48px
xl
80px
gutter
60px
margin
24px
Rounded
none0px
sm4px
md8px
lg16px
xl30px
full9999px
Shadows
sm
2px 2px 6px rgba(0, 0, 0, 0.28)
md
3px 3px 6px rgba(10, 0, 10, 0.30)
lg
0 8px 24px rgba(0, 0, 0, 0.18)
xl
0 20px 48px rgba(0, 0, 0, 0.22)
Font
Relative
Aa Bb Cc 0123
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz
ARMRA Mono
Aa Bb Cc 0123
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz
Clearface
Aa Bb Cc 0123
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz
Heading
Headline DisplayARMRA Display · 73px · 700
Display headline
Headline LGClearface · 64px · 400
The quick brown fox
Headline MDClearface · 40px · 400
Design systems at scale
Headline SMARMRA · 28px · 700
Color, type, and spacing
Text
Body LGRelative · 18px · 400
The quick brown fox jumps over the lazy dog. Lead paragraph copy for marketing pages.
Body MDRelative · 15px · 400
The quick brown fox jumps over the lazy dog. Standard body copy throughout the application.
Body SMRelative · 13px · 400
Supporting text, captions, and metadata appear at this size.
Label LGARMRA Mono · 16px · 500
Button label · Primary action
Label MDARMRA Mono · 14px · 400
Form label · Required field
Label SMARMRA Mono · 12px · 400
Badge · Tag · Micro-copy