Pick a blue. And stick with a hue.

Author: ckj

src/sentry/static/sentry/less/sentry.less

@@ -8,18 +8,18 @@
 @import url(https://github.com/%3Cspan%20class=%22pl-s%22%3E%3Cspan%20class=%22pl-pds%22%3E"%3C/span%3Etypeahead.less%3Cspan%20class=%22pl-pds%22%3E"%3C/span%3E%3C/span%3E);
 
 @baseFontSize: 13px;
-@grayDark: #404f60;
-@gray: #465262;
+@grayDark: #4a535e;
+@gray: #4f5760;
 @navbarInverseLinkBackgroundActive: #333;
 @orange: #fb4226;
 @black: #111;
 @white: #fff;
 @sentry-orange: #fb4226;
-@blue: #49a9e6;
+@blue: #56AFE8;
 
-@linkColor: @blue;
+@linkColor: darken(@blue, 10%);
 
-@linkColorHover: darken(#1783c8, 10%);
+@linkColorHover: darken(@blue, 25%);
 
 @iconSpritePath:          "../bootstrap/img/glyphicons-halflings.png";
 @iconWhiteSpritePath:     "../bootstrap/img/glyphicons-halflings-white.png";
@@ -76,10 +76,10 @@ a {
   text-decoration: none;
   .transition(color linear .2s);
   cursor: pointer;
-}
-a:hover {
-  color: @linkColorHover;
-  text-decoration: none;
+  &:hover {
+    color: @linkColorHover;
+    text-decoration: none;
+  }
 }
 
 p {
@@ -139,7 +139,7 @@ h3 {
 /* =============================  Layout  ============================== */
 
 header {
-  background: #465262;
+  background: @grayDark;
   color: #fff;
   padding: 20px 0 19px;
   margin: 0 0 30px;
@@ -190,6 +190,8 @@ header {
       list-style: none;
       float: left;
       margin-left: 30px;
+      line-height: 1;
+
       a {
         font-size: 15px;
       }
@@ -1705,8 +1707,8 @@ legend {
 }
 
 .image {
-  border: 1px solid #E9EBEC;
-  padding: 20px;
+  border: 1px solid #e1e4e5;
+  padding: 15px;
   border-radius: 4px;
 }
 
@@ -1902,7 +1904,7 @@ legend {
           &:hover,
           &:focus {
             .transition(none);
-            color: #465262;
+            color: @grayDark;
             background-color: #dee3e9;
           }
         }
@@ -2297,9 +2299,11 @@ table.integrations {
       display: block;
       margin: 0 0 20px 0;
       padding: 18px 20px 12px;
-      border: 1px solid #E9EBEC;
+      border: 1px solid darken(#E9EBEC, 2.5);
+      box-shadow: 0 1px 2px rgba(70, 82, 98, .06);
       position: relative;
-      border-radius: 7px;
+      border-radius: 5px;
+      overflow: hidden;
 
       .loading {
         display: none;
@@ -2321,7 +2325,7 @@ table.integrations {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-        color: #465262;
+        color: @grayDark;
         font-weight: 500;
 
         a {
@@ -2441,14 +2445,15 @@ table.integrations {
   .container {
     max-width: 1100px;
   }
+
   header {
     background: none;
     color: @gray-dark;
-    padding: 40px 0;
+    padding: 30px 0;
     margin-bottom: 0;
 
     #logo {
-      font-size: 32px;
+      font-size: 30px;
     }
     .user-nav {
       margin-top: 8px;
@@ -2467,8 +2472,8 @@ table.integrations {
   }
 
   .content {
-    // border-top: 3px solid #f1f2f3;
-    padding-top: 15px;
+    border-top: 1px solid lighten(#E9EBEC, 2);
+    padding-top: 40px;
 
     .sidebar {
       h4 {
@@ -2554,6 +2559,7 @@ table.integrations {
 
       pre, code {
         background: lighten(#f1f2f3, 3);
+        border: 1px solid #e1e4e5;
       }
 
       .github {
@@ -2564,7 +2570,7 @@ table.integrations {
 
       .nav-tabs {
         li {
-          margin-bottom: -3px;
+          margin-bottom: -1px;
         }
       }
     }