Gallery
Base Design System
Share
Explore
Gallery
Base Design System
Design tokens

Typography

To calculate the fluid scales for our typography, we’ve used a web tool called Utopia (you can view the fluid scale
here
⁠
):
⁠
image.png
⁠
⁠
Fluid values enable our typography to gracefully scale across customer’s devices.

Heading text

We use these tokens to implement snapshots* of the fluid values for headings.
Heading sizes
Name
@360px
@768px
@1440px
1
h1
23.62px
28.08px
35.44px
2
h2
19.44px
21.59px
25.12px
3
h3
18.22px
19.80px
22.41px
4
h4
17.08px
18.18px
19.99px
5
h5
16.01px
16.7px
17.84px
There are no rows in this table
⁠
Heading line heights
Name
@360px
@768px
@1440px
1
line-height-body-large
25.05px
25.32px
27px
2
line-height-body-medium
22.5px
23.03px
24px
3
line-height-body-small
19.04px
19.49px
19.77px
4
line-height-button-text
23.91px
25.45px
27.99px
There are no rows in this table
⁠

Body text

We use these tokens to implement snapshots* of the fluid values for body text.
Body sizes
Name
@360px
@768px
@1440px
1
body-small
12.69px
12.99px
13.18px
2
body
15px
15.35px
15.92px
3
body-large
16.01px
16.70px
17.84px
There are no rows in this table
⁠
Body line heights
Name
@360px
@768px
@1440px
1
line-height-body-small
19.04px
19.49px
19.77px
2
line-height-body
22.5px
23.03px
24px
3
line-height-body-large
25.05px
25.32px
27px
4
line-height-button-text
23.91px
25.45px
27.99px
There are no rows in this table
⁠
* Within Figma, designers use fixed canvas sizes (360px, 768px and 1440px), so the values of the tokens below are “snapshots” of what that token would be on it’s fluid scale at that particular screen size on the web.
Gallery
Share
 
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.