diff --git a/packages/@ourworldindata/components/src/styles/colors.scss b/packages/@ourworldindata/components/src/styles/colors.scss
index fe213ef8d45..735e282e402 100644
--- a/packages/@ourworldindata/components/src/styles/colors.scss
+++ b/packages/@ourworldindata/components/src/styles/colors.scss
@@ -25,6 +25,7 @@ $amber-10: #f4eddb;
 $blue-20: #dbe5f0;
 $blue-10: #ebeef2;
 $blue-5: #f0f4fa;
+$gray-90: #4e4e4e;
 $gray-80: #5b5b5b;
 $gray-70: #858585;
 $gray-60: #a1a1a1;
diff --git a/packages/@ourworldindata/grapher/src/core/grapher.scss b/packages/@ourworldindata/grapher/src/core/grapher.scss
index 401e50f6cac..efc2a609940 100644
--- a/packages/@ourworldindata/grapher/src/core/grapher.scss
+++ b/packages/@ourworldindata/grapher/src/core/grapher.scss
@@ -14,13 +14,15 @@
 @import "./typography.scss";
 
 // grapher frame
-$frame-color: #f2f2f2;
+$frame-color: $gray-10;
 
 // text
+$dark-text: $gray-80;
+$light-text: $gray-70;
 $active-text: $blue-90;
 
 // tooltip for button label
-$tooltip-fill: #4e4e4e;
+$tooltip-fill: $gray-90;
 $tooltip-text: #fff;
 
 // These should be between 0–100 in order to avoid conflicting with