Foundations88 tokens
Typography
Four roles in five sizes each, body with two more, four weights. Bricolage for display and headings, Geist for everything else.
- Source
tokens/typography.json- Figma
- Text styles + collection Typography
- In code
class type-body-md-regular
Families
Two families. The opsz axis lets Bricolage adjust its letterforms to the size it is set at.
Aa
Bricolage GrotesqueDisplay & heading
Aa
GeistBody & label
Roles
4 roles, xs to xl each; body adds 2xl and 3xl for lead text and large buttons. 22 sizes × 4 weights = 88 styles. Class: type-{role}-{size}-{weight}.
Role
Family
Sizes
Use for
displayBricolage Grotesque
32 · 40 · 48 · 56 · 64 px
Hero titles and big moments
headingBricolage Grotesque
16 · 18 · 20 · 24 · 28 px
Titles of sections, cards and menus
bodyGeist
11 · 12 · 14 · 16 · 18 · 20 · 24 px
Running text, prompts, descriptions
labelGeist
10 · 11 · 12 · 14 · 16 px
Buttons, chips, tags, small UI text
Display
Bricolage Grotesque. Shown in medium; every size has all four weights.
display/xs32 / 36 · -0.02emAds that stop the scroll
display/sm40 / 44 · -0.02emAds that stop the scroll
display/md48 / 52 · -0.03emAds that stop the scroll
display/lg56 / 60 · -0.03emAds that stop the scroll
display/xl64 / 68 · -0.03emAds that stop the scroll
Heading
Bricolage Grotesque. Shown in medium; every size has all four weights.
heading/xs16 / 20 · 0emBrand DNA
heading/sm18 / 24 · 0emBrand DNA
heading/md20 / 28 · -0.01emBrand DNA
heading/lg24 / 32 · -0.01emBrand DNA
heading/xl28 / 36 · -0.01emBrand DNA
Body
Geist. Shown in medium; every size has all four weights.
body/xs11 / 16 · 0.01emDescribe your ad and pick a model.
body/sm12 / 16 · 0.01emDescribe your ad and pick a model.
body/md14 / 20 · 0emDescribe your ad and pick a model.
body/lg16 / 24 · 0emDescribe your ad and pick a model.
body/xl18 / 28 · 0emDescribe your ad and pick a model.
body/2xl20 / 28 · -0.01emDescribe your ad and pick a model.
body/3xl24 / 32 · -0.01emDescribe your ad and pick a model.
Label
Geist. Shown in medium; every size has all four weights.
label/xs10 / 12 · 0.01emGenerate
label/sm11 / 14 · 0.01emGenerate
label/md12 / 16 · 0.01emGenerate
label/lg14 / 18 · 0emGenerate
label/xl16 / 20 · 0emGenerate
Weights
Four weights, same for every role.
Aa
regular400Aa
medium500Aa
semibold600Aa
bold700Tracking
Letter spacing follows size: small text opens up, large text tightens.
Size
Tracking
up to 12px
0.01em
up to 18px
0em
up to 28px
-0.01em
up to 40px
-0.02em
larger
-0.03em