diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx
index 8e9cde7a..a34b9e46 100644
--- a/client/components/Nav.jsx
+++ b/client/components/Nav.jsx
@@ -281,7 +281,7 @@ class Nav extends React.PureComponent {
                 onBlur={this.handleBlur}
               >
                 Save
-                <span className="nav__keyboard-shortcut">{metaKeyName}+s</span>
+                <span className="nav__keyboard-shortcut">{metaKeyName}+S</span>
               </button>
             </li> }
             { this.props.project.id && this.props.user.authenticated &&
@@ -541,13 +541,13 @@ class Nav extends React.PureComponent {
     return (
       <ul className="nav__items-right" title="user-menu">
         <li className="nav__item">
-          <Link to="/login">
+          <Link to="/login" className="nav__auth-button">
             <span className="nav__item-header">Log in</span>
           </Link>
         </li>
-        <span className="nav__item-spacer">or</span>
+        <span className="nav__item-or">or</span>
         <li className="nav__item">
-          <Link to="/signup">
+          <Link to="/signup" className="nav__auth-button">
             <span className="nav__item-header">Sign up</span>
           </Link>
         </li>
diff --git a/client/components/PreviewNav.jsx b/client/components/PreviewNav.jsx
index 7169621d..8afdcb9d 100644
--- a/client/components/PreviewNav.jsx
+++ b/client/components/PreviewNav.jsx
@@ -10,7 +10,7 @@ const PreviewNav = ({ owner, project }) => (
   <nav className="nav preview-nav">
     <div className="nav__items-left">
       <div className="nav__item-logo">
-        <InlineSVG src={logoUrl} alt="p5.js logo" />
+        <InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
       </div>
       <Link className="nav__item" to={`/${owner.username}/sketches/${project.id}`}>{project.name}</Link>
       <p className="toolbar__project-owner">by</p>
diff --git a/client/components/__test__/FileNode.test.jsx b/client/components/__test__/FileNode.test.jsx
index b70ebf14..60eededb 100644
--- a/client/components/__test__/FileNode.test.jsx
+++ b/client/components/__test__/FileNode.test.jsx
@@ -24,7 +24,8 @@ describe('<FileNode />', () => {
         showFolderChildren: jest.fn(),
         hideFolderChildren: jest.fn(),
         canEdit: true,
-        authenticated: false
+        authenticated: false,
+        openUploadFileModal: jest.fn()
       };
       component = shallow(<FileNode {...props} />);
     });
diff --git a/client/components/__test__/__snapshots__/Nav.test.jsx.snap b/client/components/__test__/__snapshots__/Nav.test.jsx.snap
index 1445d628..a4f321eb 100644
--- a/client/components/__test__/__snapshots__/Nav.test.jsx.snap
+++ b/client/components/__test__/__snapshots__/Nav.test.jsx.snap
@@ -144,7 +144,7 @@ exports[`Nav renders correctly 1`] = `
             <span
               className="nav__keyboard-shortcut"
             >
-              Ctrl
+              ⌃
               +F
             </span>
           </button>
@@ -161,7 +161,7 @@ exports[`Nav renders correctly 1`] = `
             <span
               className="nav__keyboard-shortcut"
             >
-              Ctrl
+              ⌃
               +G
             </span>
           </button>
@@ -180,7 +180,7 @@ exports[`Nav renders correctly 1`] = `
             >
               ⇧
               +
-              Ctrl
+              ⌃
               +G
             </span>
           </button>
@@ -242,7 +242,7 @@ exports[`Nav renders correctly 1`] = `
             <span
               className="nav__keyboard-shortcut"
             >
-              Ctrl
+              ⌃
               +Enter
             </span>
           </button>
@@ -261,7 +261,7 @@ exports[`Nav renders correctly 1`] = `
             >
               ⇧
               +
-              Ctrl
+              ⌃
               +Enter
             </span>
           </button>
diff --git a/client/images/console-debug-contrast.svg b/client/images/console-debug-contrast.svg
new file mode 100644
index 00000000..76906983
--- /dev/null
+++ b/client/images/console-debug-contrast.svg
@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   width="100%"
+   height="100%"
+   viewBox="0 0 24 24"
+   id="svg4"
+   sodipodi:docname="console-debug-contrast.svg"
+   inkscape:version="0.92.2 2405546, 2018-03-11">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="640"
+     inkscape:window-height="480"
+     id="namedview6"
+     showgrid="false"
+     inkscape:zoom="23.6"
+     inkscape:cx="5"
+     inkscape:cy="5"
+     inkscape:window-x="0"
+     inkscape:window-y="25"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg4" />
+  <path
+     d="M14,12H10V10H14M14,16H10V14H14M20,8H17.19C16.74,7.22 16.12,6.55 15.37,6.04L17,4.41L15.59,3L13.42,5.17C12.96,5.06 12.5,5 12,5C11.5,5 11.04,5.06 10.59,5.17L8.41,3L7,4.41L8.62,6.04C7.88,6.55 7.26,7.22 6.81,8H4V10H6.09C6.04,10.33 6,10.66 6,11V12H4V14H6V15C6,15.34 6.04,15.67 6.09,16H4V18H6.81C7.85,19.79 9.78,21 12,21C14.22,21 16.15,19.79 17.19,18H20V16H17.91C17.96,15.67 18,15.34 18,15V14H20V12H18V11C18,10.66 17.96,10.33 17.91,10H20V8Z"
+     id="path2"
+     fill="#38B6F5" />
+</svg>
diff --git a/client/images/console-debug-light.svg b/client/images/console-debug-light.svg
index 8bdc7ae3..0e039342 100644
--- a/client/images/console-debug-light.svg
+++ b/client/images/console-debug-light.svg
@@ -50,5 +50,5 @@
   <path
      d="M14,12H10V10H14M14,16H10V14H14M20,8H17.19C16.74,7.22 16.12,6.55 15.37,6.04L17,4.41L15.59,3L13.42,5.17C12.96,5.06 12.5,5 12,5C11.5,5 11.04,5.06 10.59,5.17L8.41,3L7,4.41L8.62,6.04C7.88,6.55 7.26,7.22 6.81,8H4V10H6.09C6.04,10.33 6,10.66 6,11V12H4V14H6V15C6,15.34 6.04,15.67 6.09,16H4V18H6.81C7.85,19.79 9.78,21 12,21C14.22,21 16.15,19.79 17.19,18H20V16H17.91C17.96,15.67 18,15.34 18,15V14H20V12H18V11C18,10.66 17.96,10.33 17.91,10H20V8Z"
      id="path2"
-     fill="#007BBB" />
+     fill="#0071AD" />
 </svg>
diff --git a/client/images/console-error-contrast.svg b/client/images/console-error-contrast.svg
new file mode 100644
index 00000000..b455509b
--- /dev/null
+++ b/client/images/console-error-contrast.svg
@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   width="100%"
+   height="100%"
+   viewBox="0 0 24 24"
+   id="svg4"
+   sodipodi:docname="console-error-contrast.svg"
+   inkscape:version="0.92.2 2405546, 2018-03-11">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="640"
+     inkscape:window-height="480"
+     id="namedview6"
+     showgrid="false"
+     inkscape:zoom="23.6"
+     inkscape:cx="5"
+     inkscape:cy="5"
+     inkscape:window-x="0"
+     inkscape:window-y="25"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg4" />
+  <path
+     d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"
+     id="path2"
+     fill="#EA7B7D" />
+</svg>
diff --git a/client/images/console-info-contrast.svg b/client/images/console-info-contrast.svg
new file mode 100644
index 00000000..7c37d673
--- /dev/null
+++ b/client/images/console-info-contrast.svg
@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   width="100%"
+   height="100%"
+   viewBox="0 0 24 24"
+   id="svg4"
+   sodipodi:docname="console-info-contrast.svg"
+   inkscape:version="0.92.2 2405546, 2018-03-11">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="640"
+     inkscape:window-height="480"
+     id="namedview6"
+     showgrid="false"
+     inkscape:zoom="23.6"
+     inkscape:cx="5"
+     inkscape:cy="5"
+     inkscape:window-x="0"
+     inkscape:window-y="25"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg4" />
+  <path
+     d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
+     id="path2"
+     fill="#D9D9D9" />
+</svg>
diff --git a/client/images/console-info-dark.svg b/client/images/console-info-dark.svg
index c116d093..869795c5 100644
--- a/client/images/console-info-dark.svg
+++ b/client/images/console-info-dark.svg
@@ -50,5 +50,5 @@
   <path
      d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
      id="path2"
-     fill="#a3a3a3" />
+     fill="#D9D9D9" />
 </svg>
diff --git a/client/images/console-info-light.svg b/client/images/console-info-light.svg
index 24b74263..eaf8be4d 100644
--- a/client/images/console-info-light.svg
+++ b/client/images/console-info-light.svg
@@ -50,5 +50,5 @@
   <path
      d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
      id="path2"
-     fill="#7D7D7D" />
+     fill="#4D4D4D" />
 </svg>
diff --git a/client/images/console-warn-contrast.svg b/client/images/console-warn-contrast.svg
new file mode 100644
index 00000000..6811e3d4
--- /dev/null
+++ b/client/images/console-warn-contrast.svg
@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   width="100%"
+   height="100%"
+   viewBox="0 0 24 24"
+   id="svg4"
+   sodipodi:docname="console-warn-contrast.svg"
+   inkscape:version="0.92.2 2405546, 2018-03-11">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="640"
+     inkscape:window-height="480"
+     id="namedview6"
+     showgrid="false"
+     inkscape:zoom="23.6"
+     inkscape:cx="5"
+     inkscape:cy="5"
+     inkscape:window-x="0"
+     inkscape:window-y="25"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg4" />
+  <path
+     d="M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z"
+     id="path2"
+     fill="#f5bc38" />
+</svg>
diff --git a/client/images/console-warn-light.svg b/client/images/console-warn-light.svg
index 6e76d14a..548ee946 100644
--- a/client/images/console-warn-light.svg
+++ b/client/images/console-warn-light.svg
@@ -50,5 +50,5 @@
   <path
      d="M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z"
      id="path2"
-     fill="#FAAF00" />
+     fill="#996B00" />
 </svg>
diff --git a/client/images/down-arrow.svg b/client/images/down-arrow.svg
index f6eb1e87..a1dc41d5 100644
--- a/client/images/down-arrow.svg
+++ b/client/images/down-arrow.svg
@@ -3,8 +3,8 @@
     <!-- Generator: Sketch 39 (31667) - http://www.bohemiancoding.com/sketch -->
     <!-- <desc>Created with Sketch.</desc> -->
     <defs></defs>
-    <g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.539999962">
-        <g id="p5js-IDE-styles-foundation-pt-2" transform="translate(-425.000000, -1168.000000)" fill="#333333">
+    <g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="1.0">
+        <g id="p5js-IDE-styles-foundation-pt-2" transform="translate(-425.000000, -1168.000000)" fill="#AAA">
             <g id="Icons" transform="translate(16.000000, 1063.000000)">
                 <polygon id="arrow-shape-copy-2" transform="translate(416.000000, 109.198314) rotate(-180.000000) translate(-416.000000, -109.198314) " points="417.4 106.396628 423 111.996628 421.6 113.396628 416 107.796628 410.4 113.396628 409 111.996628 414.6 106.396628 415.996628 105"></polygon>
             </g>
diff --git a/client/images/exit.svg b/client/images/exit.svg
index dd19e998..b6c0cc74 100644
--- a/client/images/exit.svg
+++ b/client/images/exit.svg
@@ -5,7 +5,7 @@
     <!-- <desc>Created with Sketch.</desc> -->
     <defs></defs>
     <g id="exit" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Artboard-1" fill="#D8D8D8">
+        <g id="Artboard-1" fill="#AAA">
             <path d="M8,5.87867966 L2.69669914,0.575378798 L0.575378798,2.69669914 L5.87867966,8 L0.575378798,13.3033009 L2.69669914,15.4246212 L8,10.1213203 L13.3033009,15.4246212 L15.4246212,13.3033009 L10.1213203,8 L15.4246212,2.69669914 L13.3033009,0.575378798 L8,5.87867966 Z" id="exit"></path>
         </g>
     </g>
diff --git a/client/images/triangle-arrow-down-white.svg b/client/images/triangle-arrow-down-white.svg
index a66e9ff6..75fd5567 100644
--- a/client/images/triangle-arrow-down-white.svg
+++ b/client/images/triangle-arrow-down-white.svg
@@ -3,7 +3,7 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="environment" transform="translate(-26.000000, -42.000000)" fill="#B5B5B5">
+        <g id="environment" transform="translate(-26.000000, -42.000000)" fill="#FFF">
             <g id="libraries" transform="translate(21.000000, 32.000000)">
                 <polygon id="Triangle-3" transform="translate(7.500000, 12.500000) rotate(180.000000) translate(-7.500000, -12.500000) " points="7.5 10 10 15 5 15"></polygon>
             </g>
diff --git a/client/images/triangle-arrow-down.svg b/client/images/triangle-arrow-down.svg
index a66e9ff6..47ab5d10 100644
--- a/client/images/triangle-arrow-down.svg
+++ b/client/images/triangle-arrow-down.svg
@@ -3,7 +3,7 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="environment" transform="translate(-26.000000, -42.000000)" fill="#B5B5B5">
+        <g id="environment" transform="translate(-26.000000, -42.000000)" fill="#000000">
             <g id="libraries" transform="translate(21.000000, 32.000000)">
                 <polygon id="Triangle-3" transform="translate(7.500000, 12.500000) rotate(180.000000) translate(-7.500000, -12.500000) " points="7.5 10 10 15 5 15"></polygon>
             </g>
diff --git a/client/images/triangle-arrow-right.svg b/client/images/triangle-arrow-right.svg
index a99148b2..222020a8 100644
--- a/client/images/triangle-arrow-right.svg
+++ b/client/images/triangle-arrow-right.svg
@@ -3,7 +3,7 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="environment" transform="translate(-26.000000, -42.000000)" fill="#B5B5B5">
+        <g id="environment" transform="translate(-26.000000, -42.000000)" fill="#000000">
             <g id="libraries" transform="translate(21.000000, 32.000000)">
                 <polygon id="Triangle-3" transform="translate(7.500000, 12.500000) rotate(90.000000) translate(-7.500000, -12.500000) " points="7.5 10 10 15 5 15"></polygon>
             </g>
diff --git a/client/images/up-arrow.svg b/client/images/up-arrow.svg
index a5a3fb18..c4a90f1d 100644
--- a/client/images/up-arrow.svg
+++ b/client/images/up-arrow.svg
@@ -3,8 +3,8 @@
     <!-- Generator: Sketch 39 (31667) - http://www.bohemiancoding.com/sketch -->
     <!-- <desc>Created with Sketch.</desc> -->
     <defs></defs>
-    <g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.539999962">
-        <g id="p5js-IDE-styles-foundation-pt-2" transform="translate(-394.000000, -1168.000000)" fill="#333333">
+    <g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="1">
+        <g id="p5js-IDE-styles-foundation-pt-2" transform="translate(-394.000000, -1168.000000)" fill="#AAA">
             <g id="Icons" transform="translate(16.000000, 1063.000000)">
                 <polygon id="arrow-shape-copy" points="386.4 106.396628 392 111.996628 390.6 113.396628 385 107.796628 379.4 113.396628 378 111.996628 383.6 106.396628 384.996628 105"></polygon>
             </g>
diff --git a/client/modules/IDE/components/Console.jsx b/client/modules/IDE/components/Console.jsx
index ba45826e..dd24d7fe 100644
--- a/client/modules/IDE/components/Console.jsx
+++ b/client/modules/IDE/components/Console.jsx
@@ -9,12 +9,16 @@ import {
 } from '../../../styles/components/_console-feed.scss';
 import warnLightUrl from '../../../images/console-warn-light.svg';
 import warnDarkUrl from '../../../images/console-warn-dark.svg';
+import warnContrastUrl from '../../../images/console-warn-contrast.svg';
 import errorLightUrl from '../../../images/console-error-light.svg';
 import errorDarkUrl from '../../../images/console-error-dark.svg';
+import errorContrastUrl from '../../../images/console-error-contrast.svg';
 import debugLightUrl from '../../../images/console-debug-light.svg';
 import debugDarkUrl from '../../../images/console-debug-dark.svg';
+import debugContrastUrl from '../../../images/console-debug-contrast.svg';
 import infoLightUrl from '../../../images/console-info-light.svg';
 import infoDarkUrl from '../../../images/console-info-dark.svg';
+import infoContrastUrl from '../../../images/console-info-contrast.svg';
 
 const upArrowUrl = require('../../../images/up-arrow.svg');
 const downArrowUrl = require('../../../images/down-arrow.svg');
@@ -47,6 +51,12 @@ class Console extends React.Component {
       LOG_DEBUG_ICON: `url(${debugDarkUrl})`,
       LOG_INFO_ICON: `url(${infoDarkUrl})`
     };
+    const CONSOLE_FEED_CONTRAST_ICONS = {
+      LOG_WARN_ICON: `url(${warnContrastUrl})`,
+      LOG_ERROR_ICON: `url(${errorContrastUrl})`,
+      LOG_DEBUG_ICON: `url(${debugContrastUrl})`,
+      LOG_INFO_ICON: `url(${infoContrastUrl})`
+    };
     const CONSOLE_FEED_SIZES = {
       TREENODE_LINE_HEIGHT: 1.2,
       BASE_FONT_SIZE: this.props.fontSize,
@@ -64,7 +74,7 @@ class Console extends React.Component {
       case 'dark':
         return Object.assign(CONSOLE_FEED_DARK_STYLES, CONSOLE_FEED_DARK_ICONS, CONSOLE_FEED_SIZES, style);
       case 'contrast':
-        return Object.assign(CONSOLE_FEED_CONTRAST_STYLES, CONSOLE_FEED_DARK_ICONS, CONSOLE_FEED_SIZES, style);
+        return Object.assign(CONSOLE_FEED_CONTRAST_STYLES, CONSOLE_FEED_CONTRAST_ICONS, CONSOLE_FEED_SIZES, style);
       default:
         return '';
     }
diff --git a/client/modules/IDE/components/NewFileForm.jsx b/client/modules/IDE/components/NewFileForm.jsx
index 1ff8bff4..aa173a50 100644
--- a/client/modules/IDE/components/NewFileForm.jsx
+++ b/client/modules/IDE/components/NewFileForm.jsx
@@ -33,7 +33,12 @@ class NewFileForm extends React.Component {
             {...domOnlyProps(name)}
             ref={(element) => { this.fileName = element; }}
           />
-          <input type="submit" value="Add File" aria-label="add file" />
+          <input
+            type="submit"
+            value="Add File"
+            aria-label="add file"
+            className="new-file-form__submit"
+          />
         </div>
         {name.touched && name.error && <span className="form-error">{name.error}</span>}
       </form>
diff --git a/client/modules/IDE/components/NewFolderForm.jsx b/client/modules/IDE/components/NewFolderForm.jsx
index 70750394..765ebd06 100644
--- a/client/modules/IDE/components/NewFolderForm.jsx
+++ b/client/modules/IDE/components/NewFolderForm.jsx
@@ -34,7 +34,12 @@ class NewFolderForm extends React.Component {
             ref={(element) => { this.fileName = element; }}
             {...domOnlyProps(name)}
           />
-          <input type="submit" value="Add Folder" aria-label="add folder" />
+          <input
+            type="submit"
+            value="Add Folder"
+            aria-label="add folder"
+            className="new-folder-form__submit"
+          />
         </div>
         {name.touched && name.error && <span className="form-error">{name.error}</span>}
       </form>
diff --git a/client/styles/abstracts/_mixins.scss b/client/styles/abstracts/_mixins.scss
index 1e6f2c52..1d51f204 100644
--- a/client/styles/abstracts/_mixins.scss
+++ b/client/styles/abstracts/_mixins.scss
@@ -21,12 +21,13 @@
 @mixin icon() {
   @include themify() {
     color: getThemifyVariable('icon-color');
-    & g {
+    & g, & polygon {
+      opacity: 1;
       fill: getThemifyVariable('icon-color');
     }
     &:hover {
       color: getThemifyVariable('icon-hover-color');
-      & g {
+      & g, & polygon {
         opacity: 1;
         fill: getThemifyVariable('icon-hover-color');
       }
diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss
index 09b9932f..4e0b172f 100644
--- a/client/styles/abstracts/_placeholders.scss
+++ b/client/styles/abstracts/_placeholders.scss
@@ -58,15 +58,15 @@
 }
 
 %none-themify-icon-with-hover {
-	color: $icon-color;
+	color: $medium-dark;
 	& g {
-		fill: $icon-color;
+		fill: $medium-dark;
 	}
 	&:hover {
-		color: $icon-hover-color;
+		color: $p5js-pink;
 		& g {
 			opacity: 1;
-			fill: $icon-hover-color;
+			fill: $p5js-pink;
 		}
 	}
 	background-color: transparent;
@@ -110,7 +110,7 @@
 	@extend %toolbar-button;
 	@include themify() {
 		color: getThemifyVariable('primary-text-color');
-		background-color: getThemifyVariable('modal-button-background-color');
+		background-color: getThemifyVariable('preferences-button-background-color');
 		padding: 0;
 		margin-bottom: #{28 / $base-font-size}rem;
 		line-height: #{50 / $base-font-size}rem;
@@ -126,7 +126,7 @@
 		}
 		&:disabled:hover {
 			cursor: not-allowed;
-			background-color: getThemifyVariable('modal-button-background-color');
+			background-color: getThemifyVariable('preferences-button-background-color');
 		}
 	}
 }
@@ -136,7 +136,7 @@
 		background-color: transparent;
 		color: getThemifyVariable('inactive-text-color');
 		&:hover {
-			color: getThemifyVariable('primary-text-color');
+			color: getThemifyVariable('heavy-text-color');
 		}
 	}
 	font-size: #{12 / $base-font-size}rem;
@@ -176,7 +176,7 @@
 		cursor: pointer;
 		&:hover {
 			text-decoration: none;
-			color: getThemifyVariable('primary-text-color');
+			color: getThemifyVariable('heavy-text-color');
 		}
 	}
 }
@@ -186,7 +186,7 @@
     background-color: map-get($theme-map, 'modal-background-color');
     border: 1px solid map-get($theme-map, 'modal-border-color');
     box-shadow: 0 0 18px 0 getThemifyVariable('shadow-color');
-    color: getThemifyVariable('dropdown-color');
+    color: getThemifyVariable('primary-text-color');
 	}
 	text-align: left;
 	width: #{180 / $base-font-size}rem;
@@ -207,7 +207,7 @@
 		& button,
 		& a {
 			@include themify() {
-				color: getThemifyVariable('dropdown-color');
+				color: getThemifyVariable('primary-text-color');
 			}
 			width: 100%;
 			text-align: left;
diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss
index 05dfcf6e..4fca97fd 100644
--- a/client/styles/abstracts/_variables.scss
+++ b/client/styles/abstracts/_variables.scss
@@ -2,6 +2,8 @@ $base-font-size: 12;
 
 //colors
 $p5js-pink: #ed225d;
+$processing-blue: #007BBB;
+$p5js-active-pink: #f10046;
 $white: #fff;
 $black: #000;
 $yellow: #F5DC23;
@@ -9,259 +11,263 @@ $orange: #ffa500;
 $red: #ff0000;
 $lightsteelblue: #B0C4DE;
 $dodgerblue: #1E90FF;
-$icon-color: #8b8b8b;
-$icon-hover-color: #333;
+// $icon-hover-color: #333;
 $p5-contrast-pink: #FFA9D9;
 
-// Grays
-$dark: #333;
-$middleGray: #7d7d7d;
-$middleLight: #a6a6a6;
+$border-color: #B5B5B5;
+$outline-color: #0F9DD7;
 
-// Abstracts
-$primary-text-color: $dark;
+// Grayscale values
+$lightest: #FFF; // primary
+$lighter: #FBFBFB;
+
+$light: #F0F0F0; // primary
+$medium-light: #D9D9D9;
+$middle-light: #A6A6A6;
+
+// $middle-gray: #7D7D7D; // primary
+$middle-gray: #747474; // primary
+$middle-dark: #666;
+$medium-dark: #4D4D4D;
+
+$dark: #333; // primary
+$darker: #1C1C1C;
+$darkest: #000;
 
 $themes: (
   light: (
     logo-color: $p5js-pink,
-    primary-text-color: $primary-text-color,
-    dropzone-text-color: #333,
-    modal-button-color: #333,
-    heading-text-color: #333,
-    secondary-text-color: #a8a8a8,
-    inactive-text-color: #b5b5b5,
-    background-color: #fbfbfb,
-    preview-placeholder-color: #dcdcdc,
-    button-background-color: #f4f4f4,
+    logo-background-color: $lightest,
+    heavy-text-color: $darker,
+    primary-text-color: $dark,
+    secondary-text-color: $medium-dark,
+    inactive-text-color: $middle-dark,
+    dropzone-text-color: $dark,
+    modal-button-color: $dark,
+    background-color: $lighter,
+    button-background-color: $light,
+    button-secondary-background-color: $medium-light,
     button-color: $black,
-    button-border-color: #979797,
-    toolbar-button-color: $p5js-pink,
-    toolbar-button-background-color: #f4f4f4,
+    button-border-color: $middle-light,
+    toolbar-button-color: $dark,
+    toolbar-button-background-color: $medium-light,
     button-background-hover-color: $p5js-pink,
-    button-background-active-color: #f10046,
-    button-nav-inactive-color: #a0a0a0,
-    button-hover-color: $white,
-    button-active-color: $white,
-    modal-background-color: #f4f4f4,
-    modal-button-background-color: #e6e6e6,
-    modal-border-color: rgba(17, 17, 17, 0.3),
-    modal-border-selected-color: #B9D0E1,
-    icon-color: $icon-color,
-    icon-hover-color: $icon-hover-color,
-    icon-toast-hover-color: $white,
+    button-background-active-color: $p5js-active-pink,
+    button-nav-inactive-color: $middle-gray,
+    button-hover-color: $lightest,
+    button-active-color: $lightest,
+    modal-background-color: $light,
+    preferences-button-background-color: $medium-light,
+    modal-border-color: $middle-light,
+    icon-color: $middle-gray,
+    icon-hover-color: $darker,
+    icon-toast-hover-color: $lightest,
     shadow-color: rgba(0, 0, 0, 0.16),
-    console-background-color: #eee,
-    console-color: $white,
-    console-header-background-color: #d6d6d6,
-    console-header-color: #b1b1b1,
-    console-info-background-color: $lightsteelblue,
-    console-warn-background-color: $orange,
-    console-debug-background-color: $dodgerblue,
-    console-error-background-color: $red,
-    ide-border-color: #f4f4f4,
-    editor-gutter-color: #f4f4f4,
-    file-selected-color: #f4f4f4,
-    input-text-color: #333,
-    input-border-color: #b5b5b5,
-    about-list-text-color: #4a4a4a,
-    search-background-color: #ffffff,
-    search-clear-background-color: #e9e9e9,
-    search-hover-text-color: #ffffff,
-    search-hover-background-color: #4d4d4d,
-    dropdown-color: #414141,
-    keyboard-shortcut-color: #757575,
+    console-background-color: $light,
+    console-color: $lightest,
+    console-header-background-color: $medium-light,
+    console-header-color: $darker,
+    console-info-background-color: #5276B7,
+    console-warn-background-color: #996B00,
+    console-debug-background-color: #0071AD,
+    console-error-background-color: #D11518,
+    ide-border-color: $medium-light,
+    editor-gutter-color: $lighter,
+    file-hover-color: $light,
+    file-selected-color: $medium-light,
+    input-text-color: $dark,
+    input-background-color: $lightest,
+    input-secondary-background-color: $lightest,
+    input-border-color: $middle-light,
+    search-background-color: $lightest,
+    search-clear-background-color: $light,
+    search-hover-text-color: $lightest,
+    search-hover-background-color: $medium-dark,
+    keyboard-shortcut-color: $middle-gray,
     nav-hover-color: $p5js-pink,
+    nav-border-color: $middle-light,
     error-color: $p5js-pink,
-    table-row-stripe-color: #d6d6d6,
+    table-row-stripe-color: $medium-light,
     codefold-icon-open: url(../images/triangle-arrow-down.svg),
     codefold-icon-closed: url(../images/triangle-arrow-right.svg),
 
-    primary-button-color: #fff,
+    primary-button-color: $lightest,
     primary-button-background-color: $p5js-pink,
 
-    table-button-color: $white,
-    table-button-background-color: #979797,
-    table-button-active-color: $white,
+    table-button-color: $lightest,
+    table-button-background-color: $middle-gray,
+    table-button-active-color: $lightest,
     table-button-background-active-color: #00A1D3,
-    table-button-hover-color: $white,
+    table-button-hover-color: $lightest,
     table-button-background-hover-color: $p5js-pink,
 
-    progress-bar-background-color: #979797,
-    progress-bar-active-color: #f10046,
+    progress-bar-background-color: $middle-gray,
+    progress-bar-active-color: $p5js-active-pink,
 
     form-title-color: rgba(51, 51, 51, 0.87),
-    form-secondary-title-color: $middleGray,
+    form-secondary-title-color: $medium-dark,
     form-input-text-color: $dark,
-    form-input-placeholder-text-color: $middleLight,
-    form-border-color: #b5b5b5,
-    form-button-background-color: $white,
-    form-button-color: #f10046,
-    form-button-background-hover-color: $p5js-pink,
-    form-button-background-active-color: #f10046,
-    form-button-hover-color: $white,
-    form-button-active-color: $white,
-    form-navigation-options-color: #999999
+    form-input-placeholder-text-color: $middle-light,
+    form-navigation-options-color: $middle-dark
   ),
   dark: (
     logo-color: $p5js-pink,
-    primary-text-color: $white,
+    logo-background-color: $lightest,
+    heavy-text-color: $lightest,
+    primary-text-color: $lightest,
     dropzone-text-color: $black,
-    modal-button-color: $white,
-    heading-text-color: $white,
-    secondary-text-color: #DADADA,
-    inactive-text-color: #b5b5b5,
-    background-color: #333,
-    preview-placeholder-color: #dcdcdc,
-    button-background-color: $white,
-    button-color: $black,
-    button-border-color: #979797,
-    toolbar-button-color: $p5js-pink,
-    toolbar-button-background-color: #424242,
+    modal-button-color: $lightest,
+    secondary-text-color: $medium-light,
+    inactive-text-color: $middle-light,
+    background-color: $darker,
+    button-background-color: $dark,
+    button-secondary-background-color: $medium-dark,
+    button-color: $light,
+    button-border-color: $middle-dark,
+    toolbar-button-color: $lightest,
+    toolbar-button-background-color: $medium-dark,
     button-background-hover-color: $p5js-pink,
-    button-background-active-color: #f10046,
-    button-nav-inactive-color: #a0a0a0,
-    button-hover-color: $white,
-    button-active-color: $white,
-    modal-background-color: #444,
-    modal-button-background-color: #5f5f5f,
-    modal-border-color: #949494,
-    icon-color: #a9a9a9,
-    icon-hover-color: $white,
-    icon-toast-hover-color: $white,
+    button-background-active-color: $p5js-active-pink,
+    button-nav-inactive-color: $middle-light,
+    button-hover-color: $lightest,
+    button-active-color: $lightest,
+    modal-background-color: $dark,
+    preferences-button-background-color: $middle-dark,
+    modal-border-color: $middle-dark,
+    icon-color: $middle-light,
+    icon-hover-color: $lightest,
+    icon-toast-hover-color: $lightest,
     shadow-color: rgba(0, 0, 0, 0.16),
-    console-background-color: #4f4f4f,
-    console-color: $black,
-    console-header-background-color: #3f3f3f,
-    console-header-color: #b5b5b5,
-    console-info-background-color: $lightsteelblue,
-    console-warn-background-color: $orange,
-    console-debug-background-color: $dodgerblue,
-    console-error-background-color: $red,
-    ide-border-color: #949494,
-    editor-gutter-color: #363636,
-    file-selected-color: #404040,
-    input-text-color: #333,
-    input-border-color: #b5b5b5,
-    about-list-text-color: #f4f4f4,
-    search-background-color: #ffffff,
-    search-clear-background-color: #4f4f4f,
-    search-hover-text-color: #ffffff,
+    console-background-color: $dark,
+    console-color: $lightest,
+    console-header-background-color: $medium-dark,
+    console-header-color: $lightest,
+    console-info-background-color: #5276B7,
+    console-warn-background-color: #966C08,
+    console-error-background-color: #DD3134,
+    console-debug-background-color: #097BB3,
+    ide-border-color: $middle-dark,
+    editor-gutter-color: $darker,
+    file-hover-color: $dark,
+    file-selected-color: $medium-dark,
+    input-text-color: $lightest,
+    input-background-color: $dark,
+    input-secondary-background-color: $medium-dark,
+    input-border-color: $middle-dark,
+    search-background-color: $lightest,
+    search-clear-background-color: $medium-dark,
+    search-hover-text-color: $lightest,
     search-hover-background-color: $p5js-pink,
-    dropdown-color: #dadada,
-    keyboard-shortcut-color: #B5B5B5,
+    keyboard-shortcut-color: $middle-light,
     nav-hover-color: $p5js-pink,
+    nav-border-color: $middle-dark,
     error-color: $p5js-pink,
-    table-row-stripe-color: #3f3f3f,
+    table-row-stripe-color: $dark,
     codefold-icon-open: url(../images/triangle-arrow-down-white.svg),
     codefold-icon-closed: url(../images/triangle-arrow-right-white.svg),
 
-    primary-button-color: #fff,
+    primary-button-color: $lightest,
     primary-button-background-color: $p5js-pink,
 
-    table-button-color: $white,
-    table-button-background-color: #979797,
-    table-button-active-color: $white,
+    table-button-color: $lightest,
+    table-button-background-color: $middle-gray,
+    table-button-active-color: $lightest,
     table-button-background-active-color: #00A1D3,
-    table-button-hover-color: $white,
+    table-button-hover-color: $lightest,
     table-button-background-hover-color: $p5js-pink,
 
-    progress-bar-background-color: #979797,
-    progress-bar-active-color: #f10046,
+    progress-bar-background-color: $middle-gray,
+    progress-bar-active-color: $p5js-active-pink,
 
-    form-title-color: $white,
-    form-secondary-title-color: #b5b5b5,
-    form-border-color: #b5b5b5,
-    form-button-background-color: $black,
-    form-button-color: #f10046,
-    form-button-background-hover-color: $p5js-pink,
-    form-button-background-active-color: #f10046,
-    form-button-hover-color: $white,
-    form-button-active-color: $white,
-    form-navigation-options-color: #999999
+    form-title-color: $lightest,
+    form-secondary-title-color: $medium-light,
+    form-navigation-options-color: $middle-light
   ),
   contrast: (
     logo-color: $yellow,
-    primary-text-color: $yellow,
+    logo-background-color: $darker,
+    heavy-text-color: $yellow,
+    primary-text-color: $lightest,
     dropzone-text-color: $black,
-    modal-button-color: #333,
-    heading-text-color: #e1e1e1,
-    secondary-text-color: #e1e1e1,
-    inactive-text-color: #f2f2f2,
-    background-color: #333,
-    button-background-color: $white,
-    button-color: $black,
-    button-border-color: #979797,
-    toolbar-button-color: #333333,
-    toolbar-button-background-color: #C1C1C1,
+    modal-button-color: $dark,
+    secondary-text-color: $lighter,
+    inactive-text-color: $light,
+    background-color: $darker,
+    button-background-color: $dark,
+    button-secondary-background-color: $medium-dark,
+    button-color: $light,
+    button-border-color: $middle-dark,
+    toolbar-button-color: $dark,
+    toolbar-button-background-color: $medium-light,
     button-background-hover-color: $yellow,
     button-background-active-color: $yellow,
-    button-nav-inactive-color: #a0a0a0,
-    button-hover-color: #333333,
-    button-active-color: #333333,
-    modal-background-color: #444,
-    modal-button-background-color: #C1C1C1,
-    modal-border-color: #949494,
-    icon-color: #d9d9d9,
+    button-nav-inactive-color: $light,
+    button-hover-color: $dark,
+    button-active-color: $dark,
+    modal-background-color: $dark,
+    preferences-button-background-color: $medium-light,
+    modal-border-color: $middle-dark,
+    icon-color: $medium-light,
     icon-hover-color: $yellow,
     icon-toast-hover-color: $yellow,
     shadow-color: rgba(0, 0, 0, 0.16),
-    console-background-color: #4f4f4f,
+    console-background-color: $dark,
     console-color: $black,
-    console-header-background-color: #3f3f3f,
-    console-header-color: #d9d9d9,
+    console-header-background-color: $medium-dark,
+    console-header-color: $lightest,
     console-info-background-color: $lightsteelblue,
     console-warn-background-color: $orange,
     console-debug-background-color: $dodgerblue,
     console-error-background-color: $red,
-    ide-border-color: #949494,
-    editor-gutter-color: #454545,
-    file-selected-color: #404040,
-    input-text-color: #333,
-    input-border-color: #b5b5b5,
-    about-list-text-color: #f4f4f4,
+    ide-border-color: $middle-dark,
+    editor-gutter-color: $darker,
+    file-hover-color: $dark,
+    file-selected-color: $medium-dark,
+    input-text-color: $lightest,
+    input-background-color: $dark,
+    input-secondary-background-color: $medium-dark,
+    input-border-color: $middle-dark,
     search-background-color: $white,
-    search-clear-background-color: #444,
-    search-hover-text-color: $black,
+    search-clear-background-color: $medium-dark,
+    search-hover-text-color: $dark,
     search-hover-background-color: $yellow,
-    dropdown-color: #e1e1e1,
-    keyboard-shortcut-color: #e1e1e1,
+    keyboard-shortcut-color: $middle-light,
     nav-hover-color: $yellow,
+    nav-border-color: $middle-dark,
     error-color: $p5-contrast-pink,
-    table-row-stripe-color: #3f3f3f,
+    table-row-stripe-color: $dark,
     codefold-icon-open: url(../images/triangle-arrow-down-white.svg),
     codefold-icon-closed: url(../images/triangle-arrow-right-white.svg),
 
-    primary-button-color: #fff,
+    primary-button-color: $lightest,
     primary-button-background-color: $p5js-pink,
 
-    table-button-color: #333,
-    table-button-background-color: #C1C1C1,
-    table-button-active-color: #333,
+    table-button-color: $dark,
+    table-button-background-color: $middle-gray,
+    table-button-active-color: $dark,
     table-button-background-active-color: #00FFFF,
-    table-button-hover-color: #333,
+    table-button-hover-color: $dark,
     table-button-background-hover-color: $yellow,
 
-    progress-bar-background-color: #979797,
-    progress-bar-active-color: #f10046,
+    progress-bar-background-color: $middle-gray,
+    progress-bar-active-color: $p5js-active-pink,
 
-    form-title-color: $white,
-    form-secondary-title-color: #b5b5b5,
-    form-border-color: #b5b5b5,
-    form-button-background-color: $black,
-    form-button-color: #f10046,
-    form-button-background-hover-color: $p5-contrast-pink,
-    form-button-background-active-color: #f10046,
-    form-button-hover-color: $white,
-    form-button-active-color: $white,
-    form-navigation-options-color: #999999
+    form-title-color: $lightest,
+    form-secondary-title-color: $medium-light,
+    form-navigation-options-color: $middle-light
   )
 );
 
-$console-warn-color: #ffbe05;
-$console-error-color: #ff5f52;
+$toast-background-color: $medium-dark;
+$toast-text-color: $lightest;
 
-$toast-background-color: #4A4A4A;
-$toast-text-color: $white;
+$light-console-error-color: #D11518;
+$light-console-warn-color: #FAAF00;
+$light-console-debug-color: #0071AD;
+
+$dark-console-error-color: #DF3A3D;
+$dark-console-warn-color: #F5BC38;
+$dark-console-debug-color: #0C99E2;
 
 $about-play-background-color: rgba(255, 255, 255, 0.7);
 $about-button-border-color: rgba(151, 151, 151, 0.7);
diff --git a/client/styles/base/_base.scss b/client/styles/base/_base.scss
index c0d8a05c..94b3d55a 100644
--- a/client/styles/base/_base.scss
+++ b/client/styles/base/_base.scss
@@ -39,6 +39,7 @@ textarea {
 	padding: #{10 / $base-font-size}rem;
 	@include themify() {
 		color: getThemifyVariable('input-text-color');
+		background-color: getThemifyVariable('input-background-color');
 		border-color: getThemifyVariable('input-border-color');
 	}
 }
@@ -87,3 +88,11 @@ thead {
 th {
 	text-align: left;
 }
+
+a:focus,
+button:focus,
+input:focus,
+textarea:focus {
+	outline: none;
+	box-shadow: 0 0 0 1px $outline-color;
+}
diff --git a/client/styles/components/_about.scss b/client/styles/components/_about.scss
index 54929f04..66ff9ccd 100644
--- a/client/styles/components/_about.scss
+++ b/client/styles/components/_about.scss
@@ -45,11 +45,6 @@
   padding-bottom: #{20 / $base-font-size}rem;
   padding-left: #{20 / $base-font-size}rem;
   width: #{720 / $base-font-size}rem;
-  & a {
-    @include themify() {
-      color: getThemifyVariable('form-navigation-options-color');
-    }
-  }
 }
 
 .about__content-column {
@@ -76,9 +71,6 @@
   @include themify() {
     padding-top: #{10 / $base-font-size}rem;
     font-size: #{16 / $base-font-size}rem;
-    & a {
-      color: getThemifyVariable(about-list-text-color);
-    }
   }
 }
 
diff --git a/client/styles/components/_api-key.scss b/client/styles/components/_api-key.scss
index a0986d4e..ed519aea 100644
--- a/client/styles/components/_api-key.scss
+++ b/client/styles/components/_api-key.scss
@@ -1,8 +1,5 @@
 .api-key-form__summary {
   padding-top: #{25 / $base-font-size}rem;
-  @include themify() {
-    color: getThemifyVariable('heading-text-color');
-  }
 }
 
 .api-key-form__section {
@@ -13,9 +10,6 @@
   padding: #{15 / $base-font-size}rem 0;
   font-size: #{21 / $base-font-size}rem;
   font-weight: bold;
-  @include themify() {
-    color: getThemifyVariable('heading-text-color');
-  }
 }
 
 .api-key-form__create-button {
@@ -99,9 +93,6 @@
   margin-bottom: #{10 / $base-font-size}rem;
   font-size: #{18 / $base-font-size}rem;
   font-weight: bold;
-  @include themify() {
-    color: getThemifyVariable('heading-text-color');
-  }
 }
 
 .api-key-form__new-token__info {
diff --git a/client/styles/components/_asset-list.scss b/client/styles/components/_asset-list.scss
index 335fc7bf..c0cd524d 100644
--- a/client/styles/components/_asset-list.scss
+++ b/client/styles/components/_asset-list.scss
@@ -83,7 +83,7 @@
 
   @include themify() {
     & polygon {
-      fill: getThemifyVariable('dropdown-color');
+      fill: getThemifyVariable('inactive-text-color');
     }
   }
 }
diff --git a/client/styles/components/_collection-popover.scss b/client/styles/components/_collection-popover.scss
index 2d5db110..a9176c9e 100644
--- a/client/styles/components/_collection-popover.scss
+++ b/client/styles/components/_collection-popover.scss
@@ -16,7 +16,7 @@
     background-color: map-get($theme-map, 'modal-background-color');
     border: 1px solid map-get($theme-map, 'modal-border-color');
     box-shadow: 0 0 18px 0 getThemifyVariable('shadow-color');
-    color: getThemifyVariable('dropdown-color');
+    color: getThemifyVariable('primary-text-color');
   }
   
 	text-align: left;
diff --git a/client/styles/components/_collection.scss b/client/styles/components/_collection.scss
index ff488192..fbc1fed7 100644
--- a/client/styles/components/_collection.scss
+++ b/client/styles/components/_collection.scss
@@ -39,12 +39,8 @@
   // padding: #{8 / $base-font-size}rem 0;
 }
 
-.collection-metadata__name .editable-input__label span {
-  padding: 0.83333rem 0;
-
-  @include themify() {
-    color: getThemifyVariable('primary-text-color');
-  }
+.collection-metadata__name .editable-input__label {
+  padding: 0.83333rem #{7 / $base-font-size}rem;
 }
 
 .collection-metadata__name,
@@ -63,9 +59,9 @@
 }
 
 .collection-metadata__description {
-  margin-top: #{8 / $base-font-size}rem;
+  padding-top: #{8 / $base-font-size}rem;
   text-align: left;
-  font-size: 14px;
+  font-size: #{14 / $base-font-size}rem;
 }
 
 .collection-metadata__description .editable-input__label {
diff --git a/client/styles/components/_console-feed.scss b/client/styles/components/_console-feed.scss
index 597f9e97..366ee54c 100644
--- a/client/styles/components/_console-feed.scss
+++ b/client/styles/components/_console-feed.scss
@@ -11,37 +11,82 @@ $CONSOLE_FEED_LIGHT_STYLES: (
   LOG_ERROR_COLOR: '#D11518',
   LOG_ERROR_BORDER: 'hsl(0, 100%, 92%)',
   LOG_WARN_BACKGROUND: 'hsl(50, 100%, 95%)',
-  LOG_WARN_COLOR: '#FAAF00',
+  LOG_WARN_COLOR: '#996B00',
   LOG_WARN_BORDER: 'hsl(50, 100%, 88%)',
-  LOG_INFO_COLOR: '#7D7D7D',
-  LOG_DEBUG_COLOR: '#007BBB',
-  LOG_COLOR: 'rgb(128, 128, 128)'
+  LOG_INFO_COLOR: '#4D4D4D',
+  LOG_DEBUG_COLOR: '#0071AD',
+  LOG_DEBUG_BACKGROUND: '#D6F1FF',
+  LOG_DEBUG_BORDER: '#C2EBFF',
+  LOG_COLOR: '#4D4D4D',
+  ARROW_COLOR: '#666',
+  OBJECT_NAME_COLOR: '#333',
+  OBJECT_VALUE_NULL_COLOR: '#747474',
+  OBJECT_VALUE_UNDEFINED_COLOR: '#747474',
+  OBJECT_VALUE_STRING_COLOR: '#47820A',
+  OBJECT_VALUE_REGEXP_COLOR: '#A06801',
+  OBJECT_VALUE_NUMBER_COLOR: '#333',
+  OBJECT_VALUE_BOOLEAN_COLOR: '#D52889',
+  OBJECT_VALUE_FUNCTION_KEYWORD_COLOR: '#0B7CA9',
 );
 
 $CONSOLE_FEED_DARK_STYLES: (
   BASE_BACKGROUND_COLOR: '',
   BASE_COLOR: 'white',
   OBJECT_NAME_COLOR: 'white',
-  OBJECT_VALUE_NULL_COLOR: 'hsl(230, 100%, 80%)',
-  OBJECT_VALUE_UNDEFINED_COLOR: 'hsl(230, 100%, 80%)',
-  OBJECT_VALUE_REGEXP_COLOR: 'hsl(230, 100%, 80%)',
-  OBJECT_VALUE_STRING_COLOR: 'hsl(230, 100%, 80%)',
+  OBJECT_VALUE_NULL_COLOR: '#DE4A9B',
+  OBJECT_VALUE_UNDEFINED_COLOR: '#DE4A9B',
+  OBJECT_VALUE_REGEXP_COLOR: '#EE9900',
+  OBJECT_VALUE_STRING_COLOR: '#58a10b',
   OBJECT_VALUE_SYMBOL_COLOR: 'hsl(230, 100%, 80%)',
-  OBJECT_VALUE_NUMBER_COLOR: 'hsl(230, 100%, 80%)',
-  OBJECT_VALUE_BOOLEAN_COLOR: 'hsl(230, 100%, 80%)',
-  OBJECT_VALUE_FUNCTION_KEYWORD_COLOR: 'hsl(230, 100%, 80%)',
-  LOG_ERROR_BACKGROUND: 'hsl(0, 100%, 8%)',
-  LOG_ERROR_COLOR: '#df3a3d',
+  OBJECT_VALUE_NUMBER_COLOR: 'white',
+  OBJECT_VALUE_BOOLEAN_COLOR: '#DE4A9B',
+  OBJECT_VALUE_FUNCTION_KEYWORD_COLOR: '#b58318',
+  LOG_ERROR_BACKGROUND: '#1F0000',
+  LOG_ERROR_COLOR: '#DF3A3D',
   LOG_WARN_BACKGROUND: 'hsl(50, 100%, 10%)',
-  LOG_WARN_COLOR: '#f5bc38',
-  LOG_INFO_COLOR: '#a3a3a3',
-  LOG_DEBUG_COLOR: '#0c99e2',
+  LOG_WARN_COLOR: '#F5BC38',
+  LOG_INFO_COLOR: '#D9D9D9',
+  LOG_INFO_BORDER: '#4D4D4D',
+  LOG_COLOR: '#D9D9D9',
+  LOG_DEBUG_COLOR: '#0C99E2',
+  LOG_DEBUG_BACKGROUND: '#05232E',
+  LOG_DEBUG_BORDER: '#0C546E',
   TABLE_BORDER_COLOR: 'grey',
   TABLE_TH_BACKGROUND_COLOR: 'transparent',
   TABLE_TH_HOVER_COLOR: 'grey',
   TABLE_SORT_ICON_COLOR: 'grey',
   TABLE_DATA_BACKGROUND_IMAGE: 'grey',
-  TABLE_DATA_BACKGROUND_SIZE: 'grey'
+  TABLE_DATA_BACKGROUND_SIZE: 'grey',
+  ARROW_COLOR: '#D9D9D9'
 );
 
-$CONSOLE_FEED_CONTRAST_STYLES: $CONSOLE_FEED_DARK_STYLES;
\ No newline at end of file
+$CONSOLE_FEED_CONTRAST_STYLES: (
+  BASE_BACKGROUND_COLOR: '',
+  BASE_COLOR: 'white',
+  OBJECT_NAME_COLOR: 'white',
+  OBJECT_VALUE_NULL_COLOR: '#FFA9D9',
+  OBJECT_VALUE_UNDEFINED_COLOR: '#FFA9D9',
+  OBJECT_VALUE_REGEXP_COLOR: '#2DE9B6',
+  OBJECT_VALUE_STRING_COLOR: '#2DE9B6',
+  OBJECT_VALUE_SYMBOL_COLOR: '#B3BEFF',
+  OBJECT_VALUE_NUMBER_COLOR: '#FFA9D9',
+  OBJECT_VALUE_BOOLEAN_COLOR: '#FFA9D9',
+  OBJECT_VALUE_FUNCTION_KEYWORD_COLOR: '#F5DC23',
+  LOG_ERROR_BACKGROUND: '#1F0000',
+  LOG_ERROR_COLOR: '#EA7B7D',
+  LOG_WARN_BACKGROUND: 'hsl(50, 100%, 10%)',
+  LOG_WARN_COLOR: '#F5BC38',
+  LOG_INFO_COLOR: '#D9D9D9',
+  LOG_INFO_BORDER: '#4D4D4D',
+  LOG_COLOR: '#D9D9D9',
+  LOG_DEBUG_COLOR: '#38B6F5',
+  LOG_DEBUG_BACKGROUND: '#05232E',
+  LOG_DEBUG_BORDER: '#0C546E',
+  TABLE_BORDER_COLOR: 'grey',
+  TABLE_TH_BACKGROUND_COLOR: 'transparent',
+  TABLE_TH_HOVER_COLOR: 'grey',
+  TABLE_SORT_ICON_COLOR: 'grey',
+  TABLE_DATA_BACKGROUND_IMAGE: 'grey',
+  TABLE_DATA_BACKGROUND_SIZE: 'grey',
+  ARROW_COLOR: '#D9D9D9'
+);
\ No newline at end of file
diff --git a/client/styles/components/_console.scss b/client/styles/components/_console.scss
index 53048614..109b069f 100644
--- a/client/styles/components/_console.scss
+++ b/client/styles/components/_console.scss
@@ -56,6 +56,12 @@
 .preview-console__collapse {
 	padding-top: #{3 / $base-font-size}rem;
 	@include icon();
+	@include themify() {
+		& g,
+		& polygon {
+			fill: getThemifyVariable('secondary-text-color');
+		}
+	}
 	.preview-console--collapsed & {
 		display: none;
 	}
@@ -64,6 +70,12 @@
 .preview-console__expand {
 	padding-top: #{3 / $base-font-size}rem;
 	@include icon();
+	@include themify() {
+		& g,
+		& polygon {
+			fill: getThemifyVariable('secondary-text-color');
+		}
+	}
 	display: none;
 	.preview-console--collapsed & {
 		display: inline-block;
@@ -78,6 +90,10 @@
 .preview-console__clear {
 	@include themify() {
 		@extend %link;
+		color: getThemifyVariable('secondary-text-color');
+		&:hover {
+			color: getThemifyVariable('heavy-text-color');
+		}
 	}
 	background: transparent;
 	border: none;
diff --git a/client/styles/components/_editable-input.scss b/client/styles/components/_editable-input.scss
index b649c333..c64fd240 100644
--- a/client/styles/components/_editable-input.scss
+++ b/client/styles/components/_editable-input.scss
@@ -4,15 +4,18 @@
   align-items: center;
 }
 
-.editable-input__label {
+button.editable-input__label {
   display: flex;
 
   @include themify() {
     color: getThemifyVariable('inactive-text-color');
+    & path {
+      fill: getThemifyVariable('inactive-text-color');
+    }
     &:hover {
-    color: getThemifyVariable('primary-text-color');
-      & .editable-input__icon path {
-        fill: getThemifyVariable('primary-text-color');
+    color: getThemifyVariable('logo-color');
+      & path {
+        fill: getThemifyVariable('logo-color');
       }
     }
   }
@@ -23,23 +26,13 @@
   font-weight: unset;
 }
 
+.editable-input__input {
+  width: 100%;
+}
+
 .editable-input__icon svg {
   width: 1.5rem;
   height: 1.5rem;
-
-  @include themify() {
-    path {
-      fill: getThemifyVariable('inactive-text-color');
-    }
-  }
-}
-
-.editable-input:hover {
-  @include themify() {
-    .editable-input__icon path {
-      fill: getThemifyVariable('primary-text-color');
-    }
-  }
 }
 
 .editable-input--is-not-editing .editable-input__input,
@@ -49,5 +42,5 @@
 
 .editable-input--is-editing .editable-input__input,
 .editable-input--is-not-editing .editable-input__label {
-  display: block;
+  display: flex;
 }
diff --git a/client/styles/components/_editor.scss b/client/styles/components/_editor.scss
index 6096afa1..8042f929 100644
--- a/client/styles/components/_editor.scss
+++ b/client/styles/components/_editor.scss
@@ -52,7 +52,7 @@ pre.CodeMirror-line {
 }
 
 .CodeMirror-gutter-elt:not(.CodeMirror-linenumber) {
-  opacity: 0.3;
+  opacity: 0.2;
   width: #{49 / $base-font-size}rem !important;
   height: 100%;
   left: 49px !important;
@@ -120,12 +120,10 @@ pre.CodeMirror-line {
   width: 100%;
   margin-bottom: #{12 / $base-font-size}rem;
   @include themify() {
-    background-color: getThemifyVariable('search-background-color');
+    color: getThemifyVariable('input-text-color');
+    background-color: getThemifyVariable('input-secondary-background-color');
     border: solid 0.5px getThemifyVariable('button-border-color');
   }
-  &:focus {
-    background-color: $white;
-  }
 }
 
 .CodeMirror-search-count {
@@ -145,22 +143,30 @@ pre.CodeMirror-line {
 .CodeMirror-search-modifiers {
   display: flex;
   justify-content: flex-end;
+  align-items: center;
 }
 
 .CodeMirror-regexp-button,
 .CodeMirror-case-button,
 .CodeMirror-word-button {
-  width: 20px;
-  height: 20px;
+  @include themify() {
+    // @extend %button;
+    padding: #{2 / $base-font-size}rem #{7 / $base-font-size}rem;
+    border: 2px solid transparent;
+    &:hover {
+      border-color: getThemifyVariable("button-border-color");
+    }
 
-  margin-left: #{10 / $base-font-size}rem;
+  }
+  width: #{35 / $base-font-size}rem;
+  height: #{35 / $base-font-size}rem;
+
+  & + & {
+    margin-left: #{10 / $base-font-size}rem;
+  }
 
   word-break: keep-all;
   white-space: nowrap;
-
-  @include themify() {
-    color: getThemifyVariable('inactive-text-color');
-  }
 }
 
 .CodeMirror-regexp-button .label,
@@ -171,7 +177,9 @@ pre.CodeMirror-line {
 
 [aria-checked="true"] {
   @include themify() {
-    color: getThemifyVariable('primary-text-color');
+    color: getThemifyVariable("heavy-text-color");
+    background-color: getThemifyVariable("button-secondary-background-color");
+    border-color: getThemifyVariable("button-border-color");
   }
 }
 
@@ -374,7 +382,7 @@ pre.CodeMirror-line {
 
 .editor__file-name {
   @include themify() {
-    color: getThemifyVariable('secondary-text-color');
+    color: getThemifyVariable('primary-text-color');
   }
   height: #{29 / $base-font-size}rem;
   padding-top: #{7 / $base-font-size}rem;
diff --git a/client/styles/components/_forms.scss b/client/styles/components/_forms.scss
index 8f3ade0e..a3f28be9 100644
--- a/client/styles/components/_forms.scss
+++ b/client/styles/components/_forms.scss
@@ -53,6 +53,7 @@
   font-size: #{16 / $base-font-size}rem;
   @include themify() {
     color: getThemifyVariable('form-input-text-color');
+    background-color: getThemifyVariable('input-background-color');
   }
 }
 
diff --git a/client/styles/components/_modal.scss b/client/styles/components/_modal.scss
index 752b4434..e59ef299 100644
--- a/client/styles/components/_modal.scss
+++ b/client/styles/components/_modal.scss
@@ -45,6 +45,13 @@
   flex: 1;
 }
 
+input.new-file-form__submit,
+input.new-folder-form__submit {
+  @include themify() {
+    background-color: getThemifyVariable("button-secondary-background-color");
+  }
+}
+
 .modal__divider {
   text-align: center;
   margin: #{20 / $base-font-size}rem 0;
diff --git a/client/styles/components/_nav.scss b/client/styles/components/_nav.scss
index 7f5a45ac..fe9de97e 100644
--- a/client/styles/components/_nav.scss
+++ b/client/styles/components/_nav.scss
@@ -5,7 +5,7 @@
   justify-content: space-between;
 
   @include themify() {
-    border-bottom: 1px dashed map-get($theme-map, 'inactive-text-color');
+    border-bottom: 1px dashed map-get($theme-map, 'nav-border-color');
   }
 
   & button {
@@ -23,13 +23,14 @@
   align-items: center;
 }
 
-.nav__items-left {
-  & button {
-    @include themify() {
-      color: getThemifyVariable('secondary-text-color');
-    }
-  }
-}
+// .nav__items-left,
+// .nav__items-right {
+//   & button, & a {
+//     @include themify() {
+//       color: getThemifyVariable('primary-text-color');
+//     }
+//   }
+// }
 
 .nav__item {
   position: relative;
@@ -43,13 +44,14 @@
   }
 }
 
-.nav__item:first-child,
 .nav__item--no-icon {
   padding-left: #{15 / $base-font-size}rem;
 }
 
-.nav__item:last-child {
-  padding-right: #{15 / $base-font-size}rem;
+.nav__item-header-triangle polygon {
+  @include themify() {
+    fill: getThemifyVariable('icon-color');
+  }
 }
 
 .nav__item:hover {
@@ -116,10 +118,20 @@
 .nav__item-spacer {
   @include themify() {
     color: map-get($theme-map, 'inactive-text-color');
-    margin: 0 #{8 / $base-font-size}rem;
+    margin-left: #{8 / $base-font-size}rem;
   }
 }
 
+.nav__item-or {
+  @include themify() {
+    color: map-get($theme-map, 'inactive-text-color');
+  }
+}
+
+.nav__auth-button {
+  padding: #{10 / $base-font-size}rem;
+}
+
 // .nav__dropdown button {
 //   padding: 0;
 // }
@@ -161,13 +173,19 @@
 }
 .svg__logo g > path {
   @include themify() {
-      fill: getThemifyVariable('logo-color');
-    }
+    fill: getThemifyVariable('logo-color');
+  }
 }
 .svg__logo g g:first-of-type path {
   fill: none;
 }
 
+.svg__logo g g:first-of-type use {
+  @include themify() {
+    fill: getThemifyVariable('logo-background-color');
+  }
+}
+
 .nav__keyboard-shortcut {
   font-size: #{12 / $base-font-size}rem;
   font-family: Inconsololata, monospace;
diff --git a/client/styles/components/_p5-contrast-codemirror-theme.scss b/client/styles/components/_p5-contrast-codemirror-theme.scss
index 0ad29dc3..0ec609b8 100644
--- a/client/styles/components/_p5-contrast-codemirror-theme.scss
+++ b/client/styles/components/_p5-contrast-codemirror-theme.scss
@@ -10,7 +10,7 @@
 //light gray: #f4f4f4
 //dark gray: #b5b5b5
 
-$p5-contrast-black: #333;
+$p5-contrast-black: #1C1C1C;
 $p5-contrast-gray: #A0A0A0;
 $p5-contrast-white: #FDFDFD;
 $p5-contrast-darkgray: #333333;
@@ -84,12 +84,12 @@ $p5-contrast-activeline: #999999;
 }
 
 .cm-s-p5-contrast .CodeMirror-activeline-background {
-  background-color: #404040;
+  background-color: $dark;
 }
 
 .cm-s-p5-contrast .CodeMirror-activeline-gutter {
-  background-color: #454545;
-  border-right: 1px solid #949494;
+  background-color: $dark;
+  border-right: 1px solid $middle-dark;
 }
 
 .cm-s-p5-contrast .cm-error {
diff --git a/client/styles/components/_p5-dark-codemirror-theme.scss b/client/styles/components/_p5-dark-codemirror-theme.scss
index bd073941..9e169514 100644
--- a/client/styles/components/_p5-dark-codemirror-theme.scss
+++ b/client/styles/components/_p5-dark-codemirror-theme.scss
@@ -12,9 +12,9 @@
 
 $p5-dark-lightbrown: #A67F59;
 $p5-light-green: #42F48F;
-$p5-dark-black: #333;
-$p5-dark-pink: #D9328F;
-$p5-dark-gray: #999999;
+$p5-dark-black: #1C1C1C;
+$p5-dark-pink: #DE4A9B;
+$p5-dark-gray: #9B9B9B;
 $p5-dark-lightblue: #0F9DD7;
 $p5-dark-darkblue: #318094;
 $p5-dark-white: #FDFDFD;
@@ -89,12 +89,12 @@ $p5-dark-error: #df3a3d;
 }
 
 .cm-s-p5-dark .CodeMirror-activeline-background {
-  background-color: #404040;
+  background-color: $dark;
 }
 
 .cm-s-p5-dark .CodeMirror-activeline-gutter {
-  background-color: #454545;
-  border-right: 1px solid #949494;
+  background-color: $dark;
+  border-right: 1px solid $middle-dark;
 }
 
 .cm-s-p5-dark span.CodeMirror-matchingbracket {
diff --git a/client/styles/components/_p5-light-codemirror-theme.scss b/client/styles/components/_p5-light-codemirror-theme.scss
index 49328175..485aa7be 100644
--- a/client/styles/components/_p5-light-codemirror-theme.scss
+++ b/client/styles/components/_p5-light-codemirror-theme.scss
@@ -10,18 +10,16 @@
 //light gray: #f4f4f4
 //dark gray: #b5b5b5
 
-$p5-light-lightbrown: #A67F59;
-$p5-light-brown: #704F21;
+$p5-light-brown: #7A5A3A;
 $p5-light-black: #333333;
-$p5-light-pink: #D9328F;
-$p5-light-gray: #A0A0A0;
-$p5-light-lightblue: #00A1D3;
-$p5-light-darkblue: #2D7BB6;
-$p5-light-white: #FDFDFD;
-$p5-light-orange: #EE9900;
-$p5-light-lightgray: #E0D7D1;
-$p5-light-darkgray: #666666;
-$p5-light-green: #58a10b;
+$p5-light-pink: #D52889;
+$p5-light-gray: #666;
+$p5-light-blue: #0B7CA9;
+$p5-light-white: $lighter;
+$p5-light-orange: #A06801;
+$p5-light-lightgray: $middle-gray;
+$p5-light-green: #47820A;
+
 
 $p5-light-gutter: #f4f4f4;
 $p5-light-number: #b5b5b5;
@@ -33,23 +31,23 @@ $p5-light-activeline: rgb(207, 207, 207);
   color: $p5-light-black;
 }
 
-.cm-s-p5-light .cm-comment {
-  color: $p5-light-gray;
+.cm-s-p5-light span .cm-comment {
+  color: $p5-light-lightgray;
 }
 
-.cm-s-p5-light .cm-def {
-  color: $p5-light-lightblue;
+.cm-s-p5-light span .cm-def {
+  color: $p5-light-blue;
 }
 
-.cm-s-p5-light .cm-string {
+.cm-s-p5-light span .cm-string {
   color: $p5-light-green;
 }
 
-.cm-s-p5-light .cm-string-2 {
+.cm-s-p5-light span .cm-string-2 {
   color: $p5-light-orange;
 }
 
-.cm-s-p5-light .cm-number {
+.cm-s-p5-light span .cm-number {
   color: $p5-light-black;
 }
 
@@ -57,70 +55,71 @@ $p5-light-activeline: rgb(207, 207, 207);
   color: $p5-light-brown;
 }
 
-.cm-s-p5-light .cm-variable {
-  color: $p5-light-lightblue;
+.cm-s-p5-light span .cm-variable {
+  color: $p5-light-blue;
 }
 
-.cm-s-p5-light .cm-variable2 {
+.cm-s-p5-light span .cm-variable2 {
   color: $p5-light-black;
 }
 
-.cm-s-p5-light .cm-property {
+.cm-s-p5-light span .cm-property {
   color: $p5-light-black;
 }
 
-.cm-s-p5-light .cm-atom {
+.cm-s-p5-light span .cm-atom {
   color: $p5-light-pink;
 }
 
-.cm-s-p5-light .cm-operator {
-  color: $p5-light-lightbrown;
+.cm-s-p5-light span .cm-operator {
+  color: $p5-light-brown;
 }
 
 .cm-s-p5-light .cm-linenumber {
   color: $p5-light-number;
 }
 
-.cm-s-p5-light .CodeMirror-selected {
+.cm-s-p5-light div .CodeMirror-selected {
   background-color: $p5-light-selected;
 }
 
 .cm-s-p5-light .CodeMirror-activeline-background {
-  background-color: #F3F3F3;
+  background-color: $light;
 }
 
 .cm-s-p5-light .CodeMirror-activeline-gutter {
-  background-color: #ECECEC;
+  background-color: $light;
+  border-right: 1px solid $medium-light;
 }
 
 .cm-s-p5-light .cm-error {
   color: #f00;
 }
 
-.cm-s-p5-light .CodeMirror-matchingbracket {
+.cm-s-p5-light span .CodeMirror-matchingbracket {
   outline: 1px solid $p5-light-gray;
   outline-offset: 1px;
   color: $p5-light-black !important;
 }
 
-.cm-s-p5-light .cm-qualifier {
-  color: $p5-light-lightblue;
+.cm-s-p5-light span .cm-qualifier {
+  color: $p5-light-blue;
 }
 
-.cm-s-p5-light .cm-tag {
+.cm-s-p5-light span .cm-tag {
   color: $p5-light-pink;
 }
 
-.cm-s-p5-light .cm-builtin {
-  color: $p5-light-lightblue;
+.cm-s-p5-light span .cm-builtin {
+  color: $p5-light-blue;
 }
 
-.cm-s-p5-light .cm-attribute {
+.cm-s-p5-light span .cm-attribute {
   color: $p5-light-black;
 }
 
 .cm-s-p5-light .cm-p5-function {
-  color: $p5-light-darkblue;
+  color: $p5-light-blue;
   font-weight: bold;
 }
 
diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss
index 7d3bc6df..eb3d00b3 100644
--- a/client/styles/components/_preferences.scss
+++ b/client/styles/components/_preferences.scss
@@ -33,25 +33,6 @@
   }
 }
 
-.serve__over__https {
-  text-align: center;
-  margin-left: #{9 / $base-font-size}rem;
-  font-width: #{108 / $base-font-size}rem;
-  font-height: #{15 / $base-font-size}rem;
-  font-family: Montserrat;
-  font-size: #{12 / $base-font-size}rem;
-  margin-top: #{2 / $base-font-size}rem;
-}
-
-.preferences__heading {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  @include themify() {
-    color: getThemifyVariable("heading-text-color");
-  }
-}
-
 .preferences__title {
   width: #{90 / $base-font-size}rem;
   height: #{25 / $base-font-size}rem;
@@ -86,9 +67,6 @@
   font-size: #{16 / $base-font-size}rem;
   margin-top: #{13 / $base-font-size}rem;
   margin-bottom: #{7 / $base-font-size}rem;
-  @include themify() {
-    color: getThemifyVariable("heading-text-color");
-  }
 }
 
 .preference__subtitle {
@@ -104,8 +82,9 @@
   @include themify() {
     border: #{1 / $base-font-size}rem solid
       getThemifyVariable("button-border-color");
-    background-color: getThemifyVariable("button-background-color");
+    // background-color: getThemifyVariable("button-background-color");
     color: getThemifyVariable("input-text-color");
+    background-color: getThemifyVariable('input-background-color');
   }
   text-align: center;
   border-radius: 0%;
@@ -120,9 +99,9 @@
 
 .preference__label {
   @include themify() {
-    color: getThemifyVariable("inactive-text-color");
+    color: getThemifyVariable("secondary-text-color");
     &:hover {
-      color: getThemifyVariable("primary-text-color");
+      color: getThemifyVariable("heavy-text-color");
     }
   }
   margin: #{-15 / $base-font-size}rem 0 0 #{-5 / $base-font-size}rem;
@@ -242,7 +221,7 @@ input[type="number"]::-webkit-outer-spin-button {
 .preference__radio-button:checked + .preference__option {
   @include themify() {
     //for some reason this won't work for getThemifyVariable
-    color: map-get($theme-map, "primary-text-color");
+    color: map-get($theme-map, "heavy-text-color");
   }
 }
 
diff --git a/client/styles/components/_preview-frame.scss b/client/styles/components/_preview-frame.scss
index 31f12481..04443267 100644
--- a/client/styles/components/_preview-frame.scss
+++ b/client/styles/components/_preview-frame.scss
@@ -23,15 +23,6 @@
   display: none;
 }
 
-.preview-frame-placeholder {
-  width: #{400 / $base-font-size}rem;
-  height: #{400 / $base-font-size}rem;
-  position: absolute;
-  @include themify() {
-    background: getThemifyVariable('preview-placeholder-color');
-  }
-}
-
 .preview-frame__header {
   height: #{29 / $base-font-size}rem;
 }
diff --git a/client/styles/components/_searchbar.scss b/client/styles/components/_searchbar.scss
index 7076f75c..de70b31c 100644
--- a/client/styles/components/_searchbar.scss
+++ b/client/styles/components/_searchbar.scss
@@ -11,7 +11,7 @@
   padding-right: #{38 / $base-font-size}rem;
   @include themify() {
     border-color: getThemifyVariable('input-border-color');
-    background-color: getThemifyVariable('search-background-color');
+    background-color: getThemifyVariable('input-background-color');
   }
 }
 
diff --git a/client/styles/components/_sidebar.scss b/client/styles/components/_sidebar.scss
index 345d0b40..d7b782af 100644
--- a/client/styles/components/_sidebar.scss
+++ b/client/styles/components/_sidebar.scss
@@ -50,6 +50,12 @@
   position: relative;
   overflow-y: auto;
   flex: 1 1 auto;
+  @include themify() {
+    border-top: 1px solid map-get($theme-map, 'ide-border-color');
+  }
+  .sidebar--contracted & {
+    border: none;
+  }
 }
 
 .sidebar__file-item {
@@ -57,12 +63,10 @@
   cursor: pointer;
   position: relative;
   @include themify() {
-    color: map-get($theme-map, 'inactive-text-color');
-    &:hover > .file-item__content .sidebar__file-item-name {
-      color: map-get($theme-map, 'primary-text-color');
-    }
-    &:hover > .file-item__content .sidebar__file-item-icon g {
-      fill: map-get($theme-map, 'primary-text-color');
+    color: map-get($theme-map, 'primary-text-color');
+    // TODO get this to not affect parent, need to move it into JS
+    &:hover:not(.sidebar__file-item--selected) > .file-item__content {
+      background-color: map-get($theme-map, 'file-hover-color');
     }
   }
 }
@@ -120,6 +124,9 @@
     content: '';
     width: 100%;
   }
+  @include themify() {
+    color: map-get($theme-map, 'primary-text-color');
+  }
 }
 
 .sidebar__file-item-show-options {
@@ -166,35 +173,51 @@
   display: none;
   padding: 0;
   border: 0;
-  width: calc(100% - #{100 / $base-font-size}rem);
+  width: calc(100% - #{63 / $base-font-size}rem);
   .sidebar__file-item--editing & {
     display: inline-block;
   }
 }
 
-.sidebar__expand {
+.sidebar__expand,
+.sidebar__contract {
   @include icon();
   position: absolute;
-  top: #{7 / $base-font-size}rem;
-  left: #{1 / $base-font-size}rem;
-  height: #{14 / $base-font-size}rem;
+  top: #{2 / $base-font-size}rem;
+  left: #{0 / $base-font-size}rem;
+  height: #{25 / $base-font-size}rem;
+  width: #{49 / $base-font-size}rem;
+  border-radius: 2px;
   & svg {
-    height: #{14 / $base-font-size}rem;
+    height: #{25 / $base-font-size}rem;
   }
+  @include themify() {
+    background-color: getThemifyVariable("toolbar-button-background-color");
+    & polygon {
+      fill: getThemifyVariable("toolbar-button-color");
+    }
+    &:hover {
+      background-color: getThemifyVariable("button-background-hover-color");
+      & polygon {
+        fill: getThemifyVariable("button-hover-color");
+      }
+    }
+  }
+}
+
+.sidebar__expand {
   display: none;
+  &:hover {
+    cursor: e-resize;
+  }
   .sidebar--contracted & {
     display: inline-block;
   }
 }
 
 .sidebar__contract {
-  @include icon();
-  position: absolute;
-  top: #{7 / $base-font-size}rem;
-  left: #{34 / $base-font-size}rem;
-  height: #{14 / $base-font-size}rem;
-  & svg {
-    height: #{14 / $base-font-size}rem;
+  &:hover {
+    cursor: w-resize;
   }
   .sidebar--contracted & {
     display: none;
@@ -228,7 +251,7 @@
   margin-right: #{5 / $base-font-size}rem;
   & g {
     @include themify() {
-      fill: getThemifyVariable('inactive-text-color');
+      fill: getThemifyVariable('secondary-text-color');
     }
   }
   & svg {
diff --git a/client/styles/components/_sketch-list.scss b/client/styles/components/_sketch-list.scss
index 87162305..bc3c0724 100644
--- a/client/styles/components/_sketch-list.scss
+++ b/client/styles/components/_sketch-list.scss
@@ -96,7 +96,7 @@
   height:#{25 / $base-font-size}rem;
   @include themify() {
       & polygon {
-        fill: getThemifyVariable('dropdown-color');
+        fill: getThemifyVariable('inactive-text-color');
       }
   }
 }
diff --git a/client/styles/components/_toolbar.scss b/client/styles/components/_toolbar.scss
index 8db1ab81..dc160b5e 100644
--- a/client/styles/components/_toolbar.scss
+++ b/client/styles/components/_toolbar.scss
@@ -89,9 +89,12 @@
 }
 
 .toolbar {
-	padding: #{20 / $base-font-size}rem #{34 / $base-font-size}rem;
+	padding: #{10 / $base-font-size}rem #{20 / $base-font-size}rem;
 	display: flex;
 	align-items: center;
+	@include themify() {
+		border-bottom: 1px dashed map-get($theme-map, 'nav-border-color');
+	}
 }
 
 .toolbar__project-name-container {
@@ -106,11 +109,11 @@
 
 .toolbar__project-name {
 	@include themify() {
-		color: getThemifyVariable('inactive-text-color');
+		color: getThemifyVariable('secondary-text-color');
 		&:hover {
-		color: getThemifyVariable('primary-text-color');
+		color: getThemifyVariable('logo-color');
 		  & .toolbar__edit-name-button path {
-		  	fill: getThemifyVariable('primary-text-color');
+		  	fill: getThemifyVariable('logo-color');
 		  }
 		}
 	}
@@ -134,45 +137,18 @@
 .toolbar__project-owner {
 	margin-left: #{5 / $base-font-size}rem;
 	@include themify() {
-		color: getThemifyVariable('inactive-text-color');
+		color: getThemifyVariable('secondary-text-color');
 	}
 }
 
 .toolbar__autorefresh-label {
 	@include themify() {
-		color: getThemifyVariable('inactive-text-color');
+		color: getThemifyVariable('secondary-text-color');
 	}
 	margin-left: #{5 / $base-font-size}rem;
 	font-size: #{12 / $base-font-size}rem;
 }
 
-.toolbar__serve-secure {
-	margin-left: #{20 / $base-font-size}rem;
-}
-
-.toolbar__serve-secure-label {
-	@include themify() {
-		color: getThemifyVariable('inactive-text-color');
-	}
-	margin-left: #{5 / $base-font-size}rem;
-	font-size: #{12 / $base-font-size}rem;
-}
-
-.toolbar__serve-secure-help {
-	display: inline-block;
-	padding-top: 0;
-	padding-bottom: 0;
-	& svg {
-		width: #{10 / $base-font-size}rem;
-		height: #{10 / $base-font-size}rem;
-	}
-	@include themify() {
-		& path {
-			fill: getThemifyVariable('inactive-text-color');
-		}
-	}
-}
-
 .toolbar__edit-name-button {
 	display: inline-block;
 	vertical-align: top;
@@ -183,7 +159,7 @@
 	}
 	@include themify() {
 		& path {
-			fill: getThemifyVariable('inactive-text-color');
+			fill: getThemifyVariable('secondary-text-color');
 		}
 	}
 }
diff --git a/client/styles/components/_uploader.scss b/client/styles/components/_uploader.scss
index c7e87799..5d3e9de0 100644
--- a/client/styles/components/_uploader.scss
+++ b/client/styles/components/_uploader.scss
@@ -1,9 +1,14 @@
 .dropzone {
   @include themify() {
-    color: getThemifyVariable('dropzone-text-color');
+    background-color: getThemifyVariable('input-secondary-background-color');
+    color: getThemifyVariable('input-text-color');
   }
 }
 
+.dropzone .dz-preview.dz-image-preview {
+  background-color: transparent;
+}
+
 .uploader {
   min-height: #{200 / $base-font-size}rem;
   width: 100%;
diff --git a/client/utils/metaKey.js b/client/utils/metaKey.js
index 47899976..e8c45eed 100644
--- a/client/utils/metaKey.js
+++ b/client/utils/metaKey.js
@@ -8,7 +8,7 @@ const metaKey = (() => {
   return 'Ctrl';
 })();
 
-const metaKeyName = metaKey === 'Cmd' ? '\u2318' : 'Ctrl';
+const metaKeyName = metaKey === 'Cmd' ? '⌘' : '⌃';
 
 export {
   metaKey,