diff --git a/public/docs/css/vars.css b/public/docs/css/vars.css
index 2ce70aa32e..1de97ad96f 100644
--- a/public/docs/css/vars.css
+++ b/public/docs/css/vars.css
@@ -35,17 +35,12 @@
   --white: var(--colorScalesWhite);
 
   --navy-700: var(--colorScalesNavy700);
-  --navy-600: var(--colorScalesNavy600);
   --navy-400: var(--colorScalesNavy400);
   --navy-300: var(--colorScalesNavy300);
   --navy-200: var(--colorScalesNavy200);
   --navy-100: var(--colorScalesNavy100);
 
   --blue-500: var(--colorScalesBlue500);
-  --blue-200: var(--colorScalesBlue200);
-  --blue-100: var(--colorScalesBlue100);
-  /* No scale equivalent */
-  --blue-qqq: #fafdff;
 
   /* TODO: remove green-400 as it's being used in one place only */
   --green-400: var(--colorScalesGreen400);
@@ -61,12 +56,11 @@
 
   --blue-midnight-dark: #070e14ff;
   --blue-midnight-darker: #0a202fff;
-  --blue-midnight: #10212fff;
   --blue-midnight-lighter: #22425cff;
 
   --blue-grey-dark: #152b3dff;
   --blue-gray-darker: #1f2f3cff;
-  --blue-grey-medium: #113049ff;
+  --blue-grey-medium: var(--brandGrey);
   --blue-grey: var(--navy-700);
   --blue-grey-light: #274b66ff;
   /* This is navy 500 in the design system's scale */
@@ -85,70 +79,70 @@
   --font-size-medium: 1rem;
   --font-size-small: 0.875rem;
 
-  --color-base-primary: var(--white);
+  --color-base-primary: var(--colorBackgroundPrimaryDefault);
 
-  --color-text: var(--blue-midnight);
-  --color-heading: var(--blue-grey-dark);
-  --color-text-secondary: var(--navy-700);
+  --color-text: var(--colorTextPrimary);
+  --color-heading: var(--colorTextPrimary);
+  --color-text-secondary: var(--colorTextSecondary);
 
-  --color-subtitle: var(--navy-600);
+  --color-subtitle: var(--colorTextSecondary);
   --font-size-subtitle: var(--font-size-large);
   --font-size-title: var(--font-size-xxlarge);
 
-  --border-color-header: var(--navy-200);
+  --border-color-header: var(--colorBorderPrimary);
 
-  --color-menu-link: var(--navy-600);
-  --color-menu-link-active: var(--navy-700);
-  --color-menu-link-alt: var(--blue-500);
+  --color-menu-link: var(--colorTextSecondary);
+  --color-menu-link-active: var(--colorTextPrimary);
+  --color-menu-link-alt: var(--colorTextLinkDefault);
   --color-menu-marker: var(--navy-300);
-  --bg-color-menu: var(--blue-qqq);
+  --bg-color-menu: var(--colorBackgroundSecondaryDefault);
   --bg-color-menu-open: rgba(13, 128, 216, 0.1);
-  --border-color-menu-open: var(--navy-200);
+  --border-color-menu-open: var(--colorBorderPrimary);
   --gap-menu: 0.6em;
 
   --navigation-width: 21.25rem;
 
-  --bg-color-tab: var(--navy-200);
-  --border-color-tab: var(--navy-200);
-  --border-color-tab-active: var(--navy-400);
+  --bg-color-tab: var(--colorBackgroundTertiary);
+  --border-color-tab: var(--colorBorderPrimary);
+  --border-color-tab-active: var(--colorBorderTertiary);
 
-  --color-hint: #124164;
-  --bg-color-hint: var(--lightest-blue);
-  --border-color-hint: var(--blue-500);
+  --color-hint: var(--colorCalloutTextInfo);
+  --bg-color-hint: var(--colorCalloutBackgroundInfoDefault);
+  --border-color-hint: var(--colorCalloutBorderInfo);
 
-  --color-info: #124164;
-  --bg-color-info: var(--lightest-blue);
-  --border-color-info: var(--blue-500);
+  --color-info: var(--colorCalloutTextInfo);
+  --bg-color-info: var(--colorCalloutBackgroundInfoDefault);
+  --border-color-info: var(--colorCalloutBorderInfo);
 
-  --color-success: #04502f;
-  --bg-color-success: #e8ffeb;
-  --border-color-success: #00b065;
+  --color-success: var(--colorCalloutTextSuccess);
+  --bg-color-success: var(--colorCalloutBackgroundSuccessDefault);
+  --border-color-success: var(--colorCalloutBorderSuccess);
 
-  --color-warning: #a23623;
-  --bg-color-warning: #fefae9;
-  --border-color-warning: #fc8431;
+  --color-warning: var(--colorCalloutTextWarning);
+  --bg-color-warning: var(--colorCalloutBackgroundWarningDefault);
+  --border-color-warning: var(--colorCalloutBorderWarning);
 
-  --color-problem: #931919;
-  --bg-color-problem: #fff2ee;
-  --border-color-problem: #ff4848;
+  --color-problem: var(--colorCalloutTextDanger);
+  --bg-color-problem: var(--colorCalloutBackgroundDangerDefault);
+  --border-color-problem: var(--colorCalloutBorderDanger);
 
   --duration-default: 300ms;
 
   --code-color: var(--color-text);
-  --code-background: var(--blue-100);
+  --code-background: var(--colorBackgroundSecondaryDefault);
 
-  /* Backgrounds TODO - update with design system */
-  --background-light: var(--blue-100);
-  --background-default: var(--white);
+  /* Backgrounds */
+  --background-light: var(--colorBackgroundSecondaryDefault);
+  --background-default: var(--colorBackgroundPrimaryDefault);
 
-  /* Borders TODO - update with design system */
-  --border-default-color: var(--blue-200);
+  /* Borders */
+  --border-default-color: var(--colorBorderPrimary);
 
   /* Separator */
-  --separator-color: #dae2e9;
+  --separator-color: var(--colorBorderPrimary);
 
   /* Scrollbar */
-  --scrollbar-color: #a9bbcb;
+  --scrollbar-color: var(--navy-300);
 
   /* Icon Tile */
   --icon-tile-border: var(--border-default-color);
@@ -158,7 +152,7 @@
   --icon-tile-shadow: 0px 4px 10px 0px rgba(13, 128, 216, 0.2);
 
   /* Article header */
-  --header-separator-color: var(--navy-200);
+  --header-separator-color: var(--colorBorderPrimary);
   --header-icon-border: var(--border-default-color);
   --header-icon-background: var(--background-light);
 
@@ -187,10 +181,10 @@
   --hamburger-translate-y: calc(
     var(--hamburger-line-height) + var(--hamburger-line-margin)
   );
-  --hamburger-lines-color: var(--blue-grey-light);
+  --hamburger-lines-color: var(--colorIconPrimary);
 
   /* Theme Switcher */
-  --theme-switcher-border: var(--navy-200);
+  --theme-switcher-border: var(--colorBorderPrimary);
 
   /* Badge */
   --badge-background: rgba(162, 209, 244, 0.2);
@@ -204,8 +198,7 @@
 
   /* To be checked and cleaned */
 
-  --octo-blue: var(--blue-500);
-  --lightest-blue: #e5f4ffff;
+  --octo-blue: var(--colorTextLinkDefault);
   --octo-blue-lighter: #2f95e3ff;
   --octo-blue-lightest: #1fc0ffff;
 
@@ -218,13 +211,10 @@
   --bold-font: var(--font-family);
   --code-font: Consolas, monaco, monospace;
 
-  --header-bg: var(--white);
-  --header-icon-stroke: var(--blue-grey-light);
+  --header-bg: var(--colorBackgroundPrimaryDefault);
   --header-link-color: var(--octo-blue);
   --header-link-alt: var(--blue-gray-darker);
-  --header-link-alt-bg: var(--blue-grey-smoke);
 
-  --image-bg: var(--blue-grey-smoke);
   --content-bg: var(--white);
 
   --body-link-color: var(--octo-blue);
@@ -233,7 +223,7 @@
   --footer-link-color: var(--navy-200);
 
   --icon-stroke: var(--white);
-  --icon-fill: var(--blue-grey-light);
+  --icon-fill: var(--colorIconSecondary);
 
   --octopus-logo-text-color: #0f2535;
 
@@ -263,50 +253,32 @@
 }
 
 html[data-theme='dark'] {
-  --color-base-primary: #10202e;
-  --color-menu-link: var(--navy-300);
-  --color-menu-link-active: var(--navy-100);
-  --bg-color-menu: #0c1a24;
+  /* The navigation matches the page in dark, unlike light */
+  --bg-color-menu: var(--colorBackgroundPrimaryDefault);
   --bg-color-menu-open: var(--blue-grey-dark);
-  --border-color-menu-open: var(--navy-700);
-  --header-bg: var(--blue-grey-dark);
-  --color-text: #dae2e9ff;
-  --color-heading: var(--white);
-  --color-subtitle: #f5f6f8;
   --body-link-alt: var(--white);
   --search-placeholder-color: var(--navy-400);
   --search-remove-icon-color: var(--white);
   --grey-lighter: var(--blue-grey-dark);
-  /* TODO: update this */
+  /* TODO: --navy-200 is still hand-themed because main.css uses it directly for
+     borders and one background (lines 112, 216, 262, 920, 2539). Point those at
+     --border-default-color / --bg-color-tab and this override can go. */
   --navy-200: #314c62;
-  --octo-blue: var(--octo-blue-lightest);
-  --border-color-header: var(--navy-700);
-  /* TODO: update this */
+  /* TODO: --blue-grey is hand-themed for .card__description (main.css:1016).
+     That is secondary text, so --color-text-secondary already covers it. */
   --blue-grey: #dae2e9ff;
   --header-link-alt: var(--color-text);
   --grey-light: var(--navy-700);
-  --color-menu-link-alt: var(--octo-blue-lightest);
-  --body-link-color: var(--octo-blue-lightest);
   --octopus-logo-text-color: var(--white);
-  --theme-switcher-border: var(--navy-700);
-  --color-hint: var(--color-text);
-  --bg-color-hint: rgba(13, 128, 216, 0.1);
-  --color-info: var(--color-text);
-  --bg-color-info: var(--blue-grey-light);
-  --hamburger-lines-color: var(--white);
   --footer-link-color: var(--color-menu-link);
   --search-overlay: rgba(12, 26, 36, 0.8);
-  --header-separator-color: var(--navy-700);
   --header-icon-border: transparent;
   --header-icon-background: var(--blue-grey-dark);
   --badge-background: rgba(31, 192, 255, 0.1);
   --badge-color: var(--octo-blue-lightest);
-  --color-text-secondary: #dae2e9;
-  --icon-tile-background: #132838;
+  --icon-tile-background: var(--colorBackgroundTertiary);
   --icon-tile-background-hover: #223950;
   --icon-tile-border: #1c3f59;
   --icon-tile-border-hover: var(--octo-blue-lightest);
   --icon-tile-shadow: 0px 6px 20px 0px var(--bg-color-menu);
-  --separator-color: var(--navy-700);
-  --code-background: #0c1a24;
 }