diff --git a/browser/main/SideNav/FolderItem.styl b/browser/main/SideNav/FolderItem.styl
index e2b0f7bd..fa5f1af6 100644
--- a/browser/main/SideNav/FolderItem.styl
+++ b/browser/main/SideNav/FolderItem.styl
@@ -3,23 +3,15 @@
   width 100%
   position relative
   cursor pointer
-  transition 0.15s
-  color $nav-inactive-text-color
-  &:hover
-    background-color $nav-hover-background
-    .control
-      opacity 1
-  &:active, &:hover:active
-    background-color $nav-active-background
-    color $nav-text-color
+  navButtonColor()
 
 .root--active
   @extend .root
-  background-color $nav-active-background
-  color $nav-text-color
+  background-color $ui-button--active-backgroundColor
+  color $ui-button--active-color
   &:hover
-    background-color $nav-active-background
-    color $nav-text-color
+    background-color $ui-button--active-backgroundColor
+    color $ui-button--active-color
   .control
     opacity 1
 
@@ -46,19 +38,11 @@
   transition opacity 0.15s
 
 .control-button
+  navButtonColor()
   width 24px
   height 24px
   margin-top 4.5px
-  border none
   border-radius 5px
-  background-color transparent
-  color $nav-inactive-text-color
-  transition color background-color 0.15s
-  &:hover
-    background-color $nav-hover-background
-  &:active
-    background-color $nav-active-background
-    color $nav-text-color
 .root--edit
   @extend .root
 
@@ -69,12 +53,12 @@
   height 33px
   padding 0 10px
   border-radius 5px
-  border solid 1px $nav-border-color
+  border $ui-border
   outline none
   &:focus
-    border-color $focus-border-color
+    border-color $ui-input--focus-borderColor
   &:disabled
-    background-color $disabled-input-background
+    background-color $ui-input--disabled-backgroundColor
 
 .root--folded
   @extend .root
@@ -95,7 +79,7 @@
     box-sizing border-box
     margin-left 0
     overflow ellipsis
-    background-color $nav-tooltip-background-color
+    background-color $ui-tooltip-backgroundColor
     color white
     line-height 34px
     border-top-right-radius 5px
@@ -107,11 +91,11 @@
 
 .root--folded--active
   @extend .root--folded
-  background-color $nav-active-background
-  color $nav-text-color
+  background-color $ui-button--active-backgroundColor
+  color $ui-button--active-color
   &:hover
-    background-color $nav-active-background
-    color $nav-text-color
+    background-color $ui-button--active-backgroundColor
+    color $ui-button--active-color
 
 .root--edit--folded
   @extend .root--edit
diff --git a/browser/main/SideNav/RepositorySection.styl b/browser/main/SideNav/RepositorySection.styl
index 5f50f5cb..19752d59 100644
--- a/browser/main/SideNav/RepositorySection.styl
+++ b/browser/main/SideNav/RepositorySection.styl
@@ -3,33 +3,25 @@
   color $nav-text-color
 
 .header
+  navButtonColor()
   position relative
+  width 100%
   height 33px
   cursor pointer
-  color $nav-inactive-text-color
-  transition 0.15s
-  border none
-  width 100%
   text-align left
-  background-color transparent
   font-size 14px
-  &:hover
-    background-color $nav-hover-background
-    .header-control-button
-      opacity 1
-  &:active, &:active:hover
-    background-color $nav-active-background
-    color $nav-text-color
+  &:hover .header-control-button
+    opacity 1
 
 .header--active
   @extend .header
-  background-color $nav-active-background
-  color $nav-text-color
+  background-color $ui-button--active-backgroundColor
+  color $ui-button--active-color
   .header-control-button
     opacity 1
   &:hover
-    background-color $nav-active-background
-    color $nav-text-color
+    background-color $ui-button--active-backgroundColor
+    color $ui-button--active-color
 
 .header-name
   position absolute
@@ -51,21 +43,13 @@
   width 48px
 
 .header-control-button
+  navButtonColor()
   width 24px
+  height 24px
   padding 0
   margin-top 4.5px
-  height 24px
-  border none
   border-radius 5px
-  background-color transparent
-  color $nav-inactive-text-color
   opacity 0
-  transition color background-color 0.15s
-  &:hover
-    background-color $nav-hover-background
-  &:active
-    background-color $nav-active-background
-    color $nav-text-color
 
 .header-control-button--show
   @extend .header-control-button
@@ -81,31 +65,22 @@
   height 33px
   padding 0 10px
   border-radius 5px
-  border solid 1px $nav-border-color
+  border $ui-border
   outline none
   &:focus
-    border-color $focus-border-color
+    border-color $ui-input--focus-borderColor
   &:disabled
-    background-color $disabled-input-background
+    background-color $ui-input--disabled-backgroundColor
 
 .newFolderButton
-  height 33px
+  navButtonColor()
+  height 34px
   width 100%
   border none
   padding-left 20px
   text-align left
-  color $nav-inactive-text-color
-  background-color transparent
-  transition color background-color 0.15s
-  &:hover
-    background-color $nav-hover-background
-  &:active
-    background-color $nav-active-background
-    color $nav-text-color
-
-.newFolderButton
-  height 34px
   line-height 34px
+
 .newFolderButton-label
   margin-left 0
 
@@ -135,7 +110,7 @@
     box-sizing border-box
     margin-left 0
     overflow ellipsis
-    background-color $nav-tooltip-background-color
+    background-color $ui-tooltip-backgroundColor
     color white
     line-height 34px
     border-top-right-radius 5px
@@ -155,9 +130,9 @@
     display none
   .header-control-button--show
     float right
-    background-color $nav-tooltip-button-background
+    background-color $ui-tooltip-button-backgroundColor
     &:hover
-      background-color $nav-tooltip-button-background--hover
+      background-color $ui-tooltip-button--hover-backgroundColor
   .newFolderButton
     width 44px
     padding 0
@@ -175,7 +150,7 @@
     box-sizing border-box
     margin-left 0
     overflow ellipsis
-    background-color $nav-tooltip-background-color
+    background-color $ui-tooltip-backgroundColor
     color white
     line-height 34px
     border-top-right-radius 5px
diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl
index 9209b670..dc526248 100644
--- a/browser/main/SideNav/SideNav.styl
+++ b/browser/main/SideNav/SideNav.styl
@@ -2,14 +2,14 @@
   absolute top left
   bottom 24px
   width 200px
-  border-right solid 1px $nav-border-color
-  background-color $nav-background-color
+  border-right $ui-border
+  background-color $ui-backgroundColor
   user-select none
-  color $nav-text-color
+  color $ui-text-color
 
 .top
   height 60px
-  border-bottom solid 1px $nav-border-color
+  border-bottom $ui-border
 
 .top-menu
   navButtonColor()
@@ -35,10 +35,10 @@
 
 .menu-button--active
   @extend .menu-button
-  background-color $nav-active-background
-  color $nav-text-color
+  background-color $ui-button--active-backgroundColor
+  color $ui-button--active-color
   &:hover
-    background-color $nav-active-background
+    background-color $ui-button--active-backgroundColor
 
 .menu-button-label
   margin-left 5px
@@ -52,9 +52,10 @@
   padding 0 10px
   margin-top 15px
   line-height 24px
-  color $nav-inactive-color
+  color $ui-inactive-text-color
 
 .navToggle
+  navButtonColor()
   display block
   position absolute
   right 5px
@@ -62,16 +63,6 @@
   border-radius 16.5px
   height 33px
   width 33px
-  color $nav-inactive-text-color
-  border none
-  background-color transparent
-  transition color background-color 0.15s
-  &:hover
-    background-color $nav-hover-background
-    color $nav-inactive-text-color
-  &:active
-    background-color $nav-active-background
-    color $nav-text-color
 
 .root-folded
   @extend .root
@@ -93,7 +84,7 @@
     margin-top -5px
     margin-left 0
     overflow hidden
-    background-color $nav-tooltip-background-color
+    background-color $ui-tooltip-backgroundColor
     color white
     line-height 34px
     border-top-right-radius 5px
@@ -115,7 +106,7 @@
     margin-top -9px
     margin-left 0
     overflow ellipsis
-    background-color $nav-tooltip-background-color
+    background-color $ui-tooltip-backgroundColor
     color white
     line-height 34px
     border-top-right-radius 5px
diff --git a/browser/main/StatusBar/StatusBar.styl b/browser/main/StatusBar/StatusBar.styl
index 203c5375..6865b23b 100644
--- a/browser/main/StatusBar/StatusBar.styl
+++ b/browser/main/StatusBar/StatusBar.styl
@@ -1,40 +1,23 @@
 .root
   absolute bottom left right
   height 24px
-  border-top solid 1px $nav-border-color
-  background-color $nav-background-color
+  border-top $ui-border
+  background-color $ui-backgroundColor
 
 .zoom
+  navButtonColor()
   absolute right
   height 24px
   width 60px
   border-width 0 1px
   border-style solid
-  border-color $nav-border-color
-  background-color transparent
-  color $nav-inactive-text-color
-  transition color background-color 0.15s
-  &:hover
-    background-color $nav-hover-background
-    color $nav-inactive-text-color
-  &:active
-    background-color $nav-active-background
-    color $nav-text-color
+  border-color $ui-borderColor
 
 .update
+  navButtonColor()
   position absolute
   right 60px
   height 24px
   border-width 0 0 0 1px
   border-style solid
-  border-color $nav-border-color
-  background-color transparent
-  color $brand-color
-  transition color background-color 0.15s
-  &:hover
-    background-color $nav-hover-background
-    color $brand-color
-  &:active
-    background-color $nav-active-background
-    color $brand-color
-
+  border-color $ui-borderColor
diff --git a/browser/styles/index.styl b/browser/styles/index.styl
index 1533e32a..bfa01105 100644
--- a/browser/styles/index.styl
+++ b/browser/styles/index.styl
@@ -3,6 +3,27 @@ $brand-color = #2BAC8F
 $danger-color = red
 $danger-lighten-color = #FFE5E6
 
+// UI default
+$ui-text-color = #515151
+$ui-inactive-text-color = #939395
+$ui-borderColor = #D1D1D1
+$ui-backgroundColor = #FAFAFA
+$ui-border = solid 1px $ui-borderColor
+
+// UI Button
+$ui-button-color = #939395
+$ui-button--hover-backgroundColor = rgba(126, 127, 129, 0.08)
+$ui-button--active-color = #515151
+$ui-button--active-backgroundColor = alpha(#E0E0E0, 90%)
+
+// UI Tooltip
+$ui-tooltip-backgroundColor = alpha(#444, 70%)
+$ui-tooltip-button-backgroundColor = #D1D1D1
+$ui-tooltip-button--hover-backgroundColor = lighten(#D1D1D1, 30%)
+
+// UI Input
+$ui-input--focus-borderColor = #369DCD
+$ui-input--disabled-backgroundColor = #DDD
 
 /*
 * # Border
@@ -46,36 +67,23 @@ colorPrimaryButton()
   &:active:hover
     background-color $primary-button-background--active
 
-/**
-* Input
-*/
-
-$disabled-input-background = #DDD
-
 /**
 * Nav
 */
 
-$nav-text-color = #515151
-$nav-inactive-text-color = #939395
-$nav-hover-background = rgba(126, 127, 129, 0.08)
-$nav-active-background = alpha(#E0E0E0, 90%)
-$nav-border-color = #D1D1D1
-$nav-background-color = #FAFAFA
-$nav-tooltip-background-color = alpha(#444, 70%)
-$nav-tooltip-button-background = #D1D1D1
-$nav-tooltip-button-background--hover = lighten(#D1D1D1, 30%)
-
 navButtonColor()
   border none
-  color $nav-inactive-text-color
+  color $ui-button-color
   background-color transparent
   transition color background-color  0.15s
   &:hover
-    background-color $nav-hover-background
+    background-color $ui-button--hover-backgroundColor
   &:active
-    background-color $nav-active-background
-    color $nav-text-color
+    background-color $ui-button--active-backgroundColor
+    color $ui-button--active-color
+  &:active, &:active:hover
+    background-color $ui-button--active-backgroundColor
+    color $ui-button--active-color
 
 /**
 * # Modal Stuff