Gallery
framer.comFramer: Create a professional website, free. No code website builder loved by designers.
framer.comFramer: Create a professional website, free. No code website builder loved by designers.1
Colors
Spacing
xs
4px
sm
8px
md
16px
lg
24px
xl
40px
gutter
20px
margin
40px
Rounded
none0px
sm4px
md8px
lg12px
xl16px
full9999px
Shadows
sm
0 1px 3px 0 rgba(0,0,0,0.5)
md
0 4px 12px 0 rgba(0,0,0,0.6)
lg
0 12px 32px 0 rgba(0,0,0,0.7)
xl
0 24px 64px 0 rgba(0,0,0,0.8)
Font
Inter Variable
Aa Bb Cc 0123
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz
GT Walsheim Framer Medium
Aa Bb Cc 0123
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz
Heading
Headline DisplayGT Walsheim Framer Medium · 110px · 500
Display headline
Headline LGGT Walsheim Framer Medium · 62px · 700
The quick brown fox
Headline MDGT Walsheim Framer Medium · 40px · 700
Design systems at scale
Headline SMGT Walsheim Framer Medium · 28px · 500
Color, type, and spacing
Text
Body LGInter Variable · 18px · 400
The quick brown fox jumps over the lazy dog. Lead paragraph copy for marketing pages.
Body MDInter Variable · 16px · 400
The quick brown fox jumps over the lazy dog. Standard body copy throughout the application.
Body SMInter Variable · 14px · 400
Supporting text, captions, and metadata appear at this size.
Label LGInter Variable · 16px · 600
Button label · Primary action
Label MDInter Variable · 14px · 500
Form label · Required field
Label SMInter Variable · 12px · 400
Badge · Tag · Micro-copy