Heading

• Keep page and section titles consistent: a 36px title always gets display tracking, and a 20px one never goes semibold.
• Keep the outline correct when the design wants a different size: render an h2 that looks like a 20px title.
• Mark a quieter heading under a stronger one with tone="secondary".

• Body copy, labels and metadata: use Text.
• Headings inside rendered markdown or rich text: wrap the output in Prose, which styles its h1–h6 for you.
• A form control's name: use Label.

Level and size apart

Use size when the outline needs an h2 but the layout needs a smaller title, such as a card heading.

<Heading level={2} size="xl">Payment methods</Heading>

Secondary tone

Use tone="secondary" for a heading that sits under a stronger one, such as a group label inside a settings page.

<Heading level={3} size="md" tone="secondary">Billing contact</Heading>

Heading

Every other h1–h6 attribute passes through, such as id for an anchor link.

Each size carries its own weight: medium below 24px, semibold from 24px, and the display face with tracking-display from 36px. Sizes use the text-display-* and text-ui-* tokens in eased.css.

• It renders a real h1–h6, so the outline that screen readers navigate by follows level, never size.
• Keep levels in order on a page; change size, not level, to make a heading look smaller.

None. A heading holds still so the things around it can move.

Pick Heading for any title outside rendered markdown. Set level from the document outline first, then set size only when the design calls for a different look. Don't skip levels to get a smaller size.

Don't add font-semibold, tracking-* or text-* size classes: the size already pairs weight, tracking and leading, and extra classes break that pairing. Don't use it for headings inside markdown output; Prose styles those.

Sizes are fixed rem values and don't change with the viewport. Long titles wrap with text-balance, so the last line is never a single word, and long words break instead of overflowing. The heading has min-w-0, so it shrinks inside flex and grid rows; add truncate through className to keep it on one line.

• Text: body text on the 11–18px UI scale.
• Prose: styles headings and everything else inside rendered markdown.