Body

Regular text for reading and for the interface around it: 16px for prose, 13px for controls and supporting copy.

Readable paragraphs and descriptions, set for long-form reading.body-md16 / 1.6 · 400
Control text and supporting copy beside settings.body-sm13 / 1.5 · 400
Fig. 1 The two body roles, measured.

Prose and interface

body-md is for reading: descriptions, empty states, and anything longer than a sentence or two. body-sm is the interface default: the text inside controls, settings rows, menus, and the copy that supports them.

A summary of activity every Monday.

Fig. 2 A settings row: the label and its description are interface text, so they use body-sm.

Do

A summary of activity every Monday.

body-sm keeps the description beside its control.

Don’t

A summary of activity every Monday.

Prose-sized text in a dense row pushes the control away and crowds the label.

Fig. 3 The same row, set two ways.

Long-form in Typeset

For rendered Markdown, help articles, and chat replies, wrap the content in Typeset. It sets body-md in foreground-body, a step lighter than headings, and adds reading rhythm between blocks.

Before you invite

Teammates join as editors. You can change anyone’s role later from the members list.

  • Editors can create and change projects.
  • Viewers can read and comment.
Fig. 4 Typeset spaces paragraphs and lists for reading, and keeps headings in ink.

Build it

Each role is a utility. Use body-md for prose and body-sm for the interface:

type-roles.tsx