Typography

Samples of type, not a class zoo. The library sets the system UI stack on html, :host and ships --text-xs through --text-2xl. There is no heading scale and no @font-face in alumna-shadcn.css. Ubuntu Sans on this site lives in site.css only. Heading sizes for docs titles (.docs-main h1) are site-only — do not copy them. There is no wrapper.

Headings

Raw h1–h4. This preview picks up this docs site’s .docs-main heading sizes from site.css. In an app, apply --text-2xl … --text-sm if you want Vega sizes.

<h1>Product update</h1>
<h2>What shipped</h2>
<h3>Typography tokens</h3>
<h4>System stack</h4>

Body and muted

Body inherits --foreground. .muted is color: var(--muted-foreground) — the same token as .card-description, .field-description, and .table caption.

<p>Body copy inherits <code>--foreground</code> from <code>body</code> and the system stack on <code>html, :host</code>.</p>
<p class="muted">Muted supporting copy. Same token as card descriptions and table captions.</p>

Link in a card

A text link inside .card. .button.button-link is the library treatment (generic a is reset by alumna.css).

<div class="card" style="max-width: 24rem">
	<div class="card-header">
		<div class="card-title">Invoice INV-001</div>
		<div class="card-description">Due 12 March 2026</div>
	</div>
	<div class="card-content">
		<a class="button button-link" href="/components/table">View the table</a>
	</div>
</div>

Inline code

Native <code>. The chip on this page is .docs-main code in site.css — authors who copy the two library files do not get that chip.

<p>Copy <code>alumna-shadcn.css</code> next to <code>alumna.css</code>.</p>

Table caption

.table caption is already --text-sm and --muted-foreground.

<div class="table-wrap">
	<table class="table">
		<caption>Two invoices this week</caption>
		<thead>
			<tr>
				<th scope="col">Invoice</th>
				<th scope="col">Amount</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>INV-001</td>
				<td>$250.00</td>
			</tr>
			<tr>
				<td>INV-002</td>
				<td>$150.00</td>
			</tr>
		</tbody>
	</table>
</div>