Typeset

A content styling system for Markdown and long-form HTML — headings, paragraphs, lists, code, and document layouts — driven by a small set of rhythm tokens.

Purpose

Rendered Markdown is plain HTML. Typeset styles that HTML inside a content container so docs, articles, and chat-like surfaces share one readable rhythm. It is not the Typography component (semantic React text primitives for UI), and it is not the color theme system.

Experiment visually in the Typeset playground.

Typography rhythm

Most of the reading rhythm comes from three controls:

--typeset-size — base text size
--typeset-leading — line height
--typeset-flow — space between blocks

Heading sizes, list indents, and gaps around rules derive from those values so you do not tune every element by hand.

Content width

Typeset does not force a maximum measure. Your layout owns width. Use a wrapper max-width (for example 65ch–75ch) when you want a comfortable reading column for documentation or articles.

Prose styling

Wrap rendered Markdown in a typeset container (and an optional preset class):

<div className="typeset typeset-docs">
  <YourMarkdownRenderer>{content}</YourMarkdownRenderer>
</div>

Colors, fonts, and radius follow your app theme. Dark mode uses the same tokens — no separate invert palette.

Lists, code, and layouts

Typeset styles the common Markdown elements: headings, paragraphs, lists, blockquotes, inline code, fenced code blocks, links, and tables. Documentation layouts usually combine a measured column with a typeset preset; product UI copy should prefer Typography components instead.

Playground

The Typeset playground lets you tune measure, fonts, size, leading, and flow on realistic Markdown-style examples, then copy the CSS when you are ready.