Typography

Font families, sizes, weights and line heights all come from the Design's typography variables, so these classes change with the active Design.

Headings

<h1>–<h6> are styled automatically. The matching .h1–.h6 classes apply a heading's font size to any element — useful when the semantic level and the visual size differ.

<h2 class="h4">An h2 sized like an h4</h2>
<p class="h3">Paragraph styled at h3 size</p>

Pre-heading

A small, uppercase, letter-spaced eyebrow used above headings in most blocks:

<span class="pre-head">Pre heading</span>

Text sizes

<p class="text-small">Smaller text (--font-size-small)</p>
<p class="text-normal">Body text (--font-size)</p>
<p class="text-big">Larger text (--font-size-big)</p>

Highlight

Inside any palette, the highlight class applies the palette's highlight background/text colours (handy for emphasising a word in rich text):

<p>The <span class="highlight">important</span> part.</p>

note

The old section-head class has been removed. For other text styling (alignment, weight, transform, etc.) use Tailwind utilities.