---
layout: post
title:  "Colors"
subtitle: "This is our new color palette. All new branded content should now be using these rather than the legacy blue/pink."
categories: layout
permalink: /layout/colors/
---

## Primary Colors

<div class="grid grid--collapse">
  <div class="grid__small-12 grid__medium-6 grid__columns">
    <div class="color-block cb-primary">
      <ul>
        <li>$color-primary</li>
        <li>#549eff</li>
        <li>rgb(84, 158, 255)</li>
        <li>Pantone Solid Uncoated 2173 U</li>
      </ul>
    </div>
  </div>
  <div class="grid__small-12 grid__medium-6 grid__columns grid--end">
    <div class="color-block cb-developer">
      <ul>
        <li>$color-developer</li>
        <li>#58d794</li>
        <li>rgb(88, 215, 148)</li>
        <li>Pantone Solid Uncoated 353 U</li>
      </ul>
    </div>
  </div>
</div>

<div class="space-breaker"></div>

## Neutral Colors
We also have a defined palette of neutral colors, that can be used for text and borders.

<div class="grid grid--collapse">
  <div class="grid__small-12 grid__medium-4 grid__columns">
    <div class="color-block cb-white">
      <ul>
        <li>$color-white</li>
        <li>#ffffff</li>
        <li>rgb(255, 255, 255)</li>
      </ul>
    </div>
  </div>
  <div class="grid__small-12 grid__medium-4 grid__columns">
     <div class="color-block cb-snow">
      <ul>
        <li>$color-snow</li>
        <li>#f4f8fb</li>
        <li>rgb(244, 248, 251)</li>
      </ul>
    </div>
  </div>
  <div class="grid__small-12 grid__medium-4 grid__columns">
    <div class="color-block cb-smoke">
      <ul>
        <li>$color-smoke</li>
        <li>#d3dce7</li>
        <li>rgb(211, 220, 231)</li>
      </ul>
    </div>
  </div>
  <div class="grid__small-12 grid__medium-4 grid__columns">
    <div class="color-block cb-silver">
      <ul>
        <li>$color-silver</li>
        <li>#8690a6</li>
        <li>rgb(134, 144, 166)</li>
      </ul>
    </div>
  </div>

  <div class="grid__small-12 grid__medium-4 grid__columns">
    <div class="color-block cb-slate">
      <ul>
        <li>$color-slate</li>
        <li>#414859</li>
        <li>rgb(65, 72, 89)</li>
      </ul>
    </div>
  </div>
  <div class="grid__small-12 grid__medium-4 grid__columns grid--end">
     <div class="color-block cb-black">
      <ul>
        <li>$color-black</li>
        <li>#2b303b</li>
        <li>rgb(43, 48, 59)</li>
      </ul>
    </div>
  </div>
</div>

<div class="space-breaker"></div>

## UI Colors
These colors should be used to highlight elements that require action. They are mainly used on [Alerts](/alerts).

<div class="grid grid--collapse">
  <div class="grid__small-12 grid__medium-3 grid__columns">
    <div class="color-block cb-success">
      <ul>
        <li>$color-success</li>
        <li>#43ac6a</li>
        <li>rgb(67, 172, 106)</li>
      </ul>
    </div>
  </div>
  <div class="grid__small-12 grid__medium-3 grid__columns">
    <div class="color-block cb-warning">
      <ul>
        <li>$color-warning</li>
        <li>#ffae00</li>
        <li>rgb(255, 174, 0)</li>
      </ul>
    </div>
  </div>
  <div class="grid__small-12 grid__medium-3 grid__columns">
    <div class="color-block cb-alert">
      <ul>
        <li>$color-danger</li>
        <li>#b74a48</li>
        <li>rgb(183, 74, 72)</li>
      </ul>
    </div>
  </div>
  <div class="grid__small-12 grid__medium-3 grid__columns">
    <div class="color-block cb-information">
      <ul>
        <li>$color-information</li>
        <li>#34495e</li>
        <li>rgb(52, 73, 94)</li>
      </ul>
    </div>
  </div>
</div>