_PP Colors.md

Figma file: https://www.figma.com/file/eEeXshFKlFjoZiGodQCRfW/ProPublica-Design-System?node-id=1%3A2

CSS and Sass files included below:

color-palette.css

:root {

--white: #ffffff;
--black: #000000;

/* Subtle tint used behind ads. */
--gray-3: #f6f6f6;
--gray-97: #0b0b0b;

/*
// 1.1 - Neutrals
//                                  On light bg / On dark bg
// Hed                                    black /    gray-10
// Body Text                            gray-90 /    gray-20
// Supplemental (dek, captions)         gray-70 /    gray-40
// Meta (publish date, credits)         gray-40 /    gray-60
// Dividing Rules                       gray-10 /    gray-80
// Background Tint                      gray-10 /    gray-80
*/

--gray-10: #e2e2e2;
--gray-20: #c6c6c6;
--gray-30: #ababab;
--gray-40: #919191;
--gray-50: #777777;
--gray-60: #5e5e5e;
--gray-70: #474747;
--gray-80: #303030;
--gray-90: #1b1b1b;

--cool-10: #dee3e6;
--cool-20: #bec8ce;
--cool-30: #9eadb6;
--cool-40: #84939c;
--cool-50: #6c7982;
--cool-60: #556068;
--cool-70: #40484f;
--cool-80: #2b3137;
--cool-90: #1b2127;

--warm-10: #eeece7;
--warm-20: #cdc6b7;
--warm-30: #b1ab9c;
--warm-40: #979082;
--warm-50: #7d7669;
--warm-60: #645e51;
--warm-70: #4c463a;
--warm-80: #353025;
--warm-90: #201b10;

/*
// 1.2 Accents
//                                    On light bg /     On dark bg
// Links                            [accent]-dark / [accent]-light
// Buttons                           [accent]-mid /   [accent]-mid
// Thick Dividng Rules             [accent]-light /  [accent]-dark
// -----
// Note: These accents were chosen for UI with an eye towards vividness,
// They’re not equalized in luminance values, so you’ll need to correct
// for that before using them in any kind of color scale.
*/

--red-light: #f58d7a;
--red-mid: #da352b;
--red-dark: #9b0000;

--orange-light: #fcb475;
--orange-mid: #e98406;
--orange-dark: #984300;

--yellow-light: #fada7f;
--yellow-mid: #eac300;
--yellow-dark: #8a7000;

--olive-light: #d3e380;
--olive-mid: #acd105;
--olive-dark: #527d00;

--green-light: #8bd694;
--green-mid: #14b84f;
--green-dark: #007107;

--aqua-light: #8cdbc3;
--aqua-mid: #00c19c;
--aqua-dark: #007556;

--turquoise-light: #90d8dd;
--turquoise-mid: #05bec7;
--turquoise-dark: #00737c;

--blue-light: #92ceed;
--blue-mid: #06aee0;
--blue-dark: #006997;

--cobalt-light: #93a8ed;
--cobalt-mid: #2074df;
--cobalt-dark: #0045a7;

--purple-light: #dda7fe;
--purple-mid: #bf6afb;
--purple-dark: #7a28b6;

--fuschia-light: #e488d6;
--fuschia-mid: #c91dba;
--fuschia-dark: #910086;

--pink-light: #ea85a4;
--pink-mid: #cf176d;
--pink-dark: #970042;

}

color-palette.scss

$white: #ffffff;
$black: #000000;

// Subtle tint used behind ads.
$gray-3: #f6f6f6;
$gray-97: #0b0b0b;

// -----
// 1.1 - Neutrals
//                                  On light bg / On dark bg
// Hed                                    black /    gray-10
// Body Text                            gray-90 /    gray-20
// Supplemental (dek, captions)         gray-70 /    gray-40
// Meta (publish date, credits)         gray-40 /    gray-60
// Dividing Rules                       gray-10 /    gray-80
// Background Tint                      gray-10 /    gray-80
// -----

$gray-10: #e2e2e2;
$gray-20: #c6c6c6;
$gray-30: #ababab;
$gray-40: #919191;
$gray-50: #777777;
$gray-60: #5e5e5e;
$gray-70: #474747;
$gray-80: #303030;
$gray-90: #1b1b1b;

$cool-10: #dee3e6;
$cool-20: #bec8ce;
$cool-30: #9eadb6;
$cool-40: #84939c;
$cool-50: #6c7982;
$cool-60: #556068;
$cool-70: #40484f;
$cool-80: #2b3137;
$cool-90: #1b2127;

$warm-10: #eeece7;
$warm-20: #cdc6b7;
$warm-30: #b1ab9c;
$warm-40: #979082;
$warm-50: #7d7669;
$warm-60: #645e51;
$warm-70: #4c463a;
$warm-80: #353025;
$warm-90: #201b10;

// -----
// 1.2 Accents
//                                    On light bg /     On dark bg
// Links                            [accent]-dark / [accent]-light
// Buttons                           [accent]-mid /   [accent]-mid
// Thick Dividng Rules             [accent]-light /  [accent]-dark
// $$-
// Note: These accents were chosen for UI with an eye towards vividness,
// They’re not equalized in luminance values, so you’ll need to correct
// for that before using them in any kind of color scale.

$red-light: #f58d7a;
$red-mid: #da352b;
$red-dark: #9b0000;

$orange-light: #fcb475;
$orange-mid: #e98406;
$orange-dark: #984300;

$yellow-light: #fada7f;
$yellow-mid: #eac300;
$yellow-dark: #8a7000;

$olive-light: #d3e380;
$olive-mid: #acd105;
$olive-dark: #527d00;

$green-light: #8bd694;
$green-mid: #14b84f;
$green-dark: #007107;

$aqua-light: #8cdbc3;
$aqua-mid: #00c19c;
$aqua-dark: #007556;

$turquoise-light: #90d8dd;
$turquoise-mid: #05bec7;
$turquoise-dark: #00737c;

$blue-light: #92ceed;
$blue-mid: #06aee0;
$blue-dark: #006997;

$cobalt-light: #93a8ed;
$cobalt-mid: #2074df;
$cobalt-dark: #0045a7;

$purple-light: #dda7fe;
$purple-mid: #bf6afb;
$purple-dark: #7a28b6;

$fuschia-light: #e488d6;
$fuschia-mid: #c91dba;
$fuschia-dark: #910086;

$pink-light: #ea85a4;
$pink-mid: #cf176d;
$pink-dark: #970042;