Skip to content

Instantly share code, notes, and snippets.

@tealtan
Last active February 5, 2021 18:31
Embed
What would you like to do?
: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;
}
$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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment