public/sass/palette.scss

$color-650-grey: #333333; // hsl(59,0%,20%)
$color-500-grey: #898984; // hsl(59,3%,53%)
$color-400-grey: #BDBDBD; // hsl(59,0%,74%)
$color-300-grey: #DCDCDC; // hsl(59,0%,86%)
$color-250-grey: #dee2e3;
$color-200-grey: #EDEDED; // hsl(59,0%,92%)
$color-150-grey: #F1F1F1; // hsl(59,0%,94%)
$color-100-grey: #F6F6F6; // hsl(59,0%,96%)


$active   : #00ADEE;
$draft    : #ffbc01;
$complete : #46af38;
$warning  : #ed5935;
$error    : #bc250c;

//boxes
$box-primary-bg    : white;
$box-secondary-bg  : $color-150-grey;
$box-tertiary-bg   : $color-250-grey;
$box-quaternary-bg : $color-500-grey;

//buttons
$btn-active-bg-color : $active;
$danger-color        : $warning;
$mortal-danger-color : $error;

//Status palette
$status-default   : $color-300-grey;
$status-draft     : $draft;
$status-error     : $warning;
$status-complete  : $complete;
$status-active    : $active;