shared/scss/_vars.scss
/* Font variables */
$font__size--default: 14px;
$font__face--default:
    'DDG_ProximaNova', 'Helvetica Neue', 'Helvetica', 'Segoe UI', 'Nimbus Sans L', 'Liberation Sans', 'Open Sans', FreeSans, Arial,
    sans-serif;

/* Status icons */
$status--good: 'status--good.svg';
$status--mixed: 'status--mixed.svg';
$status--bad: 'status--bad.svg';
$status--info: 'status--info.svg';

/* Colors */
$white: #ffffff;
$silver-light: #f7f7f7;
$silver: #f2f2f2;
$silver-dark: #ededed;
$platinum-light: #e5e5e5;
$platinum: #e0e0e0;
$platinum-dark: #d0d0d0;
$platinum-darker: #c3c3c3;
$grey-light: #aaaaaa;
$grey: #999999;
$grey-dark: #888888;
$slate-light: #666666;
$slate-light-blue: #434a50;
$slate: #333333;
$slate-blue: #34383b;

$blue: #4495d4;
$blue-dark: #00278e;
$blue-light: #66abff;

$red: #de5833;
$color--green: #3fa248;
$color--dark-green: #29521f;
$color--orange: #f89f22;
$color--yellow: #fff2bf;
$color--red: #ce2929;
$color--white: #fff;
$color--light-slate: #d2d4db;
$color--medium-slate: #777;
$color--medium-dark-slate: #5f5f5f;
$color--light-grey: #a8a8ab;
$color--silver: #f0f0f0;
$color--dark-silver: #ddd;
$color--medium-silver: #d8d8d8;
$color--medium-dark-platinum: #e9e9eb;
$color--dark-platinum: #eee;
$color--extra-light-platinum: rgba(238, 238, 238, 0.5);
$color--medium-light-platinum: rgba(0, 0, 0, 0.05);

/* Neutral Colors */
$color--neutral-bg: #f5f5f5;
$color--grey: $grey-dark; /* #888 */
$color--default-box-shadow: $platinum-dark; /* #d0d0d0 */
$color--dark-grey: #4a4c4f;

/* Rating Colors */
$color--site-rating--a: $color--green;
$color--site-rating--b: $color--green;
$color--site-rating--c: $color--orange;
$color--site-rating--d: $color--red;
$color--site-rating--f: $color--red;

/* Popup */
$popup__width: 300px;

/* Hamburger Button & Menu */
$hamburger-button__color: #afafaf;
$hamburger-menu__bg-color: $slate;

/* The ratings we give */
$ratings: ('a', 'b-plus', 'b', 'c', 'c-plus', 'd', 'f');

/* Cards */
$card__bg-color: $white;
$card__border-radius: 0;
$card__border: 1px solid $color--medium-light-platinum;
$card__box-shadow: 0px 1px 1px $color--default-box-shadow;
$card__padding: 0;
$card--padded: 16px 20px;
$card--padded--top: 16px 0 0;
$card__margin--top: 7.5px;
$card__margin--right: 0;
$card__margin--bottom: 0;
$card__margin--left: 0;
$card__margin: $card__margin--top $card__margin--right $card__margin--bottom $card__margin--left;

/* Popover */
$popover__color: $white;
$popover__bg-color: $slate;
$popover__border-radius: 3px;

/* CSS Arrow */
$arrow__bg-color: $white;
$arrow__border-radius: 3px;
