<div class="spectrum">
  <p class="spectrum-Body spectrum-Body--sizeXXXL">BodyXXXL Text <em>BodyXXXL Emphasis</em> <strong>BodyXXXL Strong</strong>.</p>
  <p class="spectrum-Body spectrum-Body--sizeXXL">BodyXXL Text <em>BodyXXL Emphasis</em> <strong>BodyXXL Strong</strong>.</p>
  <p class="spectrum-Body spectrum-Body--sizeXL">BodyXL Text <em>BodyXL Emphasis</em> <strong>BodyXL Strong</strong>.</p>
  <p class="spectrum-Body spectrum-Body--sizeL">BodyL text <em>BodyL Emphasis</em> <strong>BodyL Strong</strong>.</p>
  <p class="spectrum-Body spectrum-Body--sizeM">BodyM Text <em>BodyM Emphasis</em> <strong>BodyM Strong</strong>.</p>
  <p class="spectrum-Body spectrum-Body--sizeS">BodyS Text <em>BodyS Emphasis</em> <strong>BodyS Strong</strong>.</p>
  <p class="spectrum-Body spectrum-Body--sizeXS">BodyXS Text <em>BodyXS Emphasis</em> <strong>BodyXS Strong</strong>.</p>
</div>
<br/>
<div class="spectrum">
  <p class="spectrum-Body spectrum-Body--sizeXXXL spectrum-Body--serif">BodyXXXL Text Serif <em>BodyXXXL Emphasis Serif</em> <strong>BodyXXXL Strong Serif</strong>.</p>
  <p class="spectrum-Body spectrum-Body--sizeXXL spectrum-Body--serif">BodyXXL Text Serif <em>BodyXXL Emphasis Serif</em> <strong>BodyXXL Strong Serif</strong>.</p>
  <p class="spectrum-Body spectrum-Body--sizeXXL spectrum-Body--serif">BodyXL Text Serif <em>BodyXL Emphasis Serif</em> <strong>BodyXL Strong Serif</strong>.</p>
  <p class="spectrum-Body spectrum-Body--sizeL spectrum-Body--serif">BodyL text Serif <em>BodyL Emphasis Serif</em> <strong>BodyL Strong Serif</strong>.</p>
  <p class="spectrum-Body spectrum-Body--sizeM spectrum-Body--serif">BodyM Text Serif <em>BodyM Emphasis Serif</em> <strong>BodyM Strong Serif</strong>.</p>
  <p class="spectrum-Body spectrum-Body--sizeS spectrum-Body--serif">BodyS Text Serif <em>BodyS Emphasis Serif</em> <strong>BodyS Strong Serif</strong>.</p>
  <p class="spectrum-Body spectrum-Body--sizeXS spectrum-Body--serif">BodyXS Text Serif <em>BodyXS Emphasis Serif</em> <strong>BodyXS Strong Serif</strong>.</p>
</div>

<div class="spectrum-Examples">
  <div class="spectrum-Examples-item">
    <div class="spectrum-Typography">
      <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Heading Size XXXL with body size XXXL:</h4>
      <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL">Aliquet Mauris Eu</h1>
      <p class="spectrum-Body spectrum-Body--sizeXXXL">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
      <p class="spectrum-Body spectrum-Body--sizeXXXL">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <hr />
    <br />
    <div class="spectrum-Typography">
      <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Heading Size XXL with body size XXL:</h4>
      <h1 class="spectrum-Heading spectrum-Heading--sizeXXL">Aliquet Mauris Eu</h1>
      <p class="spectrum-Body spectrum-Body--sizeXXL">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
      <p class="spectrum-Body spectrum-Body--sizeXXL">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <hr />
    <br />
    <div class="spectrum-Typography">
      <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Heading size XL with body size XL:</h4>
      <h1 class="spectrum-Heading spectrum-Heading--sizeXL">Aliquet Mauris Eu</h1>
      <p class="spectrum-Body spectrum-Body--sizeXL">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
      <p class="spectrum-Body spectrum-Body--sizeXL">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <hr />
    <br />
    <div class="spectrum-Typography">
      <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Heading size L with body size L:</h4>
      <h2 class="spectrum-Heading spectrum-Heading--sizeL">Aliquet Mauris Eu</h1>
      <p class="spectrum-Body spectrum-Body--sizeL">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
      <p class="spectrum-Body spectrum-Body--sizeL">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <hr />
    <br />
    <div class="spectrum-Typography">
      <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Heading size M with body size M:</h4>
      <h3 class="spectrum-Heading spectrum-Heading--sizeM">Lorem Ipsum Dolor</h1>
      <p class="spectrum-Body spectrum-Body--sizeM">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
      <p class="spectrum-Body spectrum-Body--sizeM">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <hr />
    <br />
    <div class="spectrum-Typography">
      <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Heading size S with body size S:</h4>
      <h4 class="spectrum-Heading spectrum-Heading--sizeS">Lorem Ipsum Dolor</h1>
      <p class="spectrum-Body spectrum-Body--sizeS">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
      <p class="spectrum-Body spectrum-Body--sizeS">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <hr />
    <br />
    <div class="spectrum-Typography">
      <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Heading size XS with body size XS:</h4>
      <h5 class="spectrum-Heading spectrum-Heading--sizeXS">Lorem Ipsum Dolor</h1>
      <p class="spectrum-Body spectrum-Body--sizeXS">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
      <p class="spectrum-Body spectrum-Body--sizeXS">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <hr />
    <br />
    <div class="spectrum-Typography">
      <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Heading size XXS with body size XS</h4>
      <h6 class="spectrum-Heading spectrum-Heading--sizeXXS">Lorem Ipsum Dolor</h1>
      <p class="spectrum-Body spectrum-Body--sizeXS">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
      <p class="spectrum-Body spectrum-Body--sizeXS">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
</div>