Typography

A set of CSS utility classes that apply the design-system text styles. Typography ships no JavaScript export — there is no @uxf/ui/typography module and no React component; you apply the classes to any element.

When to use

Use these classes to apply consistent heading and text styles to plain elements (<h1>, <p>, <span>, …) without pulling in a component. Reach for them wherever a piece of text should match the design system's type scale.

Note: this is distinct from @uxf/ui/css/tokens/typography.css, which is the app-level token layer that defines the underlying font scale.

Usage

<h1 className="uxf-typo-h1">Heading</h1>
<p className="uxf-typo-body">Body text</p>
<span className="uxf-typo-caption">Caption</span>

Classes

Requirements

Import the stylesheet once in your global CSS:

@import url("@uxf/ui/css/typography.css");