Typography
Versa UI uses a structured, theme-aware type scale built on composite utility classes. Every text style automatically adapts font family, font weight, line height, and letter spacing across all visual themes.
--typescale-H1-*The five boxing wizards jump quickly.
--typescale-H2-*The five boxing wizards jump quickly.
--typescale-H3-*The five boxing wizards jump quickly.
--typescale-H4-*The five boxing wizards jump quickly.
--typescale-H5-*The five boxing wizards jump quickly.
--typescale-H6-*The five boxing wizards jump quickly.
--typescale-H7-*The five boxing wizards jump quickly.
--typescale-H8-*The five boxing wizards jump quickly.
--typescale-H9-*The five boxing wizards jump quickly.
--typescale-b1-*The five boxing wizards jump quickly.
--typescale-b2-*The five boxing wizards jump quickly.
--typescale-b3-*The five boxing wizards jump quickly.
--typescale-b4-*The five boxing wizards jump quickly.
--typescale-b5-*The five boxing wizards jump quickly.
--typescale-b6-*The five boxing wizards jump quickly.
Usage in Code
React Component Usage
Apply the composite text utility class directly to your component elements:
// ✅ Recommended: Composite utility class
<h1 className="text-h1 text-[var(--color-neutral-text-strong)]">
Display Heading H1
</h1>
<p className="text-b4 text-[var(--color-neutral-text-medium)]">
Standard body text b4 for paragraph content.
</p>CSS Token Usage
If writing custom CSS rule blocks, reference the composite token custom properties:
.custom-card-header {
font-family: var(--typescale-H6-font-family);
font-size: var(--typescale-H6-size);
font-weight: var(--typescale-H6-weight);
line-height: var(--typescale-H6-line-height);
letter-spacing: var(--typescale-H6-letter-spacing);
color: var(--color-neutral-text-strong);
}