Typography

Heading scale and links. Pair heading utilities with Tailwind color utilities as needed.

.h1 — .h6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<div class="space-y-2">
  <div class="h1 text-secondary-900">Heading 1</div>
  <div class="h2 text-secondary-900">Heading 2</div>
  <div class="h3 text-secondary-900">Heading 3</div>
  <div class="h4 text-secondary-900">Heading 4</div>
  <div class="h5 text-secondary-900">Heading 5</div>
  <div class="h6 text-secondary-900">Heading 6</div>
</div>

.link, .link-sm, .link-xs, .link-danger

Standard link

Small link — same weight, 14px

Extra-small link — 12px, good for "Forgot password?"

Danger link

<div class="space-y-2">
  <p><a class="link">Standard link</a></p>
  <p><a class="link link-sm">Small link</a> — same weight, 14px</p>
  <p><a class="link link-xs">Extra-small link</a> — 12px, good for "Forgot password?"</p>
  <p><a class="link link-danger">Danger link</a></p>
</div>