Color
Colors used in this system map to Bootstrap variables.
Brand Colors
ready
Use brand colors to denote hierarchy and context.

    <style>
    </style>
    {% for item in page.colors %}
      <div class="p-3 mb-2 {{ item.class }} {{ item.text-class }}">{{ item.name }}</div>
    {% endfor %}

Grays
ready

    <style>

    </style>
    {% for item in page.colors %}
      <div class="p-3 mb-2 {{ item.class }} {{ item.text-class }}">{{ item.name }}</div>
    {% endfor %}