Colors

assets/css/browser-solidity.css

 #files .file {
     padding: 0 0.6em;
     box-sizing: border-box;
-    background-color: #F4F6FF;
+    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: #999;
+    color: hsla(0, 0%, 40%, 1); /* grey in style-guide.js */
 }
 
 #files .file.active {
@@ -24,7 +24,7 @@
     height: 1.25em;
     width: 1.25em;
     line-height: 1em;
-    color: #FF8080;
+    color: hsla(0, 82%, 82%, 1); /* red in style-guide.js */
     display: none;
     margin: 0.4em;
     text-align: center;
@@ -64,7 +64,7 @@
 }
 
 #righthand-panel #menu {
-    border-bottom: 3px solid #F4F6FF;
+    border-bottom: 3px solid hsla(229, 100%, 97%, 1); /* backgroundBlue in style-guide.js*/
     height: 2em;
     font-size: 1em;
     padding-top: 0.5em;
@@ -81,7 +81,7 @@
 }
 
 #righthand-panel #options li.active {
-    background-color: #F4F6FF;
+    background-color: hsla(229, 100%, 97%, 1); /* backgroundBlue in style-guide.js*/;
 }
 
 #righthand-panel #options li a {
@@ -89,7 +89,7 @@
 }
 
 #righthand-panel #optionViews {
-    background-color: #F4F6FF;
+    background-color: hsla(229, 100%, 97%, 1); /* backgroundBlue in style-guide.js*/;
     overflow: scroll;
     height: 100%;
 }
@@ -139,13 +139,13 @@
     max-width: 13em;
     padding: 0.3em;
     box-sizing: border-box;
-    border: 1px solid rgba(0, 0, 0, 0.3);
+    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: rgba(255, 255, 255, 0.5);
+    background-color: hsl(0, 0%, 100%); /* white in style-guide.js */
     border-radius: 3px;
     display: inline-block;
     padding: 0 0.6em;
@@ -162,7 +162,7 @@
 }
 
 #settingsView button {
-    background-color: #C6CFF7;
+    background-color: hsla(229, 75%, 87%, .5); /* lightBlue in style-guide.js*/
     font-size: 12px;
     padding: 0.25em;
     margin: 3em 1em .5em 0;
@@ -174,7 +174,7 @@
 }
 
 #debugView button {
-    background-color: #C6CFF7;
+    background-color: hsla(229, 75%, 87%, .5); /* lightBlue in style-guide.js*/
     font-size: 12px;
     padding: 0.25em;
     margin-bottom: .5em;
@@ -209,7 +209,7 @@
 #output .udapp {
     border: 0 none;
     box-shadow: none;
-    border-bottom: 3px solid #F4F6FF;
+    border-bottom: 3px solid hsla(229, 100%, 97%, 1); /* backgroundBlue in style-guide.js*/;
 }
 
 .crow {
@@ -224,7 +224,7 @@
 .crow #txorigin {
     margin-left: 0.5em;
     text-decoration: none;
-    background-color: #C6CFF7;
+    background-color: hsla(229, 75%, 87%, .5); /* lightBlue in style-guide.js*/
     cursor: pointer;
     font-size: 12px;
     color: black;
@@ -273,20 +273,20 @@
 .sol.warning .close {
     font-weight: bold;
     position: absolute;
-    color: rgba(0, 0, 0, 0.5);
+    color: hsl(0, 0%, 0%); /* black in style-guide.js */
     top: 0;
     right: 0;
     padding: 0.5em;
 }
 
 .sol.error {
-    background-color: hsla(0, 100%, 75%, 0.1);
-    border: .2em dotted #FF8080;
+    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 #ffbd01;
+    border: .2em dotted hsla(44, 100%, 50%, 1); /* orange in style-guide.js */
 }
 
 .sol.success {
@@ -296,7 +296,7 @@
 
 #ghostbar {
     width: 1px;
-    background-color: red;
+    background-color: hsla(0, 82%, 82%, 1); /* orange in style-guide.js */
     opacity: 0.5;
     position: absolute;
     cursor: col-resize;
@@ -319,18 +319,18 @@ input[type="file"] {
 .highlightcode {
     position:absolute;
     z-index:20;
-    background-color:#F77E79;
+    background-color:hsla(0, 82%, 82%, 1); /* red in style-guide.js */
 }
 
 .highlightcode_fullLine {
     position:absolute;
     z-index:20;
-    background-color:#F4B9B7;
+    background-color: hsla(0, 82%, 82%, .5); /* lightRed in style-guide.js */ ;
     opacity: 0.5;
 }
 
 .ace_gutter-cell.ace_breakpoint{
-    background-color: #F77E79;
+    background-color: hsla(0, 82%, 82%, 1); // red in style-guide.js
 }
 
 /* The Modal (background) */
@@ -343,8 +343,8 @@ input[type="file"] {
     width: 100%; /* Full width */
     height: 100%; /* Full height */
     overflow: auto; /* Enable scroll if needed */
-    background-color: rgb(0,0,0); /* Fallback color */
-    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    background-color: hsla(0, 0%, 0%, 1); /* Fallback color */
+    background-color: hsla(0, 0%, 0%, .4); /* Black w/ opacity */
 }
 
 /* Modal Header */
@@ -374,7 +374,7 @@ input[type="file"] {
 /* Modal Content */
 .modal-content {
     position: relative;
-    background-color: #fefefe;
+    background-color: hsl(0, 0%, 100%); /* white in style-guide.js */
     margin: auto;
     padding: 0;
     border-top-right-radius: 3px;

assets/css/universal-dapp.css

@@ -151,22 +151,15 @@
 }
 
 .udapp .atAddress {
-	background-color: #B1EAC5;
-	border-color: #B1EAC5;
-	margin-right: 1em;
-	border-radius: 3px;
-}
-
-.udapp .publishContract {
-	background-color: #EC96EC;
-	border-color: #EC96EC;
+	background-color: hsla(141, 58%, 95%, .5);
+	border-color: hsla(141, 58%, 95%, .5);
 	margin-right: 1em;
 	border-radius: 3px;
 }
 
 .udapp button {
 	padding: .36em;
-	color: #4C4B4B;
+	color: hsla(0, 0%, 40%, 1);
 	cursor: pointer;
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -206,25 +199,25 @@
 }
 
 #runTabView .contractProperty .call {
-	background-color: #FFB9B9;
-	border-color: #FFB9B9;
+	background-color: hsla(0, 82%, 82%, .5);  /* lightRed in style-guide.js */
+	border-color: hsla(0, 82%, 82%, .5);  /* lightRed in style-guide.js */
 }
 
 #runTabView .contractProperty .debug {
-	background-color: #9DC1F5;
-	border-color: #9DC1F5;
+	background-color: hsla(229, 75%, 87%, .5);  /* lightBlue in style-guide.js */
+	border-color: hsla(229, 75%, 87%, .5);  /* lightBlue in style-guide.js */
 }
 
 #runTabView .contractProperty.constant .call {
-	background-color: #9DC1F5;
-	border-color: #9DC1F5;
+	background-color: hsla(229, 75%, 87%, .5);  /* lightBlue in style-guide.js */
+	border-color: hsla(229, 75%, 87%, .5);  /* lightBlue in style-guide.js */
 	width: 25%;
 	outline: none;
 }
 
 #runTabView .contractProperty.payable .call {
-	background-color: #FF8B8B;
-	border-color: #FF8B8B;
+	background-color: hsla(0, 82%, 82%, .5);  /* lightRed in style-guide.js */
+	border-color: hsla(0, 82%, 82%, .5);  /* lightRed in style-guide.js */
 	width: 25%;
 }
 

src/app.js

@@ -36,6 +36,9 @@ var TxLogger = require('./app/execution/txLogger')
 var EventsDecoder = require('./app/execution/eventsDecoder')
 var Web3VMProvider = remix.web3.web3VMProvider
 
+var styleGuide = require('./style-guide')
+var styles = styleGuide()
+
 var css = csjs`
   html { box-sizing: border-box; }
   *, *:before, *:after { box-sizing: inherit; }
@@ -43,7 +46,7 @@ var css = csjs`
     margin             : 0;
     padding            : 0;
     font-size          : 12px;
-    color              : #111111;
+    color              : ${styles.colors.black};
     font-weight        : normal;
   }
   .browsersolidity     {

src/app/files/file-explorer.js

@@ -7,6 +7,9 @@ var modalDialogCustom = require('../ui/modal-dialog-custom')
 
 var EventManager = require('ethereum-remix').lib.EventManager
 
+var styleGuide = require('../../style-guide')
+var styles = styleGuide()
+
 var css = csjs`
   .fileexplorer       {
     box-sizing        : border-box;
@@ -16,10 +19,10 @@ var css = csjs`
     font-size         : 14px;
   }
   .hasFocus           {
-    background-color  : #F4F6FF;
+    background-color  : ${styles.colors.backgroundBlue};
   }
   .rename             {
-    background-color  : white;
+    background-color  : ${styles.colors.white};
   }
   .remove             {
     margin-left       : auto;
@@ -171,7 +174,7 @@ function fileExplorer (appAPI, files) {
       this.style.paddingRight = '19px'
       return this.removeChild(deleteButton)
     }
-    this.style.backgroundColor = '#F4F6FF'
+    this.style.backgroundColor = styles.colors.backgroundBlue
     this.style.paddingRight = '0px'
     this.appendChild(deleteButton)
   }

src/app/panels/editor-panel.js

 var csjs = require('csjs-inject')
 var yo = require('yo-yo')
 var EventManager = require('ethereum-remix').lib.EventManager
+var styleGuide = require('../../style-guide')
+var styles = styleGuide()
 
 var Terminal = require('./terminal')
 
@@ -24,7 +26,7 @@ var css = csjs`
     overflow          : hidden;
   }
   .files              {
-    position          : relative; 
+    position          : relative;
     list-style        : none;
     margin            : 0;
     font-size         : 15px;
@@ -41,13 +43,13 @@ var css = csjs`
   .changeeditorfontsize i {
     cursor            : pointer;
     display           : block;
-    color             : #111111;
+    color             : ${styles.colors.black};
   }
   .changeeditorfontsize i {
     cursor            : pointer;
   }
   .changeeditorfontsize i:hover {
-    color             : orange;
+    color             : ${styles.colors.orange};
   }
   .buttons            {
     display           : flex;
@@ -61,13 +63,13 @@ var css = csjs`
     padding           : 10px;
     width             : 100%;
     font-weight       : bold;
-    color             : black;
+    color             : ${styles.colors.black};
   }
   .toggleLHP i        {
     cursor            : pointer;
   }
   .toggleLHP i:hover  {
-    color             : orange;
+    color             : ${styles.colors.orange};
   }
   .scroller           {
     position          : absolute;
@@ -76,7 +78,7 @@ var css = csjs`
     cursor            : pointer;
     padding           : 0 0.9em;
     vertical-align    : middle;
-    background-color  : rgba(255, 255, 255, 0.8);
+    background-color  : ${styles.colors.white};
     height            : 100%;
     font-size         : 1.3em;
   }
@@ -94,14 +96,14 @@ var css = csjs`
     margin-top        : 0.5em;
     padding           : 0.6em;
     font-weight       : bold;
-    color             : black;
+    color             : ${styles.colors.black};
     right             : 0;
   }
   .toggleRHP i        {
     cursor            : pointer;
   }
   .toggleRHP i:hover  {
-    color             : orange;
+    color             : ${styles.colors.orange};
   }
   .show               {
     opacity           : 1;

src/app/panels/file-panel.js

@@ -10,6 +10,9 @@ var modalDialogCustom = require('../ui/modal-dialog-custom')
 var QueryParams = require('../../lib/query-params')
 var queryParams = new QueryParams()
 
+var styleGuide = require('../../style-guide')
+var styles = styleGuide()
+
 module.exports = filepanel
 
 var css = csjs`
@@ -37,7 +40,7 @@ var css = csjs`
     cursor            : pointer;
   }
   .newFile i:hover    {
-    color             : orange;
+    color             : ${styles.colors.orange};
   }
   .gist            {
     padding           : 10px;
@@ -64,19 +67,19 @@ var css = csjs`
     cursor            : pointer;
   }
   .connectToLocalhost i:hover   {
-    color             : orange;
+    color             : ${styles.colors.orange};
   }
   .uploadFile         {
     padding           : 10px;
   }
   .uploadFile label:hover   {
-    color             : orange;
+    color             : ${styles.colors.orange};
   }
   .uploadFile label   {
     cursor            : pointer;
   }
   .treeview {
-    background-color  : white;
+    background-color  : ${styles.colors.white};
   }
   .dragbar            {
     position          : absolute;
@@ -90,7 +93,7 @@ var css = csjs`
   }
   .ghostbar           {
     width             : 3px;
-    background-color  : #C6CFF7;
+    background-color  : ${styles.colors.lightBlue};
     opacity           : 0.5;
     position          : absolute;
     cursor            : col-resize;
@@ -160,17 +163,17 @@ function filepanel (appAPI, filesProvider) {
   var containerFileSystem = element.querySelector('.filesystemexplorer')
   var websocketconn = element.querySelector('.websocketconn')
   filesProvider['localhost'].remixd.event.register('connecting', (event) => {
-    websocketconn.style.color = 'orange'
+    websocketconn.style.color = styles.colors.yellow
     websocketconn.setAttribute('title', 'Connecting to localhost. ' + JSON.stringify(event))
   })
 
   filesProvider['localhost'].remixd.event.register('connected', (event) => {
-    websocketconn.style.color = 'green'
+    websocketconn.style.color = styles.colors.green
     websocketconn.setAttribute('title', 'Connected to localhost. ' + JSON.stringify(event))
   })
 
   filesProvider['localhost'].remixd.event.register('errored', (event) => {
-    websocketconn.style.color = 'red'
+    websocketconn.style.color = styles.colors.red
     websocketconn.setAttribute('title', 'localhost connection errored. ' + JSON.stringify(event))
     if (fileSystemExplorer.element && containerFileSystem.children.length > 0) {
       containerFileSystem.removeChild(fileSystemExplorer.element)
@@ -178,7 +181,7 @@ function filepanel (appAPI, filesProvider) {
   })
 
   filesProvider['localhost'].remixd.event.register('closed', (event) => {
-    websocketconn.style.color = '#111111'
+    websocketconn.style.color = styles.colors.black
     websocketconn.setAttribute('title', 'localhost connection closed. ' + JSON.stringify(event))
     if (fileSystemExplorer.element && containerFileSystem.children.length > 0) {
       containerFileSystem.removeChild(fileSystemExplorer.element)

src/app/panels/righthand-panel.js

@@ -35,7 +35,7 @@ var css = csjs`
   }
   .ghostbar           {
     width             : 3px;
-    background-color  : #C6CFF7;
+    background-color  : ${styles.colors.lightBlue};
     opacity           : 0.5;
     position          : absolute;
     cursor            : col-resize;

src/app/staticanalysis/staticAnalysisView.js

@@ -116,7 +116,7 @@ staticAnalysisView.prototype.run = function () {
         $('#righthand-panel #menu .staticanalysisView').css('color', '')
         warningContainer.html('No warning to report')
       } else {
-        $('#righthand-panel #menu .staticanalysisView').css('color', '#FF8B8B')
+        $('#righthand-panel #menu .staticanalysisView').css('color', styles.colors.red)
       }
     })
   } else {

src/app/tabs/compile-tab.js

@@ -42,7 +42,7 @@ var css = csjs`
     line-height: initial;
   }
   .warnCompilationSlow {
-    color:  orange;
+    color:  ${styles.colors.orange};
     margin-left: 1%;
   }
   .compileButtons {
@@ -163,7 +163,7 @@ function compileTab (container, appAPI, appEvents, opts) {
     if (speed > 1000) {
       warnCompilationSlow.setAttribute('title', `Last compilation took ${speed}ms. We suggest to turn off autocompilation.`)
       warnCompilationSlow.style.display = 'inline-block'
-      settingsView.style.color = '#FF8B8B'
+      settingsView.style.color = styles.colors.red
     } else {
       warnCompilationSlow.style.display = 'none'
       settingsView.style.color = ''
@@ -222,7 +222,7 @@ function compileTab (container, appAPI, appEvents, opts) {
       if (success) {
         document.querySelector('#righthand-panel #menu .compileView').style.color = ''
       } else {
-        document.querySelector('#righthand-panel #menu .compileView').style.color = '#FF8B8B'
+        document.querySelector('#righthand-panel #menu .compileView').style.color = styles.colors.red
       }
       // display warning error if any
       var errorContainer = container.querySelector('.error')

src/app/tabs/run-tab.js

@@ -47,20 +47,20 @@ var css = csjs`
     min-width: 150px;
   }
   .copyaddress {
-    color: #C6CFF7;
+    color: ${styles.colors.blue};
     margin-left: 0.5em;
     margin-top: 0.7em;
     cursor: pointer;
-    opacity: .7;
   }
   .copyaddress:hover {
-    opacity: 1;
+    color: ${styles.colors.grey};
   }
   .instanceContainer extends ${styles.displayBox}  {
     display: flex;
     flex-direction: column;
-    background-color: ${styles.colors.lightBlue};
+    background-color: ${styles.colors.transparent};
     margin-top: 2%;
+    border: none;
   }
   .container extends ${styles.displayBox} {
     margin-top: 2%;
@@ -77,16 +77,20 @@ var css = csjs`
   }
   .button {
     display: flex;
-    align-items: flex-end;
+    align-items: center;
     margin-top: 2%;
   }
   .atAddress extends ${styles.button} {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
+    background-color: ${styles.colors.lightGreen};
+    border-color: ${styles.colors.lightGreen};
   }
   .create extends ${styles.button} {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
+    background-color: ${styles.colors.lightRed};
+    border-color: ${styles.colors.lightRed};
   }
   .input extends ${styles.inputField} {
     border-top-left-radius: 0;
@@ -120,7 +124,7 @@ var css = csjs`
     margin-right: .3em;
   }
   .call {
-    color: #9DC1F5;
+    color: ${styles.colors.lightBlue};
     margin-right: .3em;
   }
   .pending {

src/app/tabs/support-tab.js

@@ -19,38 +19,35 @@ var css = csjs`
     flex-direction: column;
     align-items: center;
     height: 85%;
+    padding: 0;
   }
   .chatTitle {
-    cursor: pointer;
     height: 40px;
     width: 90%;
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 3px;
-    background-color: white;
-    border: 2px dotted ${styles.colors.lightGrey};
+    margin-top: 15px;
   }
   .chatTitle:hover {
-    background-color: ${styles.colors.lightYellow};
+    cursor: pointer;
   }
   .icon {
     height: 70%;
     margin-right: 2%;
   }
   .chatTitleText {
-    font-size: 13px;
+    font-size: 17px;
     font-weight: bold;
   }
   .chatTitleText {
     opacity: 0.8;
   }
-  .chatIframe {
+  .chatIframe extends ${styles.displayBox} {
     width: 100%;
     height: 100%;
-    border: 2px dotted ${styles.colors.lightGrey};
-    overflow: hidden;
     transform: scale(0.9);
+    padding: 0;
   }
   .infoBox extends ${styles.infoTextBox}{
 

src/app/ui/modaldialog.js

 var yo = require('yo-yo')
 var csjs = require('csjs-inject')
+var styleGuide = require('../../style-guide')
+var styles = styleGuide()
 
 var css = csjs`
   .modal {
@@ -11,13 +13,13 @@ var css = csjs`
     width: 100%; /* Full width */
     height: 100%; /* Full height */
     overflow: auto; /* Enable scroll if needed */
-    background-color: rgb(0,0,0); /* Fallback color */
-    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    background-color: ${styles.colors.black}; /* Fallback color */
+    background-color: ${styles.colors.opacityBlack}; /* Black w/ opacity */
   }
   .modalHeader {
     padding: 2px 16px;
-    background-color: orange;
-    color: white;
+    background-color: ${styles.colors.orange};
+    color: ${styles.colors.white};
   }
   .modalBody {
     padding: 1.5em;
@@ -25,20 +27,20 @@ var css = csjs`
   }
   .modalFooter {
     padding: 10px 30px;
-    background-color: orange;
-    color: white;
+    background-color: ${styles.colors.orange};
+    color: ${styles.colors.white};
     text-align: right;
     font-weight: 700;
     cursor: pointer;
   }
   .modalContent {
     position: relative;
-    background-color: #fefefe;
+    background-color: ${styles.colors.white};
     margin: auto;
     padding: 0;
     line-height: 18px;
     font-size: 12px;
-    border: 1px solid #888;
+    border: 1px solid ${styles.colors.grey};
     width: 50%;
     box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
     -webkit-animation-name: animatetop;

src/style-guide.js

@@ -7,22 +7,33 @@ function styleGuide () {
   COLORS
   -------------------------------------------------------------------------- */
   var colors = {
+    // BASIC COLORS (B&W and transparent)
     transparent: 'transparent',
-    white: '#fff',
-    black: '#000',
-    blue: '#C6CFF7',
-    lightBlue: '#F4F6FF',
-    greyBlue: '#999999',
-    grey: '#666',
-    lightGrey: '#dddddd',
-    red: '#FF8080',
-    lightRed: '#FFB9B9',
-    green: 'hsla(141, 58%, 81%, 1)',
-    lightGreen: 'hsla(141, 58%, 95%, 1)',
-    violet: '#C6CFF7',
-    pink: '#EC96EC',
-    yellow: '#ffbd01',
-    lightYellow: 'hsla(59, 56%, 78%, 0.5)'
+    white: 'hsl(0, 0%, 100%)',
+    black: 'hsl(0, 0%, 0%)',
+    opacityBlack: 'hsla(0, 0%, 0%, .4)',
+    // BLUE
+    blue: 'hsla(229, 75%, 87%, 1)',
+    lightBlue: 'hsla(229, 75%, 87%, .5)',
+    backgroundBlue: 'hsla(229, 100%, 97%, 1)',
+    // GREY
+    grey: 'hsla(0, 0%, 40%, 1)',
+    lightGrey: 'hsla(0, 0%, 40%, .5)',
+    veryLightGrey: 'hsla(0, 0%, 40%, .2)',
+    // RED
+    red: 'hsla(0, 82%, 82%, 1)',
+    lightRed: 'hsla(0, 82%, 82%, .5)',
+    // GREEN
+    green: 'hsla(141, 75%, 84%, 1)',
+    lightGreen: 'hsla(141, 75%, 84%, .5)',
+    // PINK
+    pink: 'hsla(300, 69%, 76%, 1)',
+    lightPink: 'hsla(300, 69%, 76%, .5)',
+    // YELLOW
+    orange: 'hsla(44, 100%, 50%, 1)',
+    lightOrange: 'hsla(44, 100%, 50%, .5)',
+    // VIOLET
+    violet: 'hsla(240, 64%, 68%, 1)'
   }
 
   /* --------------------------------------------------------------------------
@@ -64,14 +75,14 @@ function styleGuide () {
       line-height           : 20px;
       background            : ${colors.white};
       border-radius         : 3px;
-      border                : 1px solid ${colors.lightGrey};
+      border                : 1px solid ${colors.veryLightGrey};
       overflow              : hidden;
       word-break            : break-word;
       width                 : 100%;
     }
 
     .info-text-box {
-      background-color      : white;
+      background-color      : ${colors.white};
       line-height           : 20px;
       border                : .2em dotted ${colors.lightGrey};
       padding               : 8px 15px;
@@ -82,18 +93,18 @@ function styleGuide () {
     }
 
     .warning-text-box {
-      background-color      : hsla(59, 56%, 78%, 0.5);  // light yellow
+      background-color      : ${colors.lightOrange};
       line-height           : 20px;
       padding               : 8px 15px;
       border-radius         : 5px;
-      border                : .2em dotted ${colors.yellow}; // orange-yellow
+      border                : .2em dotted ${colors.orange};
       margin-bottom         : 1em;
       overflow              : hidden;
       word-break            : break-word;
     }
 
     .error-text-box {
-      background-color      : ${colors.lightRed};  // light-red
+      background-color      : ${colors.lightRed};
       line-height           : 20px;
       padding               : 1em 1em .5em 1em;
       border-radius         : 3px;
@@ -117,8 +128,7 @@ function styleGuide () {
       word-break            : normal;
     }
     .input {
-      border                : 1px solid ${colors.lightGrey};  // light-grey
-      margin                : .3em;
+      border                : 1px solid ${colors.veryLightGrey};
       height                : 25px;
       width                 : 250px;
       font-size             : 12px;
@@ -138,7 +148,7 @@ function styleGuide () {
       justify-content         : center;
       border-color            : transparent;
       border-radius           : 3px;
-      border                  : .3px solid ${colors.lightGrey};
+      border                  : .3px solid ${colors.veryLightGrey};
       cursor                  : pointer;
       min-height              : 25px;
       max-height              : 25px;
@@ -161,7 +171,7 @@ function styleGuide () {
       text-decoration         : none;
       background-color        : ${colors.white};
       cursor                  : pointer;
-      border                  : 1px solid ${colors.lightGrey};
+      border                  : 1px solid ${colors.veryLightGrey};
       border-radius           : 3px;
       height                  : 25px;
       width                   : 250px;

src/universal-dapp.js

@@ -68,11 +68,10 @@ var css = csjs`
     cursor: pointer;
     opacity: 0.8;
     margin-left: 3%;
-    color: ${styles.colors.black};
-    opacity: .5;
+    color: ${styles.colors.blue};
   }
   .copy:hover{
-    opacity: 1;
+    color: ${styles.colors.grey};
   }
   .buttonsContainer {
     margin-top: 2%;