Employer Style Base Pattern Library

Colors 

<!-- Anchor Blue -->
<div style="height: 100px; background-color: #182642"></div>
$anchor-blue <br> #182642


<!-- Anchor Blue Light -->
<div style="height: 100px; background-color: #747d8e"></div>
$anchor-blue-light <br> #747d8e


<!-- Azure Blue -->
<div style="height: 100px; background-color: #287ab9"></div>
$azure-blue <br> #287ab9


<!-- Azure Blue Dark -->
<div style="height: 100px; background-color: #1e5c8b"></div>
$azure-blue-dark <br> #1e5c8b


<!-- Azure Light -->
<div style="height: 100px; background-color: #7eafd5"></div>
$azure-light <br> #7eafd5


<!-- Emerald -->
<div style="height: 100px; background-color: #009b74"></div>
$emerald <br> #009b74


<!-- Emerald Dark -->
<div style="height: 100px; background-color: #007457"></div>
$emerald-dark <br> #007457


<!-- Emerald Light -->
<div style="height: 100px; background-color: #66c3ac"></div>
$emerald-light <br> #66c3ac


<!-- Marigold -->
<div style="height: 100px; background-color: #fcb716"></div>
$marigold <br> #fcb716


<!-- Marigold Dark -->
<div style="height: 100px; background-color: #f79c25"></div>
$marigold-dark <br> #f79c25


<!-- Marigold Light -->
<div style="height: 100px; background-color: #fed473"></div>
$marigold-light <br> #fed473


<!-- Grey Darkest -->
<div style="height: 100px; background-color: #333"></div>
$grey-darkest <br> #333


<!-- Grey Demon -->
<div style="height: 100px; background-color: #666"></div>
$grey-demon <br> #666


<!-- Grey Dark -->
<div style="height: 100px; background-color: #999999"></div>
$grey-dark <br> #999999


<!-- Grey Light -->
<div style="height: 100px; background-color: #BBBBBB"></div>
$grey-light <br> #BBBBBB


<!-- Grey Lighter -->
<div style="height: 100px; background-color: #d8d8d8"></div>
$grey-lighter <br> #d8d8d8


<!-- Grey Lightest -->
<div style="height: 100px; background-color: #F4F4F4"></div>
$grey-lightest <br> #F4F4F4


<!-- Sky Blue -->
<div style="height: 100px; background-color: #0097d1"></div>
$sky-blue <br> #0097d1


<!-- Sky Blue Dark -->
<div style="height: 100px; background-color: #0a7aaa"></div>
$sky-blue-dark <br> #0a7aaa


<!-- Sky Blue Light -->
<div style="height: 100px; background-color: #6bc6e9"></div>
$sky-blue-light <br> #6bc6e9


<!-- Teal -->
<div style="height: 100px; background-color: #63c0b9"></div>
$teal <br> #63c0b9


<!-- Teal Dark -->
<div style="height: 100px; background-color: #54a1a1"></div>
$teal-dark <br> #54a1a1


<!-- Teal Light -->
<div style="height: 100px; background-color: #a1d9d5"></div>
$teal-light <br> #a1d9d5


<!-- Aqua -->
<div style="height: 100px; background-color: #0195a3"></div>
$aqua <br> #0195a3


<!-- Aqua Dark -->
<div style="height: 100px; background-color: #006064"></div>
$aqua-dark <br> #006064


<!-- Aqua Light -->
<div style="height: 100px; background-color: #50c5cd"></div>
$aqua-light <br> #50c5cd


<!-- Lime -->
<div style="height: 100px; background-color: #85ce3f"></div>
$lime <br> #85ce3f


<!-- Lime Dark -->
<div style="height: 100px; background-color: #66a52a"></div>
$lime-dark <br> #66a52a


<!-- Lime Light -->
<div style="height: 100px; background-color: #b6e28c"></div>
$lime-light <br> #b6e28c


<!-- Orange -->
<div style="height: 100px; background-color: #e78523"></div>
$orange <br> #e78523


<!-- Orange Dark -->
<div style="height: 100px; background-color: #be7229"></div>
$orange-dark <br> #be7229


<!-- Orange Light -->
<div style="height: 100px; background-color: #f1b67b"></div>
$orange-light <br> #f1b67b


<!-- Purple -->
<div style="height: 100px; background-color: #662d91"></div>
$purple <br> #662d91


<!-- Purple Dark -->
<div style="height: 100px; background-color: #311b92"></div>
$purple-dark <br> #311b92


<!-- Purple Medium -->
<div style="height: 100px; background-color: #673ab7"></div>
$purple-medium <br> #673ab7


<!-- Purple Light -->
<div style="height: 100px; background-color: #b389ff"></div>
$purple-light <br> #b389ff


<!-- Red -->
<div style="height: 100px; background-color: #DD2C00"></div>
$red <br> #DD2C00


<!-- Cb Gradient Dark -->
<div style="height: 100px; background-color: #0A3A68"></div>
$cb-gradient-dark <br> #0A3A68


<!-- Cb Gradient Medium -->
<div style="height: 100px; background-color: #0E759E"></div>
$cb-gradient-medium <br> #0E759E


<!-- Cb Gradient Light -->
<div style="height: 100px; background-color: #58A9A2"></div>
$cb-gradient-light <br> #58A9A2


<!-- Dayaftertomorrow Dark -->
<div style="height: 100px; background-color: white"></div>
$dayAfterTomorrow-dark <br> white


<!-- Dayaftertomorrow Medium -->
<div style="height: 100px; background-color: #f0f0f0"></div>
$dayAfterTomorrow-medium <br> #f0f0f0


<!-- Dayaftertomorrow Light -->
<div style="height: 100px; background-color: #f0f0f0"></div>
$dayAfterTomorrow-light <br> #f0f0f0


<div style="height: 100px; background-color: {{ color-hex }}"></div>
{{ color-variable }} <br>
{{ color-hex }}
 
/* Anchor Blue */
{
  "order": 1,
  "color-variable": "$anchor-blue",
  "color-hex": "#182642"
}


/* Anchor Blue Light */
{
  "order": 2,
  "color-variable": "$anchor-blue-light",
  "color-hex": "#747d8e"
}


/* Azure Blue */
{
  "order": 3,
  "color-variable": "$azure-blue",
  "color-hex": "#287ab9"
}


/* Azure Blue Dark */
{
  "order": 4,
  "color-variable": "$azure-blue-dark",
  "color-hex": "#1e5c8b"
}


/* Azure Light */
{
  "order": 5,
  "color-variable": "$azure-light",
  "color-hex": "#7eafd5"
}


/* Emerald */
{
  "order": 6,
  "color-variable": "$emerald",
  "color-hex": "#009b74"
}


/* Emerald Dark */
{
  "order": 7,
  "color-variable": "$emerald-dark",
  "color-hex": "#007457"
}


/* Emerald Light */
{
  "order": 8,
  "color-variable": "$emerald-light",
  "color-hex": "#66c3ac"
}


/* Marigold */
{
  "order": 9,
  "color-variable": "$marigold",
  "color-hex": "#fcb716"
}


/* Marigold Dark */
{
  "order": 10,
  "color-variable": "$marigold-dark",
  "color-hex": "#f79c25"
}


/* Marigold Light */
{
  "order": 11,
  "color-variable": "$marigold-light",
  "color-hex": "#fed473"
}


/* Grey Darkest */
{
  "order": 12,
  "color-variable": "$grey-darkest",
  "color-hex": "#333"
}


/* Grey Demon */
{
  "order": 13,
  "color-variable": "$grey-demon",
  "color-hex": "#666"
}


/* Grey Dark */
{
  "order": 14,
  "color-variable": "$grey-dark",
  "color-hex": "#999999"
}


/* Grey Light */
{
  "order": 15,
  "color-variable": "$grey-light",
  "color-hex": "#BBBBBB"
}


/* Grey Lighter */
{
  "order": 16,
  "color-variable": "$grey-lighter",
  "color-hex": "#d8d8d8",
  "color-usage": "border color, home featured heading background"
}


/* Grey Lightest */
{
  "order": 17,
  "color-variable": "$grey-lightest",
  "color-hex": "#F4F4F4"
}


/* Sky Blue */
{
  "order": 18,
  "color-variable": "$sky-blue",
  "color-hex": "#0097d1"
}


/* Sky Blue Dark */
{
  "order": 19,
  "color-variable": "$sky-blue-dark",
  "color-hex": "#0a7aaa"
}


/* Sky Blue Light */
{
  "order": 20,
  "color-variable": "$sky-blue-light",
  "color-hex": "#6bc6e9"
}


/* Teal */
{
  "order": 21,
  "color-variable": "$teal",
  "color-hex": "#63c0b9"
}


/* Teal Dark */
{
  "order": 22,
  "color-variable": "$teal-dark",
  "color-hex": "#54a1a1"
}


/* Teal Light */
{
  "order": 23,
  "color-variable": "$teal-light",
  "color-hex": "#a1d9d5"
}


/* Aqua */
{
  "order": 24,
  "color-variable": "$aqua",
  "color-hex": "#0195a3"
}


/* Aqua Dark */
{
  "order": 25,
  "color-variable": "$aqua-dark",
  "color-hex": "#006064"
}


/* Aqua Light */
{
  "order": 26,
  "color-variable": "$aqua-light",
  "color-hex": "#50c5cd"
}


/* Lime */
{
  "order": 27,
  "color-variable": "$lime",
  "color-hex": "#85ce3f"
}


/* Lime Dark */
{
  "order": 28,
  "color-variable": "$lime-dark",
  "color-hex": "#66a52a"
}


/* Lime Light */
{
  "order": 29,
  "color-variable": "$lime-light",
  "color-hex": "#b6e28c"
}


/* Orange */
{
  "order": 30,
  "color-variable": "$orange",
  "color-hex": "#e78523"
}


/* Orange Dark */
{
  "order": 31,
  "color-variable": "$orange-dark",
  "color-hex": "#be7229"
}


/* Orange Light */
{
  "order": 32,
  "color-variable": "$orange-light",
  "color-hex": "#f1b67b"
}


/* Purple */
{
  "order": 33,
  "color-variable": "$purple",
  "color-hex": "#662d91"
}


/* Purple Dark */
{
  "order": 34,
  "color-variable": "$purple-dark",
  "color-hex": "#311b92"
}


/* Purple Medium */
{
  "order": 35,
  "color-variable": "$purple-medium",
  "color-hex": "#673ab7"
}


/* Purple Light */
{
  "order": 36,
  "color-variable": "$purple-light",
  "color-hex": "#b389ff"
}


/* Red */
{
  "order": 37,
  "color-variable": "$red",
  "color-hex": "#DD2C00"
}


/* Cb Gradient Dark */
{
  "order": 38,
  "color-variable": "$cb-gradient-dark",
  "color-hex": "#0A3A68"
}


/* Cb Gradient Medium */
{
  "order": 39,
  "color-variable": "$cb-gradient-medium",
  "color-hex": "#0E759E"
}


/* Cb Gradient Light */
{
  "order": 40,
  "color-variable": "$cb-gradient-light",
  "color-hex": "#58A9A2"
}


/* Dayaftertomorrow Dark */
{
  "order": 41,
  "color-variable": "$dayAfterTomorrow-dark",
  "color-hex": "white"
}


/* Dayaftertomorrow Medium */
{
  "order": 42,
  "color-variable": "$dayAfterTomorrow-medium",
  "color-hex": "#f0f0f0"
}


/* Dayaftertomorrow Light */
{
  "order": 43,
  "color-variable": "$dayAfterTomorrow-light",
  "color-hex": "#f0f0f0"
}
  • Content: 
    // Color Definitions

// CB Main Branding Colors
$anchor-blue: #182642;
$anchor-blue-light: #747d8e;

$azure-blue: #287ab9;
$azure-blue-dark: #1e5c8b;
$azure-light: #7eafd5;

$emerald: #009b74;
$emerald-dark: #007457;
$emerald-light: #66c3ac;

$marigold: #fcb716;
$marigold-dark: #f79c25;
$marigold-light: #fed473;

$grey-darkest: #333;
$grey-demon: #666;
$grey-dark: #999999;
$grey-light: #BBBBBB;
$grey-lighter: #d8d8d8; // border color, home featured heading background
$grey-lightest: #F4F4F4;

// CB Secondary

$sky-blue: #0097d1;
$sky-blue-dark: #0a7aaa;
$sky-blue-light: #6bc6e9;

$teal: #63c0b9;
$teal-dark: #54a1a1;
$teal-light: #a1d9d5;

$aqua: #0195a3;
$aqua-dark: #006064;
$aqua-light: #50c5cd;

$lime: #85ce3f;
$lime-dark: #66a52a;
$lime-light: #b6e28c;

$orange: #e78523;
$orange-dark: #be7229;
$orange-light: #f1b67b;

$purple: #662d91;
$purple-dark: #311b92;
$purple-medium: #673ab7;
$purple-light: #b389ff;

$red: #DD2C00;

// CB Gradient
$cb-gradient-dark: #0A3A68;
$cb-gradient-medium: #0E759E;
$cb-gradient-light: #58A9A2;

$dayAfterTomorrow-dark: white;
$dayAfterTomorrow-medium: #f0f0f0;
$dayAfterTomorrow-light: #f0f0f0;


// Color Usage

// Product Branding

$brand-color--candidate-marketplace: $marigold;
$brand-color--sourcing-technologies: $lime;
$brand-color--recruitment-software: $azure-blue;
$brand-color--recruitment-analytics: $emerald;

// Resources
$resources__carousel-continue__background: #fcfcfc;
$resources__carousel-continue__background--hover: #f8f8f8;
$resources__carousel-continue__border: #EEEEEE;

// Backgrounds
$base-background-color: white;
$secondary-background-color: $grey-lightest;
$panel-primary: white;
$panel-secondary: $grey-lightest;

// Alerts
$alert-primary: $sky-blue;
$alert-primary-active: $sky-blue-light;
$alert-danger: $red;
$alert-warning: $marigold;
$alert-success: $lime-dark;

// Header/Footer
$header-background-color--account-nav: $anchor-blue;
$header-background-color--site-nav: white;
$header-background-color--mobile-nav: white;
$header-background-color: white; // mobile?
$header-mobile-icon-color: $anchor-blue;
$header-mobile-text-hover-color: white;
$header-text-color: $anchor-blue;
$header-text-hover-color: white;
$header-background-secondary-color: $grey-lightest;
$header-flyout-color: $header-background-color;
$header-subtitle-color: $grey-demon;
$footer-background-color: $anchor-blue;
// $footer-accent-color: $header-accent-color;
// $footer-text-color: white;
// $footer-link-color: white;

// Navigation / Subnavigation
$primary-nav-link-color: $anchor-blue;

// Buttons
$base-button-color: $lime-dark;
$base-button-text-color: white;
$base-button-border-color: $base-button-color;
$base-hover-button-color: $lime;
$base-hover-button-text-color: $base-button-text-color;
$base-hover-button-border-color: $base-hover-button-color;
$base-active-button-color: $base-hover-button-color;
$base-active-button-text-color: $base-button-text-color;
$base-active-button-border-color: $base-active-button-color;

$primary-button-color: $base-button-color;
$primary-button-text-color: $base-button-text-color;
$primary-button-border-color: $primary-button-color;
$primary-hover-button-color: $base-hover-button-color;
$primary-hover-button-text-color: $primary-button-text-color;
$primary-hover-button-border-color: $primary-hover-button-color;
$primary-active-button-color: $primary-hover-button-color;
$primary-active-button-text-color: $primary-button-text-color;
$primary-active-button-border-color: $primary-active-button-color;

$secondary-button-color: $sky-blue;
$secondary-button-text-color: white;
$secondary-button-border-color: $secondary-button-color;
$secondary-hover-button-color: $azure-blue-dark;
$secondary-hover-button-text-color: $secondary-button-text-color;
$secondary-hover-button-border-color: $secondary-hover-button-color;
$secondary-active-button-color: $secondary-hover-button-color;
$secondary-active-button-text-color: $secondary-hover-button-text-color;
$secondary-active-button-border-color: $secondary-active-button-color;

$tertiary-button-color: transparent;
$tertiary-button-text-color: $sky-blue;
$tertiary-button-border-color: $tertiary-button-text-color;
$tertiary-hover-button-color: $sky-blue;
$tertiary-hover-button-text-color: white;
$tertiary-hover-button-border-color: $tertiary-hover-button-color;
$tertiary-active-button-color: $tertiary-hover-button-color;
$tertiary-active-button-text-color: $tertiary-hover-button-text-color;
$tertiary-active-button-border-color: $tertiary-active-button-color;

$quarternary-button-color: transparent;
$quarternary-button-text-color: white;
$quarternary-button-border-color: $sky-blue;
$quarternary-hover-button-color: $quarternary-button-border-color;
$quarternary-hover-button-text-color: white;
$quarternary-hover-button-border-color: $quarternary-hover-button-color;
$quarternary-active-button-color: $quarternary-hover-button-color;
$quarternary-active-button-text-color: $quarternary-hover-button-text-color;
$quarternary-active-button-border-color: $quarternary-active-button-color;

$quinary-button-color: transparent;
$quinary-button-text-color: white;
$quinary-button-border-color: $quinary-button-text-color;
$quinary-hover-button-color: $quinary-button-border-color;
$quinary-hover-button-text-color: $sky-blue;
$quinary-hover-button-border-color: $quinary-hover-button-color;
$quinary-active-button-color: $quinary-hover-button-color;
$quinary-active-button-text-color: $quinary-hover-button-text-color;
$quinary-active-button-border-color: $quinary-active-button-color;

$text-button-color: transparent;
$text-button-text-color: $sky-blue;
$text-button-border-color: transparent;
$text-hover-button-color: $text-button-color;
$text-hover-button-text-color: $sky-blue;
$text-hover-button-border-color: currentColor;
$text-active-button-color: $text-hover-button-color;
$text-active-button-text-color: $text-hover-button-text-color;
$text-active-button-border-color: currentColor;

$negative-button-color: $grey-dark;
$negative-button-text-color: white;
$negative-button-border-color: $negative-button-color;
$negative-hover-button-color: $grey-light;
$negative-hover-button-text-color: $negative-button-text-color;
$negative-hover-button-border-color: $grey-dark;
$negative-active-button-color: $negative-hover-button-color;
$negative-active-button-text-color: $negative-hover-button-text-color;
$negative-active-button-border-color: $negative-hover-button-border-color;

// Tabs
$active-tab-color: $anchor-blue;
$inactive-tab-color: $anchor-blue-light;

// Carousel
$active-carousel-button-color: $grey-demon;
$inactive-carousel-button-color: $grey-light;
$inactive-carousel-button-opacity: 1;
$active-carousel-button-opacity: 1;
$inverse-active-carousel-button-color: $grey-lightest;
$inverse-inactive-carousel-button-color: $grey-lightest;
$inverse-inactive-carousel-button-opacity: 0.35;
$inverse-active-carousel-button-opacity: 1;

// Border
$base-border-primary-color: $grey-lighter;
$base-border: 1px solid $base-border-primary-color;

// Tables
$table-row-divider-color: $grey-light;
$table-header-background-color: $grey-light;

$table-row-th--background: $grey-lightest;

$table-row-dark: $grey-lighter;
$table-row-light: $grey-lightest;
$table-row-light-promo: $grey-light;
$table-row-dark-promo: $grey-light;

$table-column-heading-1: $azure-blue;
$table-column-heading-2: $azure-blue-dark;
$table-column-heading-3: $aqua-dark;
$table-column-heading-4: $aqua;

$ecom-table-heading: $table-column-heading-2;
$ecom-table-promo-heading: darken($table-column-heading-2, 10);

// Visual Guides
$visual-guide-step-border: 2px solid $azure-blue;
  • URL: /components/raw/colors/_colors.scss
  • Filesystem Path: sass/directives/00_variables/colors/_colors.scss
  • Size: 7.6 KB

See ‘Context’ for color usage notes