diff --git a/assets/css/browser-solidity.css b/assets/css/browser-solidity.css
deleted file mode 100644
index d72db57491..0000000000
--- a/assets/css/browser-solidity.css
+++ /dev/null
@@ -1,322 +0,0 @@
-#files .file {
-    padding: 0 0.6em;
-    box-sizing: border-box;
-    background-color: hsla(229, 100%, 97%, 1); /* backgroundBlue in style-guide.js */
-    cursor: pointer;
-    border-right: 0.5em solid white;
-    position: relative;
-    display: table-cell;
-    text-align: center;
-    vertical-align: middle;
-    color: hsla(0, 0%, 40%, 1); /* grey in style-guide.js */
-}
-
-#files .file.active {
-    color: black;
-    font-weight: bold;
-    border-bottom: 0 none;
-    padding-right: 2em;
-}
-#files .file .remove {
-    position: absolute;
-    right: 0;
-    top: 0;
-    height: 1.25em;
-    width: 1.25em;
-    line-height: 1em;
-    color: hsla(0, 82%, 82%, 1); /* red in style-guide.js */
-    display: none;
-    margin: 0.4em;
-    text-align: center;
-}
-
-#files .file input {
-    background-color: transparent;
-    border: 0 none;
-    border-bottom: 1px dotted black;
-    line-height: 1em;
-    margin: 0.5em 0;
-}
-
-#files .file.active .remove {
-    display: inline-block;
-}
-
-#righthand-panel {
-    top: 0;
-    right: 0;
-    bottom: 0;
-    box-sizing: border-box;
-    overflow: hidden;
-}
-
-#righthand-panel {
-    display: flex;
-    flex-direction: column;
-}
-
-#righthand-panel #solIcon {
-    float: right;
-    height: 90%;
-    background-color: white;
-    padding-right: 5%;
-    padding-left: 5%;
-}
-
-#righthand-panel #menu {
-    border-bottom: 3px solid hsla(229, 100%, 97%, 1); /* backgroundBlue in style-guide.js*/
-    height: 2em;
-    font-size: 1em;
-    margin-top: 0.5em;
-    box-sizing: content-box;
-    display: flex;
-}
-
-#righthand-panel #options {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    justify-content: space-between;
-}
-
-#righthand-panel #options li.active {
-    background-color: hsla(229, 100%, 97%, 1); /* backgroundBlue in style-guide.js*/;
-}
-
-#righthand-panel #options li a {
-    color: inherit;
-}
-
-#righthand-panel #optionViews {
-    background-color: hsla(229, 100%, 97%, 1); /* backgroundBlue in style-guide.js*/;
-    overflow: scroll;
-    height: 100%;
-}
-
-#righthand-panel #optionViews > div {
-    display: none;
-}
-
-#righthand-panel #optionViews.txView #txView {
-    display: block;
-}
-
-#righthand-panel #optionViews.settingsView #settingsView {
-    display: block;
-}
-
-#righthand-panel #optionViews.publishView #publishView {
-    display: block;
-}
-
-#righthand-panel #optionViews.compileView #compileTabView {
-    display: block;
-}
-
-#righthand-panel #optionViews.runView #runTabView {
-    display: block;
-}
-
-#righthand-panel #optionViews.debugView #debugView {
-    display: block;
-}
-
-#righthand-panel #optionViews.verificationView #verificationView {
-    display: block;
-}
-
-#righthand-panel #optionViews.staticanalysisView #staticanalysisView {
-    display: block;
-}
-
-#header #optionViews.supportView #supportView {
-    display: block;
-}
-
-#header #optionViews.txView input,
-#header #optionViews.txView select {
-    max-width: 13em;
-    padding: 0.3em;
-    box-sizing: border-box;
-    border: 1px solid hsl(0, 0%, 0%); /* black in style-guide.js */
-    border-radius: 3px;
-}
-
-#righthand-panel #optionViews .pre {
-    word-wrap: break-word;
-    background-color: hsl(0, 0%, 100%); /* white in style-guide.js */
-    border-radius: 3px;
-    display: inline-block;
-    padding: 0 0.6em;
-}
-
-#righthand-panel #optionViews .hide {
-    display: none;
-}
-
-#righthand-panel .info {
-    min-height: 6em;
-    padding: 0.25em 0;
-    padding-left: 6em;
-}
-
-#settingsView button {
-    background-color: hsla(229, 75%, 87%, .5); /* lightBlue in style-guide.js*/
-    font-size: 12px;
-    padding: 0.25em;
-    margin: 3em 1em .5em 0;
-    color: black;
-    border:0 none;
-    border-radius: 3px;
-    width: 8em;
-    cursor: pointer;
-}
-
-#header .origin {
-    display: block;
-    word-wrap: break-word;
-    padding: 1.5em;
-    font-weight: bold;
-}
-
-#output .udapp {
-    border: 0 none;
-    box-shadow: none;
-    border-bottom: 3px solid hsla(229, 100%, 97%, 1); /* backgroundBlue in style-guide.js*/;
-}
-
-.crow {
-    overflow: auto;
-    display: block;
-    clear: both;
-    margin: .5em .5em 0 .5em;
-    padding: .5em;
-    font-weight: bold;
-}
-
-.crow #txorigin {
-    margin-left: 0.5em;
-    text-decoration: none;
-    background-color: hsla(229, 75%, 87%, .5); /* lightBlue in style-guide.js*/
-    cursor: pointer;
-    font-size: 12px;
-    color: black;
-    border-radius: 3px;
-    border: 0 none;
-}
-
-.contractDetails button {
-    background-color: transparent;
-    border: 0 none;
-    padding: 0;
-    display: inline-block;
-    text-decoration: underline;
-    color: blue;
-    cursor: pointer;
-    width: auto;
-    min-width: 4em;
-    margin-bottom: 1em;
-}
-
-.sol.success,
-.sol.error,
-.sol.warning {
-    word-wrap: break-word;
-    cursor: pointer;
-    position: relative;
-    margin: 0.5em 0 1em 0;
-    border-radius: 5px;
-    line-height: 20px;
-    padding: 8px 15px;
-}
-
-.sol.success pre,
-.sol.error pre,
-.sol.warning pre {
-    background-color: transparent;
-    margin: 0;
-    font-size: 12px;
-    border: 0 none;
-    padding: 0;
-    border-radius: 0;
-}
-
-.sol.success .close,
-.sol.error .close,
-.sol.warning .close {
-    font-weight: bold;
-    position: absolute;
-    color: hsl(0, 0%, 0%); /* black in style-guide.js */
-    top: 0;
-    right: 0;
-    padding: 0.5em;
-}
-
-.sol.error {
-    background-color: hsla(0, 82%, 82%, 0.1);
-    border: .2em dotted hsla(0, 82%, 82%, 1); /* red in style-guide.js */
-}
-
-.sol.warning {
-    background-color: hsla(59, 56%, 78%, 0.5);
-    border: .2em dotted hsla(44, 100%, 50%, 1); /* orange in style-guide.js */
-}
-
-.sol.success {
-    background-color: hsla(141, 58%, 95%, 1);
-    border: .2em dotted hsla(141, 40%, 48%, 1);
-}
-
-#ghostbar {
-    width: 1px;
-    background-color: hsla(0, 82%, 82%, 1); /* orange in style-guide.js */
-    opacity: 0.5;
-    position: absolute;
-    cursor: col-resize;
-    z-index: 9999;
-    top: 0;
-    bottom: 0;
-}
-
-input[readonly] {
-    display: block;
-    width: 100%;
-    height: 7px;
-    padding: .8em;
-}
-
-input[type="file"] {
-    display: none;
-}
-
-.highlightreference {
-    position:absolute;
-    z-index:20;
-    background-color: lightgrey;
-    opacity: 0.7
-}
-
-.highlightreferenceline {
-    position:absolute;
-    z-index:20;
-    background-color: hsla(229, 75%, 87%, .5); /* lightBlue in style-guide.js*/
-    opacity: 0.7
-}
-
-.highlightcode {
-    position:absolute;
-    z-index:20;
-    background-color:hsla(0, 82%, 82%, 1); /* red in style-guide.js */
-}
-
-.highlightcode_fullLine {
-    position:absolute;
-    z-index:20;
-    background-color: hsla(0, 82%, 82%, .5); /* lightRed in style-guide.js */
-    opacity: 0.5;
-}
-
-.ace_gutter-cell.ace_breakpoint{
-    background-color: hsla(0, 82%, 82%, 1); /* red in style-guide.js */
-}
diff --git a/assets/css/styles.css b/assets/css/styles.css
deleted file mode 100644
index 0c7d7070d4..0000000000
--- a/assets/css/styles.css
+++ /dev/null
@@ -1,281 +0,0 @@
-/*@import url(https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700);*/
-
-body {
-  padding: 50px;
-  font: 14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
-  color: #777;
-  font-weight: 300;
-  overflow: hidden;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  margin: 20px 0 10px;
-}
-
-p, ul, ol, table, pre, dl {
-  margin: 0 0 20px;
-}
-
-h1, h2, h3 {
-  line-height: 1.1;
-}
-
-h1 {
-  font-size: 28px;
-}
-
-h2 {
-  color: #393939;
-}
-
-a {
-  color: #39c;
-  font-weight: 400;
-  text-decoration: none;
-}
-
-a:hover {
-  color: #069;
-}
-
-a small {
-  font-size: 11px;
-  color: #777;
-  margin-top: -0.6em;
-  display: block;
-}
-
-a:hover small {
-  color: #777;
-}
-
-.wrapper {
-  width: 860px;
-  margin: 0 auto;
-}
-
-blockquote {
-  border-left: 1px solid #e5e5e5;
-  margin: 0;
-  padding: 0 0 0 20px;
-  font-style: italic;
-}
-
-code, pre {
-  color: #333;
-  font-size: 11px;
-}
-
-pre {
-  font: 14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 12px;
-  padding: 8px 15px;
-  background: #f8f8f8;
-  border-radius: 5px;
-  border: 1px solid #e5e5e5;
-  overflow-x: auto;
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-th, td {
-  text-align: left;
-  padding: 5px 10px;
-  border-bottom: 1px solid #e5e5e5;
-}
-
-dt {
-  color: #444;
-  font-weight: 700;
-}
-
-th {
-  color: #444;
-}
-
-img {
-  max-width: 100%;
-}
-
-header {
-  width: 270px;
-  float: left;
-  position: fixed;
-}
-
-header ul {
-  list-style: none;
-  height: 40px;
-  padding: 0;
-  background: #eee;
-  background: -moz-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f8f8f8), color-stop(100%, #dddddd));
-  background: -webkit-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
-  background: -o-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
-  background: -ms-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
-  background: linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
-  border-radius: 5px;
-  border: 1px solid #d2d2d2;
-  box-shadow: inset #fff 0 1px 0, inset rgba(0, 0, 0, 0.03) 0 -1px 0;
-  width: 270px;
-}
-
-header li {
-  width: 89px;
-  float: left;
-  border-right: 1px solid #d2d2d2;
-  height: 40px;
-}
-
-header li:first-child a {
-  border-radius: 5px 0 0 5px;
-}
-
-header li:last-child a {
-  border-radius: 0 5px 5px 0;
-}
-
-header ul a {
-  line-height: 1;
-  font-size: 11px;
-  color: #999;
-  display: block;
-  text-align: center;
-  padding-top: 6px;
-  height: 34px;
-}
-
-header ul a:hover {
-  color: #999;
-  background: -moz-linear-gradient(top, #fff 0%, #ddd 100%);
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #ddd));
-  background: -webkit-linear-gradient(top, #fff 0%, #ddd 100%);
-  background: -o-linear-gradient(top, #fff 0%, #ddd 100%);
-  background: -ms-linear-gradient(top, #fff 0%, #ddd 100%);
-  background: linear-gradient(top, #fff 0%, #ddd 100%);
-}
-
-header ul a:active {
-  -webkit-box-shadow: inset 0 2px 2px 0 #ddd;
-  -moz-box-shadow: inset 0 2px 2px 0 #ddd;
-  box-shadow: inset 0 2px 2px 0 #ddd;
-}
-
-strong {
-  color: #222;
-  font-weight: 700;
-}
-
-header ul li + li {
-  width: 88px;
-  border-left: 1px solid #fff;
-}
-
-header ul li + li + li {
-  border-right: none;
-  width: 89px;
-}
-
-header ul a strong {
-  font-size: 14px;
-  display: block;
-  color: #222;
-}
-
-section {
-  width: 500px;
-  float: right;
-  padding-bottom: 50px;
-}
-
-small {
-  font-size: 11px;
-}
-
-hr {
-  border: 0;
-  background: #e5e5e5;
-  height: 1px;
-  margin: 0 0 20px;
-}
-
-footer {
-  width: 270px;
-  float: left;
-  position: fixed;
-  bottom: 50px;
-}
-
-@media print, screen and (max-width: 960px) {
-
-  div.wrapper {
-    width: auto;
-    margin: 0;
-  }
-
-  header, section, footer {
-    float: none;
-    position: static;
-    width: auto;
-  }
-
-  header {
-    padding-right:320px;
-  }
-
-  section {
-    border: 1px solid #e5e5e5;
-    border-width: 1px 0;
-    padding: 20px 0;
-    margin: 0 0 20px;
-  }
-
-  header a small {
-    display: inline;
-  }
-
-  header ul {
-    position: absolute;
-    right: 50px;
-    top: 52px;
-  }
-}
-
-@media print, screen and (max-width: 720px) {
-  body {
-    word-wrap: break-word;
-  }
-
-  header {
-    padding: 0;
-  }
-
-  header ul, header p.view {
-    position: static;
-  }
-
-  pre, code {
-    word-wrap: normal;
-  }
-}
-
-@media print, screen and (max-width: 480px) {
-  body {
-    padding: 15px;
-  }
-
-  header ul {
-    display: none;
-  }
-}
-
-@media print {
-  body {
-    padding: 0.4in;
-    font-size: 12pt;
-    color: #444;
-  }
-}
diff --git a/src/app.js b/src/app.js
index f888d9d52a..7c5e68b1b5 100644
--- a/src/app.js
+++ b/src/app.js
@@ -44,12 +44,16 @@ var css = csjs`
   html { box-sizing: border-box; }
   *, *:before, *:after { box-sizing: inherit; }
   body                 {
+    font: 14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
     margin             : 0;
     padding            : 0;
     font-size          : 12px;
-    color              : ${styles.colors.black};
+    color              : ${styles.leftPanel.text_Primary};
     font-weight        : normal;
   }
+  pre {
+    overflow-x: auto;
+  }
   .browsersolidity     {
     position           : relative;
     width              : 100vw;
@@ -57,6 +61,7 @@ var css = csjs`
     overflow           : hidden;
   }
   .centerpanel         {
+    background-color  : ${styles.colors.transparent};
     display            : flex;
     flex-direction     : column;
     position           : absolute;
@@ -65,6 +70,7 @@ var css = csjs`
     overflow           : hidden;
   }
   .leftpanel           {
+    background-color  : ${styles.leftPanel.backgroundColor_Panel};
     display            : flex;
     flex-direction     : column;
     position           : absolute;
@@ -74,6 +80,7 @@ var css = csjs`
     overflow           : hidden;
   }
   .rightpanel          {
+    background-color  : ${styles.rightPanel.backgroundColor_Panel};
     display            : flex;
     flex-direction     : column;
     position           : absolute;
@@ -82,6 +89,17 @@ var css = csjs`
     bottom             : 0;
     overflow           : hidden;
   }
+  .highlightcode {
+    position:absolute;
+    z-index:20;
+    background-color: ${styles.editor.backgroundColor_DebuggerMode};
+  }
+  .highlightcode_fullLine {
+    position:absolute;
+    z-index:20;
+    background-color: ${styles.editor.backgroundColor_DebuggerMode};
+    opacity: 0.5;
+  }
 `
 
 class App {
@@ -576,7 +594,7 @@ function run () {
         if (config.get('currentFile') !== this.source) {
           fileManager.switchFile(this.source)
         }
-        this.statementMarker = editor.addMarker(lineColumnPos, this.source, 'highlightcode')
+        this.statementMarker = editor.addMarker(lineColumnPos, this.source, css.highlightcode)
         editor.scrollToLine(lineColumnPos.start.line, true, true, function () {})
         if (lineColumnPos.start.line === lineColumnPos.end.line) {
           this.fullLineMarker = editor.addMarker({
@@ -588,7 +606,7 @@ function run () {
               line: lineColumnPos.start.line + 1,
               column: 0
             }
-          }, this.source, 'highlightcode_fullLine')
+          }, this.source, css.highlightcode_fullLine)
         }
       }
     },
diff --git a/src/app/editor/contextView.js b/src/app/editor/contextView.js
index 671e4d2d57..c857402a2b 100644
--- a/src/app/editor/contextView.js
+++ b/src/app/editor/contextView.js
@@ -1,40 +1,43 @@
 'use strict'
 var yo = require('yo-yo')
+var csjs = require('csjs-inject')
 var remix = require('ethereum-remix')
 var styleGuide = remix.ui.styleGuide
-var SourceMappingDecoder = remix.util.SourceMappingDecoder
 var styles = styleGuide()
-var csjs = require('csjs-inject')
+var SourceMappingDecoder = remix.util.SourceMappingDecoder
 
 var css = csjs`
   .contextview            {
-      background-color  : ${styles.colors.backgroundBlue};
       opacity           : 0.8;
-      width             : 20em;
-      height            : 6em;
-      border-color      : transparent;
-      border-radius     : 3px;
-      border            : .3px solid hsla(0, 0%, 40%, .2);
     }
   .container              {
-    padding             : 1em;
+    padding             : 1px 15px;
+  }
+  .line                   {
+    display             : flex;
+    justify-content     : flex-end;
+    align-items         : center;
+    text-overflow       : ellipsis;
+    overflow            : hidden;
+    white-space         : nowrap;
+    color               : ${styles.editor.text_Primary};
+    font-size           : 11px;
   }
   .type                   {
     font-style        : italic;
-    text-overflow     : ellipsis;
-    width             : 18em;
-    overflow          : hidden;
-    white-space       : nowrap;
+    margin-right      : 5px;
   }
   .name                   {
     font-weight       : bold;
-    text-overflow     : ellipsis;
-    width             : 18em;
-    overflow          : hidden;
-    white-space       : nowrap;
+    margin-right      : 15px;
   }
   .jumpto                 {
     cursor            : pointer;
+    margin-right      : 5px;
+    color             : ${styles.editor.icon_Color_Editor};
+  }
+  jumpto:hover            {
+    color             : ${styles.editor.icon_HoverColor_Editor};
   }
   .referencesnb           {
     float             : right;
@@ -126,7 +129,7 @@ class ContextView {
       }
     }
 
-    return yo`<div>
+    return yo`<div class=${css.line}>
       <div title=${type} class=${css.type} >${type}</div>
       <div title=${node.attributes.name} class=${css.name} >${node.attributes.name}</div>
       <i title='Go to Definition' class="fa fa-share ${css.jumpto}" aria-hidden="true" onclick=${jumpTo}></i>
diff --git a/src/app/editor/editor.js b/src/app/editor/editor.js
index a06d92059f..cd352da540 100644
--- a/src/app/editor/editor.js
+++ b/src/app/editor/editor.js
@@ -8,9 +8,13 @@ var Range = ace.acequire('ace/range').Range
 require('brace/ext/language_tools')
 var langTools = ace.acequire('ace/ext/language_tools')
 require('./mode-solidity.js')
+var remix = require('ethereum-remix')
+var styleGuide = remix.ui.styleGuide
+var styles = styleGuide()
 
 var css = csjs`
   .ace-editor {
+    background-color  : ${styles.editor.backgroundColor_Editor};
     width     : 100%;
   }
 `
@@ -19,8 +23,30 @@ document.head.appendChild(yo`
     .ace-tm .ace_gutter,
     .ace-tm .ace_gutter-active-line,
     .ace-tm .ace_marker-layer .ace_active-line {
-        background-color: rgba(225, 229, 251, 0.5);
+        background-color: ${styles.editor.backgroundColor_Tabs_Highlights};
     }
+    .ace_gutter-cell.ace_breakpoint{
+      background-color: ${styles.editor.backgroundColor_DebuggerMode};
+    }
+    .highlightreference {
+      position:absolute;
+      z-index:20;
+      background-color: ${styles.editor.backgroundColor_Editor_Context_Highlights};
+      opacity: 0.7
+    }
+
+    .highlightreferenceline {
+      position:absolute;
+      z-index:20;
+      background-color: ${styles.editor.backgroundColor_Editor_Context_Highlights};
+      opacity: 0.7
+    }
+
+    .highlightcode {
+      position:absolute;
+      z-index:20;
+      background-color: ${styles.editor.backgroundColor_Editor_Context_Error_Highlights};
+     }
   </style>
 `)
 
diff --git a/src/app/execution/txLogger.js b/src/app/execution/txLogger.js
index c7b170e56f..828bfea654 100644
--- a/src/app/execution/txLogger.js
+++ b/src/app/execution/txLogger.js
@@ -17,18 +17,19 @@ var typeConversion = require('../../lib/typeConversion')
 var css = csjs`
   .log {
     display: flex;
-    align-items: baseline;
+    align-items: end;
     justify-content: space-between;
   }
   .tx {
-    color: ${styles.colors.violet};
+    color: ${styles.terminal.text_Title_TransactionLog};
+    font-weight: bold;
     width: 45%;
   }
   .txTable, .tr, .td {
     border-collapse: collapse;
     font-size: 10px;
-    color: ${styles.colors.grey};
-    border: 1px dashed ${styles.colors.black};
+    color: ${styles.terminal.text_Primary};
+    border: 1px solid ${styles.terminal.text_Primary};
   }
   #txTable {
     margin-top: 1%;
@@ -44,8 +45,13 @@ var css = csjs`
   .buttons {
     display: flex;
   }
+  .debug {
+    ${styles.terminal.button_Log_Debug}
+  }
+  .details {
+    ${styles.terminal.button_Log_Details}
+  }
   .debug, .details {
-    ${styles.button}
     min-height: 18px;
     max-height: 18px;
     width: 45px;
@@ -53,16 +59,15 @@ var css = csjs`
     font-size: 10px;
     margin-left: 5px;
   }
-  .debug {
-    background-color: ${styles.colors.lightOrange};
-  }
-  .details {
-    background-color: ${styles.colors.lightGrey};
-  }
   .clipboardCopy {
     margin-right: 0.5em;
     cursor: pointer;
-  }`
+    color: ${styles.terminal.icon_Color_CopyToClipboard};
+  }
+  .clipboardCopy:hover {
+    color: ${styles.terminal.icon_HoverColor_CopyToClipboard};
+  }
+  `
 /**
   * This just export a function that register to `newTransaction` and forward them to the logger.
   * Emit debugRequested
diff --git a/src/app/files/file-explorer.js b/src/app/files/file-explorer.js
index 28da9ceca8..146886f192 100755
--- a/src/app/files/file-explorer.js
+++ b/src/app/files/file-explorer.js
@@ -15,15 +15,19 @@ var css = csjs`
   .fileexplorer       {
     box-sizing        : border-box;
   }
+  input[type="file"] {
+      display: none;
+  }
   .folder,
   .file               {
     font-size         : 14px;
+    cursor            : pointer;
   }
   .hasFocus           {
-    background-color  : ${styles.colors.backgroundBlue};
+    background-color  : ${styles.leftPanel.backgroundColor_FileExplorer};
   }
   .rename             {
-    background-color  : ${styles.colors.white};
+    background-color  : ${styles.leftPanel.backgroundColor_Panel};
   }
   .remove             {
     margin-left       : auto;
@@ -182,7 +186,7 @@ function fileExplorer (appAPI, files) {
       this.style.paddingRight = '19px'
       return this.removeChild(deleteButton)
     }
-    this.style.backgroundColor = styles.colors.backgroundBlue
+    this.style.backgroundColor = styles.leftPanel.backgroundColor_FileExplorer
     this.style.paddingRight = '0px'
     this.appendChild(deleteButton)
   }
@@ -249,7 +253,7 @@ function fileExplorer (appAPI, files) {
       var isFolder = label.className.indexOf('folder') !== -1
       var save = textUnderEdit !== label.innerText
       if (save) {
-        modalDialogCustom.confirm(null, `Do you want to rename?`, () => { rename() }, () => { cancelRename() })
+        modalDialogCustom.confirm(null, 'Do you want to rename?', () => { rename() }, () => { cancelRename() })
       }
       label.removeAttribute('contenteditable')
       label.classList.remove(css.rename)
diff --git a/src/app/panels/editor-panel.js b/src/app/panels/editor-panel.js
index fc66620965..51240689b8 100644
--- a/src/app/panels/editor-panel.js
+++ b/src/app/panels/editor-panel.js
@@ -7,6 +7,49 @@ var styles = styleGuide()
 
 var Terminal = require('./terminal')
 
+var cssTabs = yo`
+  <style>
+    #files .file {
+      padding: 0 0.6em;
+      box-sizing: border-box;
+      background-color: ${styles.editor.backgroundColor_Tabs_Highlights};
+      cursor: pointer;
+      margin-right: 10px;
+      margin-top: 5px;
+      position: relative;
+      display: table-cell;
+      text-align: center;
+      vertical-align: middle;
+      color: ${styles.editor.text_Secondary};
+    }
+    #files .file.active {
+      color: ${styles.editor.text_Primary};
+      font-weight: bold;
+      border-bottom: 0 none;
+      padding-right: 1.5em;
+    }
+    #files .file .remove {
+      font-size: 12px;
+      display: flex;
+      color: ${styles.editor.text_Primary};
+      position: absolute;
+      top: -7px;
+      right: 5px;
+      display: none;
+    }
+    #files .file input {
+      background-color: ${styles.colors.transparent};
+      border: 0 none;
+      border-bottom: 1px dotted ${styles.editor.text_Primary};
+      line-height: 1em;
+      margin: 0.5em 0;
+    }
+    #files .file.active .remove {
+      display: inline-block;
+    }
+  </style>
+`
+
 var css = csjs`
   .editorpanel         {
     display            : flex;
@@ -14,10 +57,10 @@ var css = csjs`
     height             : 100%;
   }
   .tabsbar             {
+    background-color   : ${styles.editor.backgroundColor_Panel};
     display            : flex;
     overflow           : hidden;
-    height             : 2em;
-    margin-top         : 0.5em;
+    height             : 30px;
   }
   .tabs               {
     position          : relative;
@@ -29,6 +72,7 @@ var css = csjs`
     overflow          : hidden;
   }
   .files              {
+    display           : flex;
     position          : relative;
     list-style        : none;
     margin            : 0;
@@ -47,13 +91,13 @@ var css = csjs`
   .changeeditorfontsize i {
     cursor            : pointer;
     display           : block;
-    color             : ${styles.colors.black};
+    color             : ${styles.editor.icon_Color_Editor};
   }
   .changeeditorfontsize i {
     cursor            : pointer;
   }
   .changeeditorfontsize i:hover {
-    color             : ${styles.colors.orange};
+    color             : ${styles.editor.icon_HoverColor_Editor};
   }
   .buttons            {
     display           : flex;
@@ -67,13 +111,15 @@ var css = csjs`
     padding           : 10px;
     width             : 100%;
     font-weight       : bold;
-    color             : ${styles.colors.black};
+    color             : ${styles.leftPanel.icon_Color_TogglePanel};
   }
   .toggleLHP i        {
     cursor            : pointer;
+    font-size         : 14px;
+    font-weight       : bold;
   }
   .toggleLHP i:hover  {
-    color             : ${styles.colors.orange};
+    color             : ${styles.leftPanel.icon_HoverColor_TogglePanel};
   }
   .scroller           {
     position          : absolute;
@@ -81,7 +127,7 @@ var css = csjs`
     text-align        : center;
     cursor            : pointer;
     vertical-align    : middle;
-    background-color  : ${styles.colors.white};
+    background-color  : ${styles.colors.general_BackgroundColor};
     height            : 100%;
     font-size         : 1.3em;
     color             : orange;
@@ -94,16 +140,18 @@ var css = csjs`
     left              : 0;
   }
   .toggleRHP          {
-    margin-top        : 0.5em;
+    margin            : 0.5em;
     font-weight       : bold;
-    color             : ${styles.colors.black};
+    color             : ${styles.rightPanel.icon_Color_TogglePanel};
     right             : 0;
   }
   .toggleRHP i        {
     cursor            : pointer;
+    font-size         : 14px;
+    font-weight       : bold;
   }
   .toggleRHP i:hover  {
-    color             : ${styles.colors.orange};
+    color             : ${styles.rightPanel.icon_HoverColor_TogglePanel};
   }
   .show               {
     opacity           : 1;
@@ -114,7 +162,6 @@ var css = csjs`
     pointer-events    : none;
     transition        : .3s opacity ease-in;
   }
-  
   .content            {
     position          : relative;
     display           : flex;
@@ -122,17 +169,10 @@ var css = csjs`
     height            : 100%;
     width             : 100%;
   }
-  
-  .banner             {
-    width             : 25em;
-  }
-  
   .contextviewcontainer{
-    position          : absolute;
-    z-index           : 100;
-    right             : 20px;
-    top               : 10px;
-    width             : 20em;
+    width             : 100%;
+    height            : 20px;
+    background-color  : ${styles.editor.backgroundColor_Tabs_Highlights};
   }
 `
 
@@ -169,10 +209,7 @@ class EditorPanel {
           context () {
             return self._api.context()
           }
-        },
-        banner: yo`<div>
-          <img class=${css.banner} title="Remix" src="assets/img/remix_logo_512x512.svg" alt="Remix">
-        </div>`
+        }
       })
     }
     self._components.terminal.event.register('filterChanged', (type, value) => {
@@ -184,10 +221,13 @@ class EditorPanel {
         self._api.txListener.setListenOnNetwork(listenOnNetWork)
       })
     }
+    if (document && document.head) {
+      document.head.appendChild(cssTabs)
+    }
   }
   _adjustLayout (direction, delta) {
     var limitUp = 0
-    var limitDown = 20
+    var limitDown = 32
     var containerHeight = window.innerHeight - limitUp // - menu bar containerHeight
     var self = this
     var layout = self.data._layout[direction]
@@ -231,7 +271,7 @@ class EditorPanel {
       <div class=${css.content}>
         <div class=${css.contextviewcontainer}>
           ${self._api.contextview.render()}
-        </div>      
+        </div>
         ${self._view.editor}
         ${self._view.terminal}
       </div>
diff --git a/src/app/panels/file-panel.js b/src/app/panels/file-panel.js
index 94356b1058..83f2061b0c 100644
--- a/src/app/panels/file-panel.js
+++ b/src/app/panels/file-panel.js
@@ -82,7 +82,7 @@ var css = csjs`
     cursor            : pointer;
   }
   .treeview {
-    background-color  : ${styles.colors.white};
+    background-color  : ${styles.colors.general_BackgroundColor};
   }
   .treeviews {
     overflow-y        : auto;
@@ -340,7 +340,7 @@ function filepanel (appAPI, filesProvider) {
         }
       })
     }
-    modalDialogCustom.confirm(null, `Are you very sure you want to publish all your files anonymously as a public gist on github.com?`, () => {
+    modalDialogCustom.confirm(null, 'Are you very sure you want to publish all your files anonymously as a public gist on github.com?', () => {
       toGist()
     })
   }
diff --git a/src/app/panels/righthand-panel.js b/src/app/panels/righthand-panel.js
index b3d37e7f4c..f540456851 100644
--- a/src/app/panels/righthand-panel.js
+++ b/src/app/panels/righthand-panel.js
@@ -15,15 +15,58 @@ var styleGuide = remix.ui.styleGuide
 var styles = styleGuide()
 
 var css = csjs`
+  #righthand-panel {
+    display: flex;
+    flex-direction: column;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+  #optionViews {
+    background-color: ${styles.rightPanel.backgroundColor_Tab};
+    overflow: scroll;
+    height: 100%;
+  }
+  #optionViews > div {
+    display: none;
+  }
+  #optionViews .pre {
+    word-wrap: break-word;
+    background-color: ${styles.rightPanel.BackgroundColor_Pre};
+    border-radius: 3px;
+    display: inline-block;
+    padding: 0 0.6em;
+  }
+  #optionViews .hide {
+    display: none;
+  }
+  .menu {
+    display: flex;
+  }
   .options {
-      float: left;
-      padding-top: 0.7em;
-      min-width: 60px;
-      font-size: 0.9em;
-      cursor: pointer;
-      background-color: ${styles.colors.transparent};
-      font-size: 1em;
-      text-align: center;
+    float: left;
+    padding-top: 0.7em;
+    min-width: 60px;
+    font-size: 0.9em;
+    cursor: pointer;
+    font-size: 1em;
+    text-align: center;
+  }
+  .opts {
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  .opts_li {
+    display: block;
+    font-weight: bold;
+    color: ${styles.rightPanel.text_Primary};
+  }
+  .opts_li:hover {
+    color: ${styles.rightPanel.text_Secondary};
   }
   .dragbar             {
     position           : absolute;
@@ -32,11 +75,11 @@ var css = csjs`
     bottom             : 0;
     cursor             : col-resize;
     z-index            : 999;
-    border-left        : 2px solid hsla(215, 81%, 79%, .3);
+    border-left        : 2px solid ${styles.rightPanel.bar_Dragging};
   }
   .ghostbar           {
     width             : 3px;
-    background-color  : ${styles.colors.lightBlue};
+    background-color  : ${styles.rightPanel.bar_Ghost};
     opacity           : 0.5;
     position          : absolute;
     cursor            : col-resize;
@@ -50,6 +93,15 @@ var css = csjs`
   .header             {
     height            : 100%;
   }
+  .solIcon {
+    margin-left: 10px;
+    margin-right: 30px;
+    display: flex;
+    align-self: center;
+    height: 29px;
+    width: 20px;
+    background-color: ${styles.colors.transparent};
+  }
 `
 
 // ------------------------------------------------------------------
@@ -62,15 +114,15 @@ function RighthandPanel (appAPI, events, opts) {
   self.event = new EventManager()
   self._view = {}
 
-  var optionViews = yo`<div id="optionViews" class="settingsView"></div>`
+  var optionViews = yo`<div id="optionViews" class="settingsView">${cssTabs}</div>`
   var options = yo`
-    <ul id="options">
-      <li class="compileView" title="Compile">Compile</li>
-      <li class="runView" title="Run">Run</li>
-      <li class="settingsView" title="Settings">Settings</li>
-      <li class="debugView" title="Debugger">Debugger</li>
-      <li class="staticanalysisView" title="Static Analysis">Analysis</li>
-      <li class="supportView" title="Help and support">Support</li>
+    <ul class=${css.opts}>
+      <li class="${css.opts_li} compileView" title="Compile">Compile</li>
+      <li class="${css.opts_li} runView" title="Run">Run</li>
+      <li class="${css.opts_li} settingsView" title="Settings">Settings</li>
+      <li class="${css.opts_li} debugView" title="Debugger">Debugger</li>
+      <li class="${css.opts_li} staticanalysisView" title="Static Analysis">Analysis</li>
+      <li class="${css.opts_li} supportView" title="Help and support">Support</li>
     </ul>
   `
   self._view.dragbar = yo`<div id="dragbar" class=${css.dragbar}></div>`
@@ -78,8 +130,8 @@ function RighthandPanel (appAPI, events, opts) {
     <div id="righthand-panel" class=${css.panel}>
       ${self._view.dragbar}
       <div id="header" class=${css.header}>
-        <div id="menu">
-          <img id="solIcon" title="Solidity realtime compiler and runtime" src="assets/img/remix_logo_512x512.svg" alt="Solidity realtime compiler and runtime">
+        <div class=${css.menu}>
+          <img class=${css.solIcon} title="Solidity realtime compiler and runtime" src="assets/img/remix_logo_512x512.svg" alt="Solidity realtime compiler and runtime">
           ${options}
         </div>
         ${optionViews}
@@ -148,3 +200,27 @@ function RighthandPanel (appAPI, events, opts) {
     }
   }
 }
+
+var cssTabs = yo`<style>#optionViews.settingsView #settingsView {
+    display: block;
+}
+
+#optionViews.compileView #compileTabView {
+    display: block;
+}
+
+#optionViews.runView #runTabView {
+    display: block;
+}
+
+#optionViews.debugView #debugView {
+    display: block;
+}
+
+#optionViews.staticanalysisView #staticanalysisView {
+    display: block;
+}
+
+#optionViews.supportView #supportView {
+    display: block;
+}</style>`
diff --git a/src/app/panels/terminal.js b/src/app/panels/terminal.js
index f9342ea59c..43be29ea4a 100644
--- a/src/app/panels/terminal.js
+++ b/src/app/panels/terminal.js
@@ -1,6 +1,5 @@
 /* global Node, requestAnimationFrame */
 var yo = require('yo-yo')
-var csjs = require('csjs-inject')
 var javascriptserialize = require('javascript-serialize')
 var jsbeautify = require('js-beautify')
 var type = require('component-type')
@@ -10,6 +9,11 @@ var Web3 = require('web3')
 
 var executionContext = require('../../execution-context')
 var Dropdown = require('../ui/dropdown')
+// -------------- styling ----------------------
+var csjs = require('csjs-inject')
+var remix = require('ethereum-remix')
+var styleGuide = remix.ui.styleGuide
+var styles = styleGuide()
 
 var css = csjs`
   .panel              {
@@ -17,8 +21,8 @@ var css = csjs`
     display           : flex;
     flex-direction    : column;
     font-size         : 12px;
-    color             : #777;
-    background-color  : #ededed;
+    color             : ${styles.terminal.text_Regular_TransactionLog};
+    background-color  : ${styles.terminal.backgroundColor_Terminal};
     height            : 100%;
     min-height        : 1.7em;
     overflow          : hidden;
@@ -26,35 +30,41 @@ var css = csjs`
 
   .bar                {
     display           : flex;
-    min-height        : 1.7em;
+    min-height        : 3em;
     padding           : 2px;
-    background-color  : #eef;
+    background-color  : ${styles.terminal.backgroundColor_Menu};
     z-index           : 3;
   }
   .menu               {
+    color             : ${styles.terminal.text_Primary};
     position          : relative;
     display           : flex;
     align-items       : center;
     width             : 100%;
     padding           : 5px;
   }
-  .minimize           {
+  .toggleTerminal           {
     margin-left       : auto;
     width             : 10px;
     cursor            : pointer;
-    color             : black;
+    color             : ${styles.terminal.icon_Color_TogglePanel};
+    font-size         : 14px;
+    font-weight       : bold;
+  }
+  .toggleTerminal:hover              {
+    color             : ${styles.terminal.icon_HoverColor_TogglePanel};
   }
   .clear              {
     margin-right      : 5px;
-    font-size         : 15px;
     cursor            : pointer;
-    color             : black;
+    color             : ${styles.terminal.icon_Color_Menu};
   }
-  .hover              {
-    color             : orange;
+  .clear:hover              {
+    color             : ${styles.terminal.icon_HoverColor_Menu};
   }
 
   .terminal           {
+    background-color  : ${styles.terminal.backgroundColor_Terminal};
     display           : flex;
     flex-direction    : column;
     height            : 100%;
@@ -64,6 +74,19 @@ var css = csjs`
     overflow-y        : auto;
     font-family       : monospace;
   }
+  .terminal::after {
+    content           : "";
+    background-image  : url(assets/img/remix_logo_512x512.svg);
+    opacity           : 0.1;
+    top               : 15%;
+    left              : 33%;
+    bottom            : 0;
+    right             : 0;
+    position          : absolute;
+    z-index           : -1;
+    background-repeat : no-repeat;
+    background-size   : 45%;
+  }
   .journal            {
     margin-top        : auto;
     font-family       : monospace;
@@ -73,6 +96,7 @@ var css = csjs`
     white-space       : pre-wrap;
     line-height       : 2ch;
     margin            : 1ch;
+    margin-top        : 2ch;
   }
   .cli                {
     line-height       : 1.7em;
@@ -83,6 +107,7 @@ var css = csjs`
     font-family       : monospace;
     font-weight       : bold;
     font-size         : large;
+    color             : ${styles.colors.black};
   }
   .input              {
     word-break        : break-all;
@@ -90,8 +115,8 @@ var css = csjs`
     font-family       : monospace;
   }
   .filter             {
-    padding           : 3px;
-    width             : 20em;    
+    ${styles.terminal.input_Search_MenuBar}
+    width             : 150px;
   }
 
   .dragbarHorizontal  {
@@ -102,12 +127,12 @@ var css = csjs`
     left              : 0;
     cursor            : ns-resize;
     z-index           : 999;
-    border-top        : 2px solid hsla(215, 81%, 79%, .3);
+    border-top        : 2px solid ${styles.terminal.bar_Dragging};
   }
   .ghostbar           {
     position          : absolute;
     height            : 6px;
-    background-color  : #C6CFF7;
+    background-color  : ${styles.terminal.bar_Ghost};
     opacity           : 0.5;
     cursor            : row-resize;
     z-index           : 9999;
@@ -130,7 +155,6 @@ class Terminal {
     self.data = {
       lineLength: opts.lineLength || 80,
       session: [],
-      banner: opts.banner,
       activeFilters: { commands: {}, input: '' }
     }
     self._view = { el: null, bar: null, input: null, term: null, journal: null, cli: null }
@@ -165,9 +189,6 @@ class Terminal {
     self._INDEX.allMain = []
     self._INDEX.commands = {}
     self._INDEX.commandsMain = {}
-    self.registerCommand('banner', function (args, scopedCommands, append) {
-      append(args[0])
-    }, { activate: true })
     self.registerCommand('log', self._blocksRenderer('log'), { activate: true })
     self.registerCommand('info', self._blocksRenderer('info'), { activate: true })
     self.registerCommand('error', self._blocksRenderer('error'), { activate: true })
@@ -198,7 +219,7 @@ class Terminal {
         ${self._view.input}
       </div>
     `
-    self._view.icon = yo`<i onmouseenter=${hover} onmouseleave=${hover} onmousedown=${minimize} class="${css.minimize} fa fa-angle-double-down"></i>`
+    self._view.icon = yo`<i onmouseenter=${hover} onmouseleave=${hover} onmousedown=${minimize} class="${css.toggleTerminal} fa fa-angle-double-down"></i>`
     self._view.dragbar = yo`<div onmousedown=${mousedown} class=${css.dragbarHorizontal}></div>`
     self._view.dropdown = self._components.dropdown.render()
     self._view.bar = yo`
@@ -231,10 +252,6 @@ class Terminal {
         ${self._view.term}
       </div>
     `
-    if (self.data.banner) {
-      self.data.activeFilters.commands['banner'] = true
-      self.commands.banner(self.data.banner)
-    }
 
     function throttle (fn, wait) {
       var time = Date.now()
@@ -540,7 +557,7 @@ class Terminal {
     }, 0)
   }
   _blocksRenderer (mode) {
-    mode = { log: 'black', info: 'blue', error: 'red' }[mode] // defaults
+    mode = { log: styles.terminal.text_RegularLog, info: styles.terminal.text_InfoLog, error: styles.terminal.text_ErrorLog }[mode] // defaults
     if (mode) {
       return function logger (args, scopedCommands, append) {
         var types = args.map(type)
diff --git a/src/app/staticanalysis/staticAnalysisView.js b/src/app/staticanalysis/staticAnalysisView.js
index b60a5b3de1..1b03e35bd3 100644
--- a/src/app/staticanalysis/staticAnalysisView.js
+++ b/src/app/staticanalysis/staticAnalysisView.js
@@ -20,16 +20,16 @@ var css = csjs`
     margin-top: 1%;
   }
   .buttons  {
-    ${styles.displayBox}
+    ${styles.rightPanel.analysisTab.box_AnalysisContainer}
     display: flex;
     align-items: center;
   }
   .buttonRun  {
-    ${styles.button}
+    ${styles.rightPanel.analysisTab.button_Run_AnalysisTab}
     margin-right: 1%;
   }
   .analysisModulesContainer {
-    ${styles.displayBox}
+    ${styles.rightPanel.analysisTab.box_AnalysisContainer}
     margin-bottom: 1%;
     line-height: 2em;
     display: flex;
diff --git a/src/app/tabs/analysis-tab.js b/src/app/tabs/analysis-tab.js
index 942368272d..7f2f6083d5 100644
--- a/src/app/tabs/analysis-tab.js
+++ b/src/app/tabs/analysis-tab.js
@@ -13,6 +13,9 @@ var css = csjs`
     display: flex;
     flex-direction: column;
   }
+  #staticanalysisView {
+    display: block;
+  }
   .infoBox  {
     ${styles.infoTextBox}
     margin-bottom: 1em;
diff --git a/src/app/tabs/compile-tab.js b/src/app/tabs/compile-tab.js
index e0ff31abf8..708742b286 100644
--- a/src/app/tabs/compile-tab.js
+++ b/src/app/tabs/compile-tab.js
@@ -25,7 +25,7 @@ var css = csjs`
     margin: 3% 0;
   }
   .compileContainer  {
-    ${styles.displayBox}
+    ${styles.rightPanel.compileTab.box_CompileContainer};
     margin-bottom: 2%;
   }
   .autocompileContainer {
@@ -46,7 +46,7 @@ var css = csjs`
     line-height: initial;
   }
   .warnCompilationSlow {
-    color: ${styles.colors.orange};
+    color: ${styles.rightPanel.compileTab.icon_WarnCompilation_Color};
     margin-left: 1%;
   }
   .compileButtons {
@@ -61,20 +61,20 @@ var css = csjs`
     display: flex;
   }
   .compileButton {
-    ${styles.button}
+    ${styles.rightPanel.compileTab.button_Compile};
     width: 120px;
     min-width: 110px;
     margin-right: 1%;
     font-size: 12px;
   }
   .container {
-    ${styles.displayBox}
+    ${styles.rightPanel.compileTab.box_CompileContainer};
     margin: 0;
     display: flex;
     align-items: center;
   }
   .contractNames {
-    ${styles.dropdown}
+    ${styles.rightPanel.compileTab.dropdown_CompileContract};
     margin-right: 5%;
   }
   .contractButtons {
@@ -84,21 +84,22 @@ var css = csjs`
     text-align: center;
   }
   .details {
-    ${styles.button}
+    ${styles.rightPanel.compileTab.button_Details};
   }
   .publish {
-    ${styles.button}
+    ${styles.rightPanel.compileTab.button_Publish};
     margin-left: 2%;
     width: 120px;
   }
   .log {
+    ${styles.rightPanel.compileTab.box_CompileContainer};
     display: flex;
     flex-direction: column;
-    align-items: baseline
+    margin-bottom: 5%;
   }
   .key {
     margin-right: 5px;
-    color: grey;
+    color: ${styles.rightPanel.text_Primary};
     text-transform: uppercase;
     width: 100%;
   }
@@ -107,27 +108,21 @@ var css = csjs`
     width: 100%;
     margin-top: 1.5%;
   }
-  .copyDetails {
+  .copyDetails,
+  .questionMark {
     margin-left: 2%;
-    font-size: 14px;
     cursor: pointer;
-    color: ${styles.colors.grey};
-    opacity: .3;
+    color: ${styles.rightPanel.icon_Color_TogglePanel};
   }
-  .copyDetails:hover {
-    opacity: 1;
+  .copyDetails:hover,
+  .questionMark:hover {
+    color: ${styles.rightPanel.icon_HoverColor_TogglePanel};
   }
-  .questionMark {
-    margin-left: 1%;
-    font-size: 14px;
-    color: ${styles.colors.grey};
-    opacity: .3;
-  },
   .detailsJSON {
     padding: 8px 0;
-    background-color: ${styles.colors.white};
+    background-color: ${styles.rightPanel.modalDialog_BackgroundColor_Primary};
     border: none;
-    color: ${styles.colors.grey};
+    color: ${styles.rightPanel.modalDialog_text_Secondary};
   }
   .icon {
     margin-right: 3%;
@@ -151,7 +146,7 @@ var css = csjs`
   }
   70% {
     margin-bottom: 0;
-    color: ${styles.colors.grey};
+    color: ${styles.rightPanel.text_Secondary};
   }
   100% {
     margin-bottom: 0;
@@ -291,9 +286,9 @@ function compileTab (container, appAPI, appEvents, opts) {
       getContractNames(success, data)
       // hightlight the tab if error
       if (success) {
-        document.querySelector('#righthand-panel #menu .compileView').style.color = ''
+        document.querySelector('.compileView').style.color = ''
       } else {
-        document.querySelector('#righthand-panel #menu .compileView').style.color = styles.colors.red
+        document.querySelector('.compileView').style.color = styles.colors.red
       }
       // display warning error if any
       var errorContainer = container.querySelector('.error')
diff --git a/src/app/tabs/debugger-tab.js b/src/app/tabs/debugger-tab.js
index 37938ebfc0..de73a9c8f2 100644
--- a/src/app/tabs/debugger-tab.js
+++ b/src/app/tabs/debugger-tab.js
@@ -2,6 +2,9 @@ var yo = require('yo-yo')
 
 // -------------- styling ----------------------
 var csjs = require('csjs-inject')
+var remix = require('ethereum-remix')
+var styleGuide = remix.ui.styleGuide
+var styles = styleGuide()
 
 var css = csjs`
   .debuggerTabView {
@@ -9,6 +12,7 @@ var css = csjs`
   }
   .debugger {
     margin-bottom: 1%;
+    ${styles.rightPanel.debuggerTab.box_Debugger}
   }
 `
 
diff --git a/src/app/tabs/run-tab.js b/src/app/tabs/run-tab.js
index 6a0979641c..1b0f463b7c 100644
--- a/src/app/tabs/run-tab.js
+++ b/src/app/tabs/run-tab.js
@@ -22,7 +22,7 @@ var css = csjs`
     flex-direction: column;
   }
   .settings {
-    ${styles.displayBox}
+    ${styles.rightPanel.runTab.box_RunTab}
     margin-bottom: 2%;
     padding: 10px 15px 15px 15px;
   }
@@ -31,13 +31,11 @@ var css = csjs`
     display: flex;
   }
   .col1 {
-    ${styles.titleL}
     width: 30%;
     float: left;
     align-self: center;
   }
   .col1_1 {
-    ${styles.titleM}
     font-size: 12px;
     width: 25%;
     min-width: 75px;
@@ -45,46 +43,44 @@ var css = csjs`
     align-self: center;
   }
   .col2 {
-    ${styles.inputField}
+    ${styles.rightPanel.runTab.input_RunTab}
   }
   .select {
-    ${styles.dropdown}
-    text-align: center;
+    ${styles.rightPanel.runTab.dropdown_RunTab}
     font-weight: normal;
     min-width: 150px;
   }
   .copyaddress {
-    color: ${styles.colors.blue};
     margin-left: 0.5em;
     margin-top: 0.7em;
     cursor: pointer;
+    color: ${styles.rightPanel.runTab.icon_Color_Instance_CopyToClipboard};
   }
   .copyaddress:hover {
-    color: ${styles.colors.grey};
+    color: ${styles.rightPanel.runTab.icon_HoverColor_Instance_CopyToClipboard};
   }
   .instanceContainer {
-    ${styles.displayBox}
+    ${styles.rightPanel.runTab.box_Instance}
     display: flex;
     flex-direction: column;
-    background-color: ${styles.colors.transparent};
     margin-top: 2%;
     border: none;
+    text-align: center;
   }
   .pendingTxsContainer  {
-    ${styles.displayBox}
+    ${styles.rightPanel.runTab.box_Instance}
     display: flex;
     flex-direction: column;
-    background-color: ${styles.colors.transparent};
     margin-top: 2%;
     border: none;
-    padding-bottom: 0;
+    text-align: center;
   }
   .container {
-    ${styles.displayBox}
+    ${styles.rightPanel.runTab.box_RunTab}
     margin-top: 2%;
   }
   .contractNames {
-    ${styles.dropdown}
+    ${styles.rightPanel.runTab.dropdown_RunTab}
   }
   .subcontainer {
     display: flex;
@@ -105,35 +101,20 @@ var css = csjs`
     margin-top: 2%;
   }
   .atAddress {
-    ${styles.button}
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    background-color: ${styles.colors.lightGreen};
-    border-color: ${styles.colors.lightGreen};
+    ${styles.rightPanel.runTab.button_atAddress}
   }
   .create {
-    ${styles.button}
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    background-color: ${styles.colors.lightRed};
-    border-color: ${styles.colors.lightRed};
+    ${styles.rightPanel.runTab.button_Create}
   }
   .input {
-    ${styles.inputField}
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    padding-left: 10px;
+    ${styles.rightPanel.runTab.input_RunTab}
   }
   .noInstancesText {
-    ${styles.displayBox}
-    text-align: center;
-    color: ${styles.colors.lightGrey};
+    ${styles.rightPanel.runTab.box_Instance}
     font-style: italic;
   }
   .pendingTxsText {
-    ${styles.displayBox}
-    text-align: center;
-    color: ${styles.colors.lightGrey};
+    ${styles.rightPanel.runTab.box_Instance}
     font-style: italic;
   }
   .item {
@@ -187,7 +168,7 @@ var css = csjs`
 module.exports = runTab
 
 var instanceContainer = yo`<div class="${css.instanceContainer}"></div>`
-var noInstancesText = yo`<div class="${css.noInstancesText}">No Contract Instances.</div>`
+var noInstancesText = yo`<div class="${css.noInstancesText}">0 contract Instances</div>`
 
 var pendingTxsText = yo`<div class="${css.pendingTxsText}"></div>`
 var pendingTxsContainer = yo`<div class="${css.pendingTxsContainer}">${pendingTxsText}</div>`
diff --git a/src/app/tabs/settings-tab.js b/src/app/tabs/settings-tab.js
index b7346b7c96..2e92b088ac 100644
--- a/src/app/tabs/settings-tab.js
+++ b/src/app/tabs/settings-tab.js
@@ -15,16 +15,22 @@ var css = csjs`
     display: flex;
   }
   .info {
-    ${styles.infoTextBox}
+    ${styles.rightPanel.settingsTab.box_SolidityVersionInfo}
     margin-bottom: 2em;
     word-break: break-word;
   }
   .crow {
-    margin-top: 1em;
     display: flex;
+    overflow: auto;
+    clear: both;
+    padding: .5em;
+    font-weight: bold;
   }
   .select {
-    ${styles.dropdown}
+    ${styles.rightPanel.settingsTab.dropdown_SelectCompiler}
+  }
+  input {
+    margin-right: 3px;
   }
 }
 `
diff --git a/src/app/tabs/support-tab.js b/src/app/tabs/support-tab.js
index 3435e5ef3d..c6d89efbe4 100644
--- a/src/app/tabs/support-tab.js
+++ b/src/app/tabs/support-tab.js
@@ -16,7 +16,7 @@ var css = csjs`
     overflow: hidden;
   }
   .chat {
-    ${styles.displayBox}
+    ${styles.rightPanel.supportTab.box_IframeContainer}
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -46,14 +46,13 @@ var css = csjs`
     opacity: 0.8;
   }
   .chatIframe {
-    ${styles.displayBox}
     width: 100%;
     height: 100%;
     transform: scale(0.9);
     padding: 0;
   }
   .infoBox {
-    ${styles.infoTextBox}
+    ${styles.rightPanel.supportTab.box_SupportInfo}
   }
 `
 
diff --git a/src/app/tabs/tabbed-menu.js b/src/app/tabs/tabbed-menu.js
index 12a2e60647..ce7fc698d8 100644
--- a/src/app/tabs/tabbed-menu.js
+++ b/src/app/tabs/tabbed-menu.js
@@ -1,7 +1,19 @@
 var $ = require('jquery')
 
+// -------------- styling ----------------------
+var csjs = require('csjs-inject')
+var remix = require('ethereum-remix')
+var styleGuide = remix.ui.styleGuide
+var styles = styleGuide()
+
 module.exports = tabbedMenu
 
+var css = csjs`
+  .active {
+    background-color: ${styles.rightPanel.backgroundColor_Tab};
+  }
+`
+
 function tabbedMenu (container, appAPI, events, opts) {
   var lis = container.querySelectorAll('li')
   for (var li = 0; li < lis.length; ++li) {
@@ -20,15 +32,18 @@ function tabbedMenu (container, appAPI, events, opts) {
   selectTab(container.querySelector('.compileView'))
 
   // select tab
+
   function selectTab (el) {
-    el = $(el)
-    var match = /[a-z]+View/.exec(el.get(0).className)
+    var match = /[a-z]+View/.exec(el.className)
     if (!match) return
     var cls = match[0]
-    if (!el.hasClass('active')) {
-      el.parent().find('li').removeClass('active')
+    if (!el.classList.contains(css.active)) {
+      var nodes = el.parentNode.querySelectorAll('li')
+      for (var i = 0; i < nodes.length; ++i) {
+        nodes[i].classList.remove(css.active)
+      }
       $('#optionViews').attr('class', '').addClass(cls)
-      el.addClass('active')
+      el.classList.add(css.active)
     }
     events.app.trigger('tabChanged', [cls])
   }
diff --git a/src/app/ui/dropdown.js b/src/app/ui/dropdown.js
index 0621027566..27622904f3 100644
--- a/src/app/ui/dropdown.js
+++ b/src/app/ui/dropdown.js
@@ -1,18 +1,23 @@
 var yo = require('yo-yo')
-var csjs = require('csjs-inject')
 var EventManager = require('ethereum-remix').lib.EventManager
+// -------------- styling ----------------------
+var csjs = require('csjs-inject')
+var remix = require('ethereum-remix')
+var styleGuide = remix.ui.styleGuide
+var styles = styleGuide()
 
 var css = csjs`
   .dropdown           {
+    ${styles.terminal.dropdown_Filter_MenuBar}
+    overflow          : visible;
     position          : relative;
     display           : flex;
     flex-direction    : column;
-    color : black;
+    margin-right      : 3px;
   }
   .selectbox          {
     display           : flex;
     align-items       : center;
-    background-color  : lightgrey;
     margin            : 3px;
     cursor            : pointer;
   }
@@ -32,12 +37,14 @@ var css = csjs`
     position          : absolute;
     display           : flex;
     flex-direction    : column;
-    min-width         : 30ch;
-    max-width         : 30ch;
-    top               : 21px;
-    left              : 10px;
-    background-color  : white;
-    border            : 1px solid black;
+    align-items       : end;
+    top               : 24px;
+    left              : 0;
+    width             : 250px;
+    background-color  : ${styles.appProperties.dropdown_BackgroundColor};
+    border            : 1px solid ${styles.appProperties.dropdown_BorderColor};
+    border-radius     : 3px;
+    border-top        : 0;
   }
   .option {
     margin: 0;
diff --git a/src/app/ui/modaldialog.js b/src/app/ui/modaldialog.js
index 1bd14f98d0..c628874943 100644
--- a/src/app/ui/modaldialog.js
+++ b/src/app/ui/modaldialog.js
@@ -19,12 +19,13 @@ var css = csjs`
   }
   .modalHeader {
     padding: 2px 16px;
-    background-color: ${styles.colors.backgroundBlue};
-    color: ${styles.colors.white};
+    background-color: ${styles.remix.modalDialog_Header_Footer_BackgroundColor};
+    color: ${styles.remix.modalDialog_Header_Footer_Color};
     display: flex;
     justify-content: space-between;
   }
   .modalBody {
+    background-color: ${styles.remix.modalDialog_BackgroundColor_Primary};
     padding: 1.5em;
     line-height: 1.5em;
   }
@@ -32,15 +33,15 @@ var css = csjs`
     display: flex;
     justify-content: flex-end;
     padding: 10px 30px;
-    background-color: ${styles.colors.backgroundBlue};
-    color: ${styles.colors.white};
+    background-color: ${styles.remix.modalDialog_Header_Footer_BackgroundColor};
+    color: ${styles.remix.modalDialog_Header_Footer_Color};
     text-align: right;
     font-weight: 700;
     cursor: pointer;
   }
   .modalContent {
     position: relative;
-    background-color: ${styles.colors.white};
+    background-color: ${styles.colors.black};
     margin: auto;
     padding: 0;
     line-height: 18px;
@@ -55,16 +56,16 @@ var css = csjs`
   }
   .modalFooterOk {
     cursor: pointer;
-    color: ${styles.colors.grey};
+    color: ${styles.remix.modalDialog_Header_Footer_Color};
   }
   .modalFooterCancel {
     margin-left: 1em;
     cursor: pointer;
-    color: ${styles.colors.grey};
+    color: ${styles.remix.modalDialog_Header_Footer_Color};
   }
   .modalClose {
     margin: auto 0;
-    color: #393939;
+    color: ${styles.remix.modalDialog_Header_Footer_Color};
     cursor: pointer;
   }
   @-webkit-keyframes animatetop {
diff --git a/src/app/ui/renderer.js b/src/app/ui/renderer.js
index eee2108dbe..0c15d32077 100644
--- a/src/app/ui/renderer.js
+++ b/src/app/ui/renderer.js
@@ -1,9 +1,69 @@
 'use strict'
 
 var $ = require('jquery')
-
+var yo = require('yo-yo')
 var utils = require('../../lib/utils')
 
+// -------------- styling ----------------------
+// var csjs = require('csjs-inject')
+var remix = require('ethereum-remix')
+var styleGuide = remix.ui.styleGuide
+var styles = styleGuide()
+
+var css = yo`<style>
+.sol.success,
+.sol.error,
+.sol.warning {
+    word-wrap: break-word;
+    cursor: pointer;
+    position: relative;
+    margin: 0.5em 0 1em 0;
+    border-radius: 5px;
+    line-height: 20px;
+    padding: 8px 15px;
+}
+
+.sol.success pre,
+.sol.error pre,
+.sol.warning pre {
+    overflow-y: hidden;
+    background-color: transparent;
+    margin: 0;
+    font-size: 12px;
+    border: 0 none;
+    padding: 0;
+    border-radius: 0;
+}
+
+.sol.success .close,
+.sol.error .close,
+.sol.warning .close {
+    font-weight: bold;
+    position: absolute;
+    color: hsl(0, 0%, 0%); /* black in style-guide.js */
+    top: 0;
+    right: 0;
+    padding: 0.5em;
+}
+
+.sol.error {
+    background-color: ${styles.rightPanel.message_Error_BackgroundColor};
+    border: .2em dotted ${styles.rightPanel.message_Error_BorderColor};
+    color: ${styles.rightPanel.message_Error_Color};
+}
+
+.sol.warning {
+  background-color: ${styles.rightPanel.message_Warning_BackgroundColor};
+  border: .2em dotted ${styles.rightPanel.message_Warning_BorderColor};
+  color: ${styles.rightPanel.message_Warning_Color};
+}
+
+.sol.success {
+  background-color: ${styles.rightPanel.message_Success_BackgroundColor};
+  border: .2em dotted ${styles.rightPanel.message_Success_BorderColor};
+  color: ${styles.rightPanel.message_Success_Color};
+}</style>`
+
 /**
  * After refactor, the renderer is only used to render error/warning
  * TODO: This don't need to be an object anymore. Simplify and just export the renderError function.
@@ -11,6 +71,9 @@ var utils = require('../../lib/utils')
  */
 function Renderer (appAPI) {
   this.appAPI = appAPI
+  if (document && document.head) {
+    document.head.appendChild(css)
+  }
 }
 
 Renderer.prototype.error = function (message, container, options) {
diff --git a/src/universal-dapp.js b/src/universal-dapp.js
index da094b24d3..3195acccd7 100644
--- a/src/universal-dapp.js
+++ b/src/universal-dapp.js
@@ -31,16 +31,16 @@ var css = csjs`
     align-items: center;
   }
   .title {
-    font-size: 11px;
-    ${styles.dropdown}
-    width: 400px;
+    ${styles.rightPanel.runTab.dropdown_RunTab}
     display: flex;
     justify-content: space-between;
     align-items: center;
+    font-size: 11px;
+    width: 75%;
+    min-width: 500px;
     overflow: hidden;
     word-break: break-word;
     line-height: initial;
-    background-color: ${styles.colors.white};
   }
   .titleText {
     margin-right: 1em;
@@ -48,7 +48,7 @@ var css = csjs`
     min-width: 230px;
   }
   .instance {
-    ${styles.displayBox}
+    ${styles.rightPanel.runTab.box_Instance}
     margin-bottom: 2px;
     padding: 10px 15px 6px 15px;
   }
@@ -67,17 +67,17 @@ var css = csjs`
       display: flex;
   }
   .copy  {
-    font-size: 13px;
     cursor: pointer;
-    opacity: 0.8;
     margin-left: 3%;
-    color: ${styles.colors.blue};
+    color: ${styles.rightPanel.runTab.icon_Color_Instance_CopyToClipboard};
   }
   .copy:hover{
-    color: ${styles.colors.grey};
+    color: ${styles.rightPanel.runTab.icon_HoverColor_Instance_CopyToClipboard};
   }
   .buttonsContainer {
     margin-top: 2%;
+    display: flex;
+    overflow: hidden;
   }
   .contractActions {
     display: flex;
@@ -136,10 +136,10 @@ var css = csjs`
     display: none;
   }
   .contractProperty > .value {
-    padding: 0 0.4em;
     box-sizing: border-box;
     float: left;
-    min-width: 100%;
+    align-self: center;
+    color: ${styles.colors.grey};
   }
   .hasArgs input {
     display: block;