Colors

Brand Colors

alcatraz-blue : #0d8bb7

Utility Colors

jelly-bean : #21759b
hope : #fff9c0

Neutral Colors

black : #000000
mine-shaft : #333333
dim-gray : #666666
aluminum : #999999
silver-sand : #bbbbbb
gainsboro : #dddddd
white-smoke : #f1f1f1
white : #ffffff

Implementation

						Theme colors are set in the <code>$theme-colors</code> Sass map within <code>assets/sass/utilities/_colors.scss</code>.

In <code>assets/sass/base/_colors.scss</code>, we create presentational classes for each colors using a mixin.

Each color within the theme comes with a color class:
<pre class="language-scss"><code>.color-alcatraz-blue {
    color: #0d8bb7;
}</code></pre>

You can add the class to your HTML like so:
<pre class="language-html"><code><h2 class="color-alcatraz-blue">I blued myself.</h2></code></pre>

Each color also comes with a background class:
<pre class="language-scss"><code>.background-alcatraz-blue {
    background-color: #0d8bb7;
}</code></pre>

The background class may be implemented as such:
<pre class="language-html"><code><div class="background-alcatraz-blue">My background is blue!</div></code></pre>

Finally, there is an icon color class used to add fill to SVG icons:
<pre class="language-scss"><code>.icon-alcatraz-blue {
    fill: #0d8bb7;
}</code></pre>

The icon class may be implemented as such:
<pre class="language-html"><code><svg class="icon-alcatraz-blue"></svg></code></pre>