frame.io1
Colors
Spacing
xs
4px
sm
8px
md
16px
lg
24px
xl
40px
gutter
16px
margin
32px
Rounded
none0px
sm0.2rem
md0.8rem
lg1.2rem
xl2rem
full9999px
Shadows
sm
1.57px 2.77px 3.15px rgb(0 0 0 / 0.05), 6.9px 12.2px 6.52px rgb(0 0 0 / 0.08)
md
16.94px 29.94px 13px rgb(0 0 0 / 0.11), 32.62px 57.67px 25.48px rgb(0 0 0 / 0.13)
lg
54.89px 97.03px 46.85px rgb(0 0 0 / 0.16), 84.68px 149.71px 80px rgb(0 0 0 / 0.21)
xl
25px 38px 38px 0 rgb(0 0 0 / 0.45)
Font
FrameGothic
Aa Bb Cc 0123
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz
Heading
Headline DisplayFrameGothic · 80px · 600
Display headline
Headline LGFrameGothic · 48px · 600
The quick brown fox
Headline MDFrameGothic · 32px · 600
Design systems at scale
Headline SMFrameGothic · 24px · 600
Color, type, and spacing
Text
Body LGNeueMachinaInktrap · 18px · 400
The quick brown fox jumps over the lazy dog. Lead paragraph copy for marketing pages.
Body MDFrameGothic · 16px · 600
The quick brown fox jumps over the lazy dog. Standard body copy throughout the application.
Body SMFrameGothic · 12px · 600
Supporting text, captions, and metadata appear at this size.
Label LGFrameGothic · 14px · 600
Button label · Primary action
Label MDFrameGothic · 12px · 600
Form label · Required field
Label SMFrameGothic · 10px · 600
Badge · Tag · Micro-copy