Typography

Usage

Add this CSS to your project, then wrap your content with the prose class:

.prose {
  --prose-color: var(--muted-foreground);
  --prose-heading-color: var(--foreground);
  --prose-strong-color: var(--foreground);
  --prose-link-color: var(--foreground);
  --prose-code-color: var(--foreground);
  --prose-marker-color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);
  --prose-link-underline-color: var(--primary);
  --prose-th-borders: var(--border);
  --prose-td-borders: color-mix(in oklab, var(--border) 75%, transparent);
  --prose-hr-color: var(--border);
  --prose-blockquote-border-color: var(--border);

  color: var(--prose-color);
  font-size: var(--text-sm);
  line-height: 1.75;
}

.prose *:where(:not(.not-prose, .not-prose *)) + *:where(:not(.not-prose, .not-prose *)) {
  margin-top: calc(var(--spacing) * 5);
}

.prose h1:where(:not(.not-prose, .not-prose *)) {
  font-size: var(--text-2xl);
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--prose-heading-color);
  font-weight: var(--font-weight-semibold);
  margin-top: calc(var(--spacing) * 16);
}

.prose h2:where(:not(.not-prose, .not-prose *)) {
  font-size: var(--text-xl);
  line-height: 1.35;
  letter-spacing: -0.025em;
  color: var(--prose-heading-color);
  font-weight: var(--font-weight-semibold);
  margin-top: calc(var(--spacing) * 14);
}

.prose h3:where(:not(.not-prose, .not-prose *)) {
  font-size: var(--text-lg);
  line-height: 1.4;
  color: var(--prose-heading-color);
  font-weight: var(--font-weight-semibold);
  margin-top: calc(var(--spacing) * 12);
}

.prose h4:where(:not(.not-prose, .not-prose *)) {
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--prose-heading-color);
  font-weight: var(--font-weight-semibold);
  margin-top: calc(var(--spacing) * 10);
}

.prose p:where(:not(.not-prose, .not-prose *)) {
  margin-top: calc(var(--spacing) * 5);
}

.prose ul:where(:not(.not-prose, .not-prose *)),
.prose ol:where(:not(.not-prose, .not-prose *)) {
  padding-left: calc(var(--spacing) * 6);
}

.prose ul:where(:not(.not-prose, .not-prose *)) {
  list-style-type: disc;
}

.prose ol:where(:not(.not-prose, .not-prose *)) {
  list-style-type: decimal;
}

.prose li + li:where(:not(.not-prose, .not-prose *)) {
  margin-top: calc(var(--spacing) * 3);
}

.prose a:where(:not(.not-prose, .not-prose *)) {
  color: var(--prose-link-color);
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--prose-link-underline-color);
}

.prose strong:where(:not(.not-prose, .not-prose *)) {
  color: var(--prose-strong-color);
  font-weight: var(--font-weight-semibold);
}

.prose code:where(:not(.not-prose, .not-prose *)) {
  font-family: var(--font-mono);
  font-size: 0.875em;
  color: var(--prose-code-color);
  background-color: var(--muted);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
}

.prose blockquote:where(:not(.not-prose, .not-prose *)) {
  font-style: italic;
  border-inline-start-width: 0.25rem;
  border-inline-start-color: var(--prose-blockquote-border-color);
  padding-inline-start: calc(var(--spacing) * 4);
}

.prose hr:where(:not(.not-prose, .not-prose *)) {
  border-color: var(--prose-hr-color);
  margin-top: calc(var(--spacing) * 12);
  margin-bottom: calc(var(--spacing) * 12);
}

.prose :first-child:where(:not(.not-prose, .not-prose *)) {
  margin-top: 0;
}

.prose :last-child:where(:not(.not-prose, .not-prose *)) {
  margin-bottom: 0;
}

<div class="prose">
  <h1>Your heading</h1>
  <p>Your paragraph text goes here...</p>
</div>

Use not-prose to exclude elements from styling:

<div class="prose">
  <p>This is styled.</p>
  <div class="not-prose">
    <p>This is not styled.</p>
  </div>
</div>

Example

The Last Ice: A Polar Bear’s Journey

In the frozen reaches of the Arctic, where the ice meets the endless sky, there lived a polar bear named Nanuq. She was known among her kind as the wanderer, for she traveled farther than any bear before her.

The Changing World

The elders spoke of times when the ice stretched beyond the horizon, solid and eternal. Now, Nanuq watched it shrink each summer, the hunting grounds growing smaller with every passing year.

“The ice remembers what we have forgotten,” her mother once told her. “Listen to it before it’s gone.”

The Hunt

Polar bears are patient hunters. Nanuq would wait by seal breathing holes for hours, perfectly still, conserving energy for the moment that mattered:

1. Find an active breathing hole
2. Wait motionless, sometimes for hours
3. Strike with precision when the seal surfaces

Success required discipline. A single hunt might burn 2,000 calories, but a ringed seal could provide ten times that in return.

Survival Skills

Over generations, polar bears developed remarkable adaptations:

• Hollow fur that traps warmth
• Black skin beneath white fur to absorb heat
• Massive paws that act as snowshoes
• The ability to swim for days without rest

Nanuq used every advantage. In this world, there was no room for weakness.

The Numbers

Season	Ice Coverage	Hunting Success	Body Weight
Winter	Extensive	High	450 kg
Spring	Stable	Moderate	420 kg
Summer	Minimal	Low	350 kg

The pattern was clear: less ice meant less food, meant less life. Yet Nanuq pressed on, adapting as her ancestors had for thousands of years.

---

Polar bears are classified as vulnerable. Their survival depends on the choices we make today.