Switched to Source Sans Pro as the base font for the app and made a number of other cosmetic changes.

What changed:
   * Vector icons swapped in for the left sidebar buttons and filters
   * Lighter font weight in the stream filters list
   * Round color swatches in the stream filters list, with an inner shadow
   * Tighter line height in the individual messages in the message pane
   * Fixed button widths in the left sidebar (so the buttons are equal in width)

(imported from commit 337dc4a3d8e29945cfc8cfb9524ac76a7b038ad8)

templates/zephyr/left-sidebar.html

@@ -13,13 +13,13 @@
                   <div class="new_message_button">
                     <button type="button" class="btn btn-large compose_stream_button"
                             id="left_bar_compose_stream_button_big">
-                      <i class="icon-bullhorn"></i> New stream message
+                      <i class="icon-vector-bullhorn"></i>&nbsp;&nbsp;New stream message
                     </button>
                   </div>
                   <div class="new_message_button">
                     <button type="button" class="btn btn-large compose_private_button"
                             id="left_bar_compose_private_button_big">
-                      <i class="icon-user"></i> New private message
+                      <i class="icon-vector-user"></i>&nbsp;&nbsp;New private message
                     </button>
                   </div>
               </div>
@@ -27,10 +27,10 @@
                       <ul id="global_filters" class="filters">
                           {# Special-case this link so we don't actually go to page top. #}
                           <li data-name="home"
-                          class="active-filter"><a href="#"><i class="icon-home"></i> Home <span class="count">(<span class="value"></span>)</span></a></li>
+                          class="active-filter"><i class="icon-vector-home"></i> <a href="#">Home <span class="count">(<span class="value"></span>)</span></a></li>
-                          <li data-name="all" class="hidden-filter"><i class="icon-list"></i><a href="#narrow/in/all"> All messages <span class="count">(<span class="value"></span>)</span></a></li>
+                          <li data-name="all" class="hidden-filter"><i class="icon-vector-list"></i> <a href="#narrow/in/all">All messages <span class="count">(<span class="value"></span>)</span></a></li>
-                          <li data-name="private-message"><i class="icon-user"></i><a href="#narrow/is/private-message"> Private messages <span class="count">(<span class="value"></span>)</span></a></li>
+                          <li data-name="private-message"><i class="icon-vector-user"></i> <a href="#narrow/is/private-message">Private messages <span class="count">(<span class="value"></span>)</span></a></li>
-                          <li data-name="starred"><a href="#narrow/is/starred"><i class="icon-vector-star humbug-icon-star"></i> Starred messages</a></li>
+                          <li data-name="starred"><i class="icon-vector-star"></i> <a href="#narrow/is/starred">Starred messages</a></li>
                       </ul>
                       <ul id="stream_filters" class="filters scrolling_list"></ul>
               </div>

zephyr/static/styles/fonts.css

@@ -9,14 +9,152 @@
  *  - The Font Awesome pictograms are licensed under the CC BY 3.0 License - http://creativecommons.org/licenses/by/3.0/
  *  - Attribution is no longer required in Font Awesome 3.0, but much appreciated:
  *    "Font Awesome by Dave Gandy - http://fortawesome.github.com/Font-Awesome"
-
- *  Contact
- *  -------------------------------------------------------
- *  Email: dave@davegandy.com
- *  Twitter: http://twitter.com/fortaweso_me
- *  Work: Lead Product Designer @ http://kyruus.com
  */
 
+@font-face {
+    font-family: 'Humbug';
+    src: url('../third/sourcesans/SourceSansPro-ExtraLight-webfont.eot');
+    src: url('../third/sourcesans/SourceSansPro-ExtraLight-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../third/sourcesans/SourceSansPro-ExtraLight-webfont.woff') format('woff'),
+         url('../third/sourcesans/SourceSansPro-ExtraLight-webfont.ttf') format('truetype'),
+         url('../third/sourcesans/SourceSansPro-ExtraLight-webfont.svg#SourceSansProExtraLight') format('svg');
+    font-weight: 100;
+    font-style: normal;
+
+}
+
+@font-face {
+    font-family: 'Humbug';
+    src: url('../third/sourcesans/SourceSansPro-ExtraLightIt-webfont.eot');
+    src: url('../third/sourcesans/SourceSansPro-ExtraLightIt-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../third/sourcesans/SourceSansPro-ExtraLightIt-webfont.woff') format('woff'),
+         url('../third/sourcesans/SourceSansPro-ExtraLightIt-webfont.ttf') format('truetype'),
+         url('../third/sourcesans/SourceSansPro-ExtraLightIt-webfont.svg#SourceSansProExtraLightItalic') format('svg');
+    font-weight: 100;
+    font-style: italic;
+
+}
+
+@font-face {
+    font-family: 'Humbug';
+    src: url('../third/sourcesans/SourceSansPro-Light-webfont.eot');
+    src: url('../third/sourcesans/SourceSansPro-Light-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../third/sourcesans/SourceSansPro-Light-webfont.woff') format('woff'),
+         url('../third/sourcesans/SourceSansPro-Light-webfont.ttf') format('truetype'),
+         url('../third/sourcesans/SourceSansPro-Light-webfont.svg#SourceSansProLight') format('svg');
+    font-weight: 300;
+    font-style: normal;
+
+}
+
+@font-face {
+    font-family: 'Humbug';
+    src: url('../third/sourcesans/SourceSansPro-LightIt-webfont.eot');
+    src: url('../third/sourcesans/SourceSansPro-LightIt-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../third/sourcesans/SourceSansPro-LightIt-webfont.woff') format('woff'),
+         url('../third/sourcesans/SourceSansPro-LightIt-webfont.ttf') format('truetype'),
+         url('../third/sourcesans/SourceSansPro-LightIt-webfont.svg#SourceSansProLightItalic') format('svg');
+    font-weight: 300;
+    font-style: italic;
+
+}
+
+@font-face {
+    font-family: 'Humbug';
+    src: url('../third/sourcesans/SourceSansPro-Regular-webfont.eot');
+    src: url('../third/sourcesans/SourceSansPro-Regular-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../third/sourcesans/SourceSansPro-Regular-webfont.woff') format('woff'),
+         url('../third/sourcesans/SourceSansPro-Regular-webfont.ttf') format('truetype'),
+         url('../third/sourcesans/SourceSansPro-Regular-webfont.svg#SourceSansProRegular') format('svg');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+@font-face {
+    font-family: 'Humbug';
+    src: url('../third/sourcesans/SourceSansPro-It-webfont.eot');
+    src: url('../third/sourcesans/SourceSansPro-It-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../third/sourcesans/SourceSansPro-It-webfont.woff') format('woff'),
+         url('../third/sourcesans/SourceSansPro-It-webfont.ttf') format('truetype'),
+         url('../third/sourcesans/SourceSansPro-It-webfont.svg#SourceSansProItalic') format('svg');
+    font-weight: normal;
+    font-style: italic;
+
+}
+
+@font-face {
+    font-family: 'Humbug';
+    src: url('../third/sourcesans/SourceSansPro-Semibold-webfont.eot');
+    src: url('../third/sourcesans/SourceSansPro-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../third/sourcesans/SourceSansPro-Semibold-webfont.woff') format('woff'),
+         url('../third/sourcesans/SourceSansPro-Semibold-webfont.ttf') format('truetype'),
+         url('../third/sourcesans/SourceSansPro-Semibold-webfont.svg#SourceSansProSemibold') format('svg');
+    font-weight: 600;
+    font-style: normal;
+
+}
+
+@font-face {
+    font-family: 'Humbug';
+    src: url('../third/sourcesans/SourceSansPro-SemiboldIt-webfont.eot');
+    src: url('../third/sourcesans/SourceSansPro-SemiboldIt-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../third/sourcesans/SourceSansPro-SemiboldIt-webfont.woff') format('woff'),
+         url('../third/sourcesans/SourceSansPro-SemiboldIt-webfont.ttf') format('truetype'),
+         url('../third/sourcesans/SourceSansPro-SemiboldIt-webfont.svg#SourceSansProSemiboldItalic') format('svg');
+    font-weight: 600;
+    font-style: italic;
+
+}
+
+@font-face {
+    font-family: 'Humbug';
+    src: url('../third/sourcesans/SourceSansPro-Bold-webfont.eot');
+    src: url('../third/sourcesans/SourceSansPro-Bold-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../third/sourcesans/SourceSansPro-Bold-webfont.woff') format('woff'),
+         url('../third/sourcesans/SourceSansPro-Bold-webfont.ttf') format('truetype'),
+         url('../third/sourcesans/SourceSansPro-Bold-webfont.svg#SourceSansProBold') format('svg');
+    font-weight: bold;
+    font-style: normal;
+
+}
+
+@font-face {
+    font-family: 'Humbug';
+    src: url('../third/sourcesans/SourceSansPro-BoldIt-webfont.eot');
+    src: url('../third/sourcesans/SourceSansPro-BoldIt-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../third/sourcesans/SourceSansPro-BoldIt-webfont.woff') format('woff'),
+         url('../third/sourcesans/SourceSansPro-BoldIt-webfont.ttf') format('truetype'),
+         url('../third/sourcesans/SourceSansPro-BoldIt-webfont.svg#SourceSansProBoldItalic') format('svg');
+    font-weight: bold;
+    font-style: italic;
+
+}
+
+@font-face {
+    font-family: 'Humbug';
+    src: url('../third/sourcesans/SourceSansPro-Black-webfont.eot');
+    src: url('../third/sourcesans/SourceSansPro-Black-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../third/sourcesans/SourceSansPro-Black-webfont.woff') format('woff'),
+         url('../third/sourcesans/SourceSansPro-Black-webfont.ttf') format('truetype'),
+         url('../third/sourcesans/SourceSansPro-Black-webfont.svg#SourceSansProBlack') format('svg');
+    font-weight: 900;
+    font-style: normal;
+
+}
+
+@font-face {
+    font-family: 'Humbug';
+    src: url('../third/sourcesans/SourceSansPro-BlackIt-webfont.eot');
+    src: url('../third/sourcesans/SourceSansPro-BlackIt-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../third/sourcesans/SourceSansPro-BlackIt-webfont.woff') format('woff'),
+         url('../third/sourcesans/SourceSansPro-BlackIt-webfont.ttf') format('truetype'),
+         url('../third/sourcesans/SourceSansPro-BlackIt-webfont.svg#SourceSansProBlackItalic') format('svg');
+    font-weight: 900;
+    font-style: italic;
+
+}
+
 @font-face {
   font-family: 'FontAwesome';
   src: url('../third/fontawesome/fontawesome-webfont.eot?v=3.0.1');
@@ -292,3 +430,4 @@ ul.icons li [class*=" icon-vector-"] {
 .icon-vector-sitemap:before              { content: "\f0e8"; }
 .icon-vector-edit:before                 { content: "\f044"; }
 .icon-vector-bullhorn:before             { content: "\f0a1"; }
+.icon-vector-list:before                 { content: "\f03a"; }

zephyr/static/styles/portico.css

@@ -1,5 +1,5 @@
 body {
-    font-family: 'Droid Sans', Helvetica, Arial, sans-serif;
+    font-family: 'Humbug', Helvetica, Arial, sans-serif;
     line-height: 150%;
 }
 

zephyr/static/styles/zephyr.css

@@ -1,8 +1,13 @@
 body {
-    font-family: 'Droid Sans', Helvetica, Arial, sans-serif;
+    font-family: 'Humbug', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     overflow-y: scroll;
 }
 
+input, button, select, textarea {
+    font-family: 'Humbug', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    line-height: normal;
+}
+
 .container-fluid {
     max-width: 1200px;
     margin: 0px auto;
@@ -17,7 +22,7 @@ body {
 }
 
 textarea, input {
-    font-family: 'Droid Sans', Helvetica, Arial, sans-serif;
+    font-family: 'Humbug', Helvetica, Arial, sans-serif;
 }
 
 
@@ -56,6 +61,7 @@ li, .table th, .table td {
     font-size:  inherit;
     height:     auto;
     min-height: 2.2em;
+    line-height: 100%;
 }
 
 .btn-large {
@@ -64,6 +70,7 @@ li, .table th, .table td {
 
 .navbar .brand {
     font-size: 140%;
+    font-weight: 300;
 }
 
 /* Classes for hiding and showing controls */
@@ -152,7 +159,7 @@ a:hover code {
     white-space: nowrap;
 }
 .my_email {
-    color: grey;
+    font-weight: 300;
 }
 
 
@@ -164,6 +171,9 @@ a:hover code {
     padding-top: 1em;
 }
 
+.compose_private_button, .compose_stream_button {
+}
+
 .bottom_sidebar {
     margin-top: 1em;
 }
@@ -402,7 +412,7 @@ td.pointer {
 }
 
 .message_time {
-    color: gray;
+    font-weight: 300;
     font-size: 90%;
 }
 
@@ -450,6 +460,7 @@ table.focused_table {
 .message_content {
     margin-left: 5px;
     margin-right: 35px; /* size of the timestamp */
+    line-height: 17px;
 }
 @media (max-width: 480px) {
     .message_content {
@@ -728,6 +739,7 @@ input.recipient_box {
 }
 
 #searchbox .search_button {
+    height: 30px;
     text-align: center;
     padding: 4px 10px 4px 10px;
 }
@@ -1081,11 +1093,15 @@ table.floating_recipient {
     width: 1em;
     height: 1em;
     vertical-align: middle;
+    border-radius: 1em;
+   -moz-box-shadow:     1px 1px 5px #333 inset;
+   -webkit-box-shadow:  1px 1px 5px #333 inset;
+    box-shadow:         1px 1px 5px #333 inset;
 }
 
 ul.expanded_subjects {
     list-style-type: none;
-    font-weight: normal;
+    font-weight: 300;
 }
 
 li.expanded_subject {
@@ -1181,6 +1197,10 @@ li.expanded_subject {
     color: #000;
 }
 
+#stream_filters {
+    font-weight: 300;
+}
+
 #stream_filters .inactive_stream {
     opacity: .5;
 }