There are no notes for this item.

<section class='l-row'>
    <h1 class='c-heading'>

        Brand colors

    </h1>

    <div class='c-lead'>Colors corresponding to the Awareness, Community, Education, and Support respectively.</div>

    <ul class='u-list--unstyled row'>

        <li class='u-background-alizarin-crimson u-padding--normal col-sm-3'>
            <h4>alizarin-crimson</h4>#ee3f42
        </li>

        <li class='u-background-pelorous u-padding--normal col-sm-3'>
            <h4>pelorous</h4>#3fbfc4
        </li>

        <li class='u-background-picton-blue u-padding--normal col-sm-3'>
            <h4>picton-blue</h4>#53b0e2
        </li>

        <li class='u-background-malibu u-padding--normal col-sm-3'>
            <h4>malibu</h4>#8dd7f7
        </li>

    </ul>
</section>

<section class='l-row'>
    <h1 class='c-heading'>

        Complements

    </h1>

    <div class='c-lead'>Very rarely used, only in the context of an impact field's theme.</div>

    <ul class='u-list--unstyled row'>

        <li class='u-background-alizarin-crimson-complement u-padding--normal col-sm-3'>
            <h4>alizarin-crimson-complement</h4>#6E1D1E
        </li>

        <li class='u-background-pelorous-complement u-padding--normal col-sm-3'>
            <h4>pelorous-complement</h4>#164345
        </li>

        <li class='u-background-picton-blue-complement u-padding--normal col-sm-3'>
            <h4>picton-blue-complement</h4>#254E63
        </li>

        <li class='u-background-malibu-complement u-padding--normal col-sm-3'>
            <h4>malibu-complement</h4>#446878
        </li>

    </ul>
</section>

<section class='l-row'>
    <h1 class='c-heading'>

        Utility

    </h1>

    <div class='c-lead'>Only used to provide context or a level of contrast.</div>

    <ul class='u-list--unstyled row'>

        <li class='u-background-muted u-padding--normal col-sm-3'>
            <h4>muted</h4>#f3f3f3
        </li>

        <li class='u-background-light-gray u-padding--normal col-sm-3'>
            <h4>light-gray</h4>#eee
        </li>

        <li class='u-background-gray u-padding--normal col-sm-3'>
            <h4>gray</h4>#aaa
        </li>

        <li class='u-background-dark-gray u-padding--normal col-sm-3'>
            <h4>dark-gray</h4>#404040
        </li>

        <li class='u-background-dark-blue u-padding--normal col-sm-3'>
            <h4>dark-blue</h4>#062c41
        </li>

        <li class='u-background-success u-padding--normal col-sm-3'>
            <h4>success</h4>#3BDBB4
        </li>

        <li class='u-background-error u-padding--normal col-sm-3'>
            <h4>error</h4>#F08688
        </li>

        <li class='u-background-notice u-padding--normal col-sm-3'>
            <h4>notice</h4>#F0EE56
        </li>

    </ul>
</section>

<section class='l-row'>
    <h1 class='c-heading'>

        CSS

    </h1>

    <ul class='u-list--unstyled row'>

        <li class='u-background-headline-color u-padding--normal col-sm-3'>
            <h4>headline-color</h4>#062c41
        </li>

        <li class='u-background-text-color u-padding--normal col-sm-3'>
            <h4>text-color</h4>#222
        </li>

        <li class='u-background-link-border-color u-padding--normal col-sm-3'>
            <h4>link-border-color</h4>#53b0e2
        </li>

        <li class='u-background-inverted u-padding--normal col-sm-3'>
            <h4>inverted</h4>#f3f3f3
        </li>

    </ul>
</section>
{% for background in backgrounds %}
    <section class='l-row'>
        {% include '@unit/heading/heading.twig' with background.heading %}
        {% if background.lead %}
            {% include '@unit/lead/lead.twig' with background.lead %}
        {% endif %}
        <ul class='u-list--unstyled row'>
            {% for color in background.colors %}
                <li class='u-background-{{ color.name }} u-padding--normal col-sm-3'><h4>{{ color.name }}</h4>{{ color.color }}</li>
            {% endfor %}
        </ul>           
    </section>
{% endfor %}
{
  "bodyclass": "container-fluid",
  "backgrounds": [
    {
      "heading": {
        "text": "Brand colors"
      },
      "lead": {
        "content": "Colors corresponding to the Awareness, Community, Education, and Support respectively."
      },
      "colors": [
        {
          "name": "alizarin-crimson",
          "color": "#ee3f42"
        },
        {
          "name": "pelorous",
          "color": "#3fbfc4"
        },
        {
          "name": "picton-blue",
          "color": "#53b0e2"
        },
        {
          "name": "malibu",
          "color": "#8dd7f7"
        }
      ]
    },
    {
      "heading": {
        "text": "Complements"
      },
      "lead": {
        "content": "Very rarely used, only in the context of an impact field's theme."
      },
      "colors": [
        {
          "name": "alizarin-crimson-complement",
          "color": "#6E1D1E"
        },
        {
          "name": "pelorous-complement",
          "color": "#164345"
        },
        {
          "name": "picton-blue-complement",
          "color": "#254E63"
        },
        {
          "name": "malibu-complement",
          "color": "#446878"
        }
      ]
    },
    {
      "heading": {
        "text": "Utility"
      },
      "lead": {
        "content": "Only used to provide context or a level of contrast."
      },
      "colors": [
        {
          "name": "muted",
          "color": "#f3f3f3"
        },
        {
          "name": "light-gray",
          "color": "#eee"
        },
        {
          "name": "gray",
          "color": "#aaa"
        },
        {
          "name": "dark-gray",
          "color": "#404040"
        },
        {
          "name": "dark-blue",
          "color": "#062c41"
        },
        {
          "name": "success",
          "color": "#3BDBB4"
        },
        {
          "name": "error",
          "color": "#F08688"
        },
        {
          "name": "notice",
          "color": "#F0EE56"
        }
      ]
    },
    {
      "heading": {
        "text": "CSS"
      },
      "colors": [
        {
          "name": "headline-color",
          "color": "#062c41"
        },
        {
          "name": "text-color",
          "color": "#222"
        },
        {
          "name": "link-border-color",
          "color": "#53b0e2"
        },
        {
          "name": "inverted",
          "color": "#f3f3f3"
        }
      ]
    }
  ]
}