--- a/browser/base/content/abouthome/aboutHome.css
+++ b/browser/base/content/abouthome/aboutHome.css
@@ -2,18 +2,18 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 %endif
 
 html {
   font: message-box;
   font-size: 100%;
-  background-color: hsl(0,0%,95%);
-  color: #000;
+  background-color: #F9F9FA;
+  color: #0C0C0D;
   height: 100%;
 }
 
 body {
   margin: 0;
   display: -moz-box;
   -moz-box-orient: vertical;
   width: 100%;
@@ -30,139 +30,111 @@ a {
   color: -moz-nativehyperlinktext;
   text-decoration: none;
 }
 
 .spacer {
   -moz-box-flex: 1;
 }
 
-#topSection {
-  text-align: center;
-}
-
 #brandLogo {
   height: 192px;
   width: 192px;
   margin: 22px auto 31px;
   background-image: url("chrome://branding/content/about-logo.png");
   background-size: 192px auto;
   background-position: center center;
   background-repeat: no-repeat;
 }
 
-#searchIconAndTextContainer,
+#topSection {
+  text-align: center;
+  margin-top: -90px;
+}
+
+#brandLogo {
+  height: 192px;
+  width: 192px;
+  margin: 22px auto 20px;
+  background-image: url("chrome://branding/content/about-logo.png");
+  background-size: 192px auto;
+  background-position: center center;
+  background-repeat: no-repeat;
+}
+
+#searchWrapper,
 #snippets {
   width: 470px;
 }
 
-#searchIconAndTextContainer {
-  display: -moz-box;
-  height: 36px;
+#searchWrapper {
+  cursor: default;
+  display: flex;
   position: relative;
-}
-
-#searchIcon {
-  border: 1px transparent;
-  padding: 0;
-  margin: 0;
-  width: 36px;
+  margin: 0 auto;
   height: 36px;
-  background: url("chrome://browser/skin/search-indicator-magnifying-glass.svg") center center no-repeat;
-  position: absolute;
 }
 
 #searchText {
-  margin-left: 0;
-  -moz-box-flex: 1;
-  padding-top: 6px;
-  padding-bottom: 6px;
-  padding-inline-start: 34px;
-  padding-inline-end: 8px;
-  background: hsla(0,0%,100%,.9) padding-box;
-  border: 1px solid;
-  border-radius: 2px 0 0 2px;
-  border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.17) hsla(210,54%,20%,.2);
-  box-shadow: 0 1px 0 hsla(210,65%,9%,.02) inset,
-              0 0 2px hsla(210,65%,9%,.1) inset,
-              0 1px 0 hsla(0,0%,100%,.2);
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 3px;
+  box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.1);
   color: inherit;
-  unicode-bidi: plaintext;
+  padding: 0;
+  padding-inline-end: 36px;
+  padding-inline-start: 35px;
+  width: 100%;
+  font-size: 15px;
 }
 
-#searchText:dir(rtl) {
-  border-radius: 0 2px 2px 0;
-}
-
-#searchText[aria-expanded="true"] {
-  border-radius: 2px 0 0 0;
+#searchText:active,
+#searchText:focus {
+  border-color: #0A84FF;
+  box-shadow: 0 0 0 2px #0A84FF;
 }
 
-#searchText[aria-expanded="true"]:dir(rtl) {
-  border-radius: 0 2px 0 0;
-}
-
-#searchText[keepfocus],
-#searchText:focus,
-#searchText[autofocus] {
-  border-color: hsla(206,100%,60%,.6) hsla(206,76%,52%,.6) hsla(204,100%,40%,.6);
+#searchLabel {
+  background: url("chrome://browser/skin/search-glass.svg") no-repeat 12px center/16px;
+  fill: rgba(12, 12, 13, 0.4);
+  -moz-context-properties: fill;
+  position: absolute;
+  offset-inline-start: 0;
+  height: 35px;
+  width: 35px;
 }
 
 #searchSubmit {
-  margin-inline-start: -1px;
-  color: transparent;
-  background: url("chrome://browser/skin/search-arrow-go.svg") center center no-repeat, linear-gradient(hsla(0,0%,100%,.8), hsla(0,0%,100%,.1)) padding-box;
+  background: url("chrome://browser/skin/forward.svg") no-repeat center center;
+  border-radius: 0 3px 3px 0;
+  border: 0;
+  width: 36px;
+  fill: rgba(12, 12, 13, 0.4);
   -moz-context-properties: fill;
-  fill: #616366;
-  padding: 0;
-  border: 1px solid;
-  border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.17) hsla(210,54%,20%,.2) transparent;
-  border-radius: 0 2px 2px 0;
-  box-shadow: 0 0 2px hsla(0,0%,100%,.5) inset,
-              0 1px 0 hsla(0,0%,100%,.2);
+  background-size: 16px 16px;
+  height: 100%;
+  offset-inline-end: 0;
+  position: absolute;
+}
+
+#searchSubmit:focus, #searchSubmit:hover {
+  background-color: rgba(12, 12, 13, 0.1);
   cursor: pointer;
-  transition-property: background-color, border-color, box-shadow;
-  transition-duration: 150ms;
-  width: 50px;
+}
+
+#searchSubmit:active {
+  background-color: rgba(12, 12, 13, 0.15);
 }
 
 #searchSubmit:dir(rtl) {
   transform: scaleX(-1);
 }
 
-#searchText:focus + #searchSubmit,
-#searchText[keepfocus] + #searchSubmit,
-#searchText + #searchSubmit:hover,
-#searchText[autofocus] + #searchSubmit {
-  border-color: #59b5fc #45a3e7 #3294d5;
-}
-
-#searchText:focus + #searchSubmit,
-#searchText[keepfocus] + #searchSubmit,
-#searchText[autofocus] + #searchSubmit {
-  background-image: url("chrome://browser/skin/search-arrow-go.svg"), linear-gradient(#4cb1ff, #1793e5);
-  fill: white;
-  box-shadow: 0 1px 0 hsla(0,0%,100%,.2) inset,
-              0 0 0 1px hsla(0,0%,100%,.1) inset,
-              0 1px 0 hsla(210,54%,20%,.03);
-}
-
-#searchText + #searchSubmit:hover {
-  background-image: url("chrome://browser/skin/search-arrow-go.svg"), linear-gradient(#66bdff, #0d9eff);
-  fill: white;
-  box-shadow: 0 1px 0 hsla(0,0%,100%,.2) inset,
-              0 0 0 1px hsla(0,0%,100%,.1) inset,
-              0 1px 0 hsla(210,54%,20%,.03),
-              0 0 4px hsla(206,100%,20%,.2);
-}
-
-#searchText + #searchSubmit:hover:active {
-  box-shadow: 0 1px 1px hsla(211,79%,6%,.1) inset,
-              0 0 1px hsla(211,79%,6%,.2) inset;
-  transition-duration: 0ms;
+.contentSearchSuggestionTable {
+  border: 0;
+  transform: translateY(2px);
 }
 
 #defaultSnippet1,
 #defaultSnippet2,
 #rightsSnippet {
   display: block;
   min-height: 38px;
   background: 0 center no-repeat;
@@ -198,29 +170,29 @@ a {
      with Segoe UI on a default Windows 7 setup. The 15/12 multiplier approximately
      converts em from units of font-size to units of line-height. The goal is to
      preset the height of a three-line snippet to avoid visual moving/flickering as
      the snippets load. */
   min-height: calc(15/12 * 3em);
 }
 
 #launcher {
-  display: -moz-box;
+  display: none;
   -moz-box-align: center;
   -moz-box-pack: center;
   width: 100%;
   background-color: hsla(0,0%,0%,.03);
   border-top: 1px solid hsla(0,0%,0%,.03);
   box-shadow: 0 1px 2px hsla(0,0%,0%,.02) inset,
               0 -1px 0 hsla(0,0%,100%,.25);
 }
 
 #launcher:not([session]),
 body[narrow] #launcher[session] {
-  display: block; /* display separator and restore button on separate lines */
+  display: none; /* display separator and restore button on separate lines */
   text-align: center;
   white-space: nowrap; /* prevent navigational buttons from wrapping */
 }
 
 .launchButton {
   display: -moz-box;
   -moz-box-orient: vertical;
   margin: 16px 1px;
@@ -341,38 +313,16 @@ body[narrow] #restorePreviousSession {
 }
 
 body[narrow] #restorePreviousSession::before {
   content: url("chrome://browser/content/abouthome/restore.png");
   height: 32px;
   width: 32px;
 }
 
-#aboutMozilla {
-  display: block;
-  position: relative; /* pin wordmark to edge of document, not of viewport */
-  -moz-box-ordinal-group: 0;
-  opacity: .2;
-  transition: opacity 150ms;
-}
-
-#aboutMozilla:hover {
-  opacity: .6;
-}
-
-#aboutMozilla::before {
-  content: url("chrome://browser/content/abouthome/mozilla.svg");
-  display: block;
-  position: absolute;
-  top: 12px;
-  offset-inline-end: 12px;
-  width: 67px;
-  height: 19px;
-}
-
 /* [HiDPI]
  * At resolutions above 1dppx, prefer downscaling the 2x Retina graphics
  * rather than upscaling the original-size ones (bug 818940).
  */
 @media not all and (max-resolution: 1dppx) {
   #brandLogo {
     background-image: url("chrome://branding/content/about-logo@2x.png");
   }
@@ -432,8 +382,63 @@ body[narrow] #restorePreviousSession::be
     content: url("chrome://browser/content/abouthome/restore@2x.png");
   }
 
   #restorePreviousSession:dir(rtl)::before {
     transform: scale(-0.5, 0.5) translateX(24px);
     transform-origin: top center;
   }
 }
+
+/* Overrides for onboarding
+   These overrides hide the Firefox logo (since about:home has a
+   large logo already) and make the helper icon larger */
+
+#about-home #onboarding-notification-body,
+#about-home #onboarding-notification-tour-title {
+  color: #0C0C0D;
+}
+
+#about-home #onboarding-notification-body {
+  padding-inline-start: 46px;
+}
+
+#about-home #onboarding-notification-tour-message {
+  margin-bottom: 0;
+}
+
+#about-home #onboarding-notification-tour-icon {
+  display: none;
+}
+
+#about-home #onboarding-notification-tour-title::before {
+  display: block;
+  position: absolute;
+  top: 0;
+  offset-inline-start: 0;
+  height: 100%;
+  width: 42px;
+  background-size: 42px;
+  background-position: center;
+  -moz-context-properties: fill;
+  fill: #4A4A4F;
+}
+
+#about-home #onboarding-notification-bar {
+  z-index: 100;
+}
+
+/* Overrides for snippets
+   These changes make it so that snippets do not affect the height of the
+   main element, so that elements don't move around on page load. */
+#topSection {
+  position: relative;
+}
+#brandLogo {
+  margin-top: 0;
+}
+#snippetContainer {
+  position: absolute;
+  left: 50%;
+  top: 100%;
+  margin-left: -235px;
+  width: 470px;
+}

--- a/browser/base/content/abouthome/aboutHome.js
+++ b/browser/base/content/abouthome/aboutHome.js
@@ -42,17 +42,16 @@ var gObserver = new MutationObserver(fun
     }
   }
 });
 
 window.addEventListener("pageshow", function() {
   // Delay search engine setup, cause browser.js::BrowserOnAboutPageLoad runs
   // later and may use asynchronous getters.
   window.gObserver.observe(document.documentElement, { attributes: true });
-  window.gObserver.observe(document.getElementById("launcher"), { attributes: true });
   fitToWidth();
   setupSearch();
   window.addEventListener("resize", fitToWidth);
 
   // Ask chrome to update snippets.
   var event = new CustomEvent("AboutHomeLoad", {bubbles: true});
   document.dispatchEvent(event);
 });
@@ -212,21 +211,16 @@ function ensureSnippetsMapThen(aCallback
 function onSearchSubmit(aEvent) {
   gContentSearchController.search(aEvent);
 }
 
 
 var gContentSearchController;
 
 function setupSearch() {
-  // Set submit button label for when CSS background are disabled (e.g.
-  // high contrast mode).
-  document.getElementById("searchSubmit").value =
-    document.body.getAttribute("dir") == "ltr" ? "\u25B6" : "\u25C0";
-
   // The "autofocus" attribute doesn't focus the form element
   // immediately when the element is first drawn, so the
   // attribute is also used for styling when the page first loads.
   searchText = document.getElementById("searchText");
   searchText.addEventListener("blur", function() {
     searchText.removeAttribute("autofocus");
   }, {once: true});
 

--- a/browser/base/content/abouthome/aboutHome.xhtml
+++ b/browser/base/content/abouthome/aboutHome.xhtml
@@ -29,23 +29,23 @@
           href="chrome://browser/content/abouthome/aboutHome.css"/>
 
     <script type="text/javascript"
             src="chrome://browser/content/abouthome/aboutHome.js"/>
     <script type="text/javascript"
             src="chrome://browser/content/contentSearchUI.js"/>
   </head>
 
-  <body dir="&locale.dir;">
+  <body id="about-home" dir="&locale.dir;">
     <div class="spacer"/>
     <div id="topSection">
       <div id="brandLogo"></div>
 
-      <div id="searchIconAndTextContainer">
-        <div id="searchIcon"/>
+      <div id="searchWrapper">
+        <div id="searchLabel"/>
         <input type="text" name="q" value="" id="searchText" maxlength="256"
                placeholder="&searchInput.placeholder;"
                aria-label="&contentSearchInput.label;" autofocus="autofocus"/>
         <input id="searchSubmit" type="button" onclick="onSearchSubmit(event)"
                title="&contentSearchSubmit.tooltip;"/>
       </div>
 
       <div id="snippetContainer">
@@ -68,13 +68,10 @@
 #ifdef XP_WIN
       <button class="launchButton" id="settings">&abouthome.preferencesButtonWin.label;</button>
 #else
       <button class="launchButton" id="settings">&abouthome.preferencesButtonUnix.label;</button>
 #endif
       <div id="restorePreviousSessionSeparator"/>
       <button class="launchButton" id="restorePreviousSession">&historyRestoreLastSession.label;</button>
     </div>
-
-    <a id="aboutMozilla" href="https://www.mozilla.org/about/?utm_source=about-home&amp;utm_medium=Referral"
-       aria-label="&abouthome.aboutMozilla.label;"/>
   </body>
 </html>

--- a/browser/base/content/test/about/browser_aboutHome_input.js
+++ b/browser/base/content/test/about/browser_aboutHome_input.js
@@ -32,17 +32,17 @@ add_task(async function() {
       addOnsButton.focus();
     });
     await BrowserTestUtils.synthesizeKey(" ", {}, browser);
 
     await promiseTabLoaded;
     is(browser.currentURI.spec, "about:addons",
       "Should have seen the about:addons tab");
   });
-});
+}).skip();
 
 add_task(async function() {
   info("Sync button should open about:preferences#sync");
 
   await BrowserTestUtils.withNewTab({ gBrowser, url: "about:home" }, async function(browser) {
     let oldOpenPrefs = window.openPreferences;
     let openPrefsPromise = new Promise(resolve => {
       window.openPreferences = function(pane, params) {
@@ -54,17 +54,17 @@ add_task(async function() {
 
     let result = await openPrefsPromise;
     window.openPreferences = oldOpenPrefs;
 
     is(result.pane, "paneSync", "openPreferences should be called with paneSync");
     is(result.params.urlParams.entrypoint, "abouthome",
       "openPreferences should be called with abouthome entrypoint");
   });
-});
+}).skip();
 
 add_task(async function() {
   info("Pressing any key should focus the search box in the page, and send the key to it");
 
   await BrowserTestUtils.withNewTab({ gBrowser, url: "about:home" }, async function(browser) {
     await BrowserTestUtils.synthesizeMouseAtCenter("#brandLogo", {}, browser);
 
     await ContentTask.spawn(browser, null, async function() {

--- a/browser/locales/en-US/chrome/browser/aboutHome.dtd
+++ b/browser/locales/en-US/chrome/browser/aboutHome.dtd
@@ -28,13 +28,8 @@
      preferences/options item on about:home on Windows -->
 <!ENTITY abouthome.preferencesButtonWin.label  "Options">
 <!-- LOCALIZATION NOTE (abouthome.preferencesButtonUnix.label): The label for the
      preferences/options item on about:home on Linux and OS X -->
 <!ENTITY abouthome.preferencesButtonUnix.label  "Preferences">
 <!ENTITY abouthome.addonsButton.label    "Add-ons">
 <!ENTITY abouthome.downloadsButton.label "Downloads">
 <!ENTITY abouthome.syncButton.label      "&syncBrand.shortName.label;">
-
-<!-- LOCALIZATION NOTE (abouthome.aboutMozilla.label): The (invisible) label for
-     the mozilla wordmark in the top-right corner that links to Mozilla's main
-     about page. -->
-<!ENTITY abouthome.aboutMozilla.label    "About Mozilla">