Blues

Blues

Blues do not feature heavily in the site design. They’re mainly reserved for links, buttons, and the county-level maps on state Explore pages.

$blue-dark is used for type fills over the $blue-cthru background color (on the filter panel for federal revenue by company, in How it works), to achieve sufficient contrast. $blue-cthru is semi-transparent, for use in filter backgrounds.

‘“Accessible” colors can be used as text fills over white backgrounds, since the contrast ratio between the color and white is at least 4.5:1.’

<!-- Blue Deep -->
<div class="swatch">
    <div class="swatch-color bg-blue-deep"></div>
    <div class="label-primary">$blue-deep</div>
    <div class="label-secondary">#00354f</div>
    <div class="icon-ok"></div>
    <div class="label-secondary">Accessible</div>
    <div class="label-secondary">(not in use)</div>
</div>

<!-- Blue Darker -->
<div class="swatch">
    <div class="swatch-color bg-blue-darker"></div>
    <div class="label-primary">$blue-darker</div>
    <div class="label-secondary">#005078</div>
    <div class="icon-ok"></div>
    <div class="label-secondary">Accessible</div>
    <div class="label-secondary">(not in use)</div>
</div>

<!-- Blue Dark -->
<div class="swatch">
    <div class="swatch-color bg-blue-dark"></div>
    <div class="label-primary">$blue-dark</div>
    <div class="label-secondary">#086996</div>
    <div class="icon-ok"></div>
    <div class="label-secondary">Accessible</div>
</div>

<!-- Blue -->
<div class="swatch">
    <div class="swatch-color bg-blue"></div>
    <div class="label-primary">$blue (links)</div>
    <div class="label-secondary">#1478a6</div>
    <div class="icon-ok"></div>
    <div class="label-secondary">Accessible</div>
</div>

<!-- Blue Mid Dark -->
<div class="swatch">
    <div class="swatch-color bg-blue-mid-dark"></div>
    <div class="label-primary">$blue-mid-dark</div>
    <div class="label-secondary">#3d95bd</div>
    <div class="icon-no"></div>
    <div class="label-secondary">Not accessible</div>
    <div class="label-secondary">(for maps only)</div>
</div>

<!-- Blue Mid -->
<div class="swatch">
    <div class="swatch-color bg-blue-mid"></div>
    <div class="label-primary">$blue-mid</div>
    <div class="label-secondary">#79bbda</div>
    <div class="icon-no"></div>
    <div class="label-secondary">Not accessible</div>
    <div class="label-secondary">(for maps only)</div>
</div>

<!-- Blue Cthru -->
<div class="swatch">
    <div class="swatch-color bg-blue-cthru"></div>
    <div class="label-primary">$blue-cthru (filter bg)</div>
    <div class="label-secondary">rgba(198, 233, 255, 0.93)</div>
    <div class="icon-no"></div>
    <div class="label-secondary">Not accessible</div>
</div>

<!-- Blue Light -->
<div class="swatch">
    <div class="swatch-color bg-blue-light"></div>
    <div class="label-primary">$blue-light</div>
    <div class="label-secondary">#dcf4fd</div>
    <div class="icon-no"></div>
    <div class="label-secondary">Not accessible</div>
    <div class="label-secondary">(for maps only)</div>
</div>

<!-- Blue Lighter -->
<div class="swatch">
    <div class="swatch-color bg-blue-lighter"></div>
    <div class="label-primary">$blue-lighter</div>
    <div class="label-secondary">#f2fdff</div>
    <div class="icon-no"></div>
    <div class="label-secondary">Not accessible</div>
    <div class="label-secondary">(not in use)</div>
</div>

<div class="swatch">
  <div class="swatch-color {{ className }}"></div>
  <div class="label-primary">${{ colorName }}</div>
  <div class="label-secondary">{{ colorCode }}</div>
  {{#if accessible }}
    <div class="icon-ok"></div>
    <div class="label-secondary">Accessible</div>
  {{else}}
    <div class="icon-no"></div>
    <div class="label-secondary">Not accessible</div>
  {{/if}}
  {{#if map }}
    <div class="label-secondary">(for maps only)</div>
  {{else}}
  {{/if}}
  {{#if notInUse }}
    <div class="label-secondary">(not in use)</div>
  {{else}}
  {{/if}}
</div>
/* Blue Deep */
{
  "className": "bg-blue-deep",
  "colorName": "blue-deep",
  "colorCode": "#00354f",
  "notInUse": true,
  "map": null,
  "accessible": true
}

/* Blue Darker */
{
  "className": "bg-blue-darker",
  "colorName": "blue-darker",
  "colorCode": "#005078",
  "notInUse": true,
  "map": null,
  "accessible": true
}

/* Blue Dark */
{
  "className": "bg-blue-dark",
  "colorName": "blue-dark",
  "colorCode": "#086996",
  "notInUse": null,
  "map": null,
  "accessible": true
}

/* Blue */
{
  "className": "bg-blue",
  "colorName": "blue (links)",
  "colorCode": "#1478a6",
  "notInUse": null,
  "map": null,
  "accessible": true
}

/* Blue Mid Dark */
{
  "className": "bg-blue-mid-dark",
  "colorName": "blue-mid-dark",
  "colorCode": "#3d95bd",
  "notInUse": null,
  "map": true,
  "accessible": null
}

/* Blue Mid */
{
  "className": "bg-blue-mid",
  "colorName": "blue-mid",
  "colorCode": "#79bbda",
  "notInUse": null,
  "map": true,
  "accessible": null
}

/* Blue Cthru */
{
  "className": "bg-blue-cthru",
  "colorName": "blue-cthru (filter bg)",
  "colorCode": "rgba(198, 233, 255, 0.93)",
  "notInUse": null,
  "map": null,
  "accessible": null
}

/* Blue Light */
{
  "className": "bg-blue-light",
  "colorName": "blue-light",
  "colorCode": "#dcf4fd",
  "notInUse": null,
  "map": true,
  "accessible": null
}

/* Blue Lighter */
{
  "className": "bg-blue-lighter",
  "colorName": "blue-lighter",
  "colorCode": "#f2fdff",
  "notInUse": true,
  "map": null,
  "accessible": null
}