gentux-style-guide/_brand-guides/04-colors.html

<http://gentuxdesign.com>

---
title: Colors
---


<div class="row">
  <div class="col-sm-6 copy-to-clipboard">
		<h3 class="mb-3">Primary</h3>
    <div class="bg-brand-gold color-swatch"></div>
    <h4 class="h5 mt-2">Light Gold</h4>
    <div class="clipboard-content clipboard-init small" title="click to copy to clipboard">E6CE9A</div>
  </div>
  <div class="col-sm-6">
    <h3 class="mb-3">Secondary</h3>
    <div class="row">
      <div class="col-sm-6 copy-to-clipboard">
        <div class="bg-brand-gold-dark color-swatch"></div>
        <h4 class="h5 mt-2">Dark Gold</h4>
        <div class="clipboard-content clipboard-init small" title="click to copy to clipboard">b0893a</div>
      </div>
      <div class="col-sm-6 copy-to-clipboard">
        <div class="bg-brand-black color-swatch"></div>
        <h4 class="h5 mt-2">Brand Black</h4>
        <div class="clipboard-content clipboard-init small" title="click to copy to clipboard">000000</div>
      </div>
    </div>
  </div>
</div><!-- /row -->

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

<div class="row">
  <div class="col-sm-12">
      <h3 class="mb-2"> Grayscale Colors</h3>
  </div>
  <div class="col-sm-2 copy-to-clipboard mb-4">
      <div class="bg-brand-gray-darker color-swatch"></div>
      <h4 class="h5 mt-2">Brand Gray Darker</h4>
      <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-brand-gray-dark color-swatch"></div>
      <h4 class="h5 mt-2">Brand Gray Dark</h4>
      <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-brand-gray color-swatch"></div>
      <h4 class="h5 mt-2">Brand Gray</h4>
      <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-brand-gray-light color-swatch"></div>
      <h4 class="h5 mt-2">Brand Gray Light</h4>
      <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-brand-gray-lighter color-swatch bordered bordered-gray"></div>
      <h4 class="h5 mt-2">Brand Gray Lighter</h4>
      <div class="clipboard-content clipboard-init small" title="click to copy to clipboard">f8f8f8</div>
  </div>
</div><!-- /row -->

<hr class="my-5">


<div class="row mb-4">
  <div class="col-sm-3">
    <h3 class="h4">Use</h3>
  </div>
  <div class="col-sm-9">
    <p class="readable-line">
      The light gold is the primary gold color and should be used in large color blocks like backgrounds or button colors. The dark gold is meant for thin or lighter weight marks like text and logos and can be set on white or dark backgrounds.
    </p>
  </div>
</div><!-- /row -->