Cisco Atomic Pattern Library

Branding palette

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>