Typography
Type styles for Marketing and Product use.
Marketing
For sites, campaigns and editorial. Larger display sizes for headlines that lead the page. Marketing is the default scale, so no setup is needed.
Marketing · Desktop
Display/H1 · 48/60
Build more good.
Display/H2 · 32/40
Your Impact Portfolio
Heading/H3 · 24/30
What your giving is made of
Heading/H4 · 20/25
Our Vetting
Body/Body · 16/23
Review what your good is doing across 77 organizations.
Body/Body Italic · 16/23
Emphasis stays inside the type system.
Body/Body Sm · 14/20
Central kitchens kept up despite supply shocks.
UI/Label · 14/20
Book a strategy call
UI/Caption · 12/13
set on August 28, 2026
Number/XL · 44/44
$5,305
Number/LG · 28/28
2,000
Marketing · Mobile
Display/H1 · 32/40
Build more good.
Display/H2 · 24/30
Your Impact Portfolio
Heading/H3 · 20/25
What your giving is made of
Heading/H4 · 18/23
Our Vetting
Body/Body · 16/23
Review what your good is doing across 77 organizations.
Body/Body Italic · 16/23
Emphasis stays inside the type system.
Body/Body Sm · 14/20
Central kitchens kept up despite supply shocks.
UI/Label · 14/20
Book a strategy call
UI/Caption · 12/13
set on August 28, 2026
Number/XL · 44/44
$5,305
Number/LG · 28/28
2,000
| Style | Utility | Desktop | Mobile |
|---|---|---|---|
| Display/H1 | type-h1 | 48/60 | 32/40 |
| Display/H2 | type-h2 | 32/40 | 24/30 |
| Heading/H3 | type-h3 | 24/30 | 20/25 |
| Heading/H4 | type-h4 | 20/25 | 18/23 |
Product
For the app and dashboards. A tighter heading scale that leaves room for data. Set data-type-scale="product" on the app shell, or any wrapper, to switch to it.
Product · Desktop
Display/H1 · 36/45
Build more good.
Display/H2 · 24/30
Your Impact Portfolio
Heading/H3 · 20/25
What your giving is made of
Heading/H4 · 16/20
Our Vetting
Body/Body · 16/23
Review what your good is doing across 77 organizations.
Body/Body Italic · 16/23
Emphasis stays inside the type system.
Body/Body Sm · 14/20
Central kitchens kept up despite supply shocks.
UI/Label · 14/20
Book a strategy call
UI/Caption · 12/13
set on August 28, 2026
Number/XL · 44/44
$5,305
Number/LG · 28/28
2,000
Product · Mobile
Display/H1 · 30/38
Build more good.
Display/H2 · 20/25
Your Impact Portfolio
Heading/H3 · 18/23
What your giving is made of
Heading/H4 · 16/20
Our Vetting
Body/Body · 16/23
Review what your good is doing across 77 organizations.
Body/Body Italic · 16/23
Emphasis stays inside the type system.
Body/Body Sm · 14/20
Central kitchens kept up despite supply shocks.
UI/Label · 14/20
Book a strategy call
UI/Caption · 12/13
set on August 28, 2026
Number/XL · 44/44
$5,305
Number/LG · 28/28
2,000
| Style | Utility | Desktop | Mobile |
|---|---|---|---|
| Display/H1 | type-h1 | 36/45 | 30/38 |
| Display/H2 | type-h2 | 24/30 | 20/25 |
| Heading/H3 | type-h3 | 20/25 | 18/23 |
| Heading/H4 | type-h4 | 16/20 | 16/20 |
Shared styles
| Style | Utility | Size |
|---|---|---|
| Body/Body | type-body | 16/23 |
| Body/Body Italic | type-body italic | 16/23 |
| Body/Body Sm | type-body-sm | 14/20 |
| UI/Label | type-label | 14/20 |
| UI/Caption | type-caption | 12/13 |
| Number/XL | type-num-xl | 44/44 |
| Number/LG | type-num-lg | 28/28 |
Usage
Plain h1–h4 and body text pick up these styles by default. Use the type-* utilities when the element and the style differ. Heading sizes switch to the mobile column below 768px.
<div data-type-scale="product">
<h1>Your Impact Portfolio</h1>
<p className="type-caption text-muted-foreground">set on August 28, 2026</p>
</div>