Browse components

Text

Typography primitive with tone and size tokens, rendered as p, span or div.

atoms

Live example

Default usage you can copy and adapt.

Semantic body copy

Headline style

Supporting body copy uses the description tone.

The props you are most likely to need, with types and defaults.

Props / API
Name	Type	Required	Default	Description
as	'p' \| 'span' \| 'div'	No	p	Element tag
tone	string	No	body	body \| description \| caption \| headline \| label \| error
size	'xs' \| 'sm' \| 'md' \| 'lg'	No	md	Text size — the bottom of the scale Heading sits on (md matches h6, lg matches h5)
weight	'normal' \| 'medium' \| 'semibold' \| 'bold'	No	normal (medium for tone="label")	Font weight; overrides the weight the tone implies