diff --git a/core/modules/system/css/components/system-status-counter.css b/core/modules/system/css/components/system-status-counter.css
new file mode 100644
index 0000000..1f568f0
--- /dev/null
+++ b/core/modules/system/css/components/system-status-counter.css
@@ -0,0 +1,30 @@
+/**
+ * @file
+ * Styles for the system status counter component.
+ */
+
+.system-status-counter__status-icon {
+  display: inline-block;
+  height: 25px;
+  width: 25px;
+  vertical-align: middle;
+}
+.system-status-counter__status-icon:before {
+  content: "";
+  background-size: 16px;
+  background-position: center 2px;
+  background-repeat: no-repeat;
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.system-status-counter__status-icon--error:before {
+  background-image: url(../../../../misc/icons/e32700/error.svg);
+}
+.system-status-counter__status-icon--warning:before {
+  background-image: url(../../../../misc/icons/e29700/warning.svg);
+}
+.system-status-counter__status-icon--checked:before {
+  background-image: url(../../../../misc/icons/73b355/check.svg);
+}
diff --git a/core/modules/system/system.libraries.yml b/core/modules/system/system.libraries.yml
index a5f36e8..98eb283 100644
--- a/core/modules/system/system.libraries.yml
+++ b/core/modules/system/system.libraries.yml
@@ -19,6 +19,7 @@ base:
       css/components/reset-appearance.module.css: { weight: -10 }
       css/components/resize.module.css: { weight: -10 }
       css/components/sticky-header.module.css: { weight: -10 }
+      css/components/system-status-counter.css: { weight: -10 }
       css/components/system-status-report-counters.css: { weight: -10 }
       css/components/system-status-report-general-info.css: { weight: -10 }
       css/components/tabledrag.module.css: { weight: -10 }
diff --git a/core/modules/system/templates/status-report-counter.html.twig b/core/modules/system/templates/status-report-counter.html.twig
index 585211a..22e4c43 100644
--- a/core/modules/system/templates/status-report-counter.html.twig
+++ b/core/modules/system/templates/status-report-counter.html.twig
@@ -11,6 +11,6 @@
  * @ingroup themable
  */
 #}
+<span class="system-status-counter__status-icon system-status-counter__status-icon--{{ severity }}"></span>
 {{ amount }} {{ text }}
-<br>
 <a href="#{{ severity }}"><span class="visually-hidden">{{ text }} </span>Details</a>
diff --git a/core/modules/system/templates/status-report-general-info.html.twig b/core/modules/system/templates/status-report-general-info.html.twig
index f9f89f8..d4d5054 100644
--- a/core/modules/system/templates/status-report-general-info.html.twig
+++ b/core/modules/system/templates/status-report-general-info.html.twig
@@ -57,24 +57,24 @@
 </div>
 <div class="system-status-general-info__item">
   <h3 class="system-status-general-info__item-title">{{ 'PHP'|t }}</h3>
-  <strong>{{ 'Version'|t }}</strong><br>{{ php.value }}
+  <h4>{{ 'Version'|t }}</h4> {{ php.value }}
   {% if php.description %}
     {{ php.description }}
   {% endif %}
-  <br>
-  <strong>{{ 'Memory limit'|t }}</strong><br>{{ php_memory_limit.value }}
+
+  <h4>{{ 'Memory limit'|t }}</h4>{{ php_memory_limit.value }}
   {% if php_memory_limit.description %}
     {{ php_memory_limit.description }}
   {% endif %}
 </div>
 <div class="system-status-general-info__item">
   <h3 class="system-status-general-info__item-title">{{ 'Database'|t }}</h3>
-  <strong>{{ 'Version'|t }}</strong><br>{{ database_system_version.value }}
+  <h4>{{ 'Version'|t }}</h4>{{ database_system_version.value }}
   {% if database_system_version.description %}
     {{ database_system_version.description }}
   {% endif %}
-  <br>
-  <strong>{{ 'System'|t }}</strong><br>{{ database_system.value }}
+
+  <h4>{{ 'System'|t }}</h4>{{ database_system.value }}
   {% if database_system.description %}
     {{ database_system.description }}
   {% endif %}
diff --git a/core/themes/seven/css/components/colors.css b/core/themes/seven/css/components/colors.css
index a602adc..54358d8 100644
--- a/core/themes/seven/css/components/colors.css
+++ b/core/themes/seven/css/components/colors.css
@@ -3,11 +3,14 @@
  */
 .color-success {
   color: #325e1c;
+  background-color: #f3faef;
 }
 .color-warning {
   color: #734c00;
+  background-color: #fdf8ed;
 }
 .color-error {
   color: #a51b00;
+  background-color: #fcf4f2;
 }

diff --git a/core/themes/seven/css/components/system-status-counter.css b/core/themes/seven/css/components/system-status-counter.css
index 2caa950..0e9e38e 100644
--- a/core/themes/seven/css/components/system-status-counter.css
+++ b/core/themes/seven/css/components/system-status-counter.css
@@ -59,6 +59,8 @@
   font-size: 12px;
   font-weight: normal;
   text-transform: none;
+  display: block;
+  line-height: 1.5;
 }

 @media screen and (min-width: 61em) {
diff --git a/core/themes/seven/css/components/system-status-report-general-info.css b/core/themes/seven/css/components/system-status-report-general-info.css
index e4ca960..227a9c0 100644
--- a/core/themes/seven/css/components/system-status-report-general-info.css
+++ b/core/themes/seven/css/components/system-status-report-general-info.css
@@ -76,6 +76,17 @@
   margin-bottom: 0;
 }

+.system-status-general-info__sub-item-title {
+  margin: 0;
+}
+
+.system-status-general-info__sub-item__title {
+  font-weight: bold;
+}
+.system-status-general-info__sub-item__value {
+  display: block;
+}
+
 .system-status-general-info__run-cron {
   margin: 1em 0 0;
 }
diff --git a/core/themes/seven/css/components/system-status-report.css b/core/themes/seven/css/components/system-status-report.css
index 9cf91d0..bfcd75c 100644
--- a/core/themes/seven/css/components/system-status-report.css
+++ b/core/themes/seven/css/components/system-status-report.css
@@ -16,7 +16,13 @@
 .system-status-report__entry:last-of-type {
   border-bottom: 1px solid #bebfb9;
 }
-/* Account for native and poly-filled details element */
+.system-status-report__entry--error {
+  background-color: transparent;
+}
+.system-status-report__entry--warning {
+  background-color: transparent;
+}
+  /* Account for native and poly-filled details element */
 .system-status-report__status-title {
   position: relative;
   padding: 1em 1em 1em 3em; /* LTR */
diff --git a/core/themes/seven/css/components/tables.css b/core/themes/seven/css/components/tables.css
index 4fbafba..816df9e 100644
--- a/core/themes/seven/css/components/tables.css
+++ b/core/themes/seven/css/components/tables.css
@@ -38,6 +38,15 @@ tbody tr:hover,
 tbody tr:focus {
   background: #f7fcff;
 }
+/* See colors.css */
+tbody tr.color-warning:hover,
+tbody tr.color-warning:focus {
+  background: #fdf8ed;
+}
+tbody tr.color-error:hover,
+tbody tr.color-error:focus {
+  background: #fcf4f2;
+}

 td,
 th {
diff --git a/core/themes/seven/seven.info.yml b/core/themes/seven/seven.info.yml
index efbf3aa..3f0e43c 100644
--- a/core/themes/seven/seven.info.yml
+++ b/core/themes/seven/seven.info.yml
@@ -25,6 +25,7 @@ libraries-override:
   system/base:
     css:
       component:
+        /core/themes/stable/css/system/components/system-status-counter.css: css/components/system-status-counter.css
         /core/themes/stable/css/system/components/system-status-report-counters.css: css/components/system-status-report-counters.css
         /core/themes/stable/css/system/components/system-status-report-general-info.css: css/components/system-status-report-general-info.css
   core/drupal.vertical-tabs:
diff --git a/core/themes/seven/templates/status-report-counter.html.twig b/core/themes/seven/templates/status-report-counter.html.twig
index 5c408b8..78c259d 100644
--- a/core/themes/seven/templates/status-report-counter.html.twig
+++ b/core/themes/seven/templates/status-report-counter.html.twig
@@ -21,7 +21,6 @@
   <span class="system-status-counter__status-icon system-status-counter__status-icon--{{ severity }}"></span>
   <span class="system-status-counter__status-title">
     {{ amount }} {{ text }}
-    <br>
-    <a href="#{{ severity }}" class="system-status-counter__details"><span class="visually-hidden">{{ text }} </span>Details</a>
+    <span class="system-status-counter__details"><a href="#{{ severity }}" ><span class="visually-hidden">{{ text }} </span>Details</a></span>
   </span>
 </span>
diff --git a/core/themes/seven/templates/status-report-general-info.html.twig b/core/themes/seven/templates/status-report-general-info.html.twig
index 80081d3..a5d6ce7 100644
--- a/core/themes/seven/templates/status-report-general-info.html.twig
+++ b/core/themes/seven/templates/status-report-general-info.html.twig
@@ -69,12 +69,12 @@
       <span class="system-status-general-info__item-icon system-status-general-info__item-icon--php"></span>
       <div class="system-status-general-info__item-details">
         <h3 class="system-status-general-info__item-title">{{ 'PHP'|t }}</h3>
-        <strong>{{ 'Version'|t }}</strong><br>{{ php.value }}
+        <h4 class="system-status-general-info__sub-item-title">{{ 'Version'|t }}</h4>{{ php.value }}
         {% if php.description %}
           <div class="description">{{ php.description }}</div>
         {% endif %}
-        <br>
-        <strong>{{ 'Memory limit'|t }}</strong><br>{{ php_memory_limit.value }}
+
+        <h4 class="system-status-general-info__sub-item-title">{{ 'Memory limit'|t }}</h4>{{ php_memory_limit.value }}
         {% if php_memory_limit.description %}
           <div class="description">{{ php_memory_limit.description }}</div>
         {% endif %}
@@ -84,12 +84,12 @@
       <span class="system-status-general-info__item-icon system-status-general-info__item-icon--database"></span>
       <div class="system-status-general-info__item-details">
         <h3 class="system-status-general-info__item-title">{{ 'Database'|t }}</h3>
-        <strong>{{ 'Version'|t }}</strong><br>{{ database_system_version.value }}
+        <h4 class="system-status-general-info__sub-item-title">{{ 'Version'|t }}</h4>{{ database_system_version.value }}
         {% if database_system_version.description %}
           <div class="description">{{ database_system_version.description }}</div>
         {% endif %}
-        <br>
-        <strong>{{ 'System'|t }}</strong><br>{{ database_system.value }}
+
+        <h4 class="system-status-general-info__sub-item-title">{{ 'System'|t }}</h4>{{ database_system.value }}
         {% if database_system.description %}
           <div class="description">{{ database_system.description }}</div>
         {% endif %}
diff --git a/core/themes/stable/css/system/components/system-status-counter.css b/core/themes/stable/css/system/components/system-status-counter.css
new file mode 100644
index 0000000..8d3ad76
--- /dev/null
+++ b/core/themes/stable/css/system/components/system-status-counter.css
@@ -0,0 +1,28 @@
+/**
+ * @file
+ * Styles for the system status counter component.
+ */
+
+.system-status-counter__status-icon {
+  display: inline-block;
+  height: 25px;
+  width: 25px;
+  vertical-align: middle;
+}
+.system-status-counter__status-icon:before {
+  content: "";
+  background-size: 20px;
+  background-position: center 2px;
+  background-repeat: no-repeat;
+  display: block;
+}
+
+.system-status-counter__status-icon--error:before {
+  background-image: url(../../../images/core/icons/e32700/error.svg);
+}
+.system-status-counter__status-icon--warning:before {
+  background-image: url(../../../images/core/icons/e29700/warning.svg);
+}
+.system-status-counter__status-icon--checked:before {
+  background-image: url(../../../images/core/icons/73b355/check.svg);
+}
diff --git a/core/themes/stable/stable.info.yml b/core/themes/stable/stable.info.yml
index f1b423e..251ecbd 100644
--- a/core/themes/stable/stable.info.yml
+++ b/core/themes/stable/stable.info.yml
@@ -175,6 +175,7 @@ libraries-override:
         css/components/reset-appearance.module.css: css/system/components/reset-appearance.module.css
         css/components/resize.module.css: css/system/components/resize.module.css
         css/components/sticky-header.module.css: css/system/components/sticky-header.module.css
+        css/components/system-status-counter.css: css/system/components/system-status-counter.css
         css/components/system-status-report-counters.css: css/system/components/system-status-report-counters.css
         css/components/system-status-report-general-info.css: css/system/components/system-status-report-general-info.css
         css/components/tabledrag.module.css: css/system/components/tabledrag.module.css
diff --git a/core/themes/stable/templates/admin/status-report-counter.html.twig b/core/themes/stable/templates/admin/status-report-counter.html.twig
index df0d59b..b0f7bd5 100644
--- a/core/themes/stable/templates/admin/status-report-counter.html.twig
+++ b/core/themes/stable/templates/admin/status-report-counter.html.twig
@@ -12,5 +12,4 @@
  */
 #}
 {{ amount }} {{ text }}
-<br>
 <a href="#{{ severity }}"><span class="visually-hidden">{{ text }} </span>Details</a>
diff --git a/core/themes/stable/templates/admin/status-report-general-info.html.twig b/core/themes/stable/templates/admin/status-report-general-info.html.twig
index ba584d9..c71d839 100644
--- a/core/themes/stable/templates/admin/status-report-general-info.html.twig
+++ b/core/themes/stable/templates/admin/status-report-general-info.html.twig
@@ -57,24 +57,24 @@
 </div>
 <div class="system-status-general-info__item">
   <h3 class="system-status-general-info__item-title">{{ 'PHP'|t }}</h3>
-  <strong>{{ 'Version'|t }}</strong><br>{{ php.value }}
+  <h4>{{ 'Version'|t }}</h4>{{ php.value }}
   {% if php.description %}
     {{ php.description }}
   {% endif %}
-  <br>
-  <strong>{{ 'Memory limit'|t }}</strong><br>{{ php_memory_limit.value }}
+
+  <h4>{{ 'Memory limit'|t }}</h4>{{ php_memory_limit.value }}
   {% if php_memory_limit.description %}
     {{ php_memory_limit.description }}
   {% endif %}
 </div>
 <div class="system-status-general-info__item">
   <h3 class="system-status-general-info__item-title">{{ 'Database'|t }}</h3>
-  <strong>{{ 'Version'|t }}</strong><br>{{ database_system_version.value }}
+  <h4>{{ 'Version'|t }}</h4>{{ database_system_version.value }}
   {% if database_system_version.description %}
     {{ database_system_version.description }}
   {% endif %}
-  <br>
-  <strong>{{ 'System'|t }}</strong><br>{{ database_system.value }}
+
+  <h4>{{ 'System'|t }}</h4>{{ database_system.value }}
   {% if database_system.description %}
     {{ database_system.description }}
   {% endif %}
diff --git a/core/themes/stable/templates/admin/status-report-grouped.html.twig b/core/themes/stable/templates/admin/status-report-grouped.html.twig
index bbeaa47..1914c16 100644
--- a/core/themes/stable/templates/admin/status-report-grouped.html.twig
+++ b/core/themes/stable/templates/admin/status-report-grouped.html.twig
@@ -23,7 +23,7 @@
     <div>
       <h3 id="{{ group.type }}">{{ group.title }}</h3>
       {% for requirement in group.items %}
-        <details class="system-status-report__entry">
+        <details class="system-status-report__entry" open>
           {%
             set summary_classes = [
               'system-status-report__status-title',