Design Tokens

Design tokens are named entities that store visual and functional information. They take the place of hardcoded values, such as hex values for color or pixel values for spacing.

Text

Example	Typeset	Font size	Font weight	Line height
Lorem ipsum	caption-lg	`12px`	`400`	`16px`
Lorem ipsum	caption-md	`10px`	`400`	`14px`
Lorem ipsum	display-lg	`64px`	`700`	`80px`
Lorem ipsum	display-md	`56px`	`700`	`68px`
Lorem ipsum	display-sm	`48px`	`700`	`60px`
Lorem ipsum	heading-lg	`40px`	`700`	`48px`
Lorem ipsum	heading-md	`32px`	`700`	`40px`
Lorem ipsum	heading-sm	`28px`	`700`	`36px`
Lorem ipsum	label-lg	`14px`	`600`	`18px`
Lorem ipsum	label-md	`12px`	`600`	`16px`
Lorem ipsum	label-sm	`10px`	`600`	`14px`
Lorem ipsum	text-lg	`16px`	`400`	`24px`
Lorem ipsum	text-md	`14px`	`400`	`20px`
Lorem ipsum	text-sm	`12px`	`400`	`16px`
Lorem ipsum	title-lg	`22px`	`600`	`28px`
Lorem ipsum	title-md	`16px`	`600`	`20px`
Lorem ipsum	title-sm	`16px`	`600`	`20px`