<p><strong>Note:</strong> The following color palettes are shown for reference only. Color values should never be hard-coded in the SASS/CSS and <code>gravity-ui-web</code>'s SASS code therefore does <em>not</em> provide variables for these colors. Instead, <em>only</em> the CSS custom properties provided Gravity's color system should be referenced when applying colors to UI elements. This ensures that all UI elements work with all available color schemes.</p>
<h4>wiproExtended</h4>

<h5>cyan</h5>
<div class="sg-color-palette">

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #006ea6;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade80</strong>
            <code>#006ea6</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #00527c;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade60</strong>
            <code>#00527c</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #003753;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade40</strong>
            <code>#003753</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #001b29;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade20</strong>
            <code>#001b29</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #000a0e;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade7</strong>
            <code>#000a0e</code>
        </div>
    </div>

</div>

<h5>blue</h5>
<div class="sg-color-palette">

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #023e82;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade80</strong>
            <code>#023e82</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #022f61;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade60</strong>
            <code>#022f61</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #011f41;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade40</strong>
            <code>#011f41</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #011020;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade20</strong>
            <code>#011020</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #00050b;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade7</strong>
            <code>#00050b</code>
        </div>
    </div>

</div>

<h5>violet</h5>
<div class="sg-color-palette">

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #592374;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade80</strong>
            <code>#592374</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #431a57;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade60</strong>
            <code>#431a57</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #2c123a;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade40</strong>
            <code>#2c123a</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #16091d;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade20</strong>
            <code>#16091d</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #08030a;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade7</strong>
            <code>#08030a</code>
        </div>
    </div>

</div>

<h5>red</h5>
<div class="sg-color-palette">

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #bc161d;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade80</strong>
            <code>#bc161d</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #8d1116;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade60</strong>
            <code>#8d1116</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #5e0b0e;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade40</strong>
            <code>#5e0b0e</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #2f0607;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade20</strong>
            <code>#2f0607</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #100203;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade7</strong>
            <code>#100203</code>
        </div>
    </div>

</div>

<h5>yellow</h5>
<div class="sg-color-palette">

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #ca940f;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade80</strong>
            <code>#ca940f</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #986f0b;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade60</strong>
            <code>#986f0b</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #654a08;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade40</strong>
            <code>#654a08</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #332504;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade20</strong>
            <code>#332504</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #120d01;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade7</strong>
            <code>#120d01</code>
        </div>
    </div>

</div>

<h5>green</h5>
<div class="sg-color-palette">

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #84a63d;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade80</strong>
            <code>#84a63d</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #637c2e;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade60</strong>
            <code>#637c2e</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #42531e;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade40</strong>
            <code>#42531e</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #21290f;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade20</strong>
            <code>#21290f</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #0c0e05;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade7</strong>
            <code>#0c0e05</code>
        </div>
    </div>

</div>

<h5>teal</h5>
<div class="sg-color-palette">

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #009483;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade80</strong>
            <code>#009483</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #007c6c;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade60</strong>
            <code>#007c6c</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #005c50;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade40</strong>
            <code>#005c50</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #00241f;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade20</strong>
            <code>#00241f</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #000d0b;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade7</strong>
            <code>#000d0b</code>
        </div>
    </div>

</div>

<h5>gray</h5>
<div class="sg-color-palette">

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #ffffff;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>100</strong>
            <code>#ffffff</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #000000;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>black</strong>
            <code>#000000</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #1a1a1a;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>veryDark</strong>
            <code>#1a1a1a</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #404040;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>darker</strong>
            <code>#404040</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #7f7f7f;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>mediumDark</strong>
            <code>#7f7f7f</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #999999;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>medium</strong>
            <code>#999999</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #cccccc;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>mediumLight</strong>
            <code>#cccccc</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #f1f1f1;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>veryLight</strong>
            <code>#f1f1f1</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #f1f1f1;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>095</strong>
            <code>#f1f1f1</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #e6e6e6;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>090</strong>
            <code>#e6e6e6</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #cccccc;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>080</strong>
            <code>#cccccc</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #b3b3b3;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>070</strong>
            <code>#b3b3b3</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #999999;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>060</strong>
            <code>#999999</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #7f7f7f;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>050</strong>
            <code>#7f7f7f</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #666666;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>040</strong>
            <code>#666666</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #404040;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>025</strong>
            <code>#404040</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #262626;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>015</strong>
            <code>#262626</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #1a1a1a;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>010</strong>
            <code>#1a1a1a</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #000000;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>000</strong>
            <code>#000000</code>
        </div>
    </div>

</div>

<h4>wipro</h4>

<h5>cyan</h5>
<div class="sg-color-palette">

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #0089cf;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>base</strong>
            <code>#0089cf</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #1099d6;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint80</strong>
            <code>#1099d6</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #5bacdf;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint60</strong>
            <code>#5bacdf</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #93c2e9;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint40</strong>
            <code>#93c2e9</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #c7ddf3;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint20</strong>
            <code>#c7ddf3</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #e7f2fb;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint7</strong>
            <code>#e7f2fb</code>
        </div>
    </div>

</div>

<h5>blue</h5>
<div class="sg-color-palette">

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #034ea2;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>base</strong>
            <code>#034ea2</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #4665af;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint80</strong>
            <code>#4665af</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #7080bf;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint60</strong>
            <code>#7080bf</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #99a0d1;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint40</strong>
            <code>#99a0d1</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #c7cbe5;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint20</strong>
            <code>#c7cbe5</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #e9ebf6;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint7</strong>
            <code>#e9ebf6</code>
        </div>
    </div>

</div>

<h5>violet</h5>
<div class="sg-color-palette">

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #6f2c91;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>base</strong>
            <code>#6f2c91</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #8552a1;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint80</strong>
            <code>#8552a1</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #9c76b4;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint60</strong>
            <code>#9c76b4</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #b69cca;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint40</strong>
            <code>#b69cca</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #d6c9e3;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint20</strong>
            <code>#d6c9e3</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #eeebf5;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint7</strong>
            <code>#eeebf5</code>
        </div>
    </div>

</div>

<h5>red</h5>
<div class="sg-color-palette">

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #eb1c24;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>base</strong>
            <code>#eb1c24</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #f15b46;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint80</strong>
            <code>#f15b46</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #f58468;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint60</strong>
            <code>#f58468</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #f9ac90;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint40</strong>
            <code>#f9ac90</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #fdd4c2;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint20</strong>
            <code>#fdd4c2</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #feeee7;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint7</strong>
            <code>#feeee7</code>
        </div>
    </div>

</div>

<h5>yellow</h5>
<div class="sg-color-palette">

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #fdb913;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>base</strong>
            <code>#fdb913</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #ffc54e;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint80</strong>
            <code>#ffc54e</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #ffd27c;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint60</strong>
            <code>#ffd27c</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #ffdfa4;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint40</strong>
            <code>#ffdfa4</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #ffedce;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint20</strong>
            <code>#ffedce</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #fff7eb;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint7</strong>
            <code>#fff7eb</code>
        </div>
    </div>

</div>

<h5>green</h5>
<div class="sg-color-palette">

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #a5cf4c;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>base</strong>
            <code>#a5cf4c</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #b6d772;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint80</strong>
            <code>#b6d772</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #c7df94;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint60</strong>
            <code>#c7df94</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #d9e9b5;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint40</strong>
            <code>#d9e9b5</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #eaf3d8;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint20</strong>
            <code>#eaf3d8</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #f8fbf0;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint7</strong>
            <code>#f8fbf0</code>
        </div>
    </div>

</div>

<h5>teal</h5>
<div class="sg-color-palette">

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #00b49d;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>base</strong>
            <code>#00b49d</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #50c0ad;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint80</strong>
            <code>#50c0ad</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #82cdbf;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint60</strong>
            <code>#82cdbf</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #acdcd2;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint40</strong>
            <code>#acdcd2</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #b9e1d6;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint20</strong>
            <code>#b9e1d6</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #edf7f5;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint7</strong>
            <code>#edf7f5</code>
        </div>
    </div>

</div>

<h5>gray</h5>
<div class="sg-color-palette">

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #4d4848;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>dark</strong>
            <code>#4d4848</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #e6e6e6;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>light</strong>
            <code>#e6e6e6</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #ffffff;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>white</strong>
            <code>#ffffff</code>
        </div>
    </div>

</div>

<h5>reserved</h5>
<div class="sg-color-palette">

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #002d72;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>navyBlue</strong>
            <code>#002d72</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #6cc24a;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>appleGreen</strong>
            <code>#6cc24a</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #f3d54e;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>sunnyYellow</strong>
            <code>#f3d54e</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #ef3340;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>rubyRed</strong>
            <code>#ef3340</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #009cde;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>skyBlue</strong>
            <code>#009cde</code>
        </div>
    </div>

</div>
{% macro colorSwatch(name, value) %}
<div class="sg-color-swatch">
  <div class="sg-color-swatch__preview">
    <span style="background-color: {{ value }};"></span>
  </div>
  <div class="sg-color-swatch__details">
    <strong>{{ name }}</strong>
    <code>{{ value }}</code>
  </div>
</div>
{% endmacro -%}

<p><strong>Note:</strong> The following color palettes are shown for reference only. Color values should never be hard-coded in the SASS/CSS and <code>gravity-ui-web</code>'s SASS code therefore does <em>not</em> provide variables for these colors. Instead, <em>only</em> the CSS custom properties provided Gravity's color system should be referenced when applying colors to UI elements. This ensures that all UI elements work with all available color schemes.</p>

{%- for brand, palettes in colors %}
  <h4>{{ brand }}</h4>
  {% for palette, colors in palettes %}
    <h5>{{ palette }}</h5>
    <div class="sg-color-palette">
      {% for colorName, colorValue in colors %}
        {{ colorSwatch(colorName, colorValue) | safe }}
      {% endfor %}
    </div>
  {% endfor %}
{% endfor -%}
{
  "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam",
  "url": "#",
  "listItems": [
    {
      "htmlContent": "Some list item content"
    },
    {
      "htmlContent": "More list item content"
    },
    {
      "htmlContent": "Even more list item content"
    },
    {
      "htmlContent": "I can't believe there's still more list item content"
    },
    {
      "htmlContent": "Seriously?! That's enough now."
    }
  ],
  "footer": {
    "copy": "&copy; 2019 <strong>Buildit</strong>. All rights reserved.",
    "linksA": [
      {
        "label": "Stories",
        "url": "#"
      },
      {
        "label": "People",
        "url": "#"
      },
      {
        "label": "Jobs",
        "url": "#"
      }
    ],
    "linksB": [
      {
        "label": "Terms",
        "url": "#"
      },
      {
        "label": "Accessibility",
        "url": "#"
      },
      {
        "label": "Privacy & Cookie Policy",
        "url": "https://wiprodigital.com/privacy-policy"
      }
    ]
  },
  "hero": {
    "pullout": "Big, attention-grabbing headline",
    "paragraph": "Witty subtitle",
    "cta": {
      "text": "Clickbaity label",
      "url": "#"
    }
  },
  "img": {
    "random": {
      "src": "/images/img-random-1.png",
      "alt": "A placeholder image with an arbitrary aspect ratio."
    },
    "square": {
      "src": "/images/img-1x1.png",
      "alt": "A placeholder image with a perfect square (1:1) aspect ratio."
    },
    "tv": {
      "src": "/images/img-4x3.png",
      "alt": "A placeholder image with a 4:3 aspect ratio, like an old TV."
    },
    "widescreen": {
      "src": "/images/img-16x9.png",
      "alt": "A placeholder image with a 16:9 aspect ratio, like a widescreen TV."
    },
    "logo": {
      "src": "/images/img-random-2.png",
      "alt": "A test image for a logo with an arbitrary aspect ratio."
    }
  },
  "title": "Page title",
  "header": {
    "url": "./homepage",
    "links": [
      {
        "text": "Jobs",
        "url": "./jobs"
      },
      {
        "text": "Locations",
        "url": "./locations"
      }
    ],
    "externalLinks": [
      {
        "text": "Fancy external website",
        "url": "./error-page"
      }
    ]
  },
  "sections": [
    {
      "title": "Example section",
      "class": "grav-o-full-bleed__content",
      "content": [
        {
          "paragraph": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."
        }
      ]
    }
  ],
  "section": {
    "title": "This is the title for a section",
    "class": "grav-o-full-bleed__content",
    "content": [
      {
        "paragraph": "Paragraph lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
      },
      {
        "blockquote": "Blockquote lorem ipsum dolor sit amet, consectetur adipisicing elit"
      },
      {
        "twoColumnsList": [
          {
            "htmlContent": "Vestibulum auctor dapibus neque."
          },
          {
            "htmlContent": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
          },
          {
            "htmlContent": "Aliquam tincidunt mauris eu risus."
          },
          {
            "htmlContent": "Labore et dolore magna aliqua."
          },
          {
            "htmlContent": "Phasellus tempus, orci non mattis sagittis."
          }
        ]
      },
      {
        "inlineRow": [
          {
            "text": "First link",
            "url": "#"
          },
          {
            "text": "Second link",
            "url": "#"
          },
          {
            "text": "Third link",
            "url": "#"
          }
        ]
      },
      {
        "imgCards": [
          {
            "title": "Some fascinating, attention-grabbing headling",
            "content": "Ideally, with a click-baity tagline that entices to you to visit!",
            "image": {
              "src": "/images/img-random-1.png",
              "alt": "Brief description of this fascinating image"
            }
          },
          {
            "title": "Labore et dolore magna aliqua",
            "content": "Vestibulum pharetra arcu enim, nec porttitor quam ullamcorper et. Phasellus tempus, orci non mattis sagittis, lectus erat fringilla odio, nec auctor erat augue quis eros.",
            "image": {
              "src": "/images/img-random-1.png",
              "alt": "Phasellus tempus, orci non mattis"
            }
          },
          {
            "title": "Nanotechnology immersion along the information highway",
            "content": "Leverage agile frameworks to provide a robust synopsis for high level overviews.",
            "image": {
              "src": "/images/img-random-1.png",
              "alt": "Bring to the table win-win survival strategies"
            }
          }
        ]
      },
      {
        "imgLinks": [
          {
            "url": "#",
            "image": {
              "src": "/images/img-random-1.png",
              "alt": "Image linke #1"
            }
          },
          {
            "url": "#",
            "image": {
              "src": "/images/img-random-2.png",
              "alt": "Image linke #2"
            }
          },
          {
            "url": "#",
            "image": {
              "src": "/images/img-random-3.png",
              "alt": "Image linke #3"
            }
          }
        ]
      }
    ]
  },
  "colors": {
    "wiproExtended": {
      "cyan": {
        "shade80": "#006ea6",
        "shade60": "#00527c",
        "shade40": "#003753",
        "shade20": "#001b29",
        "shade7": "#000a0e"
      },
      "blue": {
        "shade80": "#023e82",
        "shade60": "#022f61",
        "shade40": "#011f41",
        "shade20": "#011020",
        "shade7": "#00050b"
      },
      "violet": {
        "shade80": "#592374",
        "shade60": "#431a57",
        "shade40": "#2c123a",
        "shade20": "#16091d",
        "shade7": "#08030a"
      },
      "red": {
        "shade80": "#bc161d",
        "shade60": "#8d1116",
        "shade40": "#5e0b0e",
        "shade20": "#2f0607",
        "shade7": "#100203"
      },
      "yellow": {
        "shade80": "#ca940f",
        "shade60": "#986f0b",
        "shade40": "#654a08",
        "shade20": "#332504",
        "shade7": "#120d01"
      },
      "green": {
        "shade80": "#84a63d",
        "shade60": "#637c2e",
        "shade40": "#42531e",
        "shade20": "#21290f",
        "shade7": "#0c0e05"
      },
      "teal": {
        "shade80": "#009483",
        "shade60": "#007c6c",
        "shade40": "#005c50",
        "shade20": "#00241f",
        "shade7": "#000d0b"
      },
      "gray": {
        "100": "#ffffff",
        "black": "#000000",
        "veryDark": "#1a1a1a",
        "darker": "#404040",
        "mediumDark": "#7f7f7f",
        "medium": "#999999",
        "mediumLight": "#cccccc",
        "veryLight": "#f1f1f1",
        "095": "#f1f1f1",
        "090": "#e6e6e6",
        "080": "#cccccc",
        "070": "#b3b3b3",
        "060": "#999999",
        "050": "#7f7f7f",
        "040": "#666666",
        "025": "#404040",
        "015": "#262626",
        "010": "#1a1a1a",
        "000": "#000000"
      }
    },
    "wipro": {
      "cyan": {
        "base": "#0089cf",
        "tint80": "#1099d6",
        "tint60": "#5bacdf",
        "tint40": "#93c2e9",
        "tint20": "#c7ddf3",
        "tint7": "#e7f2fb"
      },
      "blue": {
        "base": "#034ea2",
        "tint80": "#4665af",
        "tint60": "#7080bf",
        "tint40": "#99a0d1",
        "tint20": "#c7cbe5",
        "tint7": "#e9ebf6"
      },
      "violet": {
        "base": "#6f2c91",
        "tint80": "#8552a1",
        "tint60": "#9c76b4",
        "tint40": "#b69cca",
        "tint20": "#d6c9e3",
        "tint7": "#eeebf5"
      },
      "red": {
        "base": "#eb1c24",
        "tint80": "#f15b46",
        "tint60": "#f58468",
        "tint40": "#f9ac90",
        "tint20": "#fdd4c2",
        "tint7": "#feeee7"
      },
      "yellow": {
        "base": "#fdb913",
        "tint80": "#ffc54e",
        "tint60": "#ffd27c",
        "tint40": "#ffdfa4",
        "tint20": "#ffedce",
        "tint7": "#fff7eb"
      },
      "green": {
        "base": "#a5cf4c",
        "tint80": "#b6d772",
        "tint60": "#c7df94",
        "tint40": "#d9e9b5",
        "tint20": "#eaf3d8",
        "tint7": "#f8fbf0"
      },
      "teal": {
        "base": "#00b49d",
        "tint80": "#50c0ad",
        "tint60": "#82cdbf",
        "tint40": "#acdcd2",
        "tint20": "#b9e1d6",
        "tint7": "#edf7f5"
      },
      "gray": {
        "dark": "#4d4848",
        "light": "#e6e6e6",
        "white": "#ffffff"
      },
      "reserved": {
        "navyBlue": "#002d72",
        "appleGreen": "#6cc24a",
        "sunnyYellow": "#f3d54e",
        "rubyRed": "#ef3340",
        "skyBlue": "#009cde"
      }
    }
  }
}
  • Handle: @color-palettes
  • Preview:
  • Filesystem Path: src/components/00-particles/00-color/01-color-palettes/color-palettes.njk

There are no notes for this item.