--- a/browser/components/preferences/in-content-new/sync.xul
+++ b/browser/components/preferences/in-content-new/sync.xul
@@ -42,17 +42,19 @@
 </hbox>
 
 <deck id="weavePrefsDeck" data-category="paneSync" hidden="true">
   <vbox id="noFxaAccount">
     <hbox>
       <vbox id="fxaContentWrapper">
         <groupbox id="noFxaGroup">
           <vbox>
-            <label id="noFxaCaption">&signedOut.caption;</label>
+            <caption>
+              <label id="noFxaCaption">&signedOut.caption;</label>
+            </caption>
             <description id="noFxaDescription" flex="1">&signedOut.description;</description>
             <hbox class="fxaAccountBox">
               <vbox>
                 <image class="fxaFirefoxLogo"/>
               </vbox>
               <vbox flex="1">
                 <label id="signedOutAccountBoxTitle">&signedOut.accountBox.title;</label>
                 <hbox class="fxaAccountBoxButtons">

--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -2,47 +2,64 @@
 /* - 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
 @namespace html "http://www.w3.org/1999/xhtml";
 
 .main-content {
   padding-top: 0;
+  background-color: #fafafc;
 }
 
 .pane-container {
   display: block;
   max-width: 800px;
 }
 
 #mainPrefPane {
   width: 100%;
   padding: 0;
   font: message-box;
-  font-size: 1.25rem;
+  color: #0c0c0d;
+}
+
+#mainPrefPane groupbox,
+#mainPrefPane deck,
+#mainPrefPane description {
+  font-size: 1.36rem;
+}
+
+input,
+description.indent,
+.indent > description {
+  font-size: 1.18rem !important;
 }
 
 description.indent,
 .indent > description {
-  font-size: 1.18rem;
   color: #737373;
 }
 
 * {
   -moz-user-select: text;
 }
 
 button,
 treecol,
 html|option {
   /* override the * rule */
   -moz-user-select: none;
 }
 
+caption > label {
+  font-size: 1.55rem;
+  font-weight: 600;
+}
+
 #engineList treechildren::-moz-tree-image(engineShown, checked),
 #blocklistsTree treechildren::-moz-tree-image(selectionCol, checked) {
   list-style-image: url("chrome://global/skin/in-content/check.svg");
   -moz-context-properties: fill, stroke;
   fill: #2292d0;
   stroke: none;
   width: 21px;
   height: 21px;
@@ -82,32 +99,51 @@ html|option {
 #searchCategory,
 #browserPrivacyCategory,
 #firefoxAccountCategory {
   margin-top: 0;
 }
 
 .header-name {
   font-size: 2rem;
+  font-weight: 300;
 }
 
 .subcategory {
   margin-top: 48px;
 }
 
 /* Category List */
 
 #categories {
   max-height: 100vh;
+  background-color: #fafafc;
 }
 
 #categories > scrollbox {
   overflow-x: hidden !important;
 }
 
+.category-name {
+  font-size: 1.45rem;
+  color: #0c0c0d;
+}
+
+.category,
+.category:hover,
+.category[selected] {
+  background-color: transparent;
+  border-inline-start: initial;
+  padding-inline-start: 44px;
+}
+
+richlistitem[selected='true'] .category-name {
+  color: #0a84ff;
+}
+
 /**
  * We want the last category to always have non-0 getBoundingClientRect().bottom
  * so we can use the value to figure out the max-height of the list in
  * preferences.js, so use collapse instead of display: none; if it's hidden
  */
 #categories > .category[hidden="true"] {
   display: -moz-box;
   visibility: collapse;
@@ -192,18 +228,19 @@ html|option {
   font-size: 90%;
   margin-inline-end: 8px !important;
 }
 
 #getStarted {
   font-size: 90%;
 }
 
-#isNotDefaultLabel {
-  font-weight: bold;
+#isNotDefaultLabel,
+#signedOutAccountBoxTitle {
+  font-weight: 600;
 }
 
 #downloadFolder {
   margin-inline-start: 0;
 }
 
 #browserHomePage:-moz-locale-dir(rtl) input {
   unicode-bidi: plaintext;
@@ -469,17 +506,16 @@ groupbox {
   -moz-box-flex: 1;
 }
 
 #tosPP-small-ToS {
   margin-bottom: 14px;
 }
 
 #noFxaCaption {
-  font-weight: bold;
   margin-bottom: 11px;
 }
 
 .fxaSyncIllustration {
   margin-top: 35px;
   width: 231px;
   -moz-context-properties: fill;
   fill: #bfcbd3;
@@ -502,20 +538,16 @@ groupbox {
 }
 
 .fxaAccountBox {
   border: 1px solid #D1D2D3;
   border-radius: 5px;
   padding: 14px 20px 14px 14px;
 }
 
-#signedOutAccountBoxTitle {
-  font-weight: bold;
-}
-
 .fxaAccountBoxButtons {
   margin-bottom: 0 !important;
   margin-top: 11px;
   display: flex;
   align-items: center;
 }
 
 .fxaAccountBoxButtons > * {
@@ -627,30 +659,41 @@ groupbox {
      get behind the status panel (bug 1357841). */
   bottom: 2rem;
   font-size: 13px;
   line-height: 13px;
   height: 14px;
   background-position: 15px;
   padding-inline-start: 35px;
   white-space: nowrap;
+  fill: #0c0c0d;
+  stroke: #0c0c0d;
 }
 
 .help-button:-moz-locale-dir(rtl) {
   left: auto;
   right: 0;
   background-position: right 15px top 0;
 }
 
 .help-button:link,
 .help-button:visited {
-  color: var(--in-content-category-text);
+  color: #0c0c0d !important;
+  opacity: 0.8;
   text-decoration: none;
 }
 
+.help-button:hover {
+  color: #0c0c0d !important;
+  fill: #0c0c0d !important;
+  stroke: #0c0c0d !important;
+  stroke-opacity: 0!important;
+  opacity: 0.9;
+}
+
 .search-container {
   position: sticky;
   background-color: var(--in-content-page-background);
   width: 100%;
   top: 0;
   z-index: 1;
 }