gofundme.com1
Colors
Spacing
xs
0.25rem
sm
0.5rem
md
1rem
lg
1.5rem
xl
2rem
gutter
1rem
margin
1.5rem
Rounded
none0px
sm0.25rem
md0.5rem
lg0.75rem
xl1rem
full9999px
Shadows
sm
0px 1px 2px rgba(0,0,0,0.1)
md
0px 2px 6px rgba(0,0,0,0.1)
lg
0px 4px 8px rgba(0,0,0,0.1)
xl
0px 6px 14px rgba(0,0,0,0.1)
Font
GoFundMe Sans
Aa Bb Cc 0123
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz
Heading
Headline DisplayGoFundMe Sans · clamp(3rem, calc(3rem + 2.125 * ((100vw - 23.4375rem) / 66.5625)), 5.125rem) · 175
Display headline
Headline LGGoFundMe Sans · clamp(1.75rem, calc(1.75rem + 0.25 * ((100vw - 23.4375rem) / 66.5625)), 2rem) · 175
The quick brown fox
Headline MDGoFundMe Sans · clamp(1.5rem, calc(1.5rem + 0.25 * ((100vw - 23.4375rem) / 66.5625)), 1.75rem) · 175
Design systems at scale
Headline SMGoFundMe Sans · clamp(1.25rem, calc(1.25rem + 0.25 * ((100vw - 23.4375rem) / 66.5625)), 1.5rem) · 175
Color, type, and spacing
Text
Body LGGoFundMe Sans · clamp(1.25rem, calc(1.25rem + 0.25 * ((100vw - 23.4375rem) / 66.5625)), 1.5rem) · 100
The quick brown fox jumps over the lazy dog. Lead paragraph copy for marketing pages.
Body MDGoFundMe Sans · 1rem · 100
The quick brown fox jumps over the lazy dog. Standard body copy throughout the application.
Body SMGoFundMe Sans · 0.875rem · 100
Supporting text, captions, and metadata appear at this size.
Label LGGoFundMe Sans · 1rem · 175
Button label · Primary action
Label MDGoFundMe Sans · 0.875rem · 175
Form label · Required field
Label SMGoFundMe Sans · 0.75rem · 175
Badge · Tag · Micro-copy