gentux-style-guide/_atoms/01-colors.html

<http://gentuxdesign.com>

---
title: Colors
---

      <div class="row">
        <div class="col-sm-12">
            <h3 class="h4 mb-2"> Primary and Secondary Colors</h3>
        </div>
        <div class="col-sm-8 copy-to-clipboard mb-4">
            <div class="bg-brand-black color-swatch"></div>
            <h3 class="h6 uppercase mt-2">Brand Black</h3>
            <div class="clipboard-content clipboard-init small" title="click to copy to clipboard">000000</div>
        </div>
        <div class="col-sm-4 copy-to-clipboard mb-4">
            <div class="bg-brand-gold color-swatch"></div>
            <h3 class="h6 uppercase mt-2">Brand Gold</h3>
            <div class="clipboard-content clipboard-init small" title="click to copy to clipboard">E6CE9A</div>
        </div>
      </div><!-- /row -->

      <hr class="mt-4 mb-4">

      <div class="row">
        <div class="col-sm-12">
            <h3 class="h4 mb-2"> Grayscale Colors</h3>
        </div>
        <div class="col-sm-2 copy-to-clipboard mb-4">
            <div class="bg-gray-darker color-swatch py-5"></div>
            <h3 class="h6 uppercase mt-2">Brand Gray Darker</h3>
            <div class="clipboard-content clipboard-init small" title="click to copy to clipboard">404042</div>
        </div>
        <div class="col-sm-2 copy-to-clipboard mb-4">
            <div class="bg-gray-dark color-swatch py-5"></div>
            <h3 class="h6 uppercase mt-2">Brand Gray Dark</h3>
            <div class="clipboard-content clipboard-init small" title="click to copy to clipboard">888888</div>
        </div>

        <div class="col-sm-2 copy-to-clipboard mb-4">
            <div class="bg-gray color-swatch py-5"></div>
            <h3 class="h6 uppercase mt-2">Brand Gray</h3>
            <div class="clipboard-content clipboard-init small" title="click to copy to clipboard">cccccc</div>
        </div>
        <div class="col-sm-2 copy-to-clipboard mb-4">
            <div class="bg-gray-light color-swatch py-5"></div>
            <h3 class="h6 uppercase mt-2">Brand Gray Light</h3>
            <div class="clipboard-content clipboard-init small" title="click to copy to clipboard">e6e6e6</div>
        </div>
        <div class="col-sm-2 copy-to-clipboard mb-4">
            <div class="bg-gray-lighter color-swatch py-5"></div>
            <h3 class="h6 uppercase mt-2">Brand Gray Lighter</h3>
            <div class="clipboard-content clipboard-init small" title="click to copy to clipboard">f8f8f8</div>
        </div>
      </div><!-- /row -->