There are no notes for this item.
<!-- Default -->
<div class="palette">
<div class="palette__left" style="background-color:#FFFFFF; border-color:#000000">
<div class="palette__shadow"></div>
</div>
<div class="palette__right">
<p class="body-small">#000000</p>
<p class="body-small">$black</p>
<p class="print-fine">Contrast to</p>
<p class="print-fine">#FFFFFF = 21:1</p>
</div>
</div>
<!-- Blue Icy -->
<div class="palette">
<div class="palette__left" style="background-color:#000000; border-color:#C4D6ED">
<div class="palette__shadow"></div>
</div>
<div class="palette__right">
<p class="body-small">#C4D6ED</p>
<p class="body-small">$blue-icy</p>
<p class="print-fine">Contrast to</p>
<p class="print-fine">#000000 = 7.79:1</p>
</div>
</div>
<!-- Grey -->
<div class="palette">
<div class="palette__left" style="background-color:#FFFFFF; border-color:#626469">
<div class="palette__shadow"></div>
</div>
<div class="palette__right">
<p class="body-small">#626469</p>
<p class="body-small">$grey</p>
<p class="print-fine">Contrast to</p>
<p class="print-fine">#FFFFFF = 5.92:1</p>
</div>
</div>
<!-- Blue Cisco -->
<div class="palette">
<div class="palette__left" style="background-color:#FFFFFF; border-color:#1493E6">
<div class="palette__shadow"></div>
</div>
<div class="palette__right">
<p class="body-small">#1493E6</p>
<p class="body-small">$</p>
<p class="print-fine">Contrast to</p>
<p class="print-fine">#FFFFFF = 3.31:1</p>
</div>
</div>
<!-- Yellow -->
<div class="palette">
<div class="palette__left" style="background-color:#000000; border-color:#FFCC00">
<div class="palette__shadow"></div>
</div>
<div class="palette__right">
<p class="body-small">#FFCC00</p>
<p class="body-small">$yellow</p>
<p class="print-fine">Contrast to</p>
<p class="print-fine">#000000 = 10.28:1</p>
</div>
</div>
<!-- Grey Darker -->
<div class="palette">
<div class="palette__left" style="background-color:#FFFFFF; border-color:#39393B">
<div class="palette__shadow"></div>
</div>
<div class="palette__right">
<p class="body-small">#39393B</p>
<p class="body-small">$grey-darker</p>
<p class="print-fine">Contrast to</p>
<p class="print-fine">#FFFFFF = 11.5:1</p>
</div>
</div>
<!-- Blue Dark -->
<div class="palette">
<div class="palette__left" style="background-color:#FFFFFF; border-color:#2B5592">
<div class="palette__shadow"></div>
</div>
<div class="palette__right">
<p class="body-small">#2B5592</p>
<p class="body-small">$blue-dark</p>
<p class="print-fine">Contrast to</p>
<p class="print-fine">#FFFFFF = 7.44:1</p>
</div>
</div>
<!-- Grey Light -->
<div class="palette">
<div class="palette__left" style="background-color:#000000; border-color:#A7A9AB">
<div class="palette__shadow"></div>
</div>
<div class="palette__right">
<p class="body-small">#A7A9AB</p>
<p class="body-small">$grey-light</p>
<p class="print-fine">Contrast to</p>
<p class="print-fine">#000000 = 8.91:1</p>
</div>
</div>
<!-- Green Dark -->
<div class="palette">
<div class="palette__left" style="background-color:#FFFFFF; border-color:#005C21">
<div class="palette__shadow"></div>
</div>
<div class="palette__right">
<p class="body-small">#005C21</p>
<p class="body-small">$green-dark</p>
<p class="print-fine">Contrast to</p>
<p class="print-fine">#FFFFFF = 8.23:1</p>
</div>
</div>
<!-- Amber -->
<div class="palette">
<div class="palette__left" style="background-color:#000000; border-color:#FF7300">
<div class="palette__shadow"></div>
</div>
<div class="palette__right">
<p class="body-small">#FF7300</p>
<p class="body-small">$amber</p>
<p class="print-fine">Contrast to</p>
<p class="print-fine">#000000 = 7.71:1</p>
</div>
</div>
<!-- Grey Dark -->
<div class="palette">
<div class="palette__left" style="background-color:#FFFFFF; border-color:#58585B">
<div class="palette__shadow"></div>
</div>
<div class="palette__right">
<p class="body-small">#58585B</p>
<p class="body-small">$grey-dark</p>
<p class="print-fine">Contrast to</p>
<p class="print-fine">#FFFFFF = 7.09:1</p>
</div>
</div>
<!-- Blue Light -->
<div class="palette">
<div class="palette__left" style="background-color:#000000; border-color:#64BBE3">
<div class="palette__shadow"></div>
</div>
<div class="palette__right">
<p class="body-small">#64BBE3</p>
<p class="body-small">$blue-light</p>
<p class="print-fine">Contrast to</p>
<p class="print-fine">#000000 = 9.76:1</p>
</div>
</div>
<!-- Grey Lighter -->
<div class="palette">
<div class="palette__left" style="background-color:#000000; border-color:#E9E9E9">
<div class="palette__shadow"></div>
</div>
<div class="palette__right">
<p class="body-small">#E9E9E9</p>
<p class="body-small">$grey-lighter</p>
<p class="print-fine">Contrast to</p>
<p class="print-fine">#000000 = 17.3:1</p>
</div>
</div>
<!-- Green -->
<div class="palette">
<div class="palette__left" style="background-color:#FFFFFF; border-color:#6CC04A">
<div class="palette__shadow"></div>
</div>
<div class="palette__right">
<p class="body-small">#6CC04A</p>
<p class="body-small">$green</p>
<p class="print-fine">Contrast to</p>
<p class="print-fine">#FFFFFF = 2.26:1</p>
</div>
</div>
<!-- Red Dark -->
<div class="palette">
<div class="palette__left" style="background-color:#FFFFFF; border-color:#8B1001">
<div class="palette__shadow"></div>
</div>
<div class="palette__right">
<p class="body-small">#8B1001</p>
<p class="body-small">$red-dark</p>
<p class="print-fine">Contrast to</p>
<p class="print-fine">#FFFFFF = 9.67:1</p>
</div>
</div>
<!-- White -->
<div class="palette">
<div class="palette__left" style="background-color:#000000; border-color:#FFFFFF">
<div class="palette__shadow"></div>
</div>
<div class="palette__right">
<p class="body-small">#FFFFFF</p>
<p class="body-small">$white</p>
<p class="print-fine">Contrast to</p>
<p class="print-fine">#000000 = 21:1</p>
</div>
</div>
<!-- Green Light -->
<div class="palette">
<div class="palette__left" style="background-color:#000000; border-color:#ABC233">
<div class="palette__shadow"></div>
</div>
<div class="palette__right">
<p class="body-small">#ABC233</p>
<p class="body-small">$green-light</p>
<p class="print-fine">Contrast to</p>
<p class="print-fine">#000000 = 10.5:1</p>
</div>
</div>
<!-- Green Light 2 -->
<div class="palette">
<div class="palette__left" style="background-color:#FFFFFF; border-color:#0066FF">
<div class="palette__shadow"></div>
</div>
<div class="palette__right">
<p class="body-small">#0066FF</p>
<p class="body-small">$green-light</p>
<p class="print-fine">Contrast to</p>
<p class="print-fine">#FFFFFF = 4.83:1</p>
</div>
</div>
<!-- Red -->
<div class="palette">
<div class="palette__left" style="background-color:#FFFFFF; border-color:#E32800">
<div class="palette__shadow"></div>
</div>
<div class="palette__right">
<p class="body-small">#E32800</p>
<p class="body-small">$red</p>
<p class="print-fine">Contrast to</p>
<p class="print-fine">#FFFFFF = 4.6:1</p>
</div>
</div>