Pages
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
):
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
h1
23.62px
28.08px
35.44px
h2
19.44px
21.59px
25.12px
h3
18.22px
19.80px
22.41px
h4
17.08px
18.18px
19.99px
h5
16.01px
16.7px
17.84px
There are no rows in this table
Heading line heights
Name
@360px
@768px
@1440px
line-height-body-large
25.05px
25.32px
27px
line-height-body-medium
22.5px
23.03px
24px
line-height-body-small
19.04px
19.49px
19.77px
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
body-small
12.69px
12.99px
13.18px
body
15px
15.35px
15.92px
body-large
16.01px
16.70px
17.84px
There are no rows in this table
Body line heights
Name
@360px
@768px
@1440px
line-height-body-small
19.04px
19.49px
19.77px
line-height-body
22.5px
23.03px
24px
line-height-body-large
25.05px
25.32px
27px
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.
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.