Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<div class="prose">
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
</div>

Jazz is a minimal CSS design system. It styles native HTML elements directly — no class names required for most components.

Drop in the stylesheet and start writing semantic HTML. The defaults are sensible, and everything is customizable via CSS variables.

<div class="prose">
  <p>First paragraph.</p>
  <p>Second paragraph.</p>
</div>

There are a few points to note regarding this.

• It is a long established fact that a reader will be distracted by the readable content of a page.
• There are many variations of passages of Lorem Ipsum available.
• The majority have suffered alteration in some form.

<div class="prose">
  <p>There are a few points to note.</p>
  <ul>
    <li>First item.</li>
    <li>Second item.</li>
    <li>Third item.</li>
  </ul>
</div>

Follow these steps to get started.

1. Import the stylesheet into your project.
2. Write semantic HTML as you normally would.
3. Override CSS variables to match your brand.

<div class="prose">
  <p>Follow these steps to get started.</p>
  <ol>
    <li>Import the stylesheet into your project.</li>
    <li>Write semantic HTML as you normally would.</li>
    <li>Override CSS variables to match your brand.</li>
  </ol>
</div>

"Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it's really how it works."

<blockquote>
  "Design is a funny word. Some people think design means how it looks. But of
  course, if you dig deeper, it's really how it works."
  <footer>
    <cite>— Steve Jobs</cite>
  </footer>
</blockquote>