Typography
The typography scale shipped by @acronis-platform/tokens-pd as .ui-typography-* utility classes.
@acronis-platform/tokens-pd emits the typography
scale as .ui-typography-* utility classes (in css/default.css), rather than
as --ui-* custom properties. Apply a class to set a complete text style —
font family, size, weight, line height, and letter spacing — in one place:
<p className="ui-typography-body-default">Body copy.</p>
<h1 className="ui-typography-headings-display">Page title</h1>Each row below renders a live sample with the parsed declarations applied inline, alongside the class name and its metrics. Styles are grouped by family.
headings (4)
The quick brown fox jumps over the lazy dog
.ui-typography-headings-display
32px · 40px · 400
Inter, system-ui, sans-serif
The quick brown fox jumps over the lazy dog
.ui-typography-headings-lead
18px · 24px · 400
Inter, system-ui, sans-serif
The quick brown fox jumps over the lazy dog
.ui-typography-headings-title
24px · 32px · 400
Inter, system-ui, sans-serif
The quick brown fox jumps over the lazy dog
.ui-typography-headings-title-accent
24px · 32px · 600
Inter, system-ui, sans-serif
body (5)
The quick brown fox jumps over the lazy dog
.ui-typography-body-accent
14px · 24px · 500
Inter, system-ui, sans-serif
The quick brown fox jumps over the lazy dog
.ui-typography-body-default
14px · 24px · 400
Inter, system-ui, sans-serif
The quick brown fox jumps over the lazy dog
.ui-typography-body-form-label
14px · 16px · 400
Inter, system-ui, sans-serif
The quick brown fox jumps over the lazy dog
.ui-typography-body-heading
14px · 24px · 600 · 0.3px
Inter, system-ui, sans-serif
The quick brown fox jumps over the lazy dog
.ui-typography-body-strong
14px · 24px · 600
Inter, system-ui, sans-serif
link (4)
The quick brown fox jumps over the lazy dog
.ui-typography-link-default
14px · 24px · 400
Inter, system-ui, sans-serif
The quick brown fox jumps over the lazy dog
.ui-typography-link-default-underline
14px · 24px · 400
Inter, system-ui, sans-serif
The quick brown fox jumps over the lazy dog
.ui-typography-link-strong
14px · 24px · 600
Inter, system-ui, sans-serif
The quick brown fox jumps over the lazy dog
.ui-typography-link-strong-underline
14px · 24px · 600
Inter, system-ui, sans-serif
caption (3)
The quick brown fox jumps over the lazy dog
.ui-typography-caption-accent
12px · 16px · 500
Inter, system-ui, sans-serif
The quick brown fox jumps over the lazy dog
.ui-typography-caption-default
12px · 16px · 400
Inter, system-ui, sans-serif
The quick brown fox jumps over the lazy dog
.ui-typography-caption-strong
12px · 16px · 600
Inter, system-ui, sans-serif
note (2)
The quick brown fox jumps over the lazy dog
.ui-typography-note-default
11px · 16px · 600 · 1px
Inter, system-ui, sans-serif
The quick brown fox jumps over the lazy dog
.ui-typography-note-heading
11px · 16px · 700 · 1px
Inter, system-ui, sans-serif
fineprint (1)
The quick brown fox jumps over the lazy dog
.ui-typography-fineprint-heading
10px · 16px · 700 · 1px
Inter, system-ui, sans-serif