Typography system with predefined text styles, Inter font family, and three color variants (primary, secondary, tertiary)
.text-h1.text-h2.text-h3.text-h4.text-h5.text-display.text-display-small.text-p.text-dense-bold.text-dense.text-label.text-label-small.text-small-bold.text-small.text-color-primaryThe quick brown fox jumps over the lazy dog
.text-color-secondaryThe quick brown fox jumps over the lazy dog
.text-color-tertiaryThe quick brown fox jumps over the lazy dog
Use semantic heading levels for content structure
{ className: "text-h4 text-color-primary" }This is a paragraph with secondary color for less emphasis.
Large decorative text for hero sections
{ className: "text-display" }Compact text for lists and data
{ className: "text-dense | text-dense-bold" }Uppercase labels for form fields and categories
{ className: "text-label | text-label-small" }Fine print and auxiliary information
{ className: "text-small | text-small-bold" }Mix typography and color classes freely
{ className: "text-* text-color-*" }