diff --git a/templates/zephyr/index.html b/templates/zephyr/index.html
index 3307164901..ced7d83a27 100644
--- a/templates/zephyr/index.html
+++ b/templates/zephyr/index.html
@@ -15,9 +15,9 @@
 <tr id={{ zephyr.id }}>
 <td class="pointer">{% if user_profile.pointer == zephyr.id %}<p id="selected">&gt;{% else %}<p>{% endif %}</p></td>
 <td class="zephyr">
-<p><span onclick="narrow('{{ zephyr.display_recipient }}', '{{ zephyr.id }}')" class="zephyr_class" style="background-color: {% if zephyr.recipient.type == 'class' %}yellow{% else %}magenta{% endif %};">{{ zephyr.display_recipient }}</span> /
-<span onclick="narrow_instance('{{ zephyr.display_recipient }}', '{{ zephyr.instance }}', '{{ zephyr.id }}')" class="zephyr_instance" style="background-color: green;">{{ zephyr.instance }}</span> /
-<span onclick="prepare_personal('{{ zephyr.sender.user.username }}')" style="background-color: magenta;">{{ zephyr.sender.user.username }}</span><br />
+<p><span onclick="narrow('{{ zephyr.display_recipient }}', '{{ zephyr.id }}')" class="label {% if zephyr.recipient.type == 'class' %}zephyr_class{% else %}zephyr_personal_recipient{% endif %}">{{ zephyr.display_recipient }}</span>
+<span onclick="narrow_instance('{{ zephyr.display_recipient }}', '{{ zephyr.instance }}', '{{ zephyr.id }}')" class="label zephyr_instance">{{ zephyr.instance }}</span>
+<span onclick="prepare_personal('{{ zephyr.sender.user.username }}')" class="label zephyr_sender">{{ zephyr.sender.user.username }}</span><br />
 {{ zephyr.content }}
 </p></td>
 </tr>
diff --git a/zephyr/static/js/zephyr.js b/zephyr/static/js/zephyr.js
index 1e1738ab8d..16ee20b858 100644
--- a/zephyr/static/js/zephyr.js
+++ b/zephyr/static/js/zephyr.js
@@ -128,19 +128,19 @@ $(function() {
 });
 
 function add_message(index, zephyr) {
-    var recipient_color;
+    var recipient_class;
     if (zephyr.type == "class") {
-	recipient_color = "yellow";
+	recipient_class = "zephyr_class";
     } else {
-	recipient_color = "magenta";
+	recipient_class = "zephyr_personal_recipient";
     }
 
     var new_str = "<tr id=" + zephyr.id + ">" +
 	"<td class='pointer'><p></p></td>" +
 	"<td class='zephyr'>" +
-	"<p><span onclick=\"narrow('" + zephyr.display_recipient + "','" + zephyr.id + "')\" class='zephyr_class' style='background-color: " + recipient_color + ";'>" + zephyr.display_recipient +
-	"</span> / <span onclick=\"narrow_instance('" + zephyr.display_recipient + "','" + zephyr.instance + "','" + zephyr.id + "')\" class='zephyr_instance' style='background-color: green;'>" +
-	zephyr.instance + "</span> / <span onclick=\"prepare_personal('" + zephyr.sender + "')\" style='background-color: magenta;'>" + zephyr.sender + "</span><br />"
+	"<p><span onclick=\"narrow('" + zephyr.display_recipient + "','" + zephyr.id + "')\" class='label " + recipient_class + "'>" + zephyr.display_recipient +
+	"</span> <span onclick=\"narrow_instance('" + zephyr.display_recipient + "','" + zephyr.instance + "','" + zephyr.id + "')\" class='label zephyr_instance'>" +
+	zephyr.instance + "</span> <span onclick=\"prepare_personal('" + zephyr.sender + "')\" class='label zephyr_sender'>" + zephyr.sender + "</span><br />"
 	+ zephyr.content +
 	"</p></td>" +
 	"</tr>"
diff --git a/zephyr/static/styles/zephyr.css b/zephyr/static/styles/zephyr.css
index 6e45e1ba72..d46f3a06c6 100644
--- a/zephyr/static/styles/zephyr.css
+++ b/zephyr/static/styles/zephyr.css
@@ -24,3 +24,19 @@ form.zephyr textarea {
 #unhide {
     margin-top: 5px;
 }
+
+.zephyr_class {
+  background-color: #b94a48;
+}
+
+.zephyr_instance {
+  background-color: #468847;
+}
+
+.zephyr_personal_recipient {
+  background-color: #3a87ad;
+}
+
+.zephyr_sender {
+  background-color: #3a87ad;
+}