--- a/browser/extensions/onboarding/content/onboarding.css
+++ b/browser/extensions/onboarding/content/onboarding.css
@@ -127,17 +127,17 @@
   background: none;
   padding: 0;
  }
 
 .onboarding-close-btn::before {
   content: url("chrome://global/skin/icons/close.svg");
   -moz-context-properties: fill, fill-opacity;
   fill-opacity: 0;
-  fill: currentColor;
+  fill: var(--newtab-icon-primary-color, currentColor);
 }
 
 .onboarding-close-btn:-moz-any(:hover, :active, :focus, :-moz-focusring)::before {
   fill-opacity: 0.1;
 }
 
 #onboarding-overlay.onboarding-opened > #onboarding-overlay-dialog {
   width: 960px;
@@ -461,26 +461,26 @@ a#onboarding-tour-screenshots-button,
 a#onboarding-tour-screenshots-button:hover,
 a#onboarding-tour-screenshots-button:visited {
   color: #fff;
   text-decoration: none;
 }
 
 /* Tour Notifications */
 #onboarding-notification-bar {
-  --onboarding-notification-bar-background-color: rgba(255, 255, 255, 0.97);
   position: fixed;
   z-index: 20998; /* We want this always under #onboarding-overlay */
   left: 0;
   bottom: 0;
   width: 100%;
   height: 100px;
   min-width: 640px;
-  background: var(--onboarding-notification-bar-background-color);
-  border-top: 2px solid #e9e9e9;
+  background: var(--newtab-snippets-background-color, rgba(255, 255, 255, 0.97));
+  border-top: 1px solid var(--newtab-snippets-hairline-color, #e9e9e9);
+  box-shadow: 0 -1px 4px 0 rgba(12, 12, 13, 0.1);
   transition: transform 0.8s;
   transform: translateY(122px);
 }
 
 #onboarding-notification-bar.onboarding-opened {
   transition: none;
   transform: translateY(0px);
 }
@@ -500,41 +500,40 @@ a#onboarding-tour-screenshots-button:vis
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }
 
 #onboarding-notification-body {
   width: 500px;
   margin: 0 18px;
-  color: #0c0c0d;
+  color: var(--newtab-text-primary-color, #0c0c0d);
   display: inline-block;
   max-height: 120px;
   overflow: auto;
   padding: 15px 0;
   box-sizing: border-box;
 }
 
 #onboarding-notification-body * {
   font-size: 12px;
   font-weight: normal;
   margin-top: 5px;
 }
 
 #onboarding-notification-tour-title {
   margin: 0;
   font-weight: bold;
-  color: var(--onboarding-notification-tour-title-color);
+  color: var(--newtab-text-primary-color, #0f1126);
   font-size: 14px;
-  --onboarding-notification-tour-title-color: #0f1126;
 }
 
 #onboarding-notification-tour-title::before {
   content: "";
-  background-color: var(--onboarding-notification-tour-title-color);
+  background-color: var(--newtab-text-primary-color, #0f1126);
   mask-repeat: no-repeat;
   mask-size: 14px;
   height: 16px;
   width: 16px;
   float: inline-start;
   margin-top: 2px;
   margin-inline-end: 2px;
 }
@@ -564,13 +563,27 @@ a#onboarding-tour-screenshots-button:vis
   background-color: #ebebeb;
   cursor: pointer;
 }
 
 .onboarding-action-button:active {
   background-color: #dadada;
 }
 
+#onboarding-notification-bar .onboarding-action-button {
+  background-color: var(--newtab-button-secondary-color);
+  border-color: var(--newtab-border-primary-color);
+  border-radius: 4px;
+  color: var(--newtab-text-primary-color);
+}
+
+#onboarding-notification-bar .onboarding-action-button:hover,
+#onboarding-notification-bar .onboarding-action-button:active {
+  background-color: var(--newtab-button-secondary-color);
+  box-shadow: 0 0 0 5px var(--newtab-card-active-outline-color);
+  transition: box-shadow 150ms;
+}
+
 @media (min-resolution: 2dppx) {
   #onboarding-notification-tour-icon {
     background-image: url("chrome://branding/content/icon128.png");
   }
 }