<div>
  <h4>Primary Brand Colors</h4>
  <hr />

  <div class="row">
    <div class="col-sm-4">
      <div class="color-artisan l-section-close">.color-artisan</div>
      <div class="color_block-artisan l-padded-thin">
        <div class="text-center">.color_block-artisan</div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="color-artisan-light l-section-close">.color-artisan-light</div>
      <div class="color_block-artisan-light l-padded-thin">
        <div class="text-center">.color_block-artisan-light</div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="color-artisan-dark l-section-close">.color-artisan-dark</div>
      <div class="color_block-artisan-dark l-padded-thin">
         <div class="text-center">.color_block-artisan-dark</div>
      </div>
    </div>
  </div>

  <hr />

  <div class="row">
    <div class="col-sm-4">
      <div class="color-historian l-section-close">.color-historian</div>
      <div class="color_block-historian l-padded-thin">
        <div class="text-center">.color_block-historian</div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="color-historian-light l-section-close">.color-historian-light</div>
      <div class="color_block-historian-light l-padded-thin">
        <div class="text-center">.color_block-historian-light</div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="color-historian-dark l-section-close">.color-historian-dark</div>
      <div class="color_block-historian-dark l-padded-thin">
         <div class="text-center">.color_block-historian-dark</div>
      </div>
    </div>
  </div>

  <hr />

  <div class="row">
    <div class="col-sm-4">
      <div class="color-services l-section-close">.color-services</div>
      <div class="color_block-services l-padded-thin">
        <div class="text-center">.color_block-services</div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="color-services-light l-section-close">.color-services-light</div>
      <div class="color_block-services-light l-padded-thin">
        <div class="text-center">.color_block-services-light</div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="color-services-dark l-section-close">.color-services-dark</div>
      <div class="color_block-services-dark l-padded-thin">
         <div class="text-center">.color_block-services-dark</div>
      </div>
    </div>
  </div>

  <hr />

  <div class="row">
    <div class="col-sm-4">
      <div class="color-valet l-section-close">.color-valet</div>
      <div class="color_block-valet l-padded-thin">
        <div class="text-center">.color_block-valet</div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="color-valet-light l-section-close">.color-valet-light</div>
      <div class="color_block-valet-light l-padded-thin">
        <div class="text-center">.color_block-valet-light</div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="color-valet-dark l-section-close">.color-valet-dark</div>
      <div class="color_block-valet-dark l-padded-thin">
         <div class="text-center">.color_block-valet-dark</div>
      </div>
    </div>
  </div>

  <hr />

  <h4 class="l-section-far">Semantic Colors</h4>
  <hr />

  <div class="row">
    <div class="col-sm-4">
      <div class="color-primary l-section-close">.color-primary</div>
      <div class="color_block-primary l-padded-thin">
        <div class="text-center">.color_block-primary</div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="color-primary-light l-section-close">.color-primary-light</div>
      <div class="color_block-primary-light l-padded-thin">
        <div class="text-center">.color_block-primary-light</div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="color-primary-dark l-section-close">.color-primary-dark</div>
      <div class="color_block-primary-dark l-padded-thin">
         <div class="text-center">.color_block-primary-dark</div>
      </div>
    </div>
  </div>

  <hr />

  <div class="row">
    <div class="col-sm-4">
      <div class="color-secondary l-section-close">.color-secondary</div>
      <div class="color_block-secondary l-padded-thin">
        <div class="text-center">.color_block-secondary</div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="color-secondary-light l-section-close">.color-secondary-light</div>
      <div class="color_block-secondary-light l-padded-thin">
        <div class="text-center">.color_block-secondary-light</div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="color-secondary-dark l-section-close">.color-secondary-dark</div>
      <div class="color_block-secondary-dark l-padded-thin">
         <div class="text-center">.color_block-secondary-dark</div>
      </div>
    </div>
  </div>

  <hr />

  <div class="row">
    <div class="col-sm-4">
      <div class="color-accent l-section-close">.color-accent</div>
      <div class="color_block-accent l-padded-thin">
        <div class="text-center">.color_block-accent</div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="color-accent-light l-section-close">.color-accent-light</div>
      <div class="color_block-accent-light l-padded-thin">
        <div class="text-center">.color_block-accent-light</div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="color-accent-dark l-section-close">.color-accent-dark</div>
      <div class="color_block-accent-dark l-padded-thin">
         <div class="text-center">.color_block-accent-dark</div>
      </div>
    </div>
  </div>

  <hr />

  <div class="row">
    <div class="col-sm-4">
      <div class="color-warning l-section-close">.color-warning</div>
      <div class="color_block-warning l-padded-thin">
        <div class="text-center">.color_block-warning</div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="color-warning-light l-section-close">.color-warning-light</div>
      <div class="color_block-warning-light l-padded-thin">
        <div class="text-center">.color_block-warning-light</div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="color-warning-dark l-section-close">.color-warning-dark</div>
      <div class="color_block-warning-dark l-padded-thin">
         <div class="text-center">.color_block-warning-dark</div>
      </div>
    </div>
  </div>

  <hr />

  <div class="row">
    <div class="col-sm-4">
      <div class="color-danger l-section-close">.color-danger</div>
      <div class="color_block-danger l-padded-thin">
        <div class="text-center">.color_block-danger</div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="color-danger-light l-section-close">.color-danger-light</div>
      <div class="color_block-danger-light l-padded-thin">
        <div class="text-center">.color_block-danger-light</div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="color-danger-dark l-section-close">.color-danger-dark</div>
      <div class="color_block-danger-dark l-padded-thin">
         <div class="text-center">.color_block-danger-dark</div>
      </div>
    </div>
  </div>

  <hr />

  <h4 class="l-section-far">Grayscale Colors</h4>
  <hr />

  <div class="row">
    <div class="col-sm-4">
      <div class="color-gray-100 l-section-close">.color-gray-100</div>
      <div class="color_block-gray-100 l-padded-thin">
        <div class="text-center">.color_block-gray-100</div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="color-gray-200 l-section-close">.color-gray-200</div>
      <div class="color_block-gray-200 l-padded-thin">
        <div class="text-center">.color_block-gray-200</div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="color-gray-300 l-section-close">.color-gray-300</div>
      <div class="color_block-gray-300 l-padded-thin">
        <div class="text-center">.color_block-gray-300</div>
      </div>
    </div>
  </div>

  <hr />

  <div class="row">
    <div class="col-sm-4">
      <div class="color-gray-400 l-section-close">.color-gray-400</div>
      <div class="color_block-gray-400 l-padded-thin">
        <div class="text-center">.color_block-gray-400</div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="color-gray-500 l-section-close">.color-gray-500</div>
      <div class="color_block-gray-500 l-padded-thin">
        <div class="text-center">.color_block-gray-500</div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="color-gray-600 l-section-close">.color-gray-600</div>
      <div class="color_block-gray-600 l-padded-thin">
        <div class="text-center">.color_block-gray-600</div>
      </div>
    </div>
  </div>

  <hr />

  <div class="row">
    <div class="col-sm-4">
      <div class="color-gray-700 l-section-close">.color-gray-700</div>
      <div class="color_block-gray-700 l-padded-thin">
        <div class="text-center">.color_block-gray-700</div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="color-gray-800 l-section-close">.color-gray-800</div>
      <div class="color_block-gray-800 l-padded-thin">
        <div class="text-center">.color_block-gray-800</div>
      </div>
    </div>
  </div>

  <hr />

  <div class="row">
    <div class="col-sm-6">
      <div class="color_block-black color-white l-padded-thin">
        <div class="text-center">.color_block-black .color-white</div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="color_block-white color-black l-padded-thin">
        <div class="text-center">.color_block-white .color-black</div>
      </div>
    </div>
  </div>
</div>