diff --git a/packages/@ourworldindata/components/src/Checkbox.scss b/packages/@ourworldindata/components/src/Checkbox.scss
index 6ac4a0934c2..24410bae0d7 100644
--- a/packages/@ourworldindata/components/src/Checkbox.scss
+++ b/packages/@ourworldindata/components/src/Checkbox.scss
@@ -1,9 +1,9 @@
 .checkbox {
     $checkbox-size: 16px;
 
-    $light-stroke: #dadada;
-    $hover-stroke: #a4b6ca;
-    $active-fill: #a4b6ca;
+    $light-stroke: $gray-30;
+    $hover-stroke: $blue-30;
+    $active-fill: $blue-30;
 
     position: relative;
 
diff --git a/packages/@ourworldindata/components/src/LabeledSwitch/LabeledSwitch.scss b/packages/@ourworldindata/components/src/LabeledSwitch/LabeledSwitch.scss
index 9d7c6cc4486..9fa29a14c96 100644
--- a/packages/@ourworldindata/components/src/LabeledSwitch/LabeledSwitch.scss
+++ b/packages/@ourworldindata/components/src/LabeledSwitch/LabeledSwitch.scss
@@ -1,10 +1,7 @@
-$dark-text: #5b5b5b;
-$light-text: #858585;
-$light-fill: #dadada;
-$active-fill: #dbe5f0;
+$light-fill: $gray-30;
+$active-fill: $blue-20;
 
-$info-icon: #a1a1a1;
-$active-switch: #6e87a2;
+$active-switch: $blue-50;
 
 $medium: 400;
 $lato: $sans-serif-font-stack;
@@ -15,7 +12,7 @@ $lato: $sans-serif-font-stack;
     // where the width of a labeled switch is calculated
 
     display: flex;
-    color: $light-text;
+    color: $gray-70;
     font: $medium 13px/16px $lato;
     letter-spacing: 0.01em;
 
@@ -25,7 +22,7 @@ $lato: $sans-serif-font-stack;
     user-select: none;
 
     label {
-        color: $dark-text;
+        color: $gray-80;
         padding-left: 35px;
         white-space: nowrap;
 
@@ -34,7 +31,7 @@ $lato: $sans-serif-font-stack;
         }
 
         svg {
-            color: $info-icon;
+            color: $gray-60;
             height: 13px;
             padding: 0 0.333em;
         }
@@ -66,7 +63,7 @@ $lato: $sans-serif-font-stack;
             content: " ";
             width: 10px;
             height: 10px;
-            background: $light-text;
+            background: $gray-70;
             border-radius: 5px;
             top: 3px;
             left: 3px;
@@ -77,7 +74,7 @@ $lato: $sans-serif-font-stack;
 
     &:hover {
         .outer .inner {
-            background: $dark-text;
+            background: $gray-80;
         }
     }
 
diff --git a/packages/@ourworldindata/components/src/RadioButton.scss b/packages/@ourworldindata/components/src/RadioButton.scss
index bc5444ea571..d52007b6d97 100644
--- a/packages/@ourworldindata/components/src/RadioButton.scss
+++ b/packages/@ourworldindata/components/src/RadioButton.scss
@@ -3,8 +3,8 @@
 .radio {
     $radio-size: 16px;
 
-    $light-stroke: #a4b6ca;
-    $active-fill: #6e87a2;
+    $light-stroke: $blue-30;
+    $active-fill: $blue-50;
 
     position: relative;
 
diff --git a/packages/@ourworldindata/components/src/closeButton/CloseButton.scss b/packages/@ourworldindata/components/src/closeButton/CloseButton.scss
index 66ae19aa7ae..5473c30f8be 100644
--- a/packages/@ourworldindata/components/src/closeButton/CloseButton.scss
+++ b/packages/@ourworldindata/components/src/closeButton/CloseButton.scss
@@ -2,10 +2,10 @@
     // keep in sync with CLOSE_BUTTON_SIZE in CloseButton.tsx
     $size: 32px;
 
-    $light-stroke: #e7e7e7;
+    $light-stroke: $gray-20;
 
     $active-fill: #dbe5f0;
-    $hover-fill: #f2f2f2;
+    $hover-fill: $gray-10;
 
     display: flex;
     align-items: center;
diff --git a/packages/@ourworldindata/components/src/styles/colors.scss b/packages/@ourworldindata/components/src/styles/colors.scss
index 769785f72ca..5b9ec0742ab 100644
--- a/packages/@ourworldindata/components/src/styles/colors.scss
+++ b/packages/@ourworldindata/components/src/styles/colors.scss
@@ -17,7 +17,14 @@ $blue-50: #6e87a2;
 $blue-40: #98a9bd;
 $blue-30: #a4b6ca;
 
-/* Amber shades */
+// Gray shades
+$gray-90: #4e4e4e;
+$gray-80: #5b5b5b;
+$gray-70: #858585;
+$gray-60: #a1a1a1;
+$gray-50: #c6c6c6;
+
+// Amber shades
 $amber-110: #f9cf44;
 $amber-10: #f4eddb;
 
@@ -25,7 +32,12 @@ $amber-10: #f4eddb;
 $blue-20: #dbe5f0;
 $blue-10: #ebeef2;
 $blue-5: #f0f4fa;
-$gray-10: #f7f7f7;
+
+$gray-30: #dadada;
+$gray-20: #e7e7e7;
+$gray-10: #f2f2f2;
+$gray-5: #f7f7f7;
+
 $beige: #fbf9f3;
 $white: #ffffff;
 
diff --git a/packages/@ourworldindata/components/src/styles/mixins.scss b/packages/@ourworldindata/components/src/styles/mixins.scss
index f49ab6940ec..31309103973 100644
--- a/packages/@ourworldindata/components/src/styles/mixins.scss
+++ b/packages/@ourworldindata/components/src/styles/mixins.scss
@@ -178,7 +178,7 @@
     color: #333;
 
     .header {
-        background: #002147;
+        background: $oxford-blue;
         color: white;
         font-size: 1rem;
         font-weight: 700;
diff --git a/packages/@ourworldindata/grapher/src/controls/ActionButtons.scss b/packages/@ourworldindata/grapher/src/controls/ActionButtons.scss
index 3fef39a24b7..d3f3a464aec 100644
--- a/packages/@ourworldindata/grapher/src/controls/ActionButtons.scss
+++ b/packages/@ourworldindata/grapher/src/controls/ActionButtons.scss
@@ -27,9 +27,9 @@ $paddingX: 12px; // keep in sync with PADDING_X
 }
 
 .ActionButton {
-    $light-fill: #f2f2f2;
-    $hover-fill: #e7e7e7;
-    $active-fill: #dbe5f0;
+    $light-fill: $gray-10;
+    $hover-fill: $gray-20;
+    $active-fill: $blue-20;
 
     height: 100%;
     border-radius: 4px;
diff --git a/packages/@ourworldindata/grapher/src/controls/ContentSwitchers.scss b/packages/@ourworldindata/grapher/src/controls/ContentSwitchers.scss
index c168984adf5..3347ee30d73 100644
--- a/packages/@ourworldindata/grapher/src/controls/ContentSwitchers.scss
+++ b/packages/@ourworldindata/grapher/src/controls/ContentSwitchers.scss
@@ -5,13 +5,12 @@
     $icon-padding: 6px;
     --outer-padding: 16px;
 
-    $light-stroke: #e7e7e7;
+    $light-stroke: $gray-20;
 
-    $hover-fill: #f2f2f2;
-    $active-fill: #dbe5f0;
+    $hover-fill: $gray-10;
+    $active-fill: $blue-20;
 
-    $info-icon: #a1a1a1;
-    $active-icon: #6e87a2;
+    $active-icon: $blue-50;
 
     $border-radius: 4px;
     $visual-gap: 2px;
@@ -57,7 +56,7 @@
         }
 
         svg {
-            color: $info-icon;
+            color: $gray-60;
 
             &.custom-icon {
                 --size: $icon-width;
diff --git a/packages/@ourworldindata/grapher/src/controls/Controls.scss b/packages/@ourworldindata/grapher/src/controls/Controls.scss
index 737fa78542c..87031973b05 100644
--- a/packages/@ourworldindata/grapher/src/controls/Controls.scss
+++ b/packages/@ourworldindata/grapher/src/controls/Controls.scss
@@ -1,14 +1,13 @@
-$light-stroke: #e7e7e7;
+$light-stroke: $gray-20;
 $dark-stroke: #2d2d2d;
-$active-stroke: #a4b6ca;
+$active-stroke: $blue-30;
 
-$light-fill: #dadada;
-$active-fill: #dbe5f0;
-$hover-fill: #f2f2f2;
+$light-fill: $gray-30;
+$active-fill: $blue-20;
+$hover-fill: $gray-10;
 $selected-fill: #c7ced7;
 
-$info-icon: #a1a1a1;
-$active-switch: #6e87a2;
+$active-switch: $blue-50;
 
 $medium: 400;
 $bold: 700;
diff --git a/packages/@ourworldindata/grapher/src/controls/Dropdown.scss b/packages/@ourworldindata/grapher/src/controls/Dropdown.scss
index fb5ebb2939f..bc55610e7bf 100644
--- a/packages/@ourworldindata/grapher/src/controls/Dropdown.scss
+++ b/packages/@ourworldindata/grapher/src/controls/Dropdown.scss
@@ -6,15 +6,13 @@
     $medium: 400;
     $lato: $sans-serif-font-stack;
 
-    $light-stroke: #e7e7e7;
-    $active-stroke: #a4b6ca;
+    $light-stroke: $gray-20;
+    $active-stroke: $blue-30;
 
-    $active-fill: #dbe5f0;
-    $hover-fill: #f2f2f2;
+    $active-fill: $blue-20;
+    $hover-fill: $gray-10;
     $selected-fill: #c7ced7;
 
-    $light-text: #858585;
-
     font: $medium 13px/16px $lato;
 
     // fixes a bug in Firefox where long labels would cause the dropdown to resize,
@@ -34,7 +32,7 @@
         color: $dark-text;
 
         &.focus {
-            outline: 1px solid #a4b6ca !important;
+            outline: 1px solid $blue-30 !important;
             outline-offset: -1px;
         }
 
diff --git a/packages/@ourworldindata/grapher/src/controls/SettingsMenu.scss b/packages/@ourworldindata/grapher/src/controls/SettingsMenu.scss
index f433cbe89a6..38edc760e5e 100644
--- a/packages/@ourworldindata/grapher/src/controls/SettingsMenu.scss
+++ b/packages/@ourworldindata/grapher/src/controls/SettingsMenu.scss
@@ -1,14 +1,13 @@
-$light-stroke: #e7e7e7;
+$light-stroke: $gray-20;
 $dark-stroke: #2d2d2d;
-$active-stroke: #a4b6ca;
+$active-stroke: $blue-30;
 
-$light-fill: #dadada;
-$active-fill: #dbe5f0;
-$hover-fill: #f2f2f2;
+$light-fill: $gray-30;
+$active-fill: $blue-20;
+$hover-fill: $gray-10;
 $selected-fill: #c7ced7;
 
-$info-icon: #a1a1a1;
-$active-switch: #6e87a2;
+$active-switch: $blue-50;
 
 $medium: 400;
 $bold: 700;
@@ -105,7 +104,7 @@ nav.controlsRow .chart-controls .settings-menu {
                 list-style: none;
 
                 svg {
-                    color: $info-icon;
+                    color: $gray-60;
                     height: 13px;
                     padding: 0 0.333em;
                 }
@@ -190,7 +189,7 @@ nav.controlsRow .chart-controls .settings-menu {
                     }
 
                     &.active span {
-                        background: #a4b6ca;
+                        background: $blue-30;
                     }
 
                     &:hover:not(.active) span {
diff --git a/packages/@ourworldindata/grapher/src/controls/ShareMenu.scss b/packages/@ourworldindata/grapher/src/controls/ShareMenu.scss
index c62f56a0bdf..3685935880e 100644
--- a/packages/@ourworldindata/grapher/src/controls/ShareMenu.scss
+++ b/packages/@ourworldindata/grapher/src/controls/ShareMenu.scss
@@ -7,8 +7,8 @@ $zindex-ControlsFooter: 2;
 }
 
 .ShareMenu {
-    $hover-fill: #f2f2f2;
-    $active-fill: #dbe5f0;
+    $hover-fill: $gray-10;
+    $active-fill: $blue-20;
 
     position: absolute;
     bottom: $timelineHeight + 8px;
diff --git a/packages/@ourworldindata/grapher/src/core/grapher.scss b/packages/@ourworldindata/grapher/src/core/grapher.scss
index cf0da76bce3..92793a6c6e9 100644
--- a/packages/@ourworldindata/grapher/src/core/grapher.scss
+++ b/packages/@ourworldindata/grapher/src/core/grapher.scss
@@ -14,15 +14,15 @@
 @import "./typography.scss";
 
 // grapher frame
-$frame-color: #f2f2f2;
+$frame-color: $gray-10;
 
 // text
-$dark-text: #5b5b5b;
-$light-text: #858585;
+$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
@@ -92,11 +92,11 @@ $zindex-controls-drawer: 150;
 @import "../../../components/src/OverlayHeader.scss";
 
 .grapher_dark {
-    color: $dark-text;
+    color: $gray-80;
 }
 
 .grapher_light {
-    color: $light-text;
+    color: $gray-70;
 }
 
 .GrapherComponent,
@@ -114,7 +114,7 @@ $zindex-controls-drawer: 150;
     line-height: 1em;
 
     background: white;
-    color: $dark-text;
+    color: $gray-80;
 
     position: relative;
     container-type: size;
@@ -176,12 +176,12 @@ $zindex-controls-drawer: 150;
 
     // customize css of the <CodeSnippet> component
     .wp-code-snippet {
-        --code-snippet-border: #e7e7e7;
-        --code-snippet-background-light: #f7f7f7;
-        --code-snippet-text: #{$light-text};
-        --code-snippet-button: #{$dark-text};
-        --code-snippet-button-hover: #{$light-text};
-        --code-snippet-button-active: #{$light-text};
+        --code-snippet-border: #{$gray-20};
+        --code-snippet-background-light: #{$gray-5};
+        --code-snippet-text: #{$gray-70};
+        --code-snippet-button: #{$gray-80};
+        --code-snippet-button-hover: #{$gray-70};
+        --code-snippet-button-active: #{$gray-70};
 
         margin-bottom: 0 !important;
     }
@@ -210,7 +210,7 @@ $zindex-controls-drawer: 150;
 .tippy-box[data-theme="grapher-explanation"],
 .tippy-box[data-theme="grapher-explanation--short"] {
     background: white;
-    color: $dark-text;
+    color: $gray-80;
     font: 400 14px/1.5 $sans-serif-font-stack;
     box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.15);
 
diff --git a/packages/@ourworldindata/grapher/src/dataTable/DataTable.scss b/packages/@ourworldindata/grapher/src/dataTable/DataTable.scss
index 22d71ecec1c..b1743497a87 100644
--- a/packages/@ourworldindata/grapher/src/dataTable/DataTable.scss
+++ b/packages/@ourworldindata/grapher/src/dataTable/DataTable.scss
@@ -1,21 +1,17 @@
 .DataTableContainer {
-    $cell-border: 1px solid #f2f2f2;
+    $cell-border: 1px solid $gray-10;
 
     // header
-    $header: #f7f7f7;
-    $header-hover: #e7e7e7;
+    $header: $gray-5;
+    $header-hover: $gray-20;
 
     // rows
-    $light-fill: #f7f7f7;
+    $light-fill: $gray-5;
     $hover-fill: #f0f0f0;
-    $dark-fill: #e7e7e7;
-
-    // sort icon
-    $sort-icon: #c6c6c6;
-    $hover-icon: #a1a1a1;
+    $dark-fill: $gray-20;
 
     // closest time notice
-    $info-icon: #dadada;
+    $info-icon: $gray-30;
 
     display: flex;
     align-items: center;
@@ -133,7 +129,7 @@
                     text-align: left;
 
                     .description {
-                        color: #a1a1a1;
+                        color: $gray-60;
                         text-align: left;
                     }
                 }
@@ -159,7 +155,7 @@
                 }
 
                 .sort-icon {
-                    color: $sort-icon;
+                    color: $gray-50;
                     font-size: 13px;
                     width: 19px; // keeps column widths fixed when sorting
                     text-align: right;
@@ -170,7 +166,7 @@
                 }
 
                 &:hover .sort-icon {
-                    color: $hover-icon;
+                    color: $gray-60;
                 }
             }
         }
diff --git a/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.scss b/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.scss
index b938a3b4be3..5384464ce25 100644
--- a/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.scss
+++ b/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.scss
@@ -28,8 +28,8 @@
             $svg-margin: 8px;
             $svg-size: 12px;
 
-            $placeholder: #a1a1a1;
-            $focus: 1px solid #a4b6ca;
+            $placeholder: $gray-60;
+            $focus: 1px solid $blue-30;
 
             position: relative;
 
@@ -60,7 +60,7 @@
                 @include grapher_label-2-regular;
                 width: 100%;
                 height: 32px;
-                border: 1px solid #e7e7e7;
+                border: 1px solid $gray-20;
                 padding-left: $svg-margin + $svg-size + 4px;
                 padding-right: $svg-margin + $svg-size + 4px;
                 border-radius: 4px;
@@ -133,7 +133,7 @@
             padding: 7px;
 
             color: $dark-text;
-            background: #f2f2f2;
+            background: $gray-10;
             border: none;
             border-radius: 4px;
 
@@ -143,25 +143,25 @@
             }
 
             &:hover:not(:disabled) {
-                background: #e7e7e7;
+                background: $gray-20;
                 cursor: pointer;
             }
 
             &:active:not(:disabled) {
-                color: #1d3d63;
-                background: #dbe5f0;
-                border: 1px solid #dbe5f0;
+                color: $blue-90;
+                background: $blue-20;
+                border: 1px solid $blue-20;
             }
 
             &:disabled {
-                background: #f2f2f2;
-                color: #a1a1a1;
+                background: $gray-10;
+                color: $gray-60;
             }
         }
     }
 
     .entity-selector__content {
-        $row-border: 1px solid #f2f2f2;
+        $row-border: 1px solid $gray-10;
 
         margin: 0 var(--padding) 8px var(--padding);
 
@@ -194,7 +194,7 @@
             }
 
             .value {
-                color: #a1a1a1;
+                color: $gray-60;
                 white-space: nowrap;
                 margin-left: 12px;
             }
@@ -204,7 +204,7 @@
                 top: 0;
                 left: 0;
                 height: 100%;
-                background: #ebeef2;
+                background: $blue-10;
                 z-index: -1;
             }
 
@@ -216,7 +216,7 @@
                 svg {
                     margin-left: 6px;
                     font-size: 0.9em;
-                    color: #a1a1a1;
+                    color: $gray-60;
 
                     // hide focus outline when clicked
                     &:focus:not(:focus-visible) {
@@ -294,11 +294,11 @@
             }
 
             &:active {
-                background: #f7f7f7;
+                background: $gray-5;
             }
 
             &:disabled {
-                color: #c6c6c6;
+                color: $gray-50;
                 text-decoration: none;
                 cursor: default;
             }
diff --git a/packages/@ourworldindata/grapher/src/mapCharts/MapTooltip.scss b/packages/@ourworldindata/grapher/src/mapCharts/MapTooltip.scss
index 280fadd274c..4ddaad6d2c5 100644
--- a/packages/@ourworldindata/grapher/src/mapCharts/MapTooltip.scss
+++ b/packages/@ourworldindata/grapher/src/mapCharts/MapTooltip.scss
@@ -17,7 +17,7 @@
         line {
             stroke-dasharray: 0;
             stroke-linecap: square;
-            stroke: #dadada;
+            stroke: $gray-30;
         }
 
         // the zero line
@@ -28,7 +28,7 @@
 
     line.max-line {
         stroke-linecap: square;
-        stroke: #dadada;
+        stroke: $gray-30;
     }
 
     .axis-label {
diff --git a/packages/@ourworldindata/grapher/src/modal/DownloadModal.scss b/packages/@ourworldindata/grapher/src/modal/DownloadModal.scss
index 45caa152565..9981e76f0b5 100644
--- a/packages/@ourworldindata/grapher/src/modal/DownloadModal.scss
+++ b/packages/@ourworldindata/grapher/src/modal/DownloadModal.scss
@@ -39,7 +39,7 @@
         flex-direction: row;
         align-items: center;
         color: $dark-text;
-        background-color: #f7f7f7;
+        background-color: $gray-5;
         position: relative;
         width: 100%;
         padding: 16px;
@@ -86,8 +86,8 @@
 
     .grouped-menu-callout {
         border-radius: 8px;
-        border: 1px solid #dadada;
-        background: #f7f7f7;
+        border: 1px solid $gray-30;
+        background: $gray-5;
         padding: 16px;
 
         svg {
@@ -118,7 +118,7 @@
 .static-exports-options {
     margin: 16px 0 24px;
     padding-bottom: 24px;
-    border-bottom: 1px solid #f2f2f2;
+    border-bottom: 1px solid $gray-10;
 
     > .checkbox + .checkbox {
         margin-top: 8px;
diff --git a/packages/@ourworldindata/grapher/src/modal/SourcesModal.scss b/packages/@ourworldindata/grapher/src/modal/SourcesModal.scss
index 2c5f99f235b..be482435403 100644
--- a/packages/@ourworldindata/grapher/src/modal/SourcesModal.scss
+++ b/packages/@ourworldindata/grapher/src/modal/SourcesModal.scss
@@ -5,7 +5,7 @@
     $tab-font-size: 13px;
     $tab-gap: 8px;
 
-    $border: #e7e7e7;
+    $border: $gray-20;
 
     // necessary for scrolling
     display: flex;
diff --git a/packages/@ourworldindata/grapher/src/tabs/ExpandableTabs.scss b/packages/@ourworldindata/grapher/src/tabs/ExpandableTabs.scss
index 5bd9f9d9097..4578d0aa35d 100644
--- a/packages/@ourworldindata/grapher/src/tabs/ExpandableTabs.scss
+++ b/packages/@ourworldindata/grapher/src/tabs/ExpandableTabs.scss
@@ -4,11 +4,11 @@
 
 .ExpandableTabs__button {
     color: $dark-text;
-    border-color: #f2f2f2;
-    background: #f2f2f2;
+    border-color: $gray-10;
+    background: $gray-10;
 
     &:hover {
-        background: #e7e7e7;
+        background: $gray-20;
     }
 
     svg {
diff --git a/packages/@ourworldindata/grapher/src/timeline/TimelineComponent.scss b/packages/@ourworldindata/grapher/src/timeline/TimelineComponent.scss
index 5e6fe0eaa94..9be8922e42a 100644
--- a/packages/@ourworldindata/grapher/src/timeline/TimelineComponent.scss
+++ b/packages/@ourworldindata/grapher/src/timeline/TimelineComponent.scss
@@ -2,17 +2,16 @@ $timelineHeight: 32px;
 
 .timeline-component {
     // timeline slider and interval
-    $light-timeline: #e7e7e7;
-    $active-timeline: #a4b6ca;
+    $light-timeline: $gray-20;
+    $active-timeline: $blue-30;
 
-    // start/end handle
-    $light-knob: #a1a1a1;
-    $active-knob: #6e87a2;
+    // end handle
+    $active-knob: $blue-50;
 
     // start/end year label
-    $light-fill: #f2f2f2;
-    $hover-fill: #e7e7e7;
-    $active-fill: #dbe5f0;
+    $light-fill: $gray-10;
+    $hover-fill: $gray-20;
+    $active-fill: $blue-20;
 
     width: 100%;
     height: $timelineHeight;
@@ -79,7 +78,7 @@ $timelineHeight: 32px;
             width: $handle-diameter;
             border-radius: 100%;
 
-            background: $light-knob;
+            background: $gray-60;
             border: 2px solid #fff;
             z-index: 1;
             pointer-events: none;
diff --git a/packages/@ourworldindata/grapher/src/tooltip/Tooltip.scss b/packages/@ourworldindata/grapher/src/tooltip/Tooltip.scss
index d0eca5d9f3a..6b3ce2416c4 100644
--- a/packages/@ourworldindata/grapher/src/tooltip/Tooltip.scss
+++ b/packages/@ourworldindata/grapher/src/tooltip/Tooltip.scss
@@ -1,8 +1,8 @@
 .tooltip-container > .Tooltip {
     $background-fill: #f0f0f0;
-    $background-stroke: #e7e7e7;
+    $background-stroke: $gray-20;
     $dark-grey: #2d2d2d;
-    $light-grey: #dadada;
+    $light-grey: $gray-30;
     $grey: #787878;
     $red: #cc3b55;
     $green: #2c8465;
@@ -77,7 +77,7 @@
 
         .variable {
             .definition {
-                color: #858585;
+                color: $gray-70;
                 font-size: 12px;
                 line-height: 15px;
                 letter-spacing: 0.01em;
diff --git a/site/GrapherImage.scss b/site/GrapherImage.scss
index d12c0b6eb3a..f19d50a08b5 100644
--- a/site/GrapherImage.scss
+++ b/site/GrapherImage.scss
@@ -1,4 +1,4 @@
 .GrapherImage {
     display: block;
-    border: 1px solid #f2f2f2;
+    border: 1px solid $gray-10;
 }
diff --git a/site/css/content.scss b/site/css/content.scss
index 02367d9d037..cc78dc62e44 100644
--- a/site/css/content.scss
+++ b/site/css/content.scss
@@ -247,10 +247,10 @@ figure[data-explorer-src] {
         letter-spacing: 0.01em;
         display: inline-flex;
         align-items: center;
-        border: 1px solid #e7e7e7;
+        border: 1px solid $gray-20;
         border-radius: 4px;
         padding: 5px 7px;
-        color: #5b5b5b;
+        color: $gray-80;
         white-space: nowrap;
         margin: -5px 0px -5px -2px;
 
diff --git a/site/gdocs/components/LatestDataInsights.scss b/site/gdocs/components/LatestDataInsights.scss
index 0ca5271cb4d..46d48ab4ebd 100644
--- a/site/gdocs/components/LatestDataInsights.scss
+++ b/site/gdocs/components/LatestDataInsights.scss
@@ -119,7 +119,7 @@ html:not(.js) .latest-data-insights__card,
         background: linear-gradient(
             180deg,
             rgba(219, 229, 240, 0) 50%,
-            #dbe5f0 100%
+            $blue-20 100%
         );
     }
 }
diff --git a/site/gdocs/components/centered-article.scss b/site/gdocs/components/centered-article.scss
index 0e3e5efd279..8cd669a62f7 100644
--- a/site/gdocs/components/centered-article.scss
+++ b/site/gdocs/components/centered-article.scss
@@ -276,7 +276,7 @@ h3.article-block__heading {
     margin: 32px 0;
 
     & .image--has-outline {
-        outline: 1px solid #f2f2f2;
+        outline: 1px solid $gray-10;
     }
 
     picture {
@@ -681,8 +681,8 @@ div.raw-html-table__container {
 
 .article-block__pull-quote {
     @include h1-bold-italic;
-    border-bottom: 1px solid #dbe5f0;
-    border-top: 1px solid #dbe5f0;
+    border-bottom: 1px solid $blue-20;
+    border-top: 1px solid $blue-20;
     margin: 32px 0;
     padding: 32px 0;
     text-align: center;
@@ -1106,7 +1106,7 @@ div.raw-html-table__container {
 
     .aa-Form {
         background-color: #fff;
-        border-color: #dbe5f0;
+        border-color: $blue-20;
         height: 56px;
     }
 
diff --git a/site/owid.scss b/site/owid.scss
index e5c7ea913c7..60e20655e74 100644
--- a/site/owid.scss
+++ b/site/owid.scss
@@ -917,12 +917,12 @@ html:not(.js) {
             box-sizing: border-box;
             vertical-align: middle;
             line-height: 1.28571;
-            color: #002147;
+            color: $oxford-blue;
             font-family: inherit;
             font-size: 1rem;
 
             &:focus {
-                border-color: #002147;
+                border-color: $oxford-blue;
             }
         }