Typography

Beyond the bare headings and paragraphs, a small set of helper classes covers display type, supporting text, long-form prose, link treatments, and text trimming. This is typography.css in @layer base.

Display type

.display is oversized headline type (--text-6xl, semibold, very tight leading and tracking) for hero headlines that should read bigger than an <h1>. .display.is-celebrate bumps it one step larger (--text-7xl) for landing-page moments.

<h1 class="display">Ship it today</h1>
<h1 class="display is-celebrate">Welcome aboard</h1>

Supporting text

• .lede: a larger, relaxed intro paragraph in --ink-soft, for the sentence under a headline.
• .eyebrow: a small uppercase, wide-tracked label in --ink-dim, for the kicker above a heading.

<p class="eyebrow">Pricing</p>
<h2>Simple, per-seat</h2>
<p class="lede">Everything your team needs, one price.</p>

Prose

.prose is the long-form container for editorial content, such as docs, blog posts, anything with mixed headings, paragraphs, and lists. It sets a comfortable measure and, unlike bare lists, restores list markers (discs and decimals) and vertical rhythm between blocks. Apply it to the wrapper around flowing content:

<article class="prose">
  <h2>Getting started</h2>
  <p>Elements apps are built from pages…</p>
  <ul>
    <li>First</li>
    <li>Second</li>
  </ul>
</article>

It manages spacing between children (* + *), tighter spacing after headings, and generous space before h2/h3, so you don't hand-tune margins inside prose.

Link classes

Three link treatments for use outside .prose, where bare <a> is deliberately plain:

Class	Look
.link-prose	Underlined accent link (the in-prose default treatment)
.link-action	Medium-weight accent link, no underline until hover
.link-muted	Quiet --ink-soft link that brightens to --ink on hover

<a class="link-action" href="/docs">Read the docs</a>
<a class="link-muted" href="/legal">Terms</a>

Clamping and truncation

• .line-clamp-1 … .line-clamp-6: clamp text to N lines with an ellipsis.
• .truncate: clamp to a single line with an ellipsis (no wrapping).

<p class="line-clamp-3">A long description that stops after three lines…</p>
<div class="truncate">a/very/long/path/that/gets/cut.txt</div>

Text wrapping

• .text-balance: balances line lengths (text-wrap: balance), best for headings.
• .text-pretty: avoids orphans (text-wrap: pretty), best for paragraphs.

Both are also available as utilities (see utilities).