diff --git a/core/misc/cspell/dictionary.txt b/core/misc/cspell/dictionary.txt
index 60bf595626..fb24c5e048 100644
--- a/core/misc/cspell/dictionary.txt
+++ b/core/misc/cspell/dictionary.txt
@@ -864,6 +864,7 @@ libyaml
 licious
 lified
 lightbulb
+lightdiamond
 lightninggreen
 linebreak
 linebreaks
diff --git a/core/themes/claro/css/base/variables.css b/core/themes/claro/css/base/variables.css
index 69dc17481c..00a95eca56 100644
--- a/core/themes/claro/css/base/variables.css
+++ b/core/themes/claro/css/base/variables.css
@@ -22,6 +22,9 @@
   /*
    * Common.
    */
+  /**
+   * Shadows.
+   */
   /*
    * Inputs.
    */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
diff --git a/core/themes/claro/css/base/variables.pcss.css b/core/themes/claro/css/base/variables.pcss.css
index c0987bb801..a31894e973 100644
--- a/core/themes/claro/css/base/variables.pcss.css
+++ b/core/themes/claro/css/base/variables.pcss.css
@@ -10,6 +10,7 @@
   --color-whitesmoke-light: #fafbfd;
   --color-whitesmoke-o-40: rgba(243, 244, 249, 0.4);
   /* Secondary. */
+  --color-lightdiamond: #dedfe4;
   --color-lightgray: #d4d4d8;
   --color-lightgray-o-80: rgba(212, 212, 218, 0.8);
   --color-grayblue: #8e929c;
@@ -77,6 +78,10 @@
   --outline-size: 2px;
   --focus-outline: var(--outline-size) dotted transparent;
   --focus-box-shadow: 0 0 0 var(--focus-border-offset-size) var(--color-white), 0 0 0 calc(var(--focus-border-size) + var(--focus-border-offset-size)) var(--color-focus);
+  /**
+   * Shadows.
+   */
+  --shadow-z3: 0 14px 30px rgba(0, 0, 0, 0.1);
   /*
    * Inputs.
    */
diff --git a/core/themes/claro/css/theme/maintenance-page.css b/core/themes/claro/css/theme/maintenance-page.css
index 53dba2a1f2..03b4b240a2 100644
--- a/core/themes/claro/css/theme/maintenance-page.css
+++ b/core/themes/claro/css/theme/maintenance-page.css
@@ -12,21 +12,30 @@
 
 .maintenance-page {
   min-height: 100%;
-  background-color: #e0e0d8;
-  background-image: radial-gradient(hsl(203, 2%, 90%), hsl(203, 2%, 95%));
-  background-repeat: repeat;
-  background-position: left top, 50% 50%; /* LTR */
+  background-color: #dedfe4;
 }
 
-[dir="rtl"] .maintenance-page {
-  background-position: right top, 50% 50%;
+.site-name {
+  word-wrap: break-word;
+  color: #545560;
+  font-size: 1.424rem;
+  margin-top: 1rem;
 }
 
-.page-title {
-  word-wrap: break-word;
-  color: #0074bd;
-  font-size: 2em;
-  line-height: 1.2em;
+.site-name,
+.title {
+  margin-bottom: 1.5rem;
+}
+
+.content {
+  color: #545560;
+  margin-bottom: 1rem;
+}
+
+.site-name,
+.title,
+.content {
+  max-width: 512px;
 }
 
 /**
@@ -113,6 +122,9 @@
   margin-right: 1.25em;
   margin-left: 1.25em;
   background: #fff;
+  padding: 3rem;
+  box-shadow: 0px 14px 30px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
 }
 
 .layout-container:after { /* no reason for a clearfix in the markup */
@@ -124,15 +136,7 @@
 @media all and (max-width: 48em) { /* 768px */
   .layout-container {
     margin: 1.25em;
-    padding: 10px 20px;
-  }
-  .page-title {
-    margin-right: 2em; /* LTR */
-    margin-bottom: 0.725em;
-  }
-  [dir="rtl"] .page-title {
-    margin-right: 0;
-    margin-left: 2em;
+    padding: 1rem 1.5rem;
   }
 }
 
@@ -153,26 +157,13 @@
     height: 100%;
     margin: 0;
   }
-  .layout-container {
+  /**
+   * Needed to override rules from system-admin--layout.pcss.
+   */
+  .layout-container.layout-container.layout-container {
     width: 75%;
-    max-width: 770px;
+    max-width: 940px;
     margin: 0 auto;
-    padding: 20px 0 40px 0;
-    border-radius: 5px;
-    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
-  }
-
-  /* Positioning sidebar & content */
-  main {
-    float: left; /* LTR */
-    clear: none;
-    box-sizing: border-box;
-    width: 65%;
-    padding-right: 3.85em;
-    padding-left: 3.85em;
-  }
-  [dir="rtl"] main {
-    float: right;
   }
   ul {
     margin: 0.25em 0;
@@ -188,11 +179,6 @@
   [dir="rtl"] .layout-sidebar-first {
     float: right;
   }
-
-  /* Margins for sitename */
-  .page-title {
-    margin: 0.75em 1.9em;
-  }
 }
 
 /**
diff --git a/core/themes/claro/css/theme/maintenance-page.pcss.css b/core/themes/claro/css/theme/maintenance-page.pcss.css
index 047b88ff1c..1d7c97bb82 100644
--- a/core/themes/claro/css/theme/maintenance-page.pcss.css
+++ b/core/themes/claro/css/theme/maintenance-page.pcss.css
@@ -3,23 +3,34 @@
  * Maintenance theming.
  */
 
+@import "../base/variables.pcss.css";
+
 .maintenance-page {
   min-height: 100%;
-  background-color: #e0e0d8;
-  background-image: -webkit-radial-gradient(hsl(203, 2%, 90%), hsl(203, 2%, 95%));
-  background-image: radial-gradient(hsl(203, 2%, 90%), hsl(203, 2%, 95%));
-  background-repeat: repeat;
-  background-position: left top, 50% 50%; /* LTR */
-}
-[dir="rtl"] .maintenance-page {
-  background-position: right top, 50% 50%;
+  background-color: var(--color-lightdiamond);
 }
 
-.page-title {
+.site-name {
+  margin-top: var(--space-m);
   word-wrap: break-word;
-  color: #0074bd;
-  font-size: 2em;
-  line-height: 1.2em;
+  color: var(--color-davysgray);
+  font-size: var(--font-size-h4);
+}
+
+.site-name,
+.title {
+  margin-bottom: var(--space-l);
+}
+
+.content {
+  margin-bottom: var(--space-m);
+  color: var(--color-davysgray);
+}
+
+.site-name,
+.title,
+.content {
+  max-width: 512px;
 }
 
 /**
@@ -103,7 +114,10 @@
   width: auto;
   margin-right: 1.25em;
   margin-left: 1.25em;
+  padding: var(--space-xl);
+  border-radius: 8px;
   background: #fff;
+  box-shadow: var(--shadow-z3);
 }
 .layout-container:after { /* no reason for a clearfix in the markup */
   display: table;
@@ -114,15 +128,7 @@
 @media all and (max-width: 48em) { /* 768px */
   .layout-container {
     margin: 1.25em;
-    padding: 10px 20px;
-  }
-  .page-title {
-    margin-right: 2em; /* LTR */
-    margin-bottom: 0.725em;
-  }
-  [dir="rtl"] .page-title {
-    margin-right: 0;
-    margin-left: 2em;
+    padding: var(--space-m) var(--space-l);
   }
 }
 
@@ -143,26 +149,13 @@
     height: 100%;
     margin: 0;
   }
-  .layout-container {
+  /**
+   * Needed to override rules from system-admin--layout.pcss.
+   */
+  .layout-container.layout-container.layout-container {
     width: 75%;
-    max-width: 770px;
+    max-width: 940px;
     margin: 0 auto;
-    padding: 20px 0 40px 0;
-    border-radius: 5px;
-    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
-  }
-
-  /* Positioning sidebar & content */
-  main {
-    float: left; /* LTR */
-    clear: none;
-    box-sizing: border-box;
-    width: 65%;
-    padding-right: 3.85em;
-    padding-left: 3.85em;
-  }
-  [dir="rtl"] main {
-    float: right;
   }
   ul {
     margin: 0.25em 0;
@@ -178,11 +171,6 @@
   [dir="rtl"] .layout-sidebar-first {
     float: right;
   }
-
-  /* Margins for sitename */
-  .page-title {
-    margin: 0.75em 1.9em;
-  }
 }
 
 /**
diff --git a/core/themes/claro/templates/maintenance-page.html.twig b/core/themes/claro/templates/maintenance-page.html.twig
index 4e569e1e68..49e809cd85 100644
--- a/core/themes/claro/templates/maintenance-page.html.twig
+++ b/core/themes/claro/templates/maintenance-page.html.twig
@@ -13,7 +13,7 @@
 
   <header role="banner">
     {% if site_name %}
-      <h1 class="page-title">{{ site_name }}</h1>
+      <h2 class="site-name">{{ site_name }}</h2>
     {% endif %}
   </header>
 
@@ -25,10 +25,12 @@
 
   <main role="main">
     {% if title %}
-      <h1>{{ title }}</h1>
+      <h1 class="title">{{ title }}</h1>
     {% endif %}
     {{ page.highlighted }}
-    {{ page.content }}
+    <div class="content">
+      {{ page.content }}
+    </div>
   </main>
 
   {% if page.page_bottom %}