--- a/browser/components/payments/res/components/rich-select.css
+++ b/browser/components/payments/res/components/rich-select.css
@@ -24,10 +24,9 @@ rich-select[open] > .rich-select-popup-b
   background-color: #ffa;
 }
 
 .rich-option {
   display: grid;
   border-bottom: 1px solid #ddd;
   background: #fff; /* TODO: system colors */
   padding: 5px 20px;
-  font-size: .8em;
 }

--- a/browser/components/payments/res/containers/address-form.js
+++ b/browser/components/payments/res/containers/address-form.js
@@ -14,29 +14,29 @@ import paymentRequest from "../paymentRe
  * XXX: Bug 1446164 - This form isn't localized when used via this custom element
  * as it will be much easier to share the logic once we switch to Fluent.
  */
 
 export default class AddressForm extends PaymentStateSubscriberMixin(HTMLElement) {
   constructor() {
     super();
 
-    this.pageTitle = document.createElement("h1");
+    this.pageTitle = document.createElement("h2");
     this.genericErrorText = document.createElement("div");
 
     this.cancelButton = document.createElement("button");
     this.cancelButton.className = "cancel-button";
     this.cancelButton.addEventListener("click", this);
 
     this.backButton = document.createElement("button");
     this.backButton.className = "back-button";
     this.backButton.addEventListener("click", this);
 
     this.saveButton = document.createElement("button");
-    this.saveButton.className = "save-button";
+    this.saveButton.className = "save-button primary";
     this.saveButton.addEventListener("click", this);
 
     this.persistCheckbox = new LabelledCheckbox();
 
     this._errorFieldMap = {
       addressLine: "#street-address-container",
       city: "#address-level2-container",
       country: "#country-container",

--- a/browser/components/payments/res/containers/basic-card-form.js
+++ b/browser/components/payments/res/containers/basic-card-form.js
@@ -15,17 +15,17 @@ import paymentRequest from "../paymentRe
  * XXX: Bug 1446164 - This form isn't localized when used via this custom element
  * as it will be much easier to share the logic once we switch to Fluent.
  */
 
 export default class BasicCardForm extends PaymentStateSubscriberMixin(HTMLElement) {
   constructor() {
     super();
 
-    this.pageTitle = document.createElement("h1");
+    this.pageTitle = document.createElement("h2");
     this.genericErrorText = document.createElement("div");
 
     this.cancelButton = document.createElement("button");
     this.cancelButton.className = "cancel-button";
     this.cancelButton.addEventListener("click", this);
 
     this.addressAddLink = document.createElement("a");
     this.addressAddLink.className = "add-link";
@@ -36,17 +36,17 @@ export default class BasicCardForm exten
     this.addressEditLink.href = "javascript:void(0)";
     this.addressEditLink.addEventListener("click", this);
 
     this.backButton = document.createElement("button");
     this.backButton.className = "back-button";
     this.backButton.addEventListener("click", this);
 
     this.saveButton = document.createElement("button");
-    this.saveButton.className = "save-button";
+    this.saveButton.className = "save-button primary";
     this.saveButton.addEventListener("click", this);
 
     this.persistCheckbox = new LabelledCheckbox();
 
     // The markup is shared with form autofill preferences.
     let url = "formautofill/editCreditCard.xhtml";
     this.promiseReady = this._fetchMarkup(url).then(doc => {
       this.form = doc.getElementById("form");

--- a/browser/components/payments/res/containers/order-details.css
+++ b/browser/components/payments/res/containers/order-details.css
@@ -42,10 +42,10 @@ order-details > .details-total {
   margin: 0;
   font-size: large;
   grid-column-start: 2;
   grid-column-end: 3;
   text-align: end;
 }
 .details-total > currency-amount {
   font-size: large;
-  text-align: start;
+  text-align: end;
 }

--- a/browser/components/payments/res/debugging.css
+++ b/browser/components/payments/res/debugging.css
@@ -1,11 +1,21 @@
 /* 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/. */
 
+html {
+  /* Based on global.css styles for top-level XUL windows */
+  -moz-appearance: dialog;
+  background-color: -moz-Dialog;
+  color: -moz-DialogText;
+  font: message-box;
+  /* Make sure the background ends to the bottom if there is unused space */
+  height: 100%;
+}
+
 h1 {
   font-size: 1em;
 }
 
 fieldset > label {
   white-space: nowrap;
 }

--- a/browser/components/payments/res/paymentRequest.css
+++ b/browser/components/payments/res/paymentRequest.css
@@ -1,39 +1,59 @@
 /* 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/. */
 
 html {
-  background: -moz-dialog;
+  /* Based on global.css styles for top-level XUL windows */
+  color: -moz-DialogText;
+  font: message-box;
   height: 100%;
 }
 
 body {
+  /* Override font-size from in-content/common.css which is too large */
+  font-size: inherit;
+}
+
+#order-details-overlay,
+html {
+  /* Based on global.css styles for top-level XUL windows */
+  -moz-appearance: dialog;
+  background-color: -moz-Dialog;
+}
+
+body {
   height: 100%;
   margin: 0;
   overflow: hidden;
 }
 
 [hidden] {
   display: none !important;
 }
 
 #debugging-console {
+  /* include the default borders in the max-height */
+  box-sizing: border-box;
   float: right;
+  /* avoid causing the body to scroll */
+  max-height: 100vh;
   /* Float above the other overlays */
   position: relative;
   z-index: 99;
 }
 
 payment-dialog {
+  box-sizing: border-box;
   display: grid;
   grid-template-rows: fit-content(10%) auto;
   height: 100%;
   margin: 0 10%;
+  padding: 1em;
 }
 
 payment-dialog > header {
   display: flex;
 }
 
 #main-container {
   display: flex;
@@ -47,17 +67,16 @@ payment-dialog > header {
   position: relative;
 }
 
 #error-text {
   text-align: center;
 }
 
 #order-details-overlay {
-  background-color: -moz-dialog;
   overflow: auto;
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 1;
 }
@@ -75,22 +94,16 @@ payment-dialog > footer {
   flex: 0 1 auto;
 }
 
 #total .label {
   font-size: 15px;
   font-weight: bold;
 }
 
-#pay {
-  background-color: #0060df;
-  color: white;
-  border: none;
-}
-
 payment-dialog[changes-prevented][completion-state="fail"] #pay,
 payment-dialog[changes-prevented][completion-state="unknown"] #pay,
 payment-dialog[changes-prevented][completion-state="processing"] #pay,
 payment-dialog[changes-prevented][completion-state="success"] #pay {
   /* Show the pay button above #disabled-overlay */
   position: relative;
   z-index: 1;
 }

--- a/browser/components/payments/res/paymentRequest.xhtml
+++ b/browser/components/payments/res/paymentRequest.xhtml
@@ -56,16 +56,17 @@
 ]>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <title>&paymentSummaryTitle;</title>
 
   <!-- chrome: is needed for global.dtd -->
   <meta http-equiv="Content-Security-Policy" content="default-src 'self' chrome:"/>
 
+  <link rel="stylesheet" href="chrome://global/skin/in-content/common.css"/>
   <link rel="stylesheet" href="paymentRequest.css"/>
   <link rel="stylesheet" href="components/rich-select.css"/>
   <link rel="stylesheet" href="components/address-option.css"/>
   <link rel="stylesheet" href="components/basic-card-option.css"/>
   <link rel="stylesheet" href="components/shipping-option.css"/>
   <link rel="stylesheet" href="components/payment-details-item.css"/>
   <link rel="stylesheet" href="containers/address-form.css"/>
   <link rel="stylesheet" href="containers/order-details.css"/>
@@ -86,17 +87,17 @@
       </div>
       <div id="top-buttons" >
         <button id="view-all" class="closed">&viewAllItems;</button>
       </div>
     </header>
 
     <div id="main-container">
       <section id="payment-summary" class="page">
-        <h1>&paymentSummaryTitle;</h1>
+        <h2>&paymentSummaryTitle;</h2>
 
         <section>
           <div id="error-text"></div>
 
           <div class="shipping-related"
                id="shipping-type-label"
                data-shipping-address-label="&shippingAddressLabel;"
                data-delivery-address-label="&deliveryAddressLabel;"
@@ -122,25 +123,26 @@
                           data-edit-link-label="&payer.editLink.label;"
                           selected-state-key="selectedPayerAddress"></address-picker>
           <div id="error-text"></div>
         </section>
 
         <footer id="controls-container">
           <button id="cancel">&cancelPaymentButton.label;</button>
           <button id="pay"
+                  class="primary"
                   data-initial-label="&approvePaymentButton.label;"
                   data-processing-label="&processingPaymentButton.label;"
                   data-fail-label="&failPaymentButton.label;"
                   data-unknown-label="&unknownPaymentButton.label;"
                   data-success-label="&successPaymentButton.label;"></button>
         </footer>
       </section>
       <section id="order-details-overlay" hidden="hidden">
-        <h1>&orderDetailsLabel;</h1>
+        <h2>&orderDetailsLabel;</h2>
         <order-details></order-details>
       </section>
 
       <basic-card-form id="basic-card-page"
                        class="page"
                        data-add-basic-card-title="&basicCard.addPage.title;"
                        data-edit-basic-card-title="&basicCard.editPage.title;"
                        data-error-generic-save="&basicCardPage.error.genericSave;"

--- a/browser/components/payments/test/browser/browser_address_edit.js
+++ b/browser/components/payments/test/browser/browser_address_edit.js
@@ -39,17 +39,17 @@ add_task(async function test_add_link() 
       is(addLink.textContent, "Add", "Add link text");
 
       addLink.click();
 
       state = await PTU.DialogContentUtils.waitForState(content, (state) => {
         return state.page.id == "address-page" && !state["address-page"].guid;
       }, "Check add page state");
 
-      let title = content.document.querySelector("address-form h1");
+      let title = content.document.querySelector("address-form h2");
       is(title.textContent, "Add Shipping Address", "Page title should be set");
 
       let persistCheckbox = content.document.querySelector("address-form labelled-checkbox");
       ok(!persistCheckbox.hidden, "checkbox should be visible when adding a new address");
       ok(Cu.waiveXrays(persistCheckbox).checked, "persist checkbox should be checked by default");
 
       info("filling fields");
       for (let [key, val] of Object.entries(address)) {
@@ -130,17 +130,17 @@ add_task(async function test_edit_link()
       is(editLink.textContent, "Edit", "Edit link text");
 
       editLink.click();
 
       state = await PTU.DialogContentUtils.waitForState(content, (state) => {
         return state.page.id == "address-page" && !!state["address-page"].guid;
       }, "Check edit page state");
 
-      let title = content.document.querySelector("address-form h1");
+      let title = content.document.querySelector("address-form h2");
       is(title.textContent, "Edit Shipping Address", "Page title should be set");
 
       let persistCheckbox = content.document.querySelector("address-form labelled-checkbox");
       ok(persistCheckbox.hidden, "checkbox should be hidden when editing an address");
 
       info("overwriting field values");
       for (let [key, val] of Object.entries(address)) {
         let field = content.document.getElementById(key);
@@ -215,17 +215,17 @@ add_task(async function test_add_payer_c
       is(addLink.textContent, "Add", "Add link text");
 
       addLink.click();
 
       state = await PTU.DialogContentUtils.waitForState(content, (state) => {
         return state.page.id == "address-page" && !state["address-page"].guid;
       }, "Check add page state");
 
-      let title = content.document.querySelector("address-form h1");
+      let title = content.document.querySelector("address-form h2");
       is(title.textContent, "Add Payer Contact", "Page title should be set");
 
       let persistCheckbox = content.document.querySelector("address-form labelled-checkbox");
       ok(!persistCheckbox.hidden, "checkbox should be visible when adding a new address");
       ok(Cu.waiveXrays(persistCheckbox).checked, "persist checkbox should be checked by default");
 
       info("filling fields");
       for (let [key, val] of Object.entries(address)) {
@@ -302,17 +302,17 @@ add_task(async function test_edit_payer_
       is(editLink.textContent, "Edit", "Edit link text");
 
       editLink.click();
 
       state = await PTU.DialogContentUtils.waitForState(content, (state) => {
         return state.page.id == "address-page" && !!state["address-page"].guid;
       }, "Check edit page state");
 
-      let title = content.document.querySelector("address-form h1");
+      let title = content.document.querySelector("address-form h2");
       is(title.textContent, "Edit Payer Contact", "Page title should be set");
 
       let persistCheckbox = content.document.querySelector("address-form labelled-checkbox");
       ok(persistCheckbox.hidden, "checkbox should be hidden when editing an address");
 
       info("overwriting field values");
       for (let [key, val] of Object.entries(address)) {
         let field = content.document.getElementById(key);

--- a/browser/components/payments/test/browser/browser_card_edit.js
+++ b/browser/components/payments/test/browser/browser_card_edit.js
@@ -21,17 +21,17 @@ add_task(async function test_add_link() 
       return state.page.id == "basic-card-page" && !state["basic-card-page"].guid;
     }, "Check add page state");
 
     state = await PTU.DialogContentUtils.waitForState(content, (state) => {
       return Object.keys(state.savedBasicCards).length == 0 &&
              Object.keys(state.savedAddresses).length == 0;
     }, "Check no cards or addresses present at beginning of test");
 
-    let title = content.document.querySelector("basic-card-form h1");
+    let title = content.document.querySelector("basic-card-form h2");
     is(title.textContent, "Add Credit Card", "Add title should be set");
 
     ok(!state.isPrivate,
        "isPrivate flag is not set when paymentrequest is shown from a non-private session");
     let persistCheckbox = content.document.querySelector("basic-card-form labelled-checkbox");
     ok(Cu.waiveXrays(persistCheckbox).checked, "persist checkbox should be checked by default");
 
     let card = Object.assign({}, PTU.BasicCards.JohnDoe);
@@ -52,17 +52,17 @@ add_task(async function test_add_link() 
        "The only option should be the blank/empty option");
 
     let addressAddLink = content.document.querySelector(".billingAddressRow .add-link");
     addressAddLink.click();
     state = await PTU.DialogContentUtils.waitForState(content, (state) => {
       return state.page.id == "address-page" && !state["address-page"].guid;
     }, "Check address page state");
 
-    let addressTitle = content.document.querySelector("address-form h1");
+    let addressTitle = content.document.querySelector("address-form h2");
     is(addressTitle.textContent, "Add Billing Address",
        "Address on add address page should be correct");
 
     state = await PTU.DialogContentUtils.waitForState(content, (state) => {
       return Object.keys(state.savedBasicCards).length == 0;
     }, "Check card was not added when clicking the 'add' address button");
 
     let addressBackButton = content.document.querySelector("address-form .back-button");
@@ -161,17 +161,17 @@ add_task(async function test_edit_link()
       return state.page.id == "basic-card-page" && state["basic-card-page"].guid;
     }, "Check edit page state");
 
     state = await PTU.DialogContentUtils.waitForState(content, (state) => {
       return Object.keys(state.savedBasicCards).length == 1 &&
              Object.keys(state.savedAddresses).length == 1;
     }, "Check card and address present at beginning of test");
 
-    let title = content.document.querySelector("basic-card-form h1");
+    let title = content.document.querySelector("basic-card-form h2");
     is(title.textContent, "Edit Credit Card", "Edit title should be set");
 
     let card = Object.assign({}, PTU.BasicCards.JohnDoe);
     // cc-number cannot be modified
     delete card["cc-number"];
     card["cc-exp-year"]++;
     card["cc-exp-month"]++;
 
@@ -193,17 +193,17 @@ add_task(async function test_edit_link()
     billingAddressSelect.selectedIndex = 0;
 
     let addressEditLink = content.document.querySelector(".billingAddressRow .edit-link");
     addressEditLink.click();
     state = await PTU.DialogContentUtils.waitForState(content, (state) => {
       return state.page.id == "address-page" && !state["address-page"].guid;
     }, "Clicking edit button when the empty option is selected will go to 'add' page (no guid)");
 
-    let addressTitle = content.document.querySelector("address-form h1");
+    let addressTitle = content.document.querySelector("address-form h2");
     is(addressTitle.textContent, "Add Billing Address",
        "Address on add address page should be correct");
 
     let addressBackButton = content.document.querySelector("address-form .back-button");
     addressBackButton.click();
     state = await PTU.DialogContentUtils.waitForState(content, (state) => {
       return state.page.id == "basic-card-page" && state["basic-card-page"].guid &&
              Object.keys(state.savedAddresses).length == 1;

--- a/browser/components/payments/test/browser/browser_payments_onboarding_wizard.js
+++ b/browser/components/payments/test/browser/browser_payments_onboarding_wizard.js
@@ -46,17 +46,17 @@ add_task(async function test_onboarding_
 
       info("Check if the total header is visible on the address page during on-boarding");
       let header = content.document.querySelector("header");
       ok(content.isVisible(header),
          "Total Header is visible on the address page during on-boarding");
       ok(header.textContent, "Total Header contains text");
 
       info("Check if the page title is visible on the address page");
-      let addressPageTitle = content.document.querySelector("address-form h1");
+      let addressPageTitle = content.document.querySelector("address-form h2");
       ok(content.isVisible(addressPageTitle), "Address page title is visible");
       is(addressPageTitle.textContent, "Add Shipping Address",
          "Address page title is correctly shown");
 
       let addressCancelButton = content.document.querySelector("address-form .cancel-button");
       ok(content.isVisible(addressCancelButton),
          "The cancel button on the address page is visible");
 
@@ -72,17 +72,17 @@ add_task(async function test_onboarding_
 
       await PTU.DialogContentUtils.waitForState(content, (state) => {
         return state.page.id == "basic-card-page";
       }, "Basic card page is shown after the address page during on boarding");
 
       let cardSaveButton = content.document.querySelector("basic-card-form .save-button");
       ok(content.isVisible(cardSaveButton), "Basic card page is rendered");
 
-      let basicCardTitle = content.document.querySelector("basic-card-form h1");
+      let basicCardTitle = content.document.querySelector("basic-card-form h2");
       ok(content.isVisible(basicCardTitle), "Basic card page title is visible");
       is(basicCardTitle.textContent, "Add Credit Card", "Basic card page title is correctly shown");
 
       info("Check if the correct billing address is selected in the basic card page");
       PTU.DialogContentUtils.waitForState((state) => {
         let billingAddressSelect = content.document.querySelector("#billingAddressGUID");
         return state.selectedShippingAddress == billingAddressSelect.value;
       }, "Shipping address is selected as the billing address");
@@ -319,17 +319,17 @@ add_task(async function test_onboarding_
       }, "Billing address page is shown first during on-boarding if requestShipping is turned off");
 
       info("Checking if the billing address page has been rendered");
       let addressSaveButton = content.document.querySelector("address-form .save-button");
       ok(content.isVisible(addressSaveButton),
          "Address save button is rendered");
 
       info("Check if the page title is visible on the address page");
-      let addressPageTitle = content.document.querySelector("address-form h1");
+      let addressPageTitle = content.document.querySelector("address-form h2");
       ok(content.isVisible(addressPageTitle), "Address page title is visible");
       is(addressPageTitle.textContent, "Add Billing Address",
          "Address page title is correctly shown");
 
       for (let [key, val] of Object.entries(PTU.Addresses.TimBL2)) {
         let field = content.document.getElementById(key);
         if (!field) {
           ok(false, `${key} field not found`);