Table of Content

Typography

Design tokens are used to define each typographic property.

Font family

TokenValueExample
"GT Ultra Median", Skeena, ui-serif, serifThe quick brown fox jumps over the lazy dog.
system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serifA joyful zebra quickly sprints across the field, leaping over a lazy kangaroo.

Font size

DesktopMobile
TokenValueExample
3.5remThe quick brown fox jumps over the lazy dog.
2.875remThe quick brown fox jumps over the lazy dog.
2.25remThe quick brown fox jumps over the lazy dog.
1.75remThe quick brown fox jumps over the lazy dog.
1.375remThe quick brown fox jumps over the lazy dog.
1remThe quick brown fox jumps over the lazy dog.
0.875remThe quick brown fox jumps over the lazy dog.
0.8125remThe quick brown fox jumps over the lazy dog.
TokenValueExample
2.625remThe quick brown fox jumps over the lazy dog.
1.875remThe quick brown fox jumps over the lazy dog.
1.75remThe quick brown fox jumps over the lazy dog.
1.5remThe quick brown fox jumps over the lazy dog.
1.25remThe quick brown fox jumps over the lazy dog.
1remThe quick brown fox jumps over the lazy dog.
0.875remThe quick brown fox jumps over the lazy dog.
0.8125remThe quick brown fox jumps over the lazy dog.

Font-weight

TokenValueExample
600The sly black cat jumps over the lazy dog.
400The sly black cat jumps over the lazy dog.
300The sly black cat jumps over the lazy dog.

Line Height

TokenValueExample
1.1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia lacinia est ut elementum. Aenean dignissim augue non nulla rutrum volutpat. Vestibulum semper gravida nunc, sed interdum ligula sodales at. Pellentesque ut urna mattis, consequat lorem sed, viverra neque. Nulla eros ante, ...

1.2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia lacinia est ut elementum. Aenean dignissim augue non nulla rutrum volutpat. Vestibulum semper gravida nunc, sed interdum ligula sodales at. Pellentesque ut urna mattis, consequat lorem sed, viverra neque. Nulla eros ante, ...

1.5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia lacinia est ut elementum. Aenean dignissim augue non nulla rutrum volutpat. Vestibulum semper gravida nunc, sed interdum ligula sodales at. Pellentesque ut urna mattis, consequat lorem sed, viverra neque. Nulla eros ante, ...

1.7

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia lacinia est ut elementum. Aenean dignissim augue non nulla rutrum volutpat. Vestibulum semper gravida nunc, sed interdum ligula sodales at. Pellentesque ut urna mattis, consequat lorem sed, viverra neque. Nulla eros ante, ...