Text Elements

Text Property Modifiers

The following table describes the supported tokens and rules for the text property, along with the expected options and their output CSS.

Modifier	Expected Values	Example
`color`	Colortoken (e.g., `purple-light`)	`text:purple-light`
`line-height`	`hug`, `tight`, `snug`, `normal`, `relaxed`, `loose`,`spacious`,`extra-spacious`	`text:spacious`
`letter-spacing`	`extra-tight`, `tight`, `normal`, `wide`, `wider`, `widest`	`text:widest`
`text-align`	`left`, `center`, `right`, `justify`	`text:left`
`max-width`	`extra-narrow`,`narrow`, `medium`, `wide`, `extra-wide`	`text:wide`
`text-transform`	`uppercase`, `lowercase`, `capitalize`	`text:uppercase`

The following table describes the supported tokens and rules for the font property, along with the expected options and their output CSS.

Modifier	Expected Values	Example
`font-size`	`tiny`, `small`, `base`, `heading6`, `heading5`, `heading4`, `heading3`, `heading2`, `heading2`, `heading1`, `eyebrow`,	`font:small`
`font-family`	`sans`, `serif`, `mono`	`font:sans`
`font-weight`	`thin`,`extraLight`,`light`, `regular`, `medium`, `semibold`, `bold`,`extraBold`,`black`	`font:bold`