Browse catalog

Typography

Styles for headings, paragraphs, lists and inline elements. Like shadcn/ui, Typography is a styling reference rather than an installable component — apply these utility classes (built on the design tokens) directly to your semantic HTML.

The Joke Tax Chronicles

A lead paragraph introduces the page with a calmer, muted tone.

The King’s Plan

A standard paragraph uses comfortable line height and the foreground token so it adapts to light, dark, admin and customer surfaces automatically.

The Joke Tax

Use a inline code token-backed snippet inline with text, plus strong emphasis and a themed link.

People of the Kingdom

“After all,” he said, “everyone enjoys a good joke, so it’s only fair that they should pay for the privilege.”

1st level of puns: 5 gold coins
2nd level of jokes: 10 gold coins
3rd level of one-liners: 20 gold coins

Large

Small

Muted

Usage

Headings use tracking-tight and weight steps; body copy uses leading-7.
Colors come only from tokens (text-foreground, text-muted-foreground, text-primary) so prose re-themes with the surface.
Blockquotes and lists use logical properties (border-s-2, ps-6, ms-6, text-start) so they mirror under RTL.