diff --git a/public/css/_variables.styl b/public/css/_variables.styl
index 2ad9a3a..809ded5 100644
--- a/public/css/_variables.styl
+++ b/public/css/_variables.styl
@@ -1,16 +1,47 @@
-// colors
+// Blues
 
-$activeBlue = #00aeef
-$actionPink = #ec008c
+$blue-saturated-darker = #0B1316
+$blue-saturated-dark = #0f2034
+$blue-saturated = #192a47
+$blue-saturated-light = #34465a
+$blue-saturated-lighter = #6c7f95
 
-$sidebarBg = #0b1316
-$sidebarActive = #1f2d49
+$blue = #12acef
+$blue-light = lighten($blue, 50%)
+$blue-lighter = lighten($blue, 90%)
 
-$baseText = #565656
-$textSecondary = #b7b7b7
+// Monochromatic
 
-$grayBackground = #f7f7f7
-$grayOutline = #e4e4e4
+$gray-dark = #2d2d2d
+$gray = #565656
+$gray-light = #878787
+$gray-lighter = #eeeeee
+
+// Pinks
+
+$pink = #ec008c
+$pink-light = #f8bee0
+$pink-lighter = #fce8f1
+
+// Greens
+
+$green = #43bb6e
+$green-light = lighten($green, 70%)
+$green-lighter = lighten($green, 94%)
+
+// Reds
+
+$red = #de0a32
+$red-light = lighten($red, 80%)
+$red-lighter = lighten($red, 97%)
+
+// Orange
+
+$orange = #f18902
+$orange-light = lighten($orange, 50%)
+$orange-lighter = lighten($orange, 85%)
+
+// Font families
 
 $font-family-gotham = 'Gotham SSm A', 'Gotham SSm B', Helvetica, Arial, sans-serif
 
diff --git a/public/css/app/aux.styl b/public/css/app/aux.styl
index 492ae2c..db06714 100644
--- a/public/css/app/aux.styl
+++ b/public/css/app/aux.styl
@@ -1,5 +1,5 @@
 .aux
-  background: $grayBackground
+  background: lighten($gray-light, 93%)
   
   header
     margin-top: 8%
@@ -33,7 +33,7 @@
 
   .head
     margin-bottom: 20px
-    border-bottom: 1px solid lighten($grayOutline, 50%)
+    border-bottom: 1px solid lighten($gray-lighter, 50%)
 
   input
     width: 100%
diff --git a/public/css/app/callbar.styl b/public/css/app/callbar.styl
index 520700f..64a7c94 100644
--- a/public/css/app/callbar.styl
+++ b/public/css/app/callbar.styl
@@ -29,20 +29,20 @@ $callHeight = 80px
     margin: 0
 
     &.incoming
-      background: $activeBlue
+      background: $blue
       .callTime
         display: none
       .callerName:before
         content: "Incoming Call: "
 
     &.waiting
-      background: $activeBlue
+      background: $blue
       
       .spinner div
         background-color: #fff
 
     &.calling
-      background: $activeBlue
+      background: $blue
       .callTime
         display: none
       .callerName:before
@@ -56,7 +56,7 @@ $callHeight = 80px
     &.ending
       .callerName:before
         content: "Call ending with: "
-      background: $grayBackground
+      background: lighten($gray-light, 93%)
       
     .callActions
       position: absolute
diff --git a/public/css/app/chat.styl b/public/css/app/chat.styl
index d6f669f..03a579d 100644
--- a/public/css/app/chat.styl
+++ b/public/css/app/chat.styl
@@ -16,13 +16,13 @@
   
   header
     padding: 5px
-    border-bottom: 2px solid $grayOutline
+    border-bottom: 2px solid $gray-lighter
     position: fixed
     right: 0px
     left: 201px
     z-index: 10
     borderbox()
-    background: $grayBackground
+    background: lighten($gray-light, 93%)
 
     .avatar
       margin-right: 5px
@@ -55,8 +55,8 @@
       font-size: $font-size-smaller
       font-weight: $font-weight-bold
       line-height: 20px
-      color: lighten($baseText, 30%)
-      background: $grayOutline
+      color: lighten($gray, 30%)
+      background: $gray-lighter
 
     .call
       margin-top: 10px
@@ -76,14 +76,14 @@
         top: 60px
         left: 10px
         height: 50%
-        border: 2px solid $grayOutline
+        border: 2px solid $gray-lighter
 
       .local
         position: absolute
         bottom: 10px
         right: 10px
         height: 20%
-        border: 2px solid $grayOutline
+        border: 2px solid $gray-lighter
         transform(scaleX(-1))
 
       .buttons
@@ -120,7 +120,7 @@
     min-height: 50px
     display: table
     borderbox()
-    border-bottom: 1px solid $grayOutline
+    border-bottom: 1px solid $gray-lighter
 
     &:last-of-type
       border: none
@@ -154,13 +154,13 @@
     borderbox()
 
     &:not(.mine)
-      color: $activeBlue
+      color: $blue
 
     &.mine
       background: white
 
       .timestamp
-        color: darken($grayOutline, 20%)
+        color: darken($gray-lighter, 20%)
 
     &.delayed
       .timestamp:before
@@ -171,7 +171,7 @@
         content: 'edited '
 
     &.pending
-      color: lighten($baseText, 50%)
+      color: lighten($gray, 50%)
 
     .body
       display: inline
@@ -180,7 +180,7 @@
     .timestamp
       font-size: $font-size-smaller
       font-weight: $font-weight-bold
-      color: lighten($activeBlue, 50%)
+      color: lighten($blue, 50%)
       float: right
       display: block
 
@@ -189,7 +189,7 @@
 
 .chatBox
   borderbox()
-  border-top: 1px solid $grayOutline
+  border-top: 1px solid $gray-lighter
   bottom: 0px
   position: fixed
   right: 0px
@@ -197,7 +197,7 @@
   z-index: 200
 
   form
-    background: $grayBackground
+    background: lighten($gray-light, 93%)
     padding: 11px
 
   .formwrap
diff --git a/public/css/app/forms.styl b/public/css/app/forms.styl
index 57145e7..d115112 100644
--- a/public/css/app/forms.styl
+++ b/public/css/app/forms.styl
@@ -5,9 +5,9 @@ input[type=text], input[type=email], input[type=search], input[type=password], t
   roundall(3px)
   padding: 0 10px
   background-color: white
-  border: 1px solid $grayOutline
+  border: 1px solid $gray-lighter
   font-size: $font-size-small
-  color: $baseText
+  color: $gray
   borderbox()
   font-family: $font-family-gotham
   -webkit-font-smoothing: antialiased
@@ -30,14 +30,14 @@ input[type=password]:focus,
 textarea:focus,
 .main .status:focus
   outline: none
-  border: 1px solid lighten($activeBlue, 50%)
+  border: 1px solid lighten($blue, 50%)
 
 label
   display: block
   margin-bottom: 5px
   font-size: 13px
   font-weight: $font-weight-bold
-  color: $baseText
+  color: $gray
 
 a.button
   line-height: 35px
@@ -51,7 +51,7 @@ button, a.button
   min-width: 80px
   padding: 0 1em
   color: white
-  background: $activeBlue
+  background: $blue
   font-size: $font-size-small
   font-weight: $font-weight-bold
   text-decoration: none
@@ -62,7 +62,7 @@ button, a.button
     outline: none
 
   &:hover
-    background: darken($activeBlue, 30%)
+    background: darken($blue, 30%)
 
 .installFirefox, .addContact
   margin-left: 5px
\ No newline at end of file
diff --git a/public/css/app/layout.styl b/public/css/app/layout.styl
index 72259ac..d87651d 100644
--- a/public/css/app/layout.styl
+++ b/public/css/app/layout.styl
@@ -3,14 +3,14 @@
 
 body
   background: white
-  color: $baseText
+  color: $gray
   font-family: $font-family-gotham
   font-size: $font-size-base
   font-weight: 400
   -webkit-font-smoothing: antialiased
 
 h1, h2, h3, h4
-  color: darken($baseText, 30%)
+  color: darken($gray, 30%)
 
 h3
   margin-top: 0
diff --git a/public/css/app/roster.styl b/public/css/app/roster.styl
index 75d3f96..5ac184f 100644
--- a/public/css/app/roster.styl
+++ b/public/css/app/roster.styl
@@ -7,7 +7,7 @@
   bottom: 0px
   left: 0px
   width: 200px
-  background-color: $sidebarBg
+  background-color: $blue-saturated-darker
   z-index: 300
   overflow-y: auto;
   overflow-x: hidden;
@@ -36,10 +36,10 @@
         width: 150px
 
       .button
-        background: $sidebarActive
+        background: $blue-saturated
 
         &:hover
-          background: lighten($sidebarActive, 10%)
+          background: $blue-saturated-light
 
   h1
     font-size: $font-size-small
@@ -106,10 +106,10 @@
 
     &.offline:not(:hover)
       .name
-        color: darken($textSecondary, 40%)
+        color: darken($gray-light, 40%)
 
       .status
-        color: darken($textSecondary, 65%)
+        color: darken($gray-light, 65%)
 
       img
         opacity: .25
@@ -119,7 +119,7 @@
       font-weight: $font-weight-bold
 
       .name
-        color: $baseText
+        color: $gray
 
     &.composing
       &:after
@@ -129,12 +129,12 @@
 
     &.paused
       &:after
-        background: $textSecondary
+        background: $gray-light
 
     &.idle
       padding-right: 15px
       .name
-        color: $textSecondary
+        color: $gray-light
         max-width: 60%
 
       .user
@@ -164,7 +164,7 @@
       overflow: hidden
 
     .status
-      color: $textSecondary
+      color: $gray-light
       font-size: $font-size-smaller
       font-weight: 400
       line-height: 12px
@@ -189,7 +189,7 @@
       display: inline-block
       margin-left: 5px
       font-size: $font-size-small
-      color: darken($textSecondary, 50%)
+      color: darken($gray-light, 50%)
 
 #bookmarks
 
diff --git a/public/css/app/settings.styl b/public/css/app/settings.styl
index 51a71bf..f26bb69 100644
--- a/public/css/app/settings.styl
+++ b/public/css/app/settings.styl
@@ -3,7 +3,7 @@
 
 .main > div
   padding: 20px
-  border-bottom: 1px solid $grayOutline
+  border-bottom: 1px solid $gray-lighter
 
   .status
     padding: 10px
@@ -16,8 +16,8 @@
   font-size: $font-size-small
   roundall(3px)
   margin: 10px 0
-  color: $textSecondary
-  background: $grayBackground
+  color: $gray-light
+  background: lighten($gray-light, 93%)
 
   p
     margin: 0
diff --git a/public/css/otalk.css b/public/css/otalk.css
index defd10b..626c9f9 100644
--- a/public/css/otalk.css
+++ b/public/css/otalk.css
@@ -272,10 +272,10 @@ h3 {
   width: 150px;
 }
 #menu .main li .button {
-  background: #1f2d49;
+  background: #192a47;
 }
 #menu .main li .button:hover {
-  background: #2b3f65;
+  background: #34465a;
 }
 #menu h1 {
   font-size: 12px;
@@ -318,7 +318,7 @@ h3 {
 }
 #roster li:hover,
 #bookmarks li:hover {
-  background: #1f2d49;
+  background: $sidebarActive;
 }
 #roster li.online:not(.idle):after,
 #bookmarks li.online:not(.idle):after,
@@ -362,11 +362,11 @@ h3 {
 }
 #roster li.offline:not(:hover) .name,
 #bookmarks li.offline:not(:hover) .name {
-  color: #6e6e6e;
+  color: #515151;
 }
 #roster li.offline:not(:hover) .status,
 #bookmarks li.offline:not(:hover) .status {
-  color: #404040;
+  color: #2f2f2f;
 }
 #roster li.offline:not(:hover) img,
 #bookmarks li.offline:not(:hover) img {
@@ -393,7 +393,7 @@ h3 {
 }
 #roster li.paused:after,
 #bookmarks li.paused:after {
-  background: #b7b7b7;
+  background: #878787;
 }
 #roster li.idle,
 #bookmarks li.idle {
@@ -401,7 +401,7 @@ h3 {
 }
 #roster li.idle .name,
 #bookmarks li.idle .name {
-  color: #b7b7b7;
+  color: #878787;
   max-width: 60%;
 }
 #roster li.idle .user,
@@ -449,7 +449,7 @@ h3 {
 }
 #roster li .status,
 #bookmarks li .status {
-  color: #b7b7b7;
+  color: #878787;
   font-size: 10px;
   font-weight: 400;
   line-height: 12px;
@@ -481,7 +481,7 @@ h3 {
   display: inline-block;
   margin-left: 5px;
   font-size: 12px;
-  color: #5c5c5c;
+  color: #444;
 }
 #bookmarks .name {
   padding: 5px 10px 5px 40px;
@@ -570,7 +570,7 @@ h3 {
 }
 .conversation header {
   padding: 5px;
-  border-bottom: 2px solid #e4e4e4;
+  border-bottom: 2px solid #eee;
   position: fixed;
   right: 0px;
   left: 201px;
@@ -625,7 +625,7 @@ h3 {
   font-weight: 800;
   line-height: 20px;
   color: #898989;
-  background: #e4e4e4;
+  background: #eee;
 }
 .conversation header .call {
   margin-top: 10px;
@@ -648,14 +648,14 @@ h3 {
   top: 60px;
   left: 10px;
   height: 50%;
-  border: 2px solid #e4e4e4;
+  border: 2px solid #eee;
 }
 .conversation header .activeCall .local {
   position: absolute;
   bottom: 10px;
   right: 10px;
   height: 20%;
-  border: 2px solid #e4e4e4;
+  border: 2px solid #eee;
   -webkit-transform: scaleX(-1);
   -moz-transform: scaleX(-1);
   -ms-transform: scaleX(-1);
@@ -696,7 +696,7 @@ h3 {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  border-bottom: 1px solid #e4e4e4;
+  border-bottom: 1px solid #eee;
 }
 .messages li:last-of-type {
   border: none;
@@ -739,13 +739,13 @@ h3 {
   box-sizing: border-box;
 }
 .messages .message:not(.mine) {
-  color: #00aeef;
+  color: #12acef;
 }
 .messages .message.mine {
   background: #fff;
 }
 .messages .message.mine .timestamp {
-  color: #b6b6b6;
+  color: #bebebe;
 }
 .messages .message.delayed .timestamp:before {
   content: '@ ';
@@ -763,7 +763,7 @@ h3 {
 .messages .message .timestamp {
   font-size: 10px;
   font-weight: 800;
-  color: #78daff;
+  color: #88d5f7;
   float: right;
   display: block;
 }
@@ -774,7 +774,7 @@ h3 {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  border-top: 1px solid #e4e4e4;
+  border-top: 1px solid #eee;
   bottom: 0px;
   position: fixed;
   right: 0px;
@@ -808,7 +808,7 @@ h3 {
 }
 .main > div {
   padding: 20px;
-  border-bottom: 1px solid #e4e4e4;
+  border-bottom: 1px solid #eee;
 }
 .main > div .status {
   padding: 10px;
@@ -826,7 +826,7 @@ h3 {
   -border-radius: 3px;
   border-radius: 3px;
   margin: 10px 0;
-  color: #b7b7b7;
+  color: #878787;
   background: #f7f7f7;
 }
 .uploadRegion p {
@@ -883,7 +883,7 @@ h3 {
 }
 .box .head {
   margin-bottom: 20px;
-  border-bottom: 1px solid #f2f2f2;
+  border-bottom: 1px solid #f7f7f7;
 }
 .box input {
   width: 100%;
@@ -919,7 +919,7 @@ textarea,
   border-radius: 3px;
   padding: 0 10px;
   background-color: #fff;
-  border: 1px solid #e4e4e4;
+  border: 1px solid #eee;
   font-size: 12px;
   color: #565656;
   -moz-box-sizing: border-box;
@@ -952,7 +952,7 @@ input[type=password]:focus,
 textarea:focus,
 .main .status:focus {
   outline: none;
-  border: 1px solid #78daff;
+  border: 1px solid #88d5f7;
 }
 label {
   display: block;
@@ -978,7 +978,7 @@ a.button {
   min-width: 80px;
   padding: 0 1em;
   color: #fff;
-  background: #00aeef;
+  background: #12acef;
   font-size: 12px;
   font-weight: 800;
   text-decoration: none;
@@ -991,7 +991,7 @@ a.button:focus {
 }
 button:hover,
 a.button:hover {
-  background: #007aa7;
+  background: #0b79a9;
 }
 .installFirefox,
 .addContact {
@@ -1030,7 +1030,7 @@ a.button:hover {
   margin: 0;
 }
 #calls .call.incoming {
-  background: #00aeef;
+  background: #12acef;
 }
 #calls .call.incoming .callTime {
   display: none;
@@ -1039,13 +1039,13 @@ a.button:hover {
   content: "Incoming Call: ";
 }
 #calls .call.waiting {
-  background: #00aeef;
+  background: #12acef;
 }
 #calls .call.waiting .spinner div {
   background-color: #fff;
 }
 #calls .call.calling {
-  background: #00aeef;
+  background: #12acef;
 }
 #calls .call.calling .callTime {
   display: none;
@@ -1054,7 +1054,7 @@ a.button:hover {
   content: "Calling: ";
 }
 #calls .call.accepted {
-  background: #1f2d49;
+  background: $sidebarActive;
 }
 #calls .call.accepted .callerName:before {
   content: "On Call: ";
diff --git a/public/x-manifest.cache b/public/x-manifest.cache
index 0a49d1f..a2e45e4 100644
--- a/public/x-manifest.cache
+++ b/public/x-manifest.cache
@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# 0.0.1 1382540896499
+# 0.0.1 1382550861581
 
 CACHE:
 /app.js