diff --git a/themes/wporg-5ftf/css/settings/_colors.scss b/themes/wporg-5ftf/css/settings/_colors.scss
index 07487cf..bef748e 100644
--- a/themes/wporg-5ftf/css/settings/_colors.scss
+++ b/themes/wporg-5ftf/css/settings/_colors.scss
@@ -1,32 +1,40 @@
-$color__background-body: #fff;
-$color__background-screen: #f1f1f1;
-$color__background-hr: #eee;
-$color__background-button: #eee;
-$color__background-pre: #eee;
-$color__background-ins: #fff9c0;
-$color__background-input: #f9f9f9;
-
-$color__text-screen: #21759b;
-$color__text-input: #32373c;
-$color__text-input-focus: #111;
-$color__link: #0073aa;
-$color__link-visited: #4ca6cf;
-$color__link-hover: #d54e21;
-$color__link-button: #555555;
-$color__text-main: #555D66;
-$color__text-over-background: #FFFFFF;
-$color__text-heading: #606A73;
-$color__text-heading-darker: #23282D;
-
-$color__border: #eee;
-$color__border-button: #ccc #ccc #bbb;
-$color__border-button-hover: #ccc #bbb #aaa;
-$color__border-button-focus: #aaa #bbb #bbb;
-$color__border-input: #ddd;
-$color__border-abbr: #666;
-
+// Base colors.
 $color__wp-blue: #0073aa;
-$color__base-gray: $color__text-main;
 $color__green: #C7E8CA;
 $color__wporg-blue: #1E8CBE;
 $color__wporg-purple: #826EB4;
+
+// Base grays.
+$color-ultra-dark-gray: #191e23;
+$color-dark-gray: #23282d;
+$color-base-gray: #32373c;
+
+$color-gray-900: $color-ultra-dark-gray;
+$color-gray-800: $color-dark-gray;
+$color-gray-700: $color-base-gray;
+$color-gray-600: lighten($color-base-gray,6%);
+$color-gray-500: lighten($color-base-gray,15%);
+$color-gray-400: lighten($color-base-gray,20%);
+$color-gray-300: lighten($color-base-gray,25%);
+$color-gray-200: lighten($color-base-gray,32%);
+$color-gray-100: lighten($color-base-gray,38%);
+
+$color-gray-light-900: lighten($color-base-gray,45%);
+$color-gray-light-800: lighten($color-base-gray,52%);
+$color-gray-light-700: lighten($color-base-gray,60%);
+$color-gray-light-600: lighten($color-base-gray,64%);
+$color-gray-light-500: lighten($color-base-gray,68%);
+$color-gray-light-400: lighten($color-base-gray,70%);
+$color-gray-light-300: lighten($color-base-gray,72%);
+$color-gray-light-200: lighten($color-base-gray,74%);
+$color-gray-light-100: lighten($color-base-gray,77%);
+
+// Theme colors
+$color__background-input: $color-gray-light-200;
+$color__text: $color-gray-500;
+$color__text-darker: $color-gray-700;
+$color__text-lighter: $color-gray-300;
+$color__text-on-dark: #FFFFFF;
+$color__text-heading: $color-gray-400;
+$color__text-heading-darker: $color-gray-800;
+$color__link-button: $color-gray-500;
diff --git a/themes/wporg-5ftf/css/utilities/_colors.scss b/themes/wporg-5ftf/css/utilities/_colors.scss
index eb6b29e..d8248f8 100644
--- a/themes/wporg-5ftf/css/utilities/_colors.scss
+++ b/themes/wporg-5ftf/css/utilities/_colors.scss
@@ -15,9 +15,9 @@
 }
 
 .has-wporg-white-color {
-	color: $color__text-over-background;
+	color: $color__text-on-dark;
 }
 
 .has-wporg-white-background-color {
-	background-color: $color__text-over-background;
+	background-color: $color__text-on-dark;
 }
diff --git a/themes/wporg-5ftf/css/utilities/_pullquote.scss b/themes/wporg-5ftf/css/utilities/_pullquote.scss
index 390ebd3..fe84de4 100644
--- a/themes/wporg-5ftf/css/utilities/_pullquote.scss
+++ b/themes/wporg-5ftf/css/utilities/_pullquote.scss
@@ -4,11 +4,11 @@
 	blockquote {
 		max-width: 100%;
 		border: none;
-		color: $color__text-over-background;
+		color: $color__text-on-dark;
 	}
 
 	@include breakpoint( $breakpoint-tablet ) {
-		background-color: $color__text-over-background;
+		background-color: $color__text-on-dark;
 
 		blockquote {
 			border-left: none;