Typography

Prose

Heading-aware document rhythm for direct heading and block children.

Prose is the grouping region for long-form copy. It adds space between its direct children so a heading into a paragraph is tighter than paragraph into paragraph. Font size and color stay on Title and Text. Prose does not style lists, links, or bullets.

Headings and paragraphs join that spacing only as Prose’s own children with real tags (render={<h2 />}, render={<p />}). Default Title and Text are span, so they get no heading or paragraph gap. Native ul, ol, and blockquote are one spaced block each. If you wrap blocks in a div, that wrapper can take a block gap; headings and paragraphs inside it do not. Use render={<article />} when the region is the document landmark.

Reach for Stack rowGap for cards, toolbars, and form rows. One even gap cannot split heading cadence. align on Prose is text-align for the copy, not a centered layout shell.


When to use

  • Articles, docs, and changelog regions whose direct children are headings and blocks
  • Density via gap (s / m / l, default l)
  • One region align so Title and Text that omit align inherit it

When not to use

  • Cards, toolbars, and form rows → Stack
  • Restyling type, lists, or links → Title, Text, or your CSS
  • Parsing or sanitizing Markdown — Prose only spaces matching children

  • Title — heading tags and display size
  • Text — body paragraphs and inline copy
  • Stack — flex gaps for cards and rows, not article cadence
  • Typography — scale, fluid gate, and tokens

Common examples

Article blocks

An article with Title and Text as heading and paragraph tags is the baseline. Default gap is l. Title inside Prose uses lineHeight="s". Add a smaller Title with render={<h3 />} for a subheading. Native inline marks (kbd, del, ins) keep preflight chrome inside the paragraph.

Native lists and quotes

A list or blockquote is one sibling of the headings and paragraphs. Items inside the list do not get a second Prose gap.

Density and region align

gap="s" tightens heading and block spacing. One Prose align sets text-align for the region. Title and Text that do not set align inherit it.

Body leading

Prose only spaces between blocks. Line height stays on Title and Text. Keep Title on lineHeight="s" so the heading sits tight above the next block; set Text lineHeight per paragraph.

Span hosts stay out

Default Title and Text are span hosts, so they skip heading and block gaps. Pass render for h1–h6 or p when the node should join the rhythm.

Ask your agent

Turn this changelog into an article with real headings, a subheading, and paragraphs that use heading-aware spacing — not one even gap between every block. Keep keyboard, deleted, and inserted marks as native inline tags in the body.

Last updated on

On this page