Typography

Font stack

We use native system fonts for all in-product experiences. This keeps the interface fast and legible across every operating system, with no webfont to load.

• Sans-serif for most text — font-body.
• Monospace for code — font-mono.

Verified 2026-09-04: --font-body in tailwind-theme.css resolves to system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, …, so the page's claim holds.

⚠️ font-body means something different on the Brand page, which describes it as Source Sans 3 and names type-display and font-code alongside it. Neither of those two exists anywhere in the product CSS. Brand is out of scope; the product answer is the one above. Don't reconcile them — drop the brand claim.

The live page also carries a Default attributes table whose Font-family, Font-size, Font-weight and Line-height rows contain the monospace font names pasted in as values, with the Class and Value columns empty. It is corrupt and has been dropped here rather than repaired, because the values it should hold are derivable.

Constructs

Type is applied through classes, not utilities, so the same contract serves Rails and React.

• .c-heading — titles and structures a section. Establishes hierarchy and helps a reader understand the page at a glance. Variants: --lg, --xl, --2xl, --3xl, --4xl, --caps, and --base.
• .c-article — applies consistent typography to long-form content: documentation, guides, editorial. Handles spacing and hierarchy so rich content needs no manual formatting. Sized with prose-*.
• .c-p — body text as a readable block. Variants --sm, --lg.
• .c-ul / .c-ol — unordered and ordered lists.

.c-heading--base ships and is not on the live docs site. Found while verifying the class contract; the predecessor's empty-state example used it. The full variant list is derivable, so the generated half of the page should enumerate it rather than this prose.

The house type scale is not the type scale

--font-size-* in tailwind-theme.css looks like the house scale and mostly isn't: it sits in a Tailwind v3 namespace that generates no v4 utility, and nine of its fourteen steps hold 1.25rem / 1.75rem — the v3 array shorthand, not a valid font-size. Two steps do render, via hand-written utilities.

Nothing above depends on it. It is flagged because the names invite the assumption that they are the system's type steps, and they are not.