Text types, sizes, and font variables that control hierarchy across the product. Nothing is larger than 24px.
Text from @prepared911/ui/text plus the --text-<role>-* custom properties in @prepared911/ui/styles.css. Each TextType applies the whole bundle: font, letter-spacing, and text wrap. Emphasis is a separate role, such as TextType.SubtitleEmphasis, not a strong or medium prop. The heading element is as. The visual role does not pick h1–h6.
Page is 24px and every other role is smaller, so a heading hierarchy that follows the order Page, Section, Subsection, Title, Subtitle never inverts. A test in @prepared911/ui fails when a role, a font-size token, or an authored stylesheet goes above the ceiling.
| Role | Size | Line height | Weight | Letter spacing |
|---|---|---|---|---|
Page | 24px | 32px | 600 | -0.04em |
Section | 20px | 26px | 600 | -0.02em |
Subsection | 18px | 24px | 600 | -0.01em |
Title | 16px | 24px | 400 | 0em |
TitleEmphasis | 16px | 24px | 600 | 0em |
Subtitle (default) | 14px | 20px | 400 | 0em |
SubtitleEmphasis | 14px | 20px | 500 | 0em |
Body | 13px | 18px | 400 | 0em |
BodyEmphasis | 13px | 18px | 500 | 0em |
Label | 13px | 18px | 500 | 0em |
Caption | 12px | 16px | 400 | 0em |
CaptionEmphasis | 12px | 16px | 500 | 0em |
Code1 | 13px | 18px | 400 | 0em |
Code2 | 12px | 16px | 400 | 0em |
Overline | 12px | 16px | 500 | 0.08em |
as to the heading level the outline needs.
--font-family-mono.
--font-family-sans powers UI copy and --font-family-mono powers monospace. The weight comes with the role, so you reach for a role, not a weight.
| Weight | Roles | When to use |
|---|---|---|
| 400 | Title, Subtitle, Body, Caption, Code1, Code2 | Default body text and captions |
| 500 | SubtitleEmphasis, BodyEmphasis, Label, CaptionEmphasis, Overline | Emphasis, labels, and interactive affordances |
| 600 | Page, Section, Subsection, TitleEmphasis | Headings |
Text takes a foreground from Foreground to express semantic meaning.
| Variant | When to use |
|---|---|
Foreground.Default | Primary content (default) |
Foreground.Subtle | Secondary and supporting text |
Foreground.Muted | Tertiary metadata |
Foreground.Disabled | Disabled controls and inactive states |
Foreground.Link | Links |
Foreground.Accent | Accent text and interactive highlights |
Foreground.Informative | Informational callouts |
Foreground.Success | Positive confirmations |
Foreground.Warning | Cautionary messages |
Foreground.Destructive | Destructive or error states |
TextType.BodyLarge and TextType.BodyLargeEmphasis were removed with the 24px ceiling.
| Before | After |
|---|---|
TextType.BodyLarge | TextType.Subtitle |
TextType.BodyLargeEmphasis | TextType.SubtitleEmphasis |
var(--text-body-large-*) | var(--text-subtitle-*) |
var(--text-body-large-emphasis-*) | var(--text-subtitle-emphasis-*) |
Page 36px to 24px, Section 30px to 20px, Subsection 24px to 18px, Title and TitleEmphasis 20px to 16px, and Subtitle and SubtitleEmphasis 16px to 14px. Where a screen set a Subtitle run beside a BodyLarge run to show a hierarchy, use Title for the larger run.
TextType roles before composing font-size and font-weight manually, and never write a font size above 24px.Page to Title) only for actual headings: pair each with the as element the outline needs.Caption and Body with Foreground.Subtle for secondary content to establish clear hierarchy.Overline for category labels and small section intros; it renders as uppercase by default.h1, h2, h3, h4.