Typography

display-lg

used for large headlines to bring the most emphasis on a page - less than one sentence

display-md

emphasized headlines to draw attention to, less than one sentence

display-sm

bold text used in things like marketing cards, data viz etc

heading-2xl

large on page header such as age tiles etc. one sentence or less

heading-xl

use for things like section headers on a page etc

heading-lg

use for subsections of pages, up to one sentence

heading-md

emphasized subheads, cards etc

heading-sm

headings for body text or things like card titles etc

heading-xs

Use mostly as a subhead or body size text that is meant to be emphasized

heading-2xs

used in chips or small pieces of information that introduce main content (a heading for a list of names etc)

body-lg

large body blocks - 1 paragraph or less

body-md

default body text size

body-sm

body text used in compact things like cards and other areas where information density is required

label-sm

default lable for things like radio buttons, input fields etc

label-md

For large input fields that are designated to be more ephasized, used in rare cases.

button

buttons only

mono-xl

Reserved for numbers and data visualization

mono-lg

Reserved for numbers and data visualization

mono-md

Reserved for numbers and data visualization

mono-sm

Reserved for numbers and data visualization

mono-xs

Reserved for numbers and data visualization

link

Used for inline text links.