diff --git a/public/docs/css/main.css b/public/docs/css/main.css
index 4b395e5663..b38a68ae6a 100644
--- a/public/docs/css/main.css
+++ b/public/docs/css/main.css
@@ -25,10 +25,10 @@ body {
   font-family: var(--body-font);
   font-style: normal;
   font-weight: 400;
-  font-size: var(--font-size-medium);
+  font-size: var(--text-body-large);
   line-height: 1.6;
-  color: var(--color-text);
-  background-color: var(--color-base-primary);
+  color: var(--color-text-primary);
+  background-color: var(--color-background-primary-default);
   transition-property: background-color, color;
   transition-duration: var(--duration-default);
   transition-timing-function: ease-in-out;
@@ -66,7 +66,7 @@ button[data-share] {
 }
 
 hr {
-  border-bottom: 1px solid var(--header-separator-color);
+  border-bottom: 1px solid var(--color-border-primary);
 }
 
 .page-content a:not(.link) {
@@ -79,9 +79,9 @@ hr {
 }
 
 blockquote {
-  background: var(--bg-color-hint);
-  border-radius: var(--standard-radius);
-  font-size: var(--font-size-large);
+  background: var(--color-background-info);
+  border-radius: var(--radius-large);
+  font-size: var(--text-body-large);
   margin: var(--block-gap) 0;
   padding: 1.5rem 2.5rem 1.5rem 4.5rem;
   position: relative;
@@ -103,30 +103,41 @@ blockquote cite {
   text-align: end;
   margin-block-start: var(--block-gap);
   font-style: italic;
-  font-size: var(--font-size-regular);
+  font-size: var(--text-body-large);
 }
 
 /* TODO: Refactor code snippets. This needs to be a component. */
 code {
   font-family: var(--code-font);
-  background-color: var(--navy-200);
+  color: var(--color-code-text);
+  background-color: var(--color-code-background);
+  /* border: 1px solid var(--color-code-border); */
+  border-radius: var(--radius-medium);
+  padding: 0.2rem 0.3rem 0.1rem 0.3rem;
+  font-size: var(--text-body-large);
 }
 
 pre {
-  padding: 0.5rem 1rem;
+  padding: 0.75rem 1rem;
   white-space: break-spaces;
-  background-color: var(--code-background) !important;
-  border-radius: var(--standard-radius);
+  background-color: var(--color-code-block-background) !important;
+  border: 1px solid var(--color-code-block-border);
+  border-radius: var(--radius-large);
   font-family: var(--code-font);
-  color: var(--code-color);
 }
 
 pre code {
   background-color: unset;
+  border: unset;
+  white-space: initial;
+  padding: unset;
+  white-space: break-spaces;
+  font-size: var(--text-body-medium);
+  color: unset;
 }
 
 .dark pre {
-  background-color: var(--color-base-primary) !important;
+  background-color: var(--color-background-primary-default) !important;
   filter: invert(98%) hue-rotate(180deg);
 }
 
@@ -137,8 +148,8 @@ div.warning code:not(pre code),
 div.problem code:not(pre code),
 div.question code:not(pre code),
 div.hint code:not(pre code) {
-  background-color: var(--code-background);
-  color: var(--code-color);
+  background-color: var(--color-code-background);
+  color: var(--color-code-text);
 }
 
 html[data-theme='dark'] {
@@ -154,7 +165,7 @@ em {
 h1 {
   font-size: 2.75rem;
   line-height: 1.2;
-  font-weight: 800;
+  font-weight: 600;
   color: var(--color-heading);
   font-family: var(--heading-font);
   letter-spacing: -0.02em;
@@ -171,10 +182,10 @@ h3,
 h4,
 h5,
 h6 {
-  font-weight: 800;
+  font-weight: 600;
   line-height: 1.4;
-  color: var(--color-heading);
-  padding: 2rem 0 0.5rem 0;
+  color: var(--color-text-primary);
+  padding: 1.5rem 0 0 0;
   font-family: var(--heading-font);
   letter-spacing: -0.02em;
   transition: color var(--duration-default) ease-in-out;
@@ -185,23 +196,23 @@ h6 {
 }
 
 h2 {
-  font-size: var(--font-size-xlarge);
+  font-size: var(--text-heading-xlarge);
 }
 
 h3 {
-  font-size: var(--font-size-large);
+  font-size: var(--text-heading-large);
 }
 
 h4 {
-  font-size: var(--font-size-regular);
+  font-size: var(--text-heading-medium);
 }
 
 h5 {
-  font-size: var(--font-size-medium);
+  font-size: var(--text-heading-regular);
 }
 
 h6 {
-  font-size: var(--font-size-small);
+  font-size: var(--text-heading-regular);
 }
 
 img {
@@ -212,36 +223,28 @@ img {
 
 /* Image component */
 .image {
-  border-radius: 0.9375rem;
-  border: 0.0625rem solid var(--navy-200);
-  background: var(--grey-lighter);
+  border-radius: var(--radius-large);
+  border: 1px solid var(--color-image-border);
   display: flex;
   flex-direction: column;
   gap: 1.56rem;
-  padding: 2rem;
   position: relative;
 }
 
-@media (max-width: 930px) {
-  .image {
-    padding: 1rem;
-  }
-}
-
 .image .magnify-container {
   position: absolute;
   right: 0;
 }
 
 .image__img {
-  border-radius: 0.6875rem;
+  border-radius: var(--radius-large);
   box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
   width: fit-content;
   margin: 0 auto;
 }
 
 .image__caption {
-  color: var(--color-heading);
+  color: var(--color-text-secondary);
   font-size: 1.125rem;
   font-weight: 400;
   text-align: left;
@@ -251,18 +254,16 @@ img {
 figure > p > img {
   display: flex;
   margin: 0 auto;
-  border-radius: 0.9375rem;
+  border-radius: var(--radius-large);
 }
 
 figure:has(p > img) {
-  width: fit-content;
+  width: 100%;
 }
 
 figure:has(p > img) p {
-  border: 0.0625rem solid var(--navy-200);
-  border-radius: 0.9375rem;
-  background: var(--grey-lighter);
-  padding: 2rem;
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--radius-large);
 }
 
 @media (max-width: 930px) {
@@ -320,51 +321,51 @@ strong {
 .success,
 .warning,
 .problem {
-  border-radius: 0 var(--standard-radius) var(--standard-radius) 0;
+  border-radius: 0 var(--radius-large) var(--radius-large) 0;
   margin: var(--block-gap) 0;
-  padding: 1.5rem;
+  padding: 1.25rem;
   border-inline-start: 3px solid #000;
 }
 
 .hint {
-  color: var(--color-hint);
-  border-color: var(--border-color-hint);
-  background-color: var(--bg-color-hint);
+  color: var(--color-callout-text-info);
+  border-color: var(--color-callout-border-info);
+  background-color: var(--color-callout-background-info);
 }
 
 .info {
-  color: var(--color-info);
-  border-color: var(--border-color-info);
-  background-color: var(--bg-color-info);
+  color: var(--color-callout-text-info);
+  border-color: var(--color-callout-border-info);
+  background-color: var(--color-callout-background-info);
 }
 
 .success {
-  color: var(--color-success);
-  border-color: var(--border-color-success);
-  background-color: var(--bg-color-success);
+  color: var(--color-callout-text-success);
+  border-color: var(--color-callout-border-success);
+  background-color: var(--color-callout-background-success);
 }
 
 .warning {
-  color: var(--color-warning);
-  border-color: var(--border-color-warning);
-  background-color: var(--bg-color-warning);
+  color: var(--color-callout-text-warning);
+  border-color: var(--color-callout-border-warning);
+  background-color: var(--color-callout-background-warning);
 }
 
 .problem {
-  color: var(--color-problem);
-  border-color: var(--border-color-problem);
-  background-color: var(--bg-color-problem);
+  color: var(--color-callout-text-danger);
+  border-color: var(--color-callout-border-danger);
+  background-color: var(--color-callout-background-danger);
 }
 
 .question {
-  background: var(--bg-color-hint);
-  border-radius: var(--standard-radius);
+  background: var(--color-callout-text-info);
+  border-radius: var(--radius-large);
   margin: var(--block-gap) 0;
   padding: 1.5rem;
 }
 
 .question .answer {
-  font-size: var(--font-size-large);
+  font-size: var(--text-body-large);
   font-weight: bold;
   padding-block-start: 0.5em;
 }
@@ -378,7 +379,7 @@ strong {
 }
 
 .bookmark-link {
-  border-radius: var(--standard-radius);
+  border-radius: var(--radius-large);
   color: var(--fore-link);
   display: inline-block;
   font-size: 1.2rem;
@@ -412,31 +413,47 @@ h6:hover .bookmark-link,
 
 .table-wrap {
   overflow: auto;
-  max-width: 100%;
+  width: 100%;
+  border-radius: var(--radius-large);
+  border: 1px solid var(--color-table-border);
 }
 
 table {
   border-collapse: collapse;
+  width: 100%;
+  font-size: var(--text-body-medium);
 }
 
 table thead {
-  font-weight: 700;
+  background-color: var(--color-table-background-head);
+  border-bottom: 1px solid var(--color-table-border);
+  font-weight: 600;
 }
 
 table tr {
-  border-bottom: 1px solid var(--octo-blue);
+  border-bottom: 1px solid var(--color-table-border);
+}
+
+table tr:last-child {
+  border-bottom: none;
 }
 
 table td {
-  padding: 0.8rem 1rem;
+  padding: 0.5rem 0.7rem;
+  border-right: 1px solid var(--color-table-border);
 }
 
-table tr td:first-child {
-  background-color: var(--bg-color-hint);
+table td:last-child {
+  border-right: none;
 }
 
 table th {
-  padding: 0.8rem 1rem;
+  padding: 0.5rem 0.7rem;
+  text-align: left;
+}
+
+.table-hint {
+  color: var(--color-text-tertiary);
 }
 
 .credits table,
@@ -508,15 +525,14 @@ nav.skip-links a:focus {
 /* Site Header */
 
 .octo-header-bkg {
-  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
-  background-color: var(--header-bg);
+  border-bottom: 1px solid var(--color-border-primary);
   min-height: 82px;
   position: fixed;
   width: 100%;
   top: 0;
   /* z-index due to conflict with octo-title-bkg */
   z-index: 11;
-  background-color: var(--color-base-primary);
+  background-color: var(--color-background-primary-default);
   transition: background-color var(--duration-default) ease-in-out;
 
   @media (prefers-reduced-motion: reduce) {
@@ -526,7 +542,7 @@ nav.skip-links a:focus {
 
 .octo-header {
   margin-inline: var(--page-inline-margin);
-  font-size: var(--font-size-medium);
+  font-size: var(--text-body-large);
   z-index: 10;
   display: flex;
   justify-content: space-between;
@@ -569,7 +585,7 @@ nav.skip-links a:focus {
 }
 
 .octo-site-nav a {
-  border-radius: var(--standard-radius);
+  border-radius: var(--radius-large);
   text-decoration: none;
   color: var(--color-menu-link);
   padding: 0.6em 1em;
@@ -699,7 +715,7 @@ nav.skip-links a:focus {
 
 .theme-switcher__icon {
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 600;
   display: flex;
   align-items: center;
   gap: 0.25rem;
@@ -734,7 +750,7 @@ nav.skip-links a:focus {
 /* */
 
 .last-updated {
-  color: var(--color-subtitle);
+  color: var(--color-text-secondary);
   margin-block-start: var(--block-gap);
 }
 
@@ -748,7 +764,7 @@ nav.skip-links a:focus {
 .separator {
   width: 100%;
   height: 0.0625rem;
-  background-color: var(--separator-color);
+  background-color: var(--color-border-primary);
   margin: 3rem 0 3.75rem;
   transition: background-color var(--duration-default) ease-in-out;
 
@@ -843,11 +859,10 @@ nav.skip-links a:focus {
 }
 
 .article-nav__title {
-  color: var(--color-heading);
+  color: var(--color-text-secondary);
   font-family: var(--bold-font);
-  font-size: var(--font-size-medium);
-  font-weight: 700;
-  text-transform: uppercase;
+  font-size: var(--text-body-large);
+  font-weight: 600;
   text-decoration: none;
   transition: color var(--duration-default) ease-in-out;
 
@@ -874,8 +889,8 @@ nav.skip-links a:focus {
 
 .article-nav__link {
   display: flex;
-  color: var(--color-subtitle);
-  font-size: var(--font-size-medium);
+  color: var(--color-text-secondary);
+  font-size: var(--text-body-large);
   line-height: 1.5rem;
   font-weight: 400;
   text-decoration: none;
@@ -890,7 +905,6 @@ nav.skip-links a:focus {
 
 .article-nav__link.highlight,
 .article-nav__item:hover .article-nav__link {
-  font-weight: 600;
   color: var(--badge-color);
 }
 
@@ -967,7 +981,7 @@ nav.skip-links a:focus {
   color: var(--color-text);
   font-family: var(--bold-font);
   font-size: var(--font-size-large);
-  font-weight: 700;
+  font-weight: 600;
 }
 
 .card__image {
@@ -1011,7 +1025,7 @@ nav.skip-links a:focus {
 }
 
 .card__description {
-  font-size: var(--font-size-medium);
+  font-size: var(--text-body-large);
   font-weight: 400;
   color: var(--blue-grey);
 }
@@ -1157,7 +1171,8 @@ nav.skip-links a:focus {
 }
 
 .site-nav {
-  background-color: var(--bg-color-menu);
+  border-right: 1px solid var(--color-border-primary);
+  background-color: var(--color-background-primary-default);
   height: calc(100vh - 82px);
   top: 82px;
   transition: background-color var(--duration-default) ease-in-out;
@@ -1204,15 +1219,15 @@ nav.skip-links a:focus {
   display: block;
   text-decoration: none;
   color: var(--color-menu-link);
-  border-radius: var(--standard-radius);
-  font-size: var(--font-size-medium);
+  border-radius: var(--radius-large);
+  font-size: var(--text-body-large);
   font-weight: 400;
 }
 
 .site-nav .sub-nav[open] > .sub-nav__summary .sub-nav__summary-title {
   color: var(--color-menu-link-active);
   font-family: var(--bold-font);
-  font-weight: 700;
+  font-weight: 600;
 }
 
 .site-nav a,
@@ -1463,7 +1478,7 @@ li.has-children .sub-nav ul li:focus > a {
   gap: 1.62rem;
   align-items: center;
   padding-bottom: 2rem;
-  border-bottom: 1px solid var(--header-separator-color);
+  border-bottom: 1px solid var(--color-border-primary);
   margin-bottom: 1.56rem;
   transition: border-color var(--duration-default) ease-in-out;
 
@@ -1534,9 +1549,9 @@ li.has-children .sub-nav ul li:focus > a {
 }
 
 .header__title {
-  color: var(--color-text);
-  font-size: var(--font-size-title);
-  font-weight: 700;
+  color: var(--color-text-primary);
+  font-size: var(--text-heading-xxlarge);
+  font-weight: 600;
   transition: color var(--duration-default) ease-in-out;
 
   @media (prefers-reduced-motion: reduce) {
@@ -1545,7 +1560,7 @@ li.has-children .sub-nav ul li:focus > a {
 }
 
 .header__subtitle {
-  color: var(--color-subtitle);
+  color: var(--color-text-secondary);
   font-size: var(--font-size-subtitle);
   transition: color var(--duration-default) ease-in-out;
 
@@ -1599,7 +1614,7 @@ li.has-children .sub-nav ul li:focus > a {
 .page-toc details summary {
   text-decoration: none;
   font-weight: bold;
-  font-size: var(--font-size-medium);
+  font-size: var(--text-body-large);
 }
 
 .page-toc details summary::marker {
@@ -1673,7 +1688,7 @@ li.has-children .sub-nav ul li:focus > a {
 
 .post-meta p {
   margin-block-start: 3%;
-  font-size: var(--font-size-medium);
+  font-size: var(--text-body-large);
 }
 
 .author-info {
@@ -1685,7 +1700,7 @@ li.has-children .sub-nav ul li:focus > a {
 }
 
 .author-list time {
-  font-size: var(--font-size-medium);
+  font-size: var(--text-body-large);
   color: var(--grey);
 }
 
@@ -1705,7 +1720,7 @@ li.has-children .sub-nav ul li:focus > a {
 .search-dialog {
   margin: auto;
   padding: 2rem 3rem;
-  border-radius: var(--standard-radius);
+  border-radius: var(--radius-large);
   box-shadow: var(--box-shadow);
   height: calc(90vh - 4em);
   width: calc(80vw - 6em);
@@ -1770,7 +1785,7 @@ li.has-children .sub-nav ul li:focus > a {
 .post-taxonomy li a {
   background-color: var(--menu-link-bg);
   color: var(--body-link-alt);
-  border-radius: var(--standard-radius);
+  border-radius: var(--radius-large);
   padding: 0.3rem 0.5rem;
   text-decoration: none;
 }
@@ -1817,8 +1832,8 @@ li.has-children .sub-nav ul li:focus > a {
   background-image: url(https://img.youtube.com/vi/VOWnhMxJMMk/0.jpg);
   background-position: center;
   background-size: cover;
-  border-radius: var(--standard-radius);
-  box-shadow: var(--octo-shadow-standard-box);
+  border-radius: var(--radius-large);
+  border: 1px solid var(--color-border-primary);
   color: var(--fore-link);
   font-size: 5em;
 }
@@ -1928,13 +1943,13 @@ a[data-youtube] {
 }
 
 .article-journey__label {
-  font-size: var(--font-size-medium);
+  font-size: var(--text-body-large);
   font-weight: 400;
 }
 
 .article-journey__title {
   font-size: var(--font-size-large);
-  font-weight: 700;
+  font-weight: 600;
 }
 
 /* Related articles */
@@ -1964,7 +1979,7 @@ a[data-youtube] {
 .octo-related li {
   box-shadow: 0px 14px 20px rgba(0, 0, 0, 0.25);
   padding: 1px;
-  border-radius: var(--standard-radius);
+  border-radius: var(--radius-large);
   background:
     linear-gradient(var(--color-text), var(--color-text)) padding-box,
     linear-gradient(to bottom, #173045 80%, #0cb0f2) border-box;
@@ -1972,7 +1987,7 @@ a[data-youtube] {
 }
 
 .octo-related img {
-  border-radius: var(--standard-radius);
+  border-radius: var(--radius-large);
 }
 
 .octo-related h3 {
@@ -1982,7 +1997,7 @@ a[data-youtube] {
 }
 
 .octo-related a {
-  font-size: var(--font-size-medium);
+  font-size: var(--text-body-large);
   color: var(--octo-blue-lightest);
 }
 
@@ -2005,11 +2020,11 @@ a[data-youtube] {
 
 .post-list li {
   box-shadow: 0px 14px 20px rgb(0 0 0 / 25%);
-  border-radius: var(--standard-radius);
+  border-radius: var(--radius-large);
 }
 
 .post-list article {
-  border-radius: var(--standard-radius);
+  border-radius: var(--radius-large);
   padding: 0.5rem;
 }
 
@@ -2025,7 +2040,7 @@ a[data-youtube] {
 }
 
 .post-list img {
-  border-radius: var(--standard-radius);
+  border-radius: var(--radius-large);
 }
 
 .post-list .post-meta {
@@ -2090,7 +2105,7 @@ a[data-youtube] {
 
 .site-footer nav {
   text-align: center;
-  font-size: var(--font-size-medium);
+  font-size: var(--text-body-large);
 }
 
 .site-footer nav a:after {
@@ -2423,12 +2438,12 @@ a[data-youtube] {
 .result-title {
   color: var(--color-text);
   font-size: var(--font-size-large);
-  font-weight: 700;
+  font-weight: 600;
 }
 
 .result-description {
   color: var(--color-heading);
-  font-size: var(--font-size-medium);
+  font-size: var(--text-body-large);
   font-weight: 400;
 }
 
@@ -2705,19 +2720,28 @@ a[data-youtube] {
   padding-inline-end: 1em;
 }
 
-.fa-heart.green, .fa-check.green, .fa-plus-square.green  {
+.fa-heart.green,
+.fa-check.green,
+.fa-plus-square.green {
   color: var(--green-500);
 }
 
-.fa-circle-notch.blue , .fa-hourglass.blue, .fa-arrows-rotate.blue {
+.fa-circle-notch.blue,
+.fa-hourglass.blue,
+.fa-arrows-rotate.blue {
   color: var(--blue-500);
 }
 
-.fa-circle-exclamation.red, .fa-heart-crack.red, .fa-minus-square.red {
+.fa-circle-exclamation.red,
+.fa-heart-crack.red,
+.fa-minus-square.red {
   color: var(--red-500);
 }
 
-.fa-question.grey, .fa-ghost.grey, .fa-pause.grey, .fa-equals.grey {
+.fa-question.grey,
+.fa-ghost.grey,
+.fa-pause.grey,
+.fa-equals.grey {
   color: var(--grey-500);
 }
 
@@ -2741,10 +2765,15 @@ a[data-youtube] {
 }
 
 .copy-button {
-  stroke: var(--icon-stroke);
-  fill: var(--icon-fill);
+  stroke: var(--color-copy-icon-stroke);
+  fill: var(--color-copy-icon-fill);
   background-color: transparent;
   cursor: pointer;
+  transition: var(--duration-default);
+}
+
+.copy-button:hover {
+  fill: var(--color-copy-icon-fill-hover);
 }
 
 .magnify-container {
@@ -2759,15 +2788,18 @@ a[data-youtube] {
 
 .magnify-icon {
   opacity: 0;
-  border-radius: 0.2rem;
-  color: var(--body-link-color);
+  border-radius: var(--radius-circle);
+  color: var(--color-icon-info);
   display: inline-block;
   cursor: pointer;
-  background-color: var(--color-base-primary);
-  border-radius: 50%;
+  background-color: var(--color-background-primary-default);
+  border: 1px solid var(--color-border-primary);
   padding: 2px;
   width: 2.6rem;
   height: 2.6rem;
+  transition-duration: 250ms;
+  transition-property: background;
+  transition-timing-function: ease-in-out;
 }
 
 .input-touch .magnify-icon {
@@ -2790,8 +2822,8 @@ figure:focus .magnify-icon {
 .magnify-icon:focus,
 .magnify-icon:focus-within {
   stroke: var(--fore-link);
-  transform: rotate(4deg);
   opacity: 1;
+  background-color: var(--color-background-secondary-default);
 }
 
 /* Custom Divisions */
@@ -2901,7 +2933,7 @@ figure:focus .magnify-icon {
 
 .rec-book.rec-full-width {
   background: var(--bg-color-hint);
-  border-radius: var(--standard-radius);
+  border-radius: var(--radius-large);
   margin: var(--block-gap) 0;
   padding: 1.5rem;
 }
@@ -2928,7 +2960,7 @@ figure:focus .magnify-icon {
 
 .rec-list figure {
   padding: 1rem;
-  border-radius: var(--standard-radius);
+  border-radius: var(--radius-large);
   background: var(--color-base-primary);
   box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
   height: 287px;
@@ -2998,8 +3030,8 @@ a.button {
   justify-content: center;
   align-items: center;
   font-family: var(--bold-font);
-  font-size: var(--font-size-medium);
-  font-weight: 700;
+  font-size: var(--text-body-large);
+  font-weight: 600;
   line-height: 1.38rem;
   border-radius: 0.5rem;
   border-width: 0.0625rem;
@@ -3051,7 +3083,7 @@ a.button.button--primary:active {
 /* Detail tabs */
 
 .tab-list {
-  padding-inline: 10px;
+  padding-inline: 0px;
   margin-block-end: 0;
 }
 
@@ -3061,28 +3093,24 @@ a.button.button--primary:active {
   display: inline-block;
   position: relative;
   z-index: 2;
-  top: 2px;
-  margin: 0;
   margin-block-start: 4px;
-  border: 2px solid var(--border-color-tab);
-  border-radius: var(--standard-radius) var(--standard-radius) 0 0;
-  background: var(--bg-color-tab);
+  background: transparent;
   outline: none;
-  font-size: var(--font-size-small);
-  font-weight: bold;
+  font-size: var(--text-body-medium);
+  font-weight: 600;
   text-align: left;
   cursor: pointer;
-  color: var(--color-text);
+  color: var(--color-text-tertiary);
+}
+
+.tab-list button:hover {
+  color: var(--color-text-primary);
 }
 
 .tab-list button[aria-selected='true'] {
   margin-block-start: 0;
-  border-width: 2px;
-  border-top-width: 6px;
-  border-top-color: var(--border-color-tab-active);
-  border-inline-color: var(--border-color-tab-active);
-  border-bottom-color: var(--color-base-primary);
-  background-color: var(--color-base-primary);
+  border-bottom: 3px solid var(--color-tab--border-active);
+  color: var(--color-tab--text-active);
 }
 
 .tab-list button[aria-selected='false'] {
@@ -3092,17 +3120,14 @@ a.button.button--primary:active {
 .tab-list button span.focus {
   display: inline-block;
   margin: 2px;
-  padding: 4px 6px;
+  padding: 8px 12px;
   outline: none;
 }
 
 [role='tabpanel'] {
   position: relative;
-  padding: 1rem;
-  border: 2px solid var(--border-color-tab-active);
-  border-radius: var(--standard-radius);
-  background: var(--aft);
-  overflow: auto;
+  border-top: 1px solid var(--color-border-primary);
+  padding-top: 1rem;
 }
 
 [role='tabpanel'].is-hidden {
diff --git a/public/docs/css/vars.css b/public/docs/css/vars.css
index 15b001edd3..40b7b02ed7 100644
--- a/public/docs/css/vars.css
+++ b/public/docs/css/vars.css
@@ -30,17 +30,76 @@
   --black: #000000ff;
   --white: #ffffffff;
 
-  --navy-700: #2e475dff;
-  --navy-600: #3e607dff;
-  --navy-400: #7c98b4ff;
-  --navy-300: #a9bbcbff;
-  --navy-200: #dae2e9ff;
   --navy-100: #f4f6f8ff;
+  --navy-200: #dae2e9ff;
+  --navy-300: #a9bbcbff;
+  --navy-400: #7c98b4ff;
+  --navy-500: #557999;
+  --navy-600: #3e607dff;
+  --navy-700: #2e475dff;
+  --navy-800: #1f303fff;
+  --navy-900: #111a23ff;
 
-  --blue-500: #1a77ca;
-  --blue-200: #cde4f7;
-  --blue-100: #f2f8fd;
   --blue-qqq: #fafdff;
+  --blue-100: #f2f8fdff;
+  --blue-200: #cde4f7ff;
+  --blue-300: #87bfecff;
+  --blue-400: #449be1ff;
+  --blue-500: #1a77caff;
+  --blue-600: #155ea0ff;
+  --blue-700: #0f4778ff;
+  --blue-800: #093051ff;
+  --blue-900: #041a2dff;
+
+  --orange-100: #fff5edff;
+  --orange-200: #ffdabfff;
+  --orange-300: #ffa461ff;
+  --orange-400: #ea7325ff;
+  --orange-500: #c45317ff;
+  --orange-600: #a13c14ff;
+  --orange-700: #7e2812ff;
+  --orange-800: #59170dff;
+  --orange-900: #340b07ff;
+
+  --yellow-100: #fff7d9ff;
+  --yellow-200: #ffdf62ff;
+  --yellow-300: #e5b203ff;
+  --yellow-400: #b98f02ff;
+  --yellow-500: #927002ff;
+  --yellow-600: #745801ff;
+  --yellow-700: #584201ff;
+  --yellow-800: #3b2c00ff;
+  --yellow-900: #201800ff;
+
+  --red-100: #fff3f3ff;
+  --red-200: #ffd8d8ff;
+  --red-300: #ff9f9fff;
+  --red-400: #ff5d5dff;
+  --red-500: #d63d3dff;
+  --red-600: #aa3030ff;
+  --red-700: #802424ff;
+  --red-800: #571818ff;
+  --red-900: #310e0eff;
+
+  --green-100: #eefaf5ff;
+  --green-200: #b8e7d3ff;
+  --green-300: #5ecd9eff;
+  --green-400: #00ab62ff;
+  --green-500: #00874dff;
+  --green-600: #006a3dff;
+  --green-700: #00502eff;
+  --green-800: #00361fff;
+  --green-900: #001e11ff;
+
+  --slate-100: #f5f6f8ff;
+  --slate-200: #dee1e6ff;
+  --slate-300: #b2b9c5ff;
+  --slate-400: #8a96a7ff;
+  --slate-500: #68778dff;
+  --slate-600: #515d70ff;
+  --slate-700: #3d4653ff;
+  --slate-800: #282f38ff;
+  --slate-900: #16191fff;
 
   /* TODO: remove green-400 as it's being used in one place only */
   --green-400: #00ab62;
@@ -48,11 +107,6 @@
   --green: #00e693ff;
   --light-green: #00ffa3ff;
 
-  --red-500: #d63d3d;
-
-  --orange-400: #ea7325;
-  --orange-500: #c45317;
-
   --blue-midnight-dark: #070e14ff;
   --blue-midnight-darker: #0a202fff;
   --blue-midnight: #10212fff;
@@ -71,18 +125,10 @@
   --grey-light: #eef0f2ff;
   --grey-lighter: var(--navy-100);
 
-  --font-size-xxlarge: 1.625rem;
-  --font-size-xlarge: 1.5rem;
-  --font-size-large: 1.25rem;
-  --font-size-regular: 1.125rem;
-  --font-size-medium: 1rem;
-  --font-size-small: 0.875rem;
-
   --color-base-primary: var(--white);
 
   --color-text: var(--blue-midnight);
   --color-heading: var(--blue-grey-dark);
-  --color-text-secondary: var(--navy-700);
 
   --color-subtitle: var(--navy-600);
   --font-size-subtitle: var(--font-size-large);
@@ -101,42 +147,137 @@
 
   --navigation-width: 21.25rem;
 
-  --bg-color-tab: var(--navy-200);
-  --border-color-tab: var(--navy-200);
-  --border-color-tab-active: var(--navy-400);
-
-  --color-hint: #124164;
-  --bg-color-hint: var(--lightest-blue);
-  --border-color-hint: var(--blue-500);
-
-  --color-info: #124164;
-  --bg-color-info: var(--lightest-blue);
-  --border-color-info: var(--blue-500);
-
-  --color-success: #04502f;
-  --bg-color-success: #e8ffeb;
-  --border-color-success: #00b065;
-
-  --color-warning: #a23623;
-  --bg-color-warning: #fefae9;
-  --border-color-warning: #fc8431;
+  --duration-default: 300ms;
 
-  --color-problem: #931919;
-  --bg-color-problem: #fff2ee;
-  --border-color-problem: #ff4848;
+  /* Font sizes */
+  --text-heading-xxlarge: 30px;
+  --text-heading-xlarge: 24px;
+  --text-heading-large: 20px;
+  --text-heading-medium: 18px;
+  --text-heading-regular: 16px;
 
-  --duration-default: 300ms;
+  --text-body-large: 16px;
+  --text-body-medium: 14px;
+  --text-body-small: 13px;
+  --text-body-xSmall: 12px;
 
-  --code-color: var(--color-text);
-  --code-background: var(--blue-100);
+  /* Font sizes to phase out */
+  --font-size-xxlarge: 1.625rem;
+  --font-size-xlarge: 1.5rem;
+  --font-size-large: 1.25rem;
+  --font-size-regular: 1.125rem;
+  --font-size-medium: 1rem;
+  --font-size-small: 0.875rem;
 
-  /* Backgrounds TODO - update with design system */
+  /* Radius */
+  --radius-small: 2px;
+  --radius-medium: 4px;
+  --radius-large: 8px;
+  --radius-xLarge: 16px;
+  --radius-circle: 999px;
+
+  /* Background */
+  --color-background-primary-default: var(--white);
+  --color-background-primary-hover: var(--slate-100);
+  --color-background-secondary-default: var(--slate-100);
+  --color-background-secondary-hover: var(--slate-200);
+  --color-background-tertiary: var(--slate-200);
+  --color-background-info: var(--blue-100);
+  --color-background-success: var(--green-100);
+  --color-background-warning: var(--yellow-100);
+  --color-background-danger: var(--red-100);
+  /* Backgrounds to phase out */
   --background-light: var(--blue-100);
   --background-default: var(--white);
 
-  /* Borders TODO - update with design system */
+  /* Border */
+  --color-border-primary: var(--slate-200);
+  --color-border-secondary: var(--slate-100);
+  --color-border-tertiary: var(--slate-300);
+  --color-border-info: var(--blue-500);
+  --color-border-success: var(--green-500);
+  --color-border-warning: var(--yellow-300);
+  --color-border-danger: var(--red-500);
+  --color-border-active: var(--blue-500);
+  /* Borders to phase out */
   --border-default-color: var(--blue-200);
 
+  /* Text */
+  --color-text-primary: var(--slate-800);
+  --color-text-secondary: var(--slate-600);
+  --color-text-tertiary: var(--slate-500);
+  --color-text-info-light: var(--blue-500);
+  --color-text-info: var(--blue-700);
+  --color-text-success: var(--green-700);
+  --color-text-warning: var(--yellow-700);
+  --color-text-danger: var(--red-700);
+  --color-text-active: var(--blue-500);
+  --color-text-link-default: var(--blue-500);
+  --color-text-link-hover: var(--blue-600);
+  --color-text-link-inverse-default: var(--blue-300);
+  --color-text-link-inverse-hover: var(--blue-400);
+
+  /* Icon */
+  --color-icon-primary: var(--slate-800);
+  --color-icon-secondary: var(--slate-600);
+  --color-icon-tertiary: var(--slate-300);
+  --color-icon-info: var(--blue-400);
+  --color-icon-success: var(--green-400);
+  --color-icon-warning: var(--yellow-400);
+  --color-icon-danger: var(--red-500);
+
+  /* Icon */
+  --color-icon-primary: var(--slate-800);
+  --color-icon-secondary: var(--slate-600);
+  --color-icon-tertiary: var(--slate-300);
+  --color-icon-info: var(--blue-400);
+  --color-icon-success: var(--green-400);
+  --color-icon-warning: var(--yellow-400);
+  --color-icon-danger: var(--red-500);
+
+  /* Table */
+  --color-table-background-head: var(--color-background-secondary-default);
+  --color-table-border: var(--color-border-primary);
+
+  /* Code */
+  --color-code-text: var(--color-text-primary);
+  --color-code-background: var(--color-background-tertiary);
+  --color-code-border: var(--color-border-primary);
+
+  /* Code block */
+  --color-code-block-background: var(--color-background-secondary-default);
+  --color-code-block-border: var(--color-border-primary);
+
+  /* Copy icon */
+  --color-copy-icon-stroke: var(--color-icon-secondary);
+  --color-copy-icon-fill: var(--color-background-secondary-default);
+  --color-copy-icon-fill-hover: var(--color-background-tertiary);
+
+  /* Callout */
+  --color-callout-text-hint: var(--color-text-info);
+  --color-callout-background-hint: var(--color-background-info);
+  --color-callout-border-hint: var(--color-border-info);
+
+  --color-callout-text-info: var(--color-text-info);
+  --color-callout-background-info: var(--color-background-info);
+  --color-callout-border-info: var(--color-border-info);
+
+  --color-callout-text-success: var(--color-text-success);
+  --color-callout-background-success: var(--color-background-success);
+  --color-callout-border-success: var(--color-border-success);
+
+  --color-callout-text-warning: var(--color-text-warning);
+  --color-callout-background-warning: var(--color-background-warning);
+  --color-callout-border-warning: var(--color-border-warning);
+
+  --color-callout-text-danger: var(--color-text-danger);
+  --color-callout-background-danger: var(--color-background-danger);
+  --color-callout-border-danger: var(--color-border-danger);
+
+  /* Tab */
+  --color-tab--border-active: var(--color-border-active);
+  --color-tab--text-active: var(--color-text-active);
+
   /* Separator */
   --separator-color: #dae2e9;
 
@@ -245,8 +386,6 @@
   --grid-max-width: 1250px;
   --grid-gap: 1rem;
   --grid-gap-main: 1rem;
-
-  --standard-radius: 0.5rem;
 }
 
 @media (max-width: 860px) {
@@ -282,10 +421,6 @@ html[data-theme='dark'] {
   --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);
@@ -294,13 +429,55 @@ html[data-theme='dark'] {
   --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-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;
   --scrollbar-color: var(--navy-300);
+
+  /* Text */
+  --color-text-primary: var(--navy-100);
+  --color-text-secondary: var(--navy-300);
+  --color-text-tertiary: var(--navy-400);
+  --color-text-info-light: var(--blue-300);
+  --color-text-info: var(--blue-100);
+  --color-text-success: var(--green-100);
+  --color-text-warning: var(--yellow-100);
+  --color-text-danger: var(--red-100);
+  --color-text-active: var(--blue-300);
+  --color-text-link-default: var(--blue-300);
+  --color-text-link-hover: var(--blue-400);
+
+  /* Background */
+  --color-background-primary-default: var(--navy-900);
+  --color-background-primary-hover: var(--navy-800);
+  --color-background-secondary-default: var(--navy-800);
+  --color-background-secondary-hover: var(--navy-700);
+  --color-background-tertiary: var(--navy-700);
+  --color-background-info: var(--blue-800);
+  --color-background-success: var(--green-800);
+  --color-background-warning: var(--yellow-800);
+  --color-background-danger: var(--red-800);
+
+  /* Border */
+  --color-border-primary: var(--navy-700);
+  --color-border-secondary: var(--navy-800);
+  --color-border-tertiary: var(--navy-600);
+  --color-border-info-light: var(--blue-300);
+  --color-border-info: var(--blue-600);
+  --color-border-success: var(--green-600);
+  --color-border-warning: var(--yellow-400);
+  --color-border-danger: var(--red-600);
+  --color-border-active: var(--blue-300);
+
+  /* Icon */
+  --color-icon-primary: var(--navy-100);
+  --color-icon-secondary: var(--navy-300);
+  --color-icon-tertiary: var(--navy-500);
+  --color-icon-info: var(--blue-300);
+  --color-icon-success: var(--green-300);
+  --color-icon-warning: var(--yellow-300);
+  --color-icon-danger: var(--red-400);
 }