diff --git a/htdocs/css/style.css b/htdocs/css/style.css
index 46a91ee8..f30988e0 100644
--- a/htdocs/css/style.css
+++ b/htdocs/css/style.css
@@ -1,3 +1,9 @@
+:root {
+    --success-color:rgb(92, 184, 92);
+    --warning-color:rgb(240, 173, 78);
+    --danger-color:rgb(217, 83, 79);
+}
+
 h2 {
     font-size: 25px;
     margin: 18px 0 18px 0;
@@ -78,14 +84,27 @@ dl dt {
 }
 
 /* messages */
-#messages {
+.messages {
     background: #e0e0f0;
-    margin: 0.5em 1em 0.0em 0.5em;
+    margin: 0.5em 1em 0.0em 1em;
     padding: 0.3em;
+    list-style-type: none;
+}
+
+.messages:empty {
+    display: none;
+}
+
+.messages .success {
+    color: var(--success-color);
+}
+
+.messages .warning {
+    color: var(--warning-color);
 }
 
-#messages .message {
-    color: green;
+.messages .error {
+    color: var(--danger-color);
 }
 
 .filters {
@@ -421,13 +440,17 @@ table.loginform {
 }
 
 /* form errors */
-.errorlist {
-    color: red;
-    list-style-type: none;
-    padding-left: 0.2em;
-    margin: 0em;
+#errors {
+    background: #e0e0f0;
+    margin: 0em 1em 0.5em 1em;
+    padding: 0.3em;
 }
-.error {
+
+#errors:empty {
+    display: none;
+}
+
+.error-list, .errorlist {
     color: red;
 }
 
diff --git a/patchwork/templates/patchwork/list.html b/patchwork/templates/patchwork/list.html
index 5d3d82aa..6efbed26 100644
--- a/patchwork/templates/patchwork/list.html
+++ b/patchwork/templates/patchwork/list.html
@@ -8,16 +8,6 @@
 
 {% block body %}
 
-{% if errors %}
-<p>The following error{{ errors|length|pluralize:" was,s were" }} encountered
-while updating patches:</p>
-<ul class="errorlist">
-{% for error in errors %}
- <li>{{ error }}</li>
-{% endfor %}
-</ul>
-{% endif %}
-
 {% include "patchwork/partials/patch-list.html" %}
 
 {% endblock %}
diff --git a/patchwork/templates/patchwork/user-link-confirm.html b/patchwork/templates/patchwork/user-link-confirm.html
index 79678f64..a6d671f3 100644
--- a/patchwork/templates/patchwork/user-link-confirm.html
+++ b/patchwork/templates/patchwork/user-link-confirm.html
@@ -5,12 +5,9 @@
 
 {% block body %}
 
-{% if errors %}
-<p>{{ errors }}</p>
-{% else %}
+{% if not errors %}
  <p>You have successfully linked the email address {{ person.email }} to
   your Patchwork account</p>
-
 {% endif %}
 <p>Back to <a href="{% url 'user-profile' %}">your
  profile</a>.</p>
diff --git a/patchwork/templates/patchwork/user-link.html b/patchwork/templates/patchwork/user-link.html
index bf331520..c0595bdc 100644
--- a/patchwork/templates/patchwork/user-link.html
+++ b/patchwork/templates/patchwork/user-link.html
@@ -9,12 +9,12 @@
 on the link provided in the email to confirm that this address belongs to
 you.</p>
 {% else %}
+   <p>There was an error submitting your link request:</p>
    {% if form.errors %}
-   <p>There was an error submitting your link request.</p>
     {{ form.non_field_errors }}
    {% endif %}
    {% if error %}
-    <ul class="errorlist"><li>{{error}}</li></ul>
+    <ul class="error-list"><li>{{error}}</li></ul>
    {% endif %}
 
    <form action="{% url 'user-link' %}" method="post">
diff --git a/templates/base.html b/templates/base.html
index a95a11b0..3a0825ac 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -104,15 +104,29 @@
     </div>
    </div>
   </nav>
-{% if messages %}
-  <div id="messages">
-  {% for message in messages %}
-  {# TODO(stephenfin): Make use of message.tags when completely #}
-  {# converted to django.contrib.messages #}
-   <div class="message">{{ message }}</div>
-  {% endfor %}
+  <!--
+    spaceless tag is used to remove automatically added whitespace so that the container
+    is truly considered empty by the `:empty` pseudo-class that is used for styling
+  -->
+  {% spaceless %}
+  <ul class="messages">
+  {% if messages %}
+    {% for message in messages %}
+    <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
+    {% endfor %}
+  {% endif %}
+  </ul>
+  <div id="errors">
+    {% if errors %}
+        <p>The following error{{ errors|length|pluralize:" was,s were" }} encountered:</p>
+        <ul class="error-list">
+        {% for error in errors %}
+            <li>{{ error }}</li>
+        {% endfor %}
+        </ul>
+    {% endif %}
   </div>
-{% endif %}
+  {% endspaceless %}
   <div id="main-content" class="container-fluid">
 {% block body %}
 {% endblock %}
