Foundation

Typography

Typographic conventions for headings, paragraphs, lists, blockquotes, and inline text. Body copy renders in DM Sans; headings use Poppins via the font-heading utility.

Prose specimen

The .prose class applies consistent rhythm to a block of rendered markdown — useful for long-form documentation or content surfaces.

The Fellowship of the Ring

When Mr. Bilbo Baggins of Bag End announced that he would shortly be celebrating his eleventy-first birthday with a party of special magnificence, there was much talk and excitement in Hobbiton.

A Long-expected Party

Bilbo was very rich and very peculiar, and had been the wonder of the Shire for sixty years, ever since his remarkable disappearance and unexpected return. The riches he had brought back from his travels had now become a local legend.

All that is gold does not glitter, not all those who wander are lost; the old that is strong does not wither, deep roots are not reached by the frost.

The Shadow of the Past

The Nine Companions chosen to bear the Ring south on its long road were drawn from every free people of Middle-earth:

  • Frodo Baggins, the Ring-bearer
  • Samwise Gamgee, his loyal friend
  • Meriadoc Brandybuck and Peregrin Took, of the Shire
  • Gandalf the Grey, a wizard
  • Aragorn son of Arathorn, heir of Isildur
  • Boromir of Gondor
  • Legolas of the Woodland Realm
  • Gimli son of Glóin

Riddles in the Dark

The Three Elven Rings were hidden from Sauron and never used while he held the One. Their bearers preserved beauty and memory in the lands they kept:

RingBearerStone
NaryaGandalfRuby
NenyaGaladrielAdamant
VilyaElrondSapphire

And the One Ring, forged in secret by Sauron in the fires of Mount Doom, bore the inscription: Ash nazg durbatulûk, ash nazg gimbatul.

Elements

Standalone Tailwind utility patterns for individual headings, paragraphs, and inline text outside of a .prose container.

The Fellowship of the Ring

<h1 className="font-heading scroll-m-20 text-4xl font-semibold tracking-tight text-balance">

A Long-expected Party

<h2 className="font-heading scroll-m-20 border-b border-border pb-2 text-3xl font-semibold tracking-tight first:mt-0">

The Shadow of the Past

<h3 className="font-heading scroll-m-20 text-2xl font-semibold tracking-tight">

Riddles in the Dark

<h4 className="font-heading scroll-m-20 text-xl font-semibold tracking-tight">

In a hole in the ground there lived a hobbit. Not a nasty, dirty, wet hole, filled with the ends of worms and an oozy smell, nor yet a dry, bare, sandy hole with nothing in it to sit down on or to eat: it was a hobbit-hole, and that means comfort.

<p className="leading-7 [&:not(:first-child)]:mt-6">

Not all those who wander are lost.

<blockquote className="mt-6 border-l-2 border-primary/40 pl-6 italic text-muted-foreground">

RingBearerStone
NaryaGandalfRuby
NenyaGaladrielAdamant
VilyaElrondSapphire

<table className="w-full text-sm"> · <thead> · <tbody>

  • Frodo Baggins, the Ring-bearer
  • Samwise Gamgee, his loyal friend
  • Meriadoc Brandybuck and Peregrin Took, of the Shire
  • Gandalf the Grey, a wizard
  • Aragorn son of Arathorn, heir of Isildur

<ul className="my-6 ml-6 list-disc [&>li]:mt-2">

The Ring whispered: <Ring bearer="Frodo" />

<code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">

Three Rings for the Elven-kings under the sky, Seven for the Dwarf-lords in their halls of stone.

<p className="text-xl text-muted-foreground"> /* Lead */

One Ring to rule them all

<div className="text-lg font-semibold"> /* Large */

Concerning Hobbits

<small className="text-sm font-medium leading-none"> /* Small */

There and back again, a Hobbit's tale.

<p className="text-sm text-muted-foreground"> /* Muted */