---
title: Colors
layout: component.html
---
<h1 class="docs--page-header">
    Colors
</h1>

<h2 class="docs--section-header">Text colors</h2>

<p class="docs--section-description">
    Text colors are designed to be used complementary to the opposite main color backgrounds.
</p>

<h2 class="docs--section-header">Color docs--palettes</h2>

<p class="docs--section-description">
    A docs--palette consists of a "base" color, 4 variatioins in light, lighter, dark and darker shades, each of the 5 shades also has 2 opacity variations.
</p>
<p class="docs--section-description">
    The syntax for defining a color is as follows <code>&lt;background||text&gt;-&lt;color&gt;-&lt;shade&gt;-&lt;opacity&gt;</code>.
</p>

<div class="text-info docs--panel docs--panel-info docs--panel-designers">
    <p>
        Do the developers a <strong>massive</strong> favor, and define your colors based on <em>rules</em> (ie mathematical) and not just randomly picked hex colors from your local color picker.
    </p>
    <p>
        The system right now consists of somewhere around 105 different colors(!), most of them are based on "shading" the color using Sass functions. Imagine the horror if a developer has to manually write 105 hex colors...
    </p>
</div>

<div class="docs--visual-example">

    <ul class="docs--palette-list">
        <li class="docs--palette-title">Primary Color</li>

        <li class="docs--palette background-primary-darker">
            <span class="text-primary-lighter">.text-primary-lighter</span>
            <span class="text-primary-lighter-025">.text-primary-lighter-025</span>
            <span class="text-primary-lighter-050">.text-primary-lighter-050</span>
            <span class="text-primary-light">.text-primary-light</span>
            <span class="text-primary-light-025">.text-primary-light-025</span>
            <span class="text-primary-light-050">.text-primary-light-050</span>
            <span class="text-primary">.text-primary</span>
            <span class="text-primary-025">.text-primary-025</span>
            <span class="text-primary-050">.text-primary-050</span>
            <span class="text-primary-dark">.text-primary-dark</span>
            <span class="text-primary-dark-025">.text-primary-dark-025</span>      <span class="text-primary-dark-050">.text-primary-dark-050</span>
            <span class="text-primary-darker">.text-primary-darker</span>
            <span class="text-primary-darker-025">.text-primary-darker-025</span>
            <span class="text-primary-darker-050">.text-primary-darker-050</span>
            <ul class="docs--palette-opacity">
                <li class="docs--palette background-primary-darker-025">background-primary-darker 0.25 opacity</li>
                <li class="docs--palette background-primary-darker-050">background-primary-darker 0.50 opacity</li>
            </ul>
        </li>

        <li class="docs--palette background-primary-dark">
            <span class="text-primary-lighter">.text-primary-lighter</span>
            <span class="text-primary-lighter-025">.text-primary-lighter-025</span>
            <span class="text-primary-lighter-050">.text-primary-lighter-050</span>
            <span class="text-primary-light">.text-primary-light</span>
            <span class="text-primary-light-025">.text-primary-light-025</span>
            <span class="text-primary-light-050">.text-primary-light-050</span>
            <span class="text-primary">.text-primary</span>
            <span class="text-primary-025">.text-primary-025</span>
            <span class="text-primary-050">.text-primary-050</span>
            <span class="text-primary-dark">.text-primary-dark</span>
            <span class="text-primary-dark-025">.text-primary-dark-025</span>      <span class="text-primary-dark-050">.text-primary-dark-050</span>
            <span class="text-primary-darker">.text-primary-darker</span>
            <span class="text-primary-darker-025">.text-primary-darker-025</span>
            <span class="text-primary-darker-050">.text-primary-darker-050</span>
            <ul class="docs--palette-opacity">
                <li class="docs--palette background-primary-dark-025">background-primary-dark 0.25 opacity</li>
                <li class="docs--palette background-primary-dark-050">background-primary-dark 0.50 opacity</li>
            </ul>
        </li>

        <li class="docs--palette background-primary">
            <span class="text-primary-lighter">.text-primary-lighter</span>
            <span class="text-primary-lighter-025">.text-primary-lighter-025</span>
            <span class="text-primary-lighter-050">.text-primary-lighter-050</span>
            <span class="text-primary-light">.text-primary-light</span>
            <span class="text-primary-light-025">.text-primary-light-025</span>
            <span class="text-primary-light-050">.text-primary-light-050</span>
            <span class="text-primary">.text-primary</span>
            <span class="text-primary-025">.text-primary-025</span>
            <span class="text-primary-050">.text-primary-050</span>
            <span class="text-primary-dark">.text-primary-dark</span>
            <span class="text-primary-dark-025">.text-primary-dark-025</span>
            <span class="text-primary-dark-050">.text-primary-dark-050</span>
            <span class="text-primary-darker">.text-primary-darker</span>
            <span class="text-primary-darker-025">.text-primary-darker-025</span>
            <span class="text-primary-darker-050">.text-primary-darker-050</span>
            <ul class="docs--palette-opacity">
                <li class="docs--palette background-primary-025">background-primary 0.25 opacity</li>
                <li class="docs--palette background-primary-050">background-primary 0.50 opacity</li>
            </ul>
        </li>

        <li class="docs--palette background-primary-light">
            <span class="text-primary-lighter">.text-primary-lighter</span>
            <span class="text-primary-lighter-025">.text-primary-lighter-025</span>
            <span class="text-primary-lighter-050">.text-primary-lighter-050</span>
            <span class="text-primary-light">.text-primary-light</span>
            <span class="text-primary-light-025">.text-primary-light-025</span>
            <span class="text-primary-light-050">.text-primary-light-050</span>
            <span class="text-primary">.text-primary</span>
            <span class="text-primary-025">.text-primary-025</span>
            <span class="text-primary-050">.text-primary-050</span>
            <span class="text-primary-dark">.text-primary-dark</span>
            <span class="text-primary-dark-025">.text-primary-dark-025</span>
            <span class="text-primary-dark-050">.text-primary-dark-050</span>
            <span class="text-primary-darker">.text-primary-darker</span>
            <span class="text-primary-darker-025">.text-primary-darker-025</span>
            <span class="text-primary-darker-050">.text-primary-darker-050</span>
            <ul class="docs--palette-opacity">
                <li class="docs--palette background-primary-light-025">background-primary-light 0.25 opacity</li>
                <li class="docs--palette background-primary-light-050">background-primary-light 0.50 opacity</li>
            </ul>
        </li>

        <li class="docs--palette background-primary-lighter">
            <span class="text-primary-lighter">.text-primary-lighter</span>
            <span class="text-primary-lighter-025">.text-primary-lighter-025</span>
            <span class="text-primary-lighter-050">.text-primary-lighter-050</span>
            <span class="text-primary-light">.text-primary-light</span>
            <span class="text-primary-light-025">.text-primary-light-025</span>
            <span class="text-primary-light-050">.text-primary-light-050</span>
            <span class="text-primary">.text-primary</span>
            <span class="text-primary-025">.text-primary-025</span>
            <span class="text-primary-050">.text-primary-050</span>
            <span class="text-primary-dark">.text-primary-dark</span>
            <span class="text-primary-dark-025">.text-primary-dark-025</span>
            <span class="text-primary-dark-050">.text-primary-dark-050</span>
            <span class="text-primary-darker">.text-primary-darker</span>
            <span class="text-primary-darker-025">.text-primary-darker-025</span>
            <span class="text-primary-darker-050">.text-primary-darker-050</span>
            <ul class="docs--palette-opacity">
                <li class="docs--palette background-primary-lighter-025">background-primary-lighter 0.25 opacity</li>
                <li class="docs--palette background-primary-lighter-050">background-primary-lighter 0.50 opacity</li>
            </ul>
        </li>
    </ul>

    <!--
      Secondary Colors
    -->
    <ul class="docs--palette-list">
        <li class="docs--palette-title">Secondary Color</li>

        <li class="docs--palette background-secondary-darker">
            <span class="text-secondary-lighter">.text-secondary-lighter</span>
            <span class="text-secondary-lighter-025">.text-secondary-lighter-025</span>
            <span class="text-secondary-lighter-050">.text-secondary-lighter-050</span>
            <span class="text-secondary-light">.text-secondary-light</span>
            <span class="text-secondary-light-025">.text-secondary-light-025</span>
            <span class="text-secondary-light-050">.text-secondary-light-050</span>
            <span class="text-secondary">.text-secondary</span>
            <span class="text-secondary-025">.text-secondary-025</span>
            <span class="text-secondary-050">.text-secondary-050</span>
            <span class="text-secondary-dark">.text-secondary-dark</span>
            <span class="text-secondary-dark-025">.text-secondary-dark-025</span>      <span class="text-secondary-dark-050">.text-secondary-dark-050</span>
            <span class="text-secondary-darker">.text-secondary-darker</span>
            <span class="text-secondary-darker-025">.text-secondary-darker-025</span>
            <span class="text-secondary-darker-050">.text-secondary-darker-050</span>
            <ul class="docs--palette-opacity">
                <li class="docs--palette background-secondary-darker-025">background-secondary-darker 0.25 opacity</li>
                <li class="docs--palette background-secondary-darker-050">background-secondary-darker 0.50 opacity</li>
            </ul>
        </li>

        <li class="docs--palette background-secondary-dark">
            <span class="text-secondary-lighter">.text-secondary-lighter</span>
            <span class="text-secondary-lighter-025">.text-secondary-lighter-025</span>
            <span class="text-secondary-lighter-050">.text-secondary-lighter-050</span>
            <span class="text-secondary-light">.text-secondary-light</span>
            <span class="text-secondary-light-025">.text-secondary-light-025</span>
            <span class="text-secondary-light-050">.text-secondary-light-050</span>
            <span class="text-secondary">.text-secondary</span>
            <span class="text-secondary-025">.text-secondary-025</span>
            <span class="text-secondary-050">.text-secondary-050</span>
            <span class="text-secondary-dark">.text-secondary-dark</span>
            <span class="text-secondary-dark-025">.text-secondary-dark-025</span>      <span class="text-secondary-dark-050">.text-secondary-dark-050</span>
            <span class="text-secondary-darker">.text-secondary-darker</span>
            <span class="text-secondary-darker-025">.text-secondary-darker-025</span>
            <span class="text-secondary-darker-050">.text-secondary-darker-050</span>
            <ul class="docs--palette-opacity">
                <li class="docs--palette background-secondary-dark-025">background-secondary-dark 0.25 opacity</li>
                <li class="docs--palette background-secondary-dark-050">background-secondary-dark 0.50 opacity</li>
            </ul>
        </li>

        <li class="docs--palette background-secondary">
            <span class="text-secondary-lighter">.text-secondary-lighter</span>
            <span class="text-secondary-lighter-025">.text-secondary-lighter-025</span>
            <span class="text-secondary-lighter-050">.text-secondary-lighter-050</span>
            <span class="text-secondary-light">.text-secondary-light</span>
            <span class="text-secondary-light-025">.text-secondary-light-025</span>
            <span class="text-secondary-light-050">.text-secondary-light-050</span>
            <span class="text-secondary">.text-secondary</span>
            <span class="text-secondary-025">.text-secondary-025</span>
            <span class="text-secondary-050">.text-secondary-050</span>
            <span class="text-secondary-dark">.text-secondary-dark</span>
            <span class="text-secondary-dark-025">.text-secondary-dark-025</span>
            <span class="text-secondary-dark-050">.text-secondary-dark-050</span>
            <span class="text-secondary-darker">.text-secondary-darker</span>
            <span class="text-secondary-darker-025">.text-secondary-darker-025</span>
            <span class="text-secondary-darker-050">.text-secondary-darker-050</span>
            <ul class="docs--palette-opacity">
                <li class="docs--palette background-secondary-025">background-secondary 0.25 opacity</li>
                <li class="docs--palette background-secondary-050">background-secondary 0.50 opacity</li>
            </ul>
        </li>

        <li class="docs--palette background-secondary-light">
            <span class="text-secondary-lighter">.text-secondary-lighter</span>
            <span class="text-secondary-lighter-025">.text-secondary-lighter-025</span>
            <span class="text-secondary-lighter-050">.text-secondary-lighter-050</span>
            <span class="text-secondary-light">.text-secondary-light</span>
            <span class="text-secondary-light-025">.text-secondary-light-025</span>
            <span class="text-secondary-light-050">.text-secondary-light-050</span>
            <span class="text-secondary">.text-secondary</span>
            <span class="text-secondary-025">.text-secondary-025</span>
            <span class="text-secondary-050">.text-secondary-050</span>
            <span class="text-secondary-dark">.text-secondary-dark</span>
            <span class="text-secondary-dark-025">.text-secondary-dark-025</span>
            <span class="text-secondary-dark-050">.text-secondary-dark-050</span>
            <span class="text-secondary-darker">.text-secondary-darker</span>
            <span class="text-secondary-darker-025">.text-secondary-darker-025</span>
            <span class="text-secondary-darker-050">.text-secondary-darker-050</span>
            <ul class="docs--palette-opacity">
                <li class="docs--palette background-secondary-light-025">background-secondary-light 0.25 opacity</li>
                <li class="docs--palette background-secondary-light-050">background-secondary-light 0.50 opacity</li>
            </ul>
        </li>

        <li class="docs--palette background-secondary-lighter">
            <span class="text-secondary-lighter">.text-secondary-lighter</span>
            <span class="text-secondary-lighter-025">.text-secondary-lighter-025</span>
            <span class="text-secondary-lighter-050">.text-secondary-lighter-050</span>
            <span class="text-secondary-light">.text-secondary-light</span>
            <span class="text-secondary-light-025">.text-secondary-light-025</span>
            <span class="text-secondary-light-050">.text-secondary-light-050</span>
            <span class="text-secondary">.text-secondary</span>
            <span class="text-secondary-025">.text-secondary-025</span>
            <span class="text-secondary-050">.text-secondary-050</span>
            <span class="text-secondary-dark">.text-secondary-dark</span>
            <span class="text-secondary-dark-025">.text-secondary-dark-025</span>
            <span class="text-secondary-dark-050">.text-secondary-dark-050</span>
            <span class="text-secondary-darker">.text-secondary-darker</span>
            <span class="text-secondary-darker-025">.text-secondary-darker-025</span>
            <span class="text-secondary-darker-050">.text-secondary-darker-050</span>
            <ul class="docs--palette-opacity">
                <li class="docs--palette background-secondary-lighter-025">background-secondary-lighter 0.25 opacity</li>
                <li class="docs--palette background-secondary-lighter-050">background-secondary-lighter 0.50 opacity</li>
            </ul>
        </li>
    </ul>

    <!--
      Info
    -->
    <ul class="docs--palette-list">
        <li class="docs--palette-title">info Color</li>

        <li class="docs--palette background-info-darker">
            <span class="text-info-lighter">.text-info-lighter</span>
            <span class="text-info-lighter-025">.text-info-lighter-025</span>
            <span class="text-info-lighter-050">.text-info-lighter-050</span>
            <span class="text-info-light">.text-info-light</span>
            <span class="text-info-light-025">.text-info-light-025</span>
            <span class="text-info-light-050">.text-info-light-050</span>
            <span class="text-info">.text-info</span>
            <span class="text-info-025">.text-info-025</span>
            <span class="text-info-050">.text-info-050</span>
            <span class="text-info-dark">.text-info-dark</span>
            <span class="text-info-dark-025">.text-info-dark-025</span>      <span class="text-info-dark-050">.text-info-dark-050</span>
            <span class="text-info-darker">.text-info-darker</span>
            <span class="text-info-darker-025">.text-info-darker-025</span>
            <span class="text-info-darker-050">.text-info-darker-050</span>
            <ul class="docs--palette-opacity">
                <li class="docs--palette background-info-darker-025">background-info-darker 0.25 opacity</li>
                <li class="docs--palette background-info-darker-050">background-info-darker 0.50 opacity</li>
            </ul>
        </li>

        <li class="docs--palette background-info-dark">
            <span class="text-info-lighter">.text-info-lighter</span>
            <span class="text-info-lighter-025">.text-info-lighter-025</span>
            <span class="text-info-lighter-050">.text-info-lighter-050</span>
            <span class="text-info-light">.text-info-light</span>
            <span class="text-info-light-025">.text-info-light-025</span>
            <span class="text-info-light-050">.text-info-light-050</span>
            <span class="text-info">.text-info</span>
            <span class="text-info-025">.text-info-025</span>
            <span class="text-info-050">.text-info-050</span>
            <span class="text-info-dark">.text-info-dark</span>
            <span class="text-info-dark-025">.text-info-dark-025</span>      <span class="text-info-dark-050">.text-info-dark-050</span>
            <span class="text-info-darker">.text-info-darker</span>
            <span class="text-info-darker-025">.text-info-darker-025</span>
            <span class="text-info-darker-050">.text-info-darker-050</span>
            <ul class="docs--palette-opacity">
                <li class="docs--palette background-info-dark-025">background-info-dark 0.25 opacity</li>
                <li class="docs--palette background-info-dark-050">background-info-dark 0.50 opacity</li>
            </ul>
        </li>

        <li class="docs--palette background-info">
            <span class="text-info-lighter">.text-info-lighter</span>
            <span class="text-info-lighter-025">.text-info-lighter-025</span>
            <span class="text-info-lighter-050">.text-info-lighter-050</span>
            <span class="text-info-light">.text-info-light</span>
            <span class="text-info-light-025">.text-info-light-025</span>
            <span class="text-info-light-050">.text-info-light-050</span>
            <span class="text-info">.text-info</span>
            <span class="text-info-025">.text-info-025</span>
            <span class="text-info-050">.text-info-050</span>
            <span class="text-info-dark">.text-info-dark</span>
            <span class="text-info-dark-025">.text-info-dark-025</span>
            <span class="text-info-dark-050">.text-info-dark-050</span>
            <span class="text-info-darker">.text-info-darker</span>
            <span class="text-info-darker-025">.text-info-darker-025</span>
            <span class="text-info-darker-050">.text-info-darker-050</span>
            <ul class="docs--palette-opacity">
                <li class="docs--palette background-info-025">background-info 0.25 opacity</li>
                <li class="docs--palette background-info-050">background-info 0.50 opacity</li>
            </ul>
        </li>

        <li class="docs--palette background-info-light">
            <span class="text-info-lighter">.text-info-lighter</span>
            <span class="text-info-lighter-025">.text-info-lighter-025</span>
            <span class="text-info-lighter-050">.text-info-lighter-050</span>
            <span class="text-info-light">.text-info-light</span>
            <span class="text-info-light-025">.text-info-light-025</span>
            <span class="text-info-light-050">.text-info-light-050</span>
            <span class="text-info">.text-info</span>
            <span class="text-info-025">.text-info-025</span>
            <span class="text-info-050">.text-info-050</span>
            <span class="text-info-dark">.text-info-dark</span>
            <span class="text-info-dark-025">.text-info-dark-025</span>
            <span class="text-info-dark-050">.text-info-dark-050</span>
            <span class="text-info-darker">.text-info-darker</span>
            <span class="text-info-darker-025">.text-info-darker-025</span>
            <span class="text-info-darker-050">.text-info-darker-050</span>
            <ul class="docs--palette-opacity">
                <li class="docs--palette background-info-light-025">background-info-light 0.25 opacity</li>
                <li class="docs--palette background-info-light-050">background-info-light 0.50 opacity</li>
            </ul>
        </li>

        <li class="docs--palette background-info-lighter">
            <span class="text-info-lighter">.text-info-lighter</span>
            <span class="text-info-lighter-025">.text-info-lighter-025</span>
            <span class="text-info-lighter-050">.text-info-lighter-050</span>
            <span class="text-info-light">.text-info-light</span>
            <span class="text-info-light-025">.text-info-light-025</span>
            <span class="text-info-light-050">.text-info-light-050</span>
            <span class="text-info">.text-info</span>
            <span class="text-info-025">.text-info-025</span>
            <span class="text-info-050">.text-info-050</span>
            <span class="text-info-dark">.text-info-dark</span>
            <span class="text-info-dark-025">.text-info-dark-025</span>
            <span class="text-info-dark-050">.text-info-dark-050</span>
            <span class="text-info-darker">.text-info-darker</span>
            <span class="text-info-darker-025">.text-info-darker-025</span>
            <span class="text-info-darker-050">.text-info-darker-050</span>
            <ul class="docs--palette-opacity">
                <li class="docs--palette background-info-lighter-025">background-info-lighter 0.25 opacity</li>
                <li class="docs--palette background-info-lighter-050">background-info-lighter 0.50 opacity</li>
            </ul>
        </li>
    </ul>

    <!--
      Succsess
    -->
    <ul class="docs--palette-list">
        <li class="docs--palette-title">success Color</li>

        <li class="docs--palette background-success-darker">
            <span class="text-success-lighter">.text-success-lighter</span>
            <span class="text-success-lighter-025">.text-success-lighter-025</span>
            <span class="text-success-lighter-050">.text-success-lighter-050</span>
            <span class="text-success-light">.text-success-light</span>
            <span class="text-success-light-025">.text-success-light-025</span>
            <span class="text-success-light-050">.text-success-light-050</span>
            <span class="text-success">.text-success</span>
            <span class="text-success-025">.text-success-025</span>
            <span class="text-success-050">.text-success-050</span>
            <span class="text-success-dark">.text-success-dark</span>
            <span class="text-success-dark-025">.text-success-dark-025</span>      <span class="text-success-dark-050">.text-success-dark-050</span>
            <span class="text-success-darker">.text-success-darker</span>
            <span class="text-success-darker-025">.text-success-darker-025</span>
            <span class="text-success-darker-050">.text-success-darker-050</span>
            <ul class="docs--palette-opacity">
                <li class="docs--palette background-success-darker-025">background-success-darker 0.25 opacity</li>
                <li class="docs--palette background-success-darker-050">background-success-darker 0.50 opacity</li>
            </ul>
        </li>

        <li class="docs--palette background-success-dark">
            <span class="text-success-lighter">.text-success-lighter</span>
            <span class="text-success-lighter-025">.text-success-lighter-025</span>
            <span class="text-success-lighter-050">.text-success-lighter-050</span>
            <span class="text-success-light">.text-success-light</span>
            <span class="text-success-light-025">.text-success-light-025</span>
            <span class="text-success-light-050">.text-success-light-050</span>
            <span class="text-success">.text-success</span>
            <span class="text-success-025">.text-success-025</span>
            <span class="text-success-050">.text-success-050</span>
            <span class="text-success-dark">.text-success-dark</span>
            <span class="text-success-dark-025">.text-success-dark-025</span>      <span class="text-success-dark-050">.text-success-dark-050</span>
            <span class="text-success-darker">.text-success-darker</span>
            <span class="text-success-darker-025">.text-success-darker-025</span>
            <span class="text-success-darker-050">.text-success-darker-050</span>
            <ul class="docs--palette-opacity">
                <li class="docs--palette background-success-dark-025">background-success-dark 0.25 opacity</li>
                <li class="docs--palette background-success-dark-050">background-success-dark 0.50 opacity</li>
            </ul>
        </li>

        <li class="docs--palette background-success">
            <span class="text-success-lighter">.text-success-lighter</span>
            <span class="text-success-lighter-025">.text-success-lighter-025</span>
            <span class="text-success-lighter-050">.text-success-lighter-050</span>
            <span class="text-success-light">.text-success-light</span>
            <span class="text-success-light-025">.text-success-light-025</span>
            <span class="text-success-light-050">.text-success-light-050</span>
            <span class="text-success">.text-success</span>
            <span class="text-success-025">.text-success-025</span>
            <span class="text-success-050">.text-success-050</span>
            <span class="text-success-dark">.text-success-dark</span>
            <span class="text-success-dark-025">.text-success-dark-025</span>
            <span class="text-success-dark-050">.text-success-dark-050</span>
            <span class="text-success-darker">.text-success-darker</span>
            <span class="text-success-darker-025">.text-success-darker-025</span>
            <span class="text-success-darker-050">.text-success-darker-050</span>
            <ul class="docs--palette-opacity">
                <li class="docs--palette background-success-025">background-success 0.25 opacity</li>
                <li class="docs--palette background-success-050">background-success 0.50 opacity</li>
            </ul>
        </li>

        <li class="docs--palette background-success-light">
            <span class="text-success-lighter">.text-success-lighter</span>
            <span class="text-success-lighter-025">.text-success-lighter-025</span>
            <span class="text-success-lighter-050">.text-success-lighter-050</span>
            <span class="text-success-light">.text-success-light</span>
            <span class="text-success-light-025">.text-success-light-025</span>
            <span class="text-success-light-050">.text-success-light-050</span>
            <span class="text-success">.text-success</span>
            <span class="text-success-025">.text-success-025</span>
            <span class="text-success-050">.text-success-050</span>
            <span class="text-success-dark">.text-success-dark</span>
            <span class="text-success-dark-025">.text-success-dark-025</span>
            <span class="text-success-dark-050">.text-success-dark-050</span>
            <span class="text-success-darker">.text-success-darker</span>
            <span class="text-success-darker-025">.text-success-darker-025</span>
            <span class="text-success-darker-050">.text-success-darker-050</span>
            <ul class="docs--palette-opacity">
                <li class="docs--palette background-success-light-025">background-success-light 0.25 opacity</li>
                <li class="docs--palette background-success-light-050">background-success-light 0.50 opacity</li>
            </ul>
        </li>

        <li class="docs--palette background-success-lighter">
            <span class="text-success-lighter">.text-success-lighter</span>
            <span class="text-success-lighter-025">.text-success-lighter-025</span>
            <span class="text-success-lighter-050">.text-success-lighter-050</span>
            <span class="text-success-light">.text-success-light</span>
            <span class="text-success-light-025">.text-success-light-025</span>
            <span class="text-success-light-050">.text-success-light-050</span>
            <span class="text-success">.text-success</span>
            <span class="text-success-025">.text-success-025</span>
            <span class="text-success-050">.text-success-050</span>
            <span class="text-success-dark">.text-success-dark</span>
            <span class="text-success-dark-025">.text-success-dark-025</span>
            <span class="text-success-dark-050">.text-success-dark-050</span>
            <span class="text-success-darker">.text-success-darker</span>
            <span class="text-success-darker-025">.text-success-darker-025</span>
            <span class="text-success-darker-050">.text-success-darker-050</span>
            <ul class="docs--palette-opacity">
                <li class="docs--palette background-success-lighter-025">background-success-lighter 0.25 opacity</li>
                <li class="docs--palette background-success-lighter-050">background-success-lighter 0.50 opacity</li>
            </ul>
        </li>
    </ul>

    <!--
      Warning
    -->
    <ul class="docs--palette-list">
        <li class="docs--palette-title">warning Color</li>

        <li class="docs--palette background-warning-darker">
            <span class="text-warning-lighter">.text-warning-lighter</span>
            <span class="text-warning-lighter-025">.text-warning-lighter-025</span>
            <span class="text-warning-lighter-050">.text-warning-lighter-050</span>
            <span class="text-warning-light">.text-warning-light</span>
            <span class="text-warning-light-025">.text-warning-light-025</span>
            <span class="text-warning-light-050">.text-warning-light-050</span>
            <span class="text-warning">.text-warning</span>
            <span class="text-warning-025">.text-warning-025</span>
            <span class="text-warning-050">.text-warning-050</span>
            <span class="text-warning-dark">.text-warning-dark</span>
            <span class="text-warning-dark-025">.text-warning-dark-025</span>      <span class="text-warning-dark-050">.text-warning-dark-050</span>
            <span class="text-warning-darker">.text-warning-darker</span>
            <span class="text-warning-darker-025">.text-warning-darker-025</span>
            <span class="text-warning-darker-050">.text-warning-darker-050</span>
            <ul class="docs--palette-opacity">
                <li class="docs--palette background-warning-darker-025">background-warning-darker 0.25 opacity</li>
                <li class="docs--palette background-warning-darker-050">background-warning-darker 0.50 opacity</li>
            </ul>
        </li>

        <li class="docs--palette background-warning-dark">
            <span class="text-warning-lighter">.text-warning-lighter</span>
            <span class="text-warning-lighter-025">.text-warning-lighter-025</span>
            <span class="text-warning-lighter-050">.text-warning-lighter-050</span>
            <span class="text-warning-light">.text-warning-light</span>
            <span class="text-warning-light-025">.text-warning-light-025</span>
            <span class="text-warning-light-050">.text-warning-light-050</span>
            <span class="text-warning">.text-warning</span>
            <span class="text-warning-025">.text-warning-025</span>
            <span class="text-warning-050">.text-warning-050</span>
            <span class="text-warning-dark">.text-warning-dark</span>
            <span class="text-warning-dark-025">.text-warning-dark-025</span>      <span class="text-warning-dark-050">.text-warning-dark-050</span>
            <span class="text-warning-darker">.text-warning-darker</span>
            <span class="text-warning-darker-025">.text-warning-darker-025</span>
            <span class="text-warning-darker-050">.text-warning-darker-050</span>
            <ul class="docs--palette-opacity">
                <li class="docs--palette background-warning-dark-025">background-warning-dark 0.25 opacity</li>
                <li class="docs--palette background-warning-dark-050">background-warning-dark 0.50 opacity</li>
            </ul>
        </li>

        <li class="docs--palette background-warning">
            <span class="text-warning-lighter">.text-warning-lighter</span>
            <span class="text-warning-lighter-025">.text-warning-lighter-025</span>
            <span class="text-warning-lighter-050">.text-warning-lighter-050</span>
            <span class="text-warning-light">.text-warning-light</span>
            <span class="text-warning-light-025">.text-warning-light-025</span>
            <span class="text-warning-light-050">.text-warning-light-050</span>
            <span class="text-warning">.text-warning</span>
            <span class="text-warning-025">.text-warning-025</span>
            <span class="text-warning-050">.text-warning-050</span>
            <span class="text-warning-dark">.text-warning-dark</span>
            <span class="text-warning-dark-025">.text-warning-dark-025</span>
            <span class="text-warning-dark-050">.text-warning-dark-050</span>
            <span class="text-warning-darker">.text-warning-darker</span>
            <span class="text-warning-darker-025">.text-warning-darker-025</span>
            <span class="text-warning-darker-050">.text-warning-darker-050</span>
            <ul class="docs--palette-opacity">
                <li class="docs--palette background-warning-025">background-warning 0.25 opacity</li>
                <li class="docs--palette background-warning-050">background-warning 0.50 opacity</li>
            </ul>
        </li>

        <li class="docs--palette background-warning-light">
            <span class="text-warning-lighter">.text-warning-lighter</span>
            <span class="text-warning-lighter-025">.text-warning-lighter-025</span>
            <span class="text-warning-lighter-050">.text-warning-lighter-050</span>
            <span class="text-warning-light">.text-warning-light</span>
            <span class="text-warning-light-025">.text-warning-light-025</span>
            <span class="text-warning-light-050">.text-warning-light-050</span>
            <span class="text-warning">.text-warning</span>
            <span class="text-warning-025">.text-warning-025</span>
            <span class="text-warning-050">.text-warning-050</span>
            <span class="text-warning-dark">.text-warning-dark</span>
            <span class="text-warning-dark-025">.text-warning-dark-025</span>
            <span class="text-warning-dark-050">.text-warning-dark-050</span>
            <span class="text-warning-darker">.text-warning-darker</span>
            <span class="text-warning-darker-025">.text-warning-darker-025</span>
            <span class="text-warning-darker-050">.text-warning-darker-050</span>
            <ul class="docs--palette-opacity">
                <li class="docs--palette background-warning-light-025">background-warning-light 0.25 opacity</li>
                <li class="docs--palette background-warning-light-050">background-warning-light 0.50 opacity</li>
            </ul>
        </li>

        <li class="docs--palette background-warning-lighter">
            <span class="text-warning-lighter">.text-warning-lighter</span>
            <span class="text-warning-lighter-025">.text-warning-lighter-025</span>
            <span class="text-warning-lighter-050">.text-warning-lighter-050</span>
            <span class="text-warning-light">.text-warning-light</span>
            <span class="text-warning-light-025">.text-warning-light-025</span>
            <span class="text-warning-light-050">.text-warning-light-050</span>
            <span class="text-warning">.text-warning</span>
            <span class="text-warning-025">.text-warning-025</span>
            <span class="text-warning-050">.text-warning-050</span>
            <span class="text-warning-dark">.text-warning-dark</span>
            <span class="text-warning-dark-025">.text-warning-dark-025</span>
            <span class="text-warning-dark-050">.text-warning-dark-050</span>
            <span class="text-warning-darker">.text-warning-darker</span>
            <span class="text-warning-darker-025">.text-warning-darker-025</span>
            <span class="text-warning-darker-050">.text-warning-darker-050</span>
            <ul class="docs--palette-opacity">
                <li class="docs--palette background-warning-lighter-025">background-warning-lighter 0.25 opacity</li>
                <li class="docs--palette background-warning-lighter-050">background-warning-lighter 0.50 opacity</li>
            </ul>
        </li>
    </ul>

    <!--
      Danger
    -->
    <ul class="docs--palette-list">
        <li class="docs--palette-title">danger Color</li>

        <li class="docs--palette background-danger-darker">
            <span class="text-danger-lighter">.text-danger-lighter</span>
            <span class="text-danger-lighter-025">.text-danger-lighter-025</span>
            <span class="text-danger-lighter-050">.text-danger-lighter-050</span>
            <span class="text-danger-light">.text-danger-light</span>
            <span class="text-danger-light-025">.text-danger-light-025</span>
            <span class="text-danger-light-050">.text-danger-light-050</span>
            <span class="text-danger">.text-danger</span>
            <span class="text-danger-025">.text-danger-025</span>
            <span class="text-danger-050">.text-danger-050</span>
            <span class="text-danger-dark">.text-danger-dark</span>
            <span class="text-danger-dark-025">.text-danger-dark-025</span>      <span class="text-danger-dark-050">.text-danger-dark-050</span>
            <span class="text-danger-darker">.text-danger-darker</span>
            <span class="text-danger-darker-025">.text-danger-darker-025</span>
            <span class="text-danger-darker-050">.text-danger-darker-050</span>
            <ul class="docs--palette-opacity">
                <li class="docs--palette background-danger-darker-025">background-danger-darker 0.25 opacity</li>
                <li class="docs--palette background-danger-darker-050">background-danger-darker 0.50 opacity</li>
            </ul>
        </li>

        <li class="docs--palette background-danger-dark">
            <span class="text-danger-lighter">.text-danger-lighter</span>
            <span class="text-danger-lighter-025">.text-danger-lighter-025</span>
            <span class="text-danger-lighter-050">.text-danger-lighter-050</span>
            <span class="text-danger-light">.text-danger-light</span>
            <span class="text-danger-light-025">.text-danger-light-025</span>
            <span class="text-danger-light-050">.text-danger-light-050</span>
            <span class="text-danger">.text-danger</span>
            <span class="text-danger-025">.text-danger-025</span>
            <span class="text-danger-050">.text-danger-050</span>
            <span class="text-danger-dark">.text-danger-dark</span>
            <span class="text-danger-dark-025">.text-danger-dark-025</span>      <span class="text-danger-dark-050">.text-danger-dark-050</span>
            <span class="text-danger-darker">.text-danger-darker</span>
            <span class="text-danger-darker-025">.text-danger-darker-025</span>
            <span class="text-danger-darker-050">.text-danger-darker-050</span>
            <ul class="docs--palette-opacity">
                <li class="docs--palette background-danger-dark-025">background-danger-dark 0.25 opacity</li>
                <li class="docs--palette background-danger-dark-050">background-danger-dark 0.50 opacity</li>
            </ul>
        </li>

        <li class="docs--palette background-danger">
            <span class="text-danger-lighter">.text-danger-lighter</span>
            <span class="text-danger-lighter-025">.text-danger-lighter-025</span>
            <span class="text-danger-lighter-050">.text-danger-lighter-050</span>
            <span class="text-danger-light">.text-danger-light</span>
            <span class="text-danger-light-025">.text-danger-light-025</span>
            <span class="text-danger-light-050">.text-danger-light-050</span>
            <span class="text-danger">.text-danger</span>
            <span class="text-danger-025">.text-danger-025</span>
            <span class="text-danger-050">.text-danger-050</span>
            <span class="text-danger-dark">.text-danger-dark</span>
            <span class="text-danger-dark-025">.text-danger-dark-025</span>
            <span class="text-danger-dark-050">.text-danger-dark-050</span>
            <span class="text-danger-darker">.text-danger-darker</span>
            <span class="text-danger-darker-025">.text-danger-darker-025</span>
            <span class="text-danger-darker-050">.text-danger-darker-050</span>
            <ul class="docs--palette-opacity">
                <li class="docs--palette background-danger-025">background-danger 0.25 opacity</li>
                <li class="docs--palette background-danger-050">background-danger 0.50 opacity</li>
            </ul>
        </li>

        <li class="docs--palette background-danger-light">
            <span class="text-danger-lighter">.text-danger-lighter</span>
            <span class="text-danger-lighter-025">.text-danger-lighter-025</span>
            <span class="text-danger-lighter-050">.text-danger-lighter-050</span>
            <span class="text-danger-light">.text-danger-light</span>
            <span class="text-danger-light-025">.text-danger-light-025</span>
            <span class="text-danger-light-050">.text-danger-light-050</span>
            <span class="text-danger">.text-danger</span>
            <span class="text-danger-025">.text-danger-025</span>
            <span class="text-danger-050">.text-danger-050</span>
            <span class="text-danger-dark">.text-danger-dark</span>
            <span class="text-danger-dark-025">.text-danger-dark-025</span>
            <span class="text-danger-dark-050">.text-danger-dark-050</span>
            <span class="text-danger-darker">.text-danger-darker</span>
            <span class="text-danger-darker-025">.text-danger-darker-025</span>
            <span class="text-danger-darker-050">.text-danger-darker-050</span>
            <ul class="docs--palette-opacity">
                <li class="docs--palette background-danger-light-025">background-danger-light 0.25 opacity</li>
                <li class="docs--palette background-danger-light-050">background-danger-light 0.50 opacity</li>
            </ul>
        </li>

        <li class="docs--palette background-danger-lighter">
            <span class="text-danger-lighter">.text-danger-lighter</span>
            <span class="text-danger-lighter-025">.text-danger-lighter-025</span>
            <span class="text-danger-lighter-050">.text-danger-lighter-050</span>
            <span class="text-danger-light">.text-danger-light</span>
            <span class="text-danger-light-025">.text-danger-light-025</span>
            <span class="text-danger-light-050">.text-danger-light-050</span>
            <span class="text-danger">.text-danger</span>
            <span class="text-danger-025">.text-danger-025</span>
            <span class="text-danger-050">.text-danger-050</span>
            <span class="text-danger-dark">.text-danger-dark</span>
            <span class="text-danger-dark-025">.text-danger-dark-025</span>
            <span class="text-danger-dark-050">.text-danger-dark-050</span>
            <span class="text-danger-darker">.text-danger-darker</span>
            <span class="text-danger-darker-025">.text-danger-darker-025</span>
            <span class="text-danger-darker-050">.text-danger-darker-050</span>
            <ul class="docs--palette-opacity">
                <li class="docs--palette background-danger-lighter-025">background-danger-lighter 0.25 opacity</li>
                <li class="docs--palette background-danger-lighter-050">background-danger-lighter 0.50 opacity</li>
            </ul>
        </li>
    </ul>

    <!--
      Grays
    -->
    <ul class="docs--palette-list">
        <li class="docs--palette-title">Grays</li>

        <li class="docs--palette background-gray-darker">
            <span class="text-gray-lighter">.text-gray-lighter</span>
            <span class="text-gray-lighter-025">.text-gray-lighter-025</span>
            <span class="text-gray-lighter-050">.text-gray-lighter-050</span>
            <span class="text-gray-light">.text-gray-light</span>
            <span class="text-gray-light-025">.text-gray-light-025</span>
            <span class="text-gray-light-050">.text-gray-light-050</span>
            <span class="text-gray">.text-gray</span>
            <span class="text-gray-025">.text-gray-025</span>
            <span class="text-gray-050">.text-gray-050</span>
            <span class="text-gray-dark">.text-gray-dark</span>
            <span class="text-gray-dark-025">.text-gray-dark-025</span>      <span class="text-gray-dark-050">.text-gray-dark-050</span>
            <span class="text-gray-darker">.text-gray-darker</span>
            <span class="text-gray-darker-025">.text-gray-darker-025</span>
            <span class="text-gray-darker-050">.text-gray-darker-050</span>
            <ul class="docs--palette-opacity">
                <li class="docs--palette background-gray-darker-025">background-gray-darker 0.25 opacity</li>
                <li class="docs--palette background-gray-darker-050">background-gray-darker 0.50 opacity</li>
            </ul>
        </li>

        <li class="docs--palette background-gray-dark">
            <span class="text-gray-lighter">.text-gray-lighter</span>
            <span class="text-gray-lighter-025">.text-gray-lighter-025</span>
            <span class="text-gray-lighter-050">.text-gray-lighter-050</span>
            <span class="text-gray-light">.text-gray-light</span>
            <span class="text-gray-light-025">.text-gray-light-025</span>
            <span class="text-gray-light-050">.text-gray-light-050</span>
            <span class="text-gray">.text-gray</span>
            <span class="text-gray-025">.text-gray-025</span>
            <span class="text-gray-050">.text-gray-050</span>
            <span class="text-gray-dark">.text-gray-dark</span>
            <span class="text-gray-dark-025">.text-gray-dark-025</span>      <span class="text-gray-dark-050">.text-gray-dark-050</span>
            <span class="text-gray-darker">.text-gray-darker</span>
            <span class="text-gray-darker-025">.text-gray-darker-025</span>
            <span class="text-gray-darker-050">.text-gray-darker-050</span>
            <ul class="docs--palette-opacity">
                <li class="docs--palette background-gray-dark-025">background-gray-dark 0.25 opacity</li>
                <li class="docs--palette background-gray-dark-050">background-gray-dark 0.50 opacity</li>
            </ul>
        </li>

        <li class="docs--palette background-gray">
            <span class="text-gray-lighter">.text-gray-lighter</span>
            <span class="text-gray-lighter-025">.text-gray-lighter-025</span>
            <span class="text-gray-lighter-050">.text-gray-lighter-050</span>
            <span class="text-gray-light">.text-gray-light</span>
            <span class="text-gray-light-025">.text-gray-light-025</span>
            <span class="text-gray-light-050">.text-gray-light-050</span>
            <span class="text-gray">.text-gray</span>
            <span class="text-gray-025">.text-gray-025</span>
            <span class="text-gray-050">.text-gray-050</span>
            <span class="text-gray-dark">.text-gray-dark</span>
            <span class="text-gray-dark-025">.text-gray-dark-025</span>
            <span class="text-gray-dark-050">.text-gray-dark-050</span>
            <span class="text-gray-darker">.text-gray-darker</span>
            <span class="text-gray-darker-025">.text-gray-darker-025</span>
            <span class="text-gray-darker-050">.text-gray-darker-050</span>
            <ul class="docs--palette-opacity">
                <li class="docs--palette background-gray-025">background-gray 0.25 opacity</li>
                <li class="docs--palette background-gray-050">background-gray 0.50 opacity</li>
            </ul>
        </li>

        <li class="docs--palette background-gray-light">
            <span class="text-gray-lighter">.text-gray-lighter</span>
            <span class="text-gray-lighter-025">.text-gray-lighter-025</span>
            <span class="text-gray-lighter-050">.text-gray-lighter-050</span>
            <span class="text-gray-light">.text-gray-light</span>
            <span class="text-gray-light-025">.text-gray-light-025</span>
            <span class="text-gray-light-050">.text-gray-light-050</span>
            <span class="text-gray">.text-gray</span>
            <span class="text-gray-025">.text-gray-025</span>
            <span class="text-gray-050">.text-gray-050</span>
            <span class="text-gray-dark">.text-gray-dark</span>
            <span class="text-gray-dark-025">.text-gray-dark-025</span>
            <span class="text-gray-dark-050">.text-gray-dark-050</span>
            <span class="text-gray-darker">.text-gray-darker</span>
            <span class="text-gray-darker-025">.text-gray-darker-025</span>
            <span class="text-gray-darker-050">.text-gray-darker-050</span>
            <ul class="docs--palette-opacity">
                <li class="docs--palette background-gray-light-025">background-gray-light 0.25 opacity</li>
                <li class="docs--palette background-gray-light-050">background-gray-light 0.50 opacity</li>
            </ul>
        </li>

        <li class="docs--palette background-gray-lighter">
            <span class="text-gray-lighter">.text-gray-lighter</span>
            <span class="text-gray-lighter-025">.text-gray-lighter-025</span>
            <span class="text-gray-lighter-050">.text-gray-lighter-050</span>
            <span class="text-gray-light">.text-gray-light</span>
            <span class="text-gray-light-025">.text-gray-light-025</span>
            <span class="text-gray-light-050">.text-gray-light-050</span>
            <span class="text-gray">.text-gray</span>
            <span class="text-gray-025">.text-gray-025</span>
            <span class="text-gray-050">.text-gray-050</span>
            <span class="text-gray-dark">.text-gray-dark</span>
            <span class="text-gray-dark-025">.text-gray-dark-025</span>
            <span class="text-gray-dark-050">.text-gray-dark-050</span>
            <span class="text-gray-darker">.text-gray-darker</span>
            <span class="text-gray-darker-025">.text-gray-darker-025</span>
            <span class="text-gray-darker-050">.text-gray-darker-050</span>
            <ul class="docs--palette-opacity">
                <li class="docs--palette background-gray-lighter-025">background-gray-lighter 0.25 opacity</li>
                <li class="docs--palette background-gray-lighter-050">background-gray-lighter 0.50 opacity</li>
            </ul>
        </li>
    </ul>

</div>