Colors

<div class="color" style="background: #2C3F48">
    <p>$color-darkest-blue</p>
    <p>#2C3F48</p>
</div>
<div class="color" style="background: #00597A">
    <p>$color-dark-blue</p>
    <p>#00597A</p>
</div>
<div class="color" style="background: #007DB3">
    <p>$color-blue</p>
    <p>#007DB3</p>
</div>
<div class="color" style="background: #D0DDE0">
    <p>$color-light-blue</p>
    <p>#D0DDE0</p>
</div>
<div class="color" style="background: #E0EDF6">
    <p>$color-lightest-blue</p>
    <p>#E0EDF6</p>
</div>
<div class="color" style="background: #2c3f46">
    <p>$color-darkest-gray</p>
    <p>#2c3f46</p>
</div>
<div class="color" style="background: #595f60">
    <p>$color-dark-gray</p>
    <p>#595f60</p>
</div>
<div class="color" style="background: #9DA8AF">
    <p>$color-gray</p>
    <p>#9DA8AF</p>
</div>
<div class="color" style="background: #E2E2E2">
    <p>$color-light-gray</p>
    <p>#E2E2E2</p>
</div>
<div class="color" style="background: #D5DADD">
    <p>$color-medium-lighter-gray</p>
    <p>#D5DADD</p>
</div>
<div class="color" style="background: #F4F4F4">
    <p>$color-lightest-gray</p>
    <p>#F4F4F4</p>
</div>
<div class="color" style="background: #FFFFFF">
    <p>$color-white</p>
    <p>#FFFFFF</p>
</div>
<div class="color" style="background: #4DA22E">
    <p>$color-green</p>
    <p>#4DA22E</p>
</div>
<div class="color" style="background: #A31B00">
    <p>$color-red</p>
    <p>#A31B00</p>
</div>
<div class="color" style="background: #C2E2F0">
    <p>$color-color-white-blue</p>
    <p>#C2E2F0</p>
</div>
<div class="color" style="background: #F39200">
    <p>$color-orange</p>
    <p>#F39200</p>
</div>
<div class="color" style="background: #FFA927">
    <p>$color-color-orange-light</p>
    <p>#FFA927</p>
</div>
<div class="color" style="background: #FFBD5A">
    <p>$color-color-orange-lighter</p>
    <p>#FFBD5A</p>
</div>
{% for text, color in colors %}
    <div class="color" style="background: {{ color|e }}">
        <p>$color-{{ text|e }}</p>
        <p>{{ color|e }}</p>
    </div>
{% endfor %}
{
  "colors": {
    "darkest-blue": "#2C3F48",
    "dark-blue": "#00597A",
    "blue": "#007DB3",
    "light-blue": "#D0DDE0",
    "lightest-blue": "#E0EDF6",
    "darkest-gray": "#2c3f46",
    "dark-gray": "#595f60",
    "gray": "#9DA8AF",
    "light-gray": "#E2E2E2",
    "medium-lighter-gray": "#D5DADD",
    "lightest-gray": "#F4F4F4",
    "white": "#FFFFFF",
    "green": "#4DA22E",
    "red": "#A31B00",
    "color-white-blue": "#C2E2F0",
    "orange": "#F39200",
    "color-orange-light": "#FFA927",
    "color-orange-lighter": "#FFBD5A"
  }
}

Colors

You can use colors in your own template by using the variables defined by the style guide. Always use a variable name instead of a hardcoded hex value.

Example

.my-selector {
  color: $color-orange;
}