diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
index 8785c5653e80..0a3388fb1fe3 100644
--- a/lighthouse-core/report/html/report-styles.css
+++ b/lighthouse-core/report/html/report-styles.css
@@ -51,6 +51,7 @@
   --color-gray: #000000;
   --color-green-700: #018642;
   --color-green: #0CCE6B;
+  --color-orange-50: #FFF3E0;
   --color-orange-700: #D04900;
   --color-orange: #FFA400;
   --color-red-700: #EB0F00;
@@ -63,10 +64,10 @@
   --color-average: var(--color-orange);
   --color-fail-secondary: var(--color-red-700);
   --color-fail: var(--color-red);
+  --color-hover: var(--color-gray-50);
   --color-informative: var(--color-blue-900);
   --color-pass-secondary: var(--color-green-700);
   --color-pass: var(--color-green);
-  --color-hover: var(--color-gray-50);
 
   /* Component variables */
   --audit-description-padding-left: calc(var(--score-icon-size) + var(--score-icon-margin-left) + var(--score-icon-margin-right));
@@ -139,7 +140,10 @@
   --topbar-height: 32px;
   --topbar-logo-size: 24px;
   --topbar-padding: 0 8px;
-  --toplevel-warning-padding: 22px;
+  --toplevel-warning-background-color: var(--color-orange-50);
+  --toplevel-warning-message-text-color: #BD4200;
+  --toplevel-warning-padding: 18px;
+  --toplevel-warning-text-color: var(--report-text-color);
 
   /* SVGs */
   --plugin-icon-url-dark: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="%23FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"/></svg>');
@@ -186,8 +190,11 @@
     --report-border-color-secondary: var(--color-gray-200);
     --report-text-color-secondary: var(--color-gray-400);
     --report-text-color: var(--color-gray-100);
-    --topbar-background-color: var(--color-gray);
     --snippet-color: var(--color-cyan-500);
+    --topbar-background-color: var(--color-gray);
+  	--toplevel-warning-background-color: #544B40;
+  	--toplevel-warning-message-text-color: var(--color-orange-700);
+	--toplevel-warning-text-color: var(--color-gray-100);    
 
     /* SVGs */
     --plugin-icon-url: var(--plugin-icon-url-dark);
@@ -1016,16 +1023,21 @@
 
 .lh-warnings--toplevel {
   --item-margin: calc(var(--header-line-height) / 4);
-  color: var(--report-text-color-secondary);
+  color: var(--toplevel-warning-text-color);
   margin-left: auto;
   margin-right: auto;
   max-width: calc(var(--report-width) - var(--category-padding) * 2);
-  background-color: var(--color-amber-50);
+  background-color: var(--toplevel-warning-background-color);
   padding: var(--toplevel-warning-padding);
+  border-radius: 8px;
+}
+
+.lh-warnings__msg {
+  color: var(--toplevel-warning-message-text-color);
+  margin: 0;
 }
 
 .lh-warnings ul {
-  padding-left: calc(var(--category-padding) * 2);
   margin: 0;
 }
 .lh-warnings li {
diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html
index 6af232a56b5f..02b009ec8130 100644
--- a/lighthouse-core/report/html/templates.html
+++ b/lighthouse-core/report/html/templates.html
@@ -18,7 +18,7 @@
 <!-- Lighthouse run warnings -->
 <template id="tmpl-lh-warnings--toplevel">
   <div class="lh-warnings lh-warnings--toplevel">
-    <strong class="lh-warnings__msg"></strong>
+    <p class="lh-warnings__msg"></p>
     <ul></ul>
   </div>
 </template>