diff --git a/client/gatsby-config.js b/client/gatsby-config.js
index 0617a5de8d..e936b34e99 100644
--- a/client/gatsby-config.js
+++ b/client/gatsby-config.js
@@ -21,6 +21,7 @@ module.exports = {
   },
   plugins: [
     'gatsby-plugin-react-helmet',
+    'gatsby-plugin-postcss',
     {
       resolve: 'gatsby-plugin-create-client-paths',
       options: {
@@ -115,17 +116,17 @@ module.exports = {
         /* eslint-disable camelcase */
         short_name: 'fCC',
         start_url: '/',
-        theme_color: '#006400',
+        theme_color: '#0a0a23',
         background_color: '#fff',
         /* eslint-enable camelcase */
         display: 'minimal-ui',
-        icon: 'src/images/square_puck.png'
+        icon: 'src/assets/images/square_puck.png'
       }
     },
     {
       resolve: 'gatsby-plugin-google-fonts',
       options: {
-        fonts: ['Lato:400,400i,500']
+        fonts: ['Lato:400,400i,500', 'Roboto Mono:400,700']
       }
     },
     'gatsby-plugin-sitemap',
diff --git a/client/package-lock.json b/client/package-lock.json
index 937bfe2bc0..56caaa709f 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -4372,22 +4372,26 @@
           "dependencies": {
             "abbrev": {
               "version": "1.1.1",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+              "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
               "optional": true
             },
             "ansi-regex": {
               "version": "2.1.1",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+              "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
               "optional": true
             },
             "aproba": {
               "version": "1.2.0",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
+              "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
               "optional": true
             },
             "are-we-there-yet": {
               "version": "1.1.5",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
+              "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
               "optional": true,
               "requires": {
                 "delegates": "^1.0.0",
@@ -4396,12 +4400,14 @@
             },
             "balanced-match": {
               "version": "1.0.0",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
+              "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
               "optional": true
             },
             "brace-expansion": {
               "version": "1.1.11",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+              "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
               "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
@@ -4410,32 +4416,38 @@
             },
             "chownr": {
               "version": "1.1.1",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.1.tgz",
+              "integrity": "sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g==",
               "optional": true
             },
             "code-point-at": {
               "version": "1.1.0",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
+              "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
               "optional": true
             },
             "concat-map": {
               "version": "0.0.1",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+              "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
               "optional": true
             },
             "console-control-strings": {
               "version": "1.1.0",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
+              "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
               "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+              "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
               "optional": true
             },
             "debug": {
               "version": "2.6.9",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+              "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
               "optional": true,
               "requires": {
                 "ms": "2.0.0"
@@ -4443,22 +4455,26 @@
             },
             "deep-extend": {
               "version": "0.6.0",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+              "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
               "optional": true
             },
             "delegates": {
               "version": "1.0.0",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
+              "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
               "optional": true
             },
             "detect-libc": {
               "version": "1.0.3",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+              "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=",
               "optional": true
             },
             "fs-minipass": {
               "version": "1.2.5",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.5.tgz",
+              "integrity": "sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==",
               "optional": true,
               "requires": {
                 "minipass": "^2.2.1"
@@ -4466,12 +4482,14 @@
             },
             "fs.realpath": {
               "version": "1.0.0",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+              "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
               "optional": true
             },
             "gauge": {
               "version": "2.7.4",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
+              "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
               "optional": true,
               "requires": {
                 "aproba": "^1.0.3",
@@ -4486,7 +4504,8 @@
             },
             "glob": {
               "version": "7.1.3",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz",
+              "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==",
               "optional": true,
               "requires": {
                 "fs.realpath": "^1.0.0",
@@ -4499,12 +4518,14 @@
             },
             "has-unicode": {
               "version": "2.0.1",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
+              "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
               "optional": true
             },
             "iconv-lite": {
               "version": "0.4.24",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+              "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
               "optional": true,
               "requires": {
                 "safer-buffer": ">= 2.1.2 < 3"
@@ -4512,7 +4533,8 @@
             },
             "ignore-walk": {
               "version": "3.0.1",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.1.tgz",
+              "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==",
               "optional": true,
               "requires": {
                 "minimatch": "^3.0.4"
@@ -4520,7 +4542,8 @@
             },
             "inflight": {
               "version": "1.0.6",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+              "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
               "optional": true,
               "requires": {
                 "once": "^1.3.0",
@@ -4529,17 +4552,20 @@
             },
             "inherits": {
               "version": "2.0.3",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+              "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
               "optional": true
             },
             "ini": {
               "version": "1.3.5",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
+              "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
               "optional": true
             },
             "is-fullwidth-code-point": {
               "version": "1.0.0",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+              "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
               "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
@@ -4547,12 +4573,14 @@
             },
             "isarray": {
               "version": "1.0.0",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+              "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
               "optional": true
             },
             "minimatch": {
               "version": "3.0.4",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+              "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
               "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
@@ -4560,12 +4588,14 @@
             },
             "minimist": {
               "version": "0.0.8",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+              "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
               "optional": true
             },
             "minipass": {
               "version": "2.3.5",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.5.tgz",
+              "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==",
               "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
@@ -4574,7 +4604,8 @@
             },
             "minizlib": {
               "version": "1.2.1",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.2.1.tgz",
+              "integrity": "sha512-7+4oTUOWKg7AuL3vloEWekXY2/D20cevzsrNT2kGWm+39J9hGTCBv8VI5Pm5lXZ/o3/mdR4f8rflAPhnQb8mPA==",
               "optional": true,
               "requires": {
                 "minipass": "^2.2.1"
@@ -4582,7 +4613,8 @@
             },
             "mkdirp": {
               "version": "0.5.1",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+              "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
               "optional": true,
               "requires": {
                 "minimist": "0.0.8"
@@ -4590,12 +4622,14 @@
             },
             "ms": {
               "version": "2.0.0",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+              "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
               "optional": true
             },
             "needle": {
               "version": "2.2.4",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/needle/-/needle-2.2.4.tgz",
+              "integrity": "sha512-HyoqEb4wr/rsoaIDfTH2aVL9nWtQqba2/HvMv+++m8u0dz808MaagKILxtfeSN7QU7nvbQ79zk3vYOJp9zsNEA==",
               "optional": true,
               "requires": {
                 "debug": "^2.1.2",
@@ -4605,7 +4639,8 @@
             },
             "node-pre-gyp": {
               "version": "0.10.3",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.10.3.tgz",
+              "integrity": "sha512-d1xFs+C/IPS8Id0qPTZ4bUT8wWryfR/OzzAFxweG+uLN85oPzyo2Iw6bVlLQ/JOdgNonXLCoRyqDzDWq4iw72A==",
               "optional": true,
               "requires": {
                 "detect-libc": "^1.0.2",
@@ -4622,7 +4657,8 @@
             },
             "nopt": {
               "version": "4.0.1",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz",
+              "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=",
               "optional": true,
               "requires": {
                 "abbrev": "1",
@@ -4631,12 +4667,14 @@
             },
             "npm-bundled": {
               "version": "1.0.5",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.0.5.tgz",
+              "integrity": "sha512-m/e6jgWu8/v5niCUKQi9qQl8QdeEduFA96xHDDzFGqly0OOjI7c+60KM/2sppfnUU9JJagf+zs+yGhqSOFj71g==",
               "optional": true
             },
             "npm-packlist": {
               "version": "1.2.0",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.2.0.tgz",
+              "integrity": "sha512-7Mni4Z8Xkx0/oegoqlcao/JpPCPEMtUvsmB0q7mgvlMinykJLSRTYuFqoQLYgGY8biuxIeiHO+QNJKbCfljewQ==",
               "optional": true,
               "requires": {
                 "ignore-walk": "^3.0.1",
@@ -4645,7 +4683,8 @@
             },
             "npmlog": {
               "version": "4.1.2",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
+              "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
               "optional": true,
               "requires": {
                 "are-we-there-yet": "~1.1.2",
@@ -4656,17 +4695,20 @@
             },
             "number-is-nan": {
               "version": "1.0.1",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
+              "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
               "optional": true
             },
             "object-assign": {
               "version": "4.1.1",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+              "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
               "optional": true
             },
             "once": {
               "version": "1.4.0",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+              "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
               "optional": true,
               "requires": {
                 "wrappy": "1"
@@ -4674,17 +4716,20 @@
             },
             "os-homedir": {
               "version": "1.0.2",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+              "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
               "optional": true
             },
             "os-tmpdir": {
               "version": "1.0.2",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+              "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
               "optional": true
             },
             "osenv": {
               "version": "0.1.5",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
+              "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
               "optional": true,
               "requires": {
                 "os-homedir": "^1.0.0",
@@ -4693,17 +4738,20 @@
             },
             "path-is-absolute": {
               "version": "1.0.1",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+              "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
               "optional": true
             },
             "process-nextick-args": {
               "version": "2.0.0",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
+              "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
               "optional": true
             },
             "rc": {
               "version": "1.2.8",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+              "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
               "optional": true,
               "requires": {
                 "deep-extend": "^0.6.0",
@@ -4714,14 +4762,16 @@
               "dependencies": {
                 "minimist": {
                   "version": "1.2.0",
-                  "bundled": true,
+                  "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+                  "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
                   "optional": true
                 }
               }
             },
             "readable-stream": {
               "version": "2.3.6",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
+              "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
               "optional": true,
               "requires": {
                 "core-util-is": "~1.0.0",
@@ -4735,7 +4785,8 @@
             },
             "rimraf": {
               "version": "2.6.3",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
+              "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
               "optional": true,
               "requires": {
                 "glob": "^7.1.3"
@@ -4743,37 +4794,44 @@
             },
             "safe-buffer": {
               "version": "5.1.2",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+              "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
               "optional": true
             },
             "safer-buffer": {
               "version": "2.1.2",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+              "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
               "optional": true
             },
             "sax": {
               "version": "1.2.4",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+              "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
               "optional": true
             },
             "semver": {
               "version": "5.6.0",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/semver/-/semver-5.6.0.tgz",
+              "integrity": "sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg==",
               "optional": true
             },
             "set-blocking": {
               "version": "2.0.0",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+              "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
               "optional": true
             },
             "signal-exit": {
               "version": "3.0.2",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
+              "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
               "optional": true
             },
             "string-width": {
               "version": "1.0.2",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+              "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
               "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
@@ -4783,7 +4841,8 @@
             },
             "string_decoder": {
               "version": "1.1.1",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+              "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
               "optional": true,
               "requires": {
                 "safe-buffer": "~5.1.0"
@@ -4791,7 +4850,8 @@
             },
             "strip-ansi": {
               "version": "3.0.1",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+              "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
               "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
@@ -4799,12 +4859,14 @@
             },
             "strip-json-comments": {
               "version": "2.0.1",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+              "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
               "optional": true
             },
             "tar": {
               "version": "4.4.8",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.8.tgz",
+              "integrity": "sha512-LzHF64s5chPQQS0IYBn9IN5h3i98c12bo4NCO7e0sGM2llXQ3p2FGC5sdENN4cTW48O915Sh+x+EXx7XW96xYQ==",
               "optional": true,
               "requires": {
                 "chownr": "^1.1.1",
@@ -4818,12 +4880,14 @@
             },
             "util-deprecate": {
               "version": "1.0.2",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+              "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
               "optional": true
             },
             "wide-align": {
               "version": "1.1.3",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
+              "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
               "optional": true,
               "requires": {
                 "string-width": "^1.0.2 || 2"
@@ -4831,12 +4895,14 @@
             },
             "wrappy": {
               "version": "1.0.2",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+              "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
               "optional": true
             },
             "yallist": {
               "version": "3.0.3",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz",
+              "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==",
               "optional": true
             }
           }
@@ -7973,22 +8039,26 @@
       "dependencies": {
         "abbrev": {
           "version": "1.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+          "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
           "optional": true
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
           "optional": true
         },
         "aproba": {
           "version": "1.2.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
+          "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
           "optional": true
         },
         "are-we-there-yet": {
           "version": "1.1.5",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
+          "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
           "optional": true,
           "requires": {
             "delegates": "^1.0.0",
@@ -7997,12 +8067,14 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
+          "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
           "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+          "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
           "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
@@ -8011,32 +8083,38 @@
         },
         "chownr": {
           "version": "1.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.1.tgz",
+          "integrity": "sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g==",
           "optional": true
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
+          "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
           "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+          "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
           "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
+          "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
           "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+          "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
           "optional": true
         },
         "debug": {
           "version": "4.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
+          "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
           "optional": true,
           "requires": {
             "ms": "^2.1.1"
@@ -8044,22 +8122,26 @@
         },
         "deep-extend": {
           "version": "0.6.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+          "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
           "optional": true
         },
         "delegates": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
+          "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
           "optional": true
         },
         "detect-libc": {
           "version": "1.0.3",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+          "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=",
           "optional": true
         },
         "fs-minipass": {
           "version": "1.2.5",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.5.tgz",
+          "integrity": "sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==",
           "optional": true,
           "requires": {
             "minipass": "^2.2.1"
@@ -8067,12 +8149,14 @@
         },
         "fs.realpath": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+          "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
           "optional": true
         },
         "gauge": {
           "version": "2.7.4",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
+          "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
           "optional": true,
           "requires": {
             "aproba": "^1.0.3",
@@ -8087,7 +8171,8 @@
         },
         "glob": {
           "version": "7.1.3",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz",
+          "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==",
           "optional": true,
           "requires": {
             "fs.realpath": "^1.0.0",
@@ -8100,12 +8185,14 @@
         },
         "has-unicode": {
           "version": "2.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
+          "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
           "optional": true
         },
         "iconv-lite": {
           "version": "0.4.24",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+          "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
           "optional": true,
           "requires": {
             "safer-buffer": ">= 2.1.2 < 3"
@@ -8113,7 +8200,8 @@
         },
         "ignore-walk": {
           "version": "3.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.1.tgz",
+          "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==",
           "optional": true,
           "requires": {
             "minimatch": "^3.0.4"
@@ -8121,7 +8209,8 @@
         },
         "inflight": {
           "version": "1.0.6",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+          "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
           "optional": true,
           "requires": {
             "once": "^1.3.0",
@@ -8130,17 +8219,20 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
           "optional": true
         },
         "ini": {
           "version": "1.3.5",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
+          "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
           "optional": true
         },
         "is-fullwidth-code-point": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
           "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
@@ -8148,12 +8240,14 @@
         },
         "isarray": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
           "optional": true
         },
         "minimatch": {
           "version": "3.0.4",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+          "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
           "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
@@ -8161,12 +8255,14 @@
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
           "optional": true
         },
         "minipass": {
           "version": "2.3.5",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.5.tgz",
+          "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==",
           "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
@@ -8175,7 +8271,8 @@
         },
         "minizlib": {
           "version": "1.2.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.2.1.tgz",
+          "integrity": "sha512-7+4oTUOWKg7AuL3vloEWekXY2/D20cevzsrNT2kGWm+39J9hGTCBv8VI5Pm5lXZ/o3/mdR4f8rflAPhnQb8mPA==",
           "optional": true,
           "requires": {
             "minipass": "^2.2.1"
@@ -8183,7 +8280,8 @@
         },
         "mkdirp": {
           "version": "0.5.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+          "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
           "optional": true,
           "requires": {
             "minimist": "0.0.8"
@@ -8191,7 +8289,8 @@
         },
         "ms": {
           "version": "2.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
+          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
           "optional": true
         },
         "nan": {
@@ -8202,7 +8301,8 @@
         },
         "needle": {
           "version": "2.3.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/needle/-/needle-2.3.0.tgz",
+          "integrity": "sha512-QBZu7aAFR0522EyaXZM0FZ9GLpq6lvQ3uq8gteiDUp7wKdy0lSd2hPlgFwVuW1CBkfEs9PfDQsQzZghLs/psdg==",
           "optional": true,
           "requires": {
             "debug": "^4.1.0",
@@ -8212,7 +8312,8 @@
         },
         "node-pre-gyp": {
           "version": "0.12.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.12.0.tgz",
+          "integrity": "sha512-4KghwV8vH5k+g2ylT+sLTjy5wmUOb9vPhnM8NHvRf9dHmnW/CndrFXy2aRPaPST6dugXSdHXfeaHQm77PIz/1A==",
           "optional": true,
           "requires": {
             "detect-libc": "^1.0.2",
@@ -8229,7 +8330,8 @@
         },
         "nopt": {
           "version": "4.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz",
+          "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=",
           "optional": true,
           "requires": {
             "abbrev": "1",
@@ -8238,12 +8340,14 @@
         },
         "npm-bundled": {
           "version": "1.0.6",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.0.6.tgz",
+          "integrity": "sha512-8/JCaftHwbd//k6y2rEWp6k1wxVfpFzB6t1p825+cUb7Ym2XQfhwIC5KwhrvzZRJu+LtDE585zVaS32+CGtf0g==",
           "optional": true
         },
         "npm-packlist": {
           "version": "1.4.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.1.tgz",
+          "integrity": "sha512-+TcdO7HJJ8peiiYhvPxsEDhF3PJFGUGRcFsGve3vxvxdcpO2Z4Z7rkosRM0kWj6LfbK/P0gu3dzk5RU1ffvFcw==",
           "optional": true,
           "requires": {
             "ignore-walk": "^3.0.1",
@@ -8252,7 +8356,8 @@
         },
         "npmlog": {
           "version": "4.1.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
+          "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
           "optional": true,
           "requires": {
             "are-we-there-yet": "~1.1.2",
@@ -8263,17 +8368,20 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
+          "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
           "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
           "optional": true
         },
         "once": {
           "version": "1.4.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+          "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
           "optional": true,
           "requires": {
             "wrappy": "1"
@@ -8281,17 +8389,20 @@
         },
         "os-homedir": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+          "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
           "optional": true
         },
         "os-tmpdir": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+          "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
           "optional": true
         },
         "osenv": {
           "version": "0.1.5",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
+          "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
           "optional": true,
           "requires": {
             "os-homedir": "^1.0.0",
@@ -8300,17 +8411,20 @@
         },
         "path-is-absolute": {
           "version": "1.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+          "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
           "optional": true
         },
         "process-nextick-args": {
           "version": "2.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
+          "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
           "optional": true
         },
         "rc": {
           "version": "1.2.8",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+          "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
           "optional": true,
           "requires": {
             "deep-extend": "^0.6.0",
@@ -8321,14 +8435,16 @@
           "dependencies": {
             "minimist": {
               "version": "1.2.0",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+              "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
               "optional": true
             }
           }
         },
         "readable-stream": {
           "version": "2.3.6",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
+          "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
           "optional": true,
           "requires": {
             "core-util-is": "~1.0.0",
@@ -8342,7 +8458,8 @@
         },
         "rimraf": {
           "version": "2.6.3",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
+          "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
           "optional": true,
           "requires": {
             "glob": "^7.1.3"
@@ -8350,37 +8467,44 @@
         },
         "safe-buffer": {
           "version": "5.1.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
           "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+          "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
           "optional": true
         },
         "sax": {
           "version": "1.2.4",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+          "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
           "optional": true
         },
         "semver": {
           "version": "5.7.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz",
+          "integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==",
           "optional": true
         },
         "set-blocking": {
           "version": "2.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+          "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
           "optional": true
         },
         "signal-exit": {
           "version": "3.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
+          "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
           "optional": true
         },
         "string-width": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
           "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
@@ -8390,7 +8514,8 @@
         },
         "string_decoder": {
           "version": "1.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
           "optional": true,
           "requires": {
             "safe-buffer": "~5.1.0"
@@ -8398,7 +8523,8 @@
         },
         "strip-ansi": {
           "version": "3.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
           "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
@@ -8406,12 +8532,14 @@
         },
         "strip-json-comments": {
           "version": "2.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+          "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
           "optional": true
         },
         "tar": {
           "version": "4.4.8",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.8.tgz",
+          "integrity": "sha512-LzHF64s5chPQQS0IYBn9IN5h3i98c12bo4NCO7e0sGM2llXQ3p2FGC5sdENN4cTW48O915Sh+x+EXx7XW96xYQ==",
           "optional": true,
           "requires": {
             "chownr": "^1.1.1",
@@ -8425,12 +8553,14 @@
         },
         "util-deprecate": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+          "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
           "optional": true
         },
         "wide-align": {
           "version": "1.1.3",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
+          "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
           "optional": true,
           "requires": {
             "string-width": "^1.0.2 || 2"
@@ -8438,12 +8568,14 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+          "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
           "optional": true
         },
         "yallist": {
           "version": "3.0.3",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz",
+          "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==",
           "optional": true
         }
       }
@@ -8910,6 +9042,38 @@
         "micromatch": "^3.1.10"
       }
     },
+    "gatsby-plugin-postcss": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-postcss/-/gatsby-plugin-postcss-2.1.3.tgz",
+      "integrity": "sha512-E9p7HgeaFhX8N3rw/hkEVc75Gcd7XRWsNfiGsIjUBZiPz8/jodv8iporLONNOEZgg0bigO90KOnH+hnTtY634A==",
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "postcss-loader": "^3.0.0"
+      },
+      "dependencies": {
+        "postcss-loader": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-3.0.0.tgz",
+          "integrity": "sha512-cLWoDEY5OwHcAjDnkyRQzAXfs2jrKjXpO/HQFcc5b5u/r7aa471wdmChmwfnv7x2u840iat/wi0lQ5nbRgSkUA==",
+          "requires": {
+            "loader-utils": "^1.1.0",
+            "postcss": "^7.0.0",
+            "postcss-load-config": "^2.0.0",
+            "schema-utils": "^1.0.0"
+          }
+        },
+        "schema-utils": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
+          "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
+          "requires": {
+            "ajv": "^6.1.0",
+            "ajv-errors": "^1.0.0",
+            "ajv-keywords": "^3.1.0"
+          }
+        }
+      }
+    },
     "gatsby-plugin-react-helmet": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/gatsby-plugin-react-helmet/-/gatsby-plugin-react-helmet-3.1.3.tgz",
diff --git a/client/package.json b/client/package.json
index 2c8d4e557b..8713e6d051 100644
--- a/client/package.json
+++ b/client/package.json
@@ -29,14 +29,15 @@
     "gatsby-link": "^2.2.5",
     "gatsby-plugin-create-client-paths": "^2.1.3",
     "gatsby-plugin-google-fonts": "^1.0.1",
-    "gatsby-plugin-manifest": "^2.2.5",
-    "gatsby-plugin-react-helmet": "^3.1.3",
+    "gatsby-plugin-manifest": "^2.2.0",
+    "gatsby-plugin-postcss": "^2.1.3",
+    "gatsby-plugin-react-helmet": "^3.1.0",
     "gatsby-plugin-remove-fingerprints": "^0.0.2",
     "gatsby-plugin-remove-serviceworker": "^1.0.0",
-    "gatsby-plugin-sitemap": "^2.2.6",
-    "gatsby-remark-prismjs": "^3.3.5",
-    "gatsby-source-filesystem": "^2.1.9",
-    "gatsby-transformer-remark": "^2.6.14",
+    "gatsby-plugin-sitemap": "^2.2.0",
+    "gatsby-remark-prismjs": "^3.3.0",
+    "gatsby-source-filesystem": "^2.1.0",
+    "gatsby-transformer-remark": "^2.5.0",
     "jquery": "^3.4.1",
     "lodash": "^4.17.15",
     "loop-protect": "^2.1.6",
@@ -92,6 +93,7 @@
   },
   "devDependencies": {
     "@testing-library/react": "^8.0.5",
+    "autoprefixer": "^9.6.1",
     "babel-plugin-transform-imports": "^1.5.1",
     "chokidar": "^2.1.5",
     "copy-webpack-plugin": "^4.6.0",
diff --git a/client/postcss.config.js b/client/postcss.config.js
new file mode 100644
index 0000000000..119e618590
--- /dev/null
+++ b/client/postcss.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {
+      overrideBrowserslist: ['last 2 versions']
+    }
+  }
+};
diff --git a/client/src/components/icons/Caret.js b/client/src/assets/icons/Caret.js
similarity index 83%
rename from client/src/components/icons/Caret.js
rename to client/src/assets/icons/Caret.js
index 1a4e3a0239..c2c9d2dbfa 100644
--- a/client/src/components/icons/Caret.js
+++ b/client/src/assets/icons/Caret.js
@@ -5,7 +5,7 @@ function Caret() {
     <svg viewBox='0 0 100 100' width='25px'>
       <polygon
         points='-6.04047,17.1511 81.8903,58.1985 -3.90024,104.196'
-        style={{ stroke: '#aaa', fill: '#aaa', strokeWidth: '1px' }}
+        style={{ stroke: '#858591', fill: '#858591', strokeWidth: '1px' }}
         transform={
           'matrix(0.999729, 0.023281, -0.023281, 0.999729, 7.39321, -10.0425)'
         }
diff --git a/client/src/templates/Challenges/components/icons/Fail.js b/client/src/assets/icons/Fail.js
similarity index 95%
rename from client/src/templates/Challenges/components/icons/Fail.js
rename to client/src/assets/icons/Fail.js
index 3dc696107f..6c67ffad26 100644
--- a/client/src/templates/Challenges/components/icons/Fail.js
+++ b/client/src/assets/icons/Fail.js
@@ -13,9 +13,9 @@ function RedFail() {
         <circle
           cx='100'
           cy='99'
-          fill='#555'
+          fill='#858591'
           r='95'
-          stroke='#555'
+          stroke='#858591'
           strokeDasharray='null'
           strokeLinecap='null'
           strokeLinejoin='null'
diff --git a/client/src/templates/Challenges/components/icons/GreenNotCompleted.js b/client/src/assets/icons/GreenNotCompleted.js
similarity index 96%
rename from client/src/templates/Challenges/components/icons/GreenNotCompleted.js
rename to client/src/assets/icons/GreenNotCompleted.js
index 71d3dbf72c..0dfb0faae0 100644
--- a/client/src/templates/Challenges/components/icons/GreenNotCompleted.js
+++ b/client/src/assets/icons/GreenNotCompleted.js
@@ -20,7 +20,7 @@ function GreenNotCompleted(props) {
             cy='99'
             fill='#FFFFFF'
             r='95'
-            stroke='#006400'
+            stroke='#858591'
             strokeDasharray='null'
             strokeLinecap='null'
             strokeLinejoin='null'
diff --git a/client/src/templates/Challenges/components/icons/GreenPass.js b/client/src/assets/icons/GreenPass.js
similarity index 95%
rename from client/src/templates/Challenges/components/icons/GreenPass.js
rename to client/src/assets/icons/GreenPass.js
index 613ac4f46f..71d149fc6c 100644
--- a/client/src/templates/Challenges/components/icons/GreenPass.js
+++ b/client/src/assets/icons/GreenPass.js
@@ -16,9 +16,9 @@ function GreenPass(props) {
           <circle
             cx='100'
             cy='99'
-            fill='#006400'
+            fill='#858591'
             r='95'
-            stroke='#006400'
+            stroke='#858591'
             strokeDasharray='null'
             strokeLinecap='null'
             strokeLinejoin='null'
diff --git a/client/src/templates/Challenges/components/icons/Initial.js b/client/src/assets/icons/Initial.js
similarity index 96%
rename from client/src/templates/Challenges/components/icons/Initial.js
rename to client/src/assets/icons/Initial.js
index f64603a298..eaab9c15f6 100644
--- a/client/src/templates/Challenges/components/icons/Initial.js
+++ b/client/src/assets/icons/Initial.js
@@ -14,9 +14,9 @@ function Initial(props) {
         <circle
           cx='100'
           cy='99'
-          fill='#555'
+          fill='#858591'
           r='95'
-          stroke='#555'
+          stroke='#858591'
           strokeDasharray='null'
           strokeLinecap='null'
           strokeLinejoin='null'
diff --git a/client/src/assets/icons/Spacer.js b/client/src/assets/icons/Spacer.js
new file mode 100644
index 0000000000..c9c976e62f
--- /dev/null
+++ b/client/src/assets/icons/Spacer.js
@@ -0,0 +1,25 @@
+import React, { Fragment } from 'react';
+
+function Spacer(props) {
+  return (
+    <Fragment>
+      <span className='sr-only'>Passed</span>
+      <svg
+        height='50'
+        viewBox='-10 -45 200 200'
+        width='50'
+        xmlns='http://www.w3.org/2000/svg'
+        {...props}
+      >
+        <g>
+          <title>Spacer</title>
+          <rect fillOpacity='0' height='200' paddingtop='5' width='200' />
+        </g>
+      </svg>
+    </Fragment>
+  );
+}
+
+Spacer.displayName = 'Spacer';
+
+export default Spacer;
diff --git a/client/src/assets/icons/ToggleCheck.js b/client/src/assets/icons/ToggleCheck.js
new file mode 100644
index 0000000000..a7f22c1fcb
--- /dev/null
+++ b/client/src/assets/icons/ToggleCheck.js
@@ -0,0 +1,68 @@
+import React, { Fragment } from 'react';
+
+function ToggleCheck(props) {
+  return (
+    <Fragment>
+      <span className='sr-only'>Passed</span>
+      <svg
+        height='50'
+        viewBox='-10 -45 200 200'
+        width='50'
+        xmlns='http://www.w3.org/2000/svg'
+        {...props}
+      >
+        <g>
+          <title>Passed</title>
+          <rect
+            fill='white'
+            height='60'
+            strokeDasharray='null'
+            strokeLinecap='null'
+            strokeLinejoin='null'
+            transform='rotate(-45, 66.75, 123.75)'
+            width='148.85878'
+            x='65.57059'
+            y='75.32089'
+          />
+          <rect
+            fill='white'
+            height='60'
+            strokeDasharray='null'
+            strokeLinecap='null'
+            strokeLinejoin='null'
+            transform='rotate(45, 66.75, 123.75)'
+            width='120.66548'
+            x='-42.41726'
+            y='99.75'
+          />
+          <rect
+            fill='black'
+            height='30'
+            strokeDasharray='null'
+            strokeLinecap='null'
+            strokeLinejoin='null'
+            transform='rotate(-45, 66.75, 123.75)'
+            width='128.85878'
+            x='65.57059'
+            y='92.32089'
+          />
+          <rect
+            fill='black'
+            height='30'
+            strokeDasharray='null'
+            strokeLinecap='null'
+            strokeLinejoin='null'
+            transform='rotate(-135, 66.75, 123.75)'
+            width='88.85878'
+            x='68.57059'
+            y='103.32089'
+          />
+        </g>
+      </svg>
+    </Fragment>
+  );
+}
+
+ToggleCheck.displayName = 'ToggleCheck';
+
+export default ToggleCheck;
diff --git a/client/src/images/freeCodeCamp-404.svg b/client/src/assets/images/freeCodeCamp-404.svg
similarity index 99%
rename from client/src/images/freeCodeCamp-404.svg
rename to client/src/assets/images/freeCodeCamp-404.svg
index 0474c5c5ee..c0a8ddd90c 100644
--- a/client/src/images/freeCodeCamp-404.svg
+++ b/client/src/assets/images/freeCodeCamp-404.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 609.4 238.2" enable-background="new 0 0 609.4 238.2">
-<g fill="#006400">
+<g fill="#858591">
 		<path d="M327.4,111.5c0.5,2.3,0.8,4.1,1.3,5.9c0.7,2.8,1.8,5.7-0.9,8c-2.9,2.5-6.3,3.1-9.9,1.7c-3.5-1.3-4.6-4.4-4.7-7.7
 			c-0.1-3.3,0.1-6.6,0.4-9.9c0.8-8.3-3.9-13.4-9.9-17.8c-0.9-0.7-2.1-1.1-3.2-1.3c-0.6-0.1-1.8,0.1-1.9,0.5
 			c-0.3,0.6-0.2,1.8,0.2,2.2c3.4,3.4,3.9,7.5,3.2,11.9c-0.7,4.4-3.1,7.9-6.4,10.8c-3.5,3.1-7,6.2-10.4,9.5
diff --git a/client/src/assets/images/square_puck.png b/client/src/assets/images/square_puck.png
new file mode 100755
index 0000000000..bc110c3bd0
Binary files /dev/null and b/client/src/assets/images/square_puck.png differ
diff --git a/client/src/components/Donation/Donation.css b/client/src/components/Donation/Donation.css
index 0d7739fcd5..cb89a04579 100644
--- a/client/src/components/Donation/Donation.css
+++ b/client/src/components/Donation/Donation.css
@@ -54,7 +54,7 @@
 }
 
 .donation-email-container input {
-  color: #006400;
+  color: var(--secondary-background);
   font-weight: normal;
 }
 
diff --git a/client/src/components/Donation/components/StripeCardForm.js b/client/src/components/Donation/components/StripeCardForm.js
index 47546428a6..4d83461786 100644
--- a/client/src/components/Donation/components/StripeCardForm.js
+++ b/client/src/components/Donation/components/StripeCardForm.js
@@ -15,7 +15,7 @@ const propTypes = {
 
 const style = {
   base: {
-    color: '#006400',
+    color: '#0a0a23',
     fontSize: '18px'
   }
 };
diff --git a/client/src/components/Donation/components/poweredByStripe.js b/client/src/components/Donation/components/poweredByStripe.js
index 3084e6e18d..b3a9e2b566 100644
--- a/client/src/components/Donation/components/poweredByStripe.js
+++ b/client/src/components/Donation/components/poweredByStripe.js
@@ -6,19 +6,19 @@ function PoweredByStripe() {
     <svg height='26px' width='119px' xmlns='http://www.w3.org/2000/svg'>
       <path
         d='M113.000,26.000 L6.000,26.000 C2.686,26.000 -0.000,23.314 -0.000,20.000 L-0.000,6.000 C-0.000,2.686 2.686,-0.000 6.000,-0.000 L113.000,-0.000 C116.314,-0.000 119.000,2.686 119.000,6.000 L119.000,20.000 C119.000,23.314 116.314,26.000 113.000,26.000 ZM118.000,6.000 C118.000,3.239 115.761,1.000 113.000,1.000 L6.000,1.000 C3.239,1.000 1.000,3.239 1.000,6.000 L1.000,20.000 C1.000,22.761 3.239,25.000 6.000,25.000 L113.000,25.000 C115.761,25.000 118.000,22.761 118.000,20.000 L118.000,6.000 Z'
-        fill='rgb(66, 71, 112)'
+        fill='#858591'
         fillRule='evenodd'
         opacity='0.349'
       />
       <path
         d='M60.700,18.437 L59.395,18.437 L60.405,15.943 L58.395,10.871 L59.774,10.871 L61.037,14.323 L62.310,10.871 L63.689,10.871 L60.700,18.437 ZM55.690,16.259 C55.238,16.259 54.774,16.091 54.354,15.764 L54.354,16.133 L53.007,16.133 L53.007,8.566 L54.354,8.566 L54.354,11.229 C54.774,10.913 55.238,10.745 55.690,10.745 C57.100,10.745 58.068,11.881 58.068,13.502 C58.068,15.122 57.100,16.259 55.690,16.259 ZM55.406,11.902 C55.038,11.902 54.669,12.060 54.354,12.376 L54.354,14.628 C54.669,14.943 55.038,15.101 55.406,15.101 C56.164,15.101 56.690,14.449 56.690,13.502 C56.690,12.555 56.164,11.902 55.406,11.902 ZM47.554,15.764 C47.144,16.091 46.681,16.259 46.218,16.259 C44.818,16.259 43.840,15.122 43.840,13.502 C43.840,11.881 44.818,10.745 46.218,10.745 C46.681,10.745 47.144,10.913 47.554,11.229 L47.554,8.566 L48.912,8.566 L48.912,16.133 L47.554,16.133 L47.554,15.764 ZM47.554,12.376 C47.249,12.060 46.881,11.902 46.513,11.902 C45.744,11.902 45.218,12.555 45.218,13.502 C45.218,14.449 45.744,15.101 46.513,15.101 C46.881,15.101 47.249,14.943 47.554,14.628 L47.554,12.376 ZM39.535,13.870 C39.619,14.670 40.251,15.217 41.134,15.217 C41.619,15.217 42.155,15.038 42.702,14.722 L42.702,15.849 C42.103,16.122 41.503,16.259 40.913,16.259 C39.324,16.259 38.209,15.101 38.209,13.460 C38.209,11.871 39.303,10.745 40.808,10.745 C42.187,10.745 43.123,11.829 43.123,13.375 C43.123,13.523 43.123,13.691 43.102,13.870 L39.535,13.870 ZM40.756,11.786 C40.103,11.786 39.598,12.271 39.535,12.997 L41.829,12.997 C41.787,12.281 41.356,11.786 40.756,11.786 ZM35.988,12.618 L35.988,16.133 L34.641,16.133 L34.641,10.871 L35.988,10.871 L35.988,11.397 C36.367,10.976 36.830,10.745 37.282,10.745 C37.430,10.745 37.577,10.755 37.724,10.797 L37.724,11.997 C37.577,11.955 37.409,11.934 37.251,11.934 C36.809,11.934 36.335,12.176 35.988,12.618 ZM29.979,13.870 C30.063,14.670 30.694,15.217 31.578,15.217 C32.062,15.217 32.599,15.038 33.146,14.722 L33.146,15.849 C32.546,16.122 31.946,16.259 31.357,16.259 C29.768,16.259 28.653,15.101 28.653,13.460 C28.653,11.871 29.747,10.745 31.252,10.745 C32.630,10.745 33.567,11.829 33.567,13.375 C33.567,13.523 33.567,13.691 33.546,13.870 L29.979,13.870 ZM31.199,11.786 C30.547,11.786 30.042,12.271 29.979,12.997 L32.273,12.997 C32.231,12.281 31.799,11.786 31.199,11.786 ZM25.274,16.133 L24.200,12.555 L23.137,16.133 L21.927,16.133 L20.117,10.871 L21.464,10.871 L22.527,14.449 L23.590,10.871 L24.810,10.871 L25.873,14.449 L26.936,10.871 L28.283,10.871 L26.484,16.133 L25.274,16.133 ZM17.043,16.259 C15.454,16.259 14.328,15.112 14.328,13.502 C14.328,11.881 15.454,10.745 17.043,10.745 C18.632,10.745 19.748,11.881 19.748,13.502 C19.748,15.112 18.632,16.259 17.043,16.259 ZM17.043,11.871 C16.254,11.871 15.707,12.534 15.707,13.502 C15.707,14.470 16.254,15.133 17.043,15.133 C17.822,15.133 18.369,14.470 18.369,13.502 C18.369,12.534 17.822,11.871 17.043,11.871 ZM11.128,13.533 L9.918,13.533 L9.918,16.133 L8.571,16.133 L8.571,8.892 L11.128,8.892 C12.602,8.892 13.654,9.850 13.654,11.218 C13.654,12.586 12.602,13.533 11.128,13.533 ZM10.939,9.987 L9.918,9.987 L9.918,12.439 L10.939,12.439 C11.718,12.439 12.265,11.944 12.265,11.218 C12.265,10.482 11.718,9.987 10.939,9.987 Z'
-        fill='rgb(66, 71, 112)'
+        fill='#858591'
         fillRule='evenodd'
         opacity='0.502'
       />
       <path
         d='M111.116,14.051 L105.557,14.051 C105.684,15.382 106.659,15.774 107.766,15.774 C108.893,15.774 109.781,15.536 110.555,15.146 L110.555,17.433 C109.784,17.861 108.765,18.169 107.408,18.169 C104.642,18.169 102.704,16.437 102.704,13.013 C102.704,10.121 104.348,7.825 107.049,7.825 C109.746,7.825 111.154,10.120 111.154,13.028 C111.154,13.303 111.129,13.898 111.116,14.051 ZM107.031,10.140 C106.321,10.140 105.532,10.676 105.532,11.955 L108.468,11.955 C108.468,10.677 107.728,10.140 107.031,10.140 ZM98.108,18.169 C97.114,18.169 96.507,17.750 96.099,17.451 L96.093,20.664 L93.254,21.268 L93.253,8.014 L95.753,8.014 L95.901,8.715 C96.293,8.349 97.012,7.825 98.125,7.825 C100.119,7.825 101.997,9.621 101.997,12.927 C101.997,16.535 100.139,18.169 98.108,18.169 ZM97.446,10.340 C96.795,10.340 96.386,10.578 96.090,10.903 L96.107,15.122 C96.383,15.421 96.780,15.661 97.446,15.661 C98.496,15.661 99.200,14.518 99.200,12.989 C99.200,11.504 98.485,10.340 97.446,10.340 ZM89.149,8.014 L91.999,8.014 L91.999,17.966 L89.149,17.966 L89.149,8.014 ZM89.149,4.836 L91.999,4.230 L91.999,6.543 L89.149,7.149 L89.149,4.836 ZM86.110,11.219 L86.110,17.966 L83.272,17.966 L83.272,8.014 L85.727,8.014 L85.905,8.853 C86.570,7.631 87.897,7.879 88.275,8.015 L88.275,10.625 C87.914,10.508 86.781,10.338 86.110,11.219 ZM80.024,14.475 C80.024,16.148 81.816,15.627 82.179,15.482 L82.179,17.793 C81.801,18.001 81.115,18.169 80.187,18.169 C78.502,18.169 77.237,16.928 77.237,15.247 L77.250,6.138 L80.022,5.548 L80.024,8.014 L82.180,8.014 L82.180,10.435 L80.024,10.435 L80.024,14.475 ZM76.485,14.959 C76.485,17.003 74.858,18.169 72.497,18.169 C71.518,18.169 70.448,17.979 69.392,17.525 L69.392,14.814 C70.345,15.332 71.559,15.721 72.500,15.721 C73.133,15.721 73.589,15.551 73.589,15.026 C73.589,13.671 69.273,14.181 69.273,11.038 C69.273,9.028 70.808,7.825 73.111,7.825 C74.052,7.825 74.992,7.969 75.933,8.344 L75.933,11.019 C75.069,10.552 73.972,10.288 73.109,10.288 C72.514,10.288 72.144,10.460 72.144,10.903 C72.144,12.181 76.485,11.573 76.485,14.959 Z'
-        fill='rgb(66, 71, 112)'
+        fill='#858591'
         fillRule='evenodd'
         opacity='0.502'
       />
diff --git a/client/src/components/Footer/footer.css b/client/src/components/Footer/footer.css
index 381062e1a5..6fb6e05163 100644
--- a/client/src/components/Footer/footer.css
+++ b/client/src/components/Footer/footer.css
@@ -1,39 +1,129 @@
-.footer {
-  background-color: #f1f5f8;
-  font-size: 0.9em;
-  width: 100%;
+.site-footer {
+  position: relative;
+  color: var(--tertiary-color);
+  background: var(--tertiary-background);
+  line-height: 1.6;
+  font-family: 'Lato', sans-serif;
+  font-size: 15px;
+}
+
+.footer-container {
+  margin-right: auto;
+  margin-left: auto;
+  padding-left: 15px;
+  padding-right: 15px;
   padding-top: 40px;
-  margin-top: auto;
+  padding-bottom: 40px;
+  font-size: 15px;
+  overflow-x: hidden;
 }
 
-.footer .col-header {
+.footer-container p {
+  font-family: 'Lato', sans-serif;
+  margin: 0 0 1.45rem;
+  font-size: 15px;
+}
+
+.footer-container a {
+  color: var(--tertiary-color);
+}
+
+.footer-container .col-header {
   padding-bottom: 5px;
-  padding-left: 5px;
-  font-weight: bold;
+  font-weight: 700;
+}
+.footer-row {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
 }
 
-.footer a:not([class*='inline']) {
-  display: block;
-  padding-left: 5px;
+.footer-col-1,
+.footer-col-2,
+.footer-col-3,
+.footer-col-4 {
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 100%;
+  padding-left: 15px;
+  padding-right: 15px;
+  font-size: 15px;
+  margin: 0 0 1.45rem;
 }
 
-.footer a:hover {
-  outline-offset: 1px;
-  outline: 1px dashed #a0a0a0;
-  background-color: #ffbe41;
+.footer-col-1 a,
+.footer-col-2 a,
+.footer-col-3 a,
+.footer-col-4 a {
+  text-decoration: none;
 }
 
-.night .footer {
-  color: #606f7b;
-  background: #222;
+.footer-col-1 a:hover,
+.footer-col-2 a:hover,
+.footer-col-3 a:hover,
+.footer-col-4 a:hover {
+  text-decoration: underline;
 }
 
-.night .footer a {
-  color: #006400;
+.footer-desc-col {
+  flex: 1 0 90%;
+  display: flex;
+  flex-direction: column;
+  padding-left: 15px;
+  padding-right: 15px;
 }
 
-.night .footer a:hover {
-  color: #606f7b;
-  outline-offset: 1px;
-  outline: 1px dashed #a0a0a0;
+.footer-desc-col a {
+  text-decoration: underline;
+}
+
+@media (min-width: 500px) {
+  .footer-col-1,
+  .footer-col-2,
+  .footer-col-3,
+  .footer-col-4 {
+    flex: 1 0 45%;
+    height: auto;
+    font-size: 16.5;
+  }
+}
+
+@media (min-width: 800px) {
+  .footer-container {
+    width: 750px;
+  }
+  .footer-col-1,
+  .footer-col-2,
+  .footer-col-3,
+  .footer-col-4 {
+    flex: 1 0 100px;
+    height: auto;
+    font-size: 16.5;
+  }
+  .footer-col-4 {
+    flex: 1 0 180px;
+  }
+}
+
+@media (min-width: 1020px) {
+  .footer-container {
+    width: 850px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .footer-container {
+    width: 1170px;
+  }
+  .footer-desc-col {
+    flex: 1 0 31%;
+  }
+  .footer-col-1,
+  .footer-col-2,
+  .footer-col-3 {
+    flex: 1 0 120px;
+  }
+  .footer-col-4 {
+    flex: 4 0 100px;
+  }
 }
diff --git a/client/src/components/Footer/index.js b/client/src/components/Footer/index.js
index 8fa8e08946..eae0810cbf 100644
--- a/client/src/components/Footer/index.js
+++ b/client/src/components/Footer/index.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Grid, Row, Col } from '@freecodecamp/react-bootstrap';
 
 import Link from '../helpers/Link';
 
@@ -19,10 +18,10 @@ ColHeader.propTypes = propTypes;
 
 function Footer() {
   return (
-    <footer className='footer'>
-      <Grid>
-        <Row>
-          <Col lg={5} sm={6}>
+    <footer className='site-footer'>
+      <div className='footer-container'>
+        <div className='footer-row'>
+          <div className='footer-desc-col'>
             <p>
               freeCodeCamp is a donor-supported tax-exempt 501(c)(3) nonprofit
               organization (United States Federal Tax Identification Number:
@@ -37,52 +36,171 @@ function Footer() {
             <p>
               Donations to freeCodeCamp go toward our education initiatives, and
               help pay for servers, services, and staff. You can&nbsp;
-              <Link className='inline' external={true} to='/donate'>
+              <Link
+                className='inline'
+                external={true}
+                to='https://freecodecamp.org/donate'
+              >
                 make a tax-deductible donation here
               </Link>
               .
             </p>
-          </Col>
-          <Col sm={2} xs={6}>
-            <ColHeader>Our Nonprofit</ColHeader>
-            <Link to='/about'>About</Link>
-            <Link to='/donate'>Donate</Link>
-            <Link to='https://shop.freecodecamp.org'>Shop</Link>
-            <Link to='/sponsors'>Sponsors</Link>
-            <a href='mailto:team@freecodecamp.org'>Email Us</a>
-          </Col>
-          <Col sm={2} xs={6}>
-            <ColHeader>Our Community</ColHeader>
-            <Link external={true} to='/news'>
-              News
+          </div>
+          <div className='footer-col-1'>
+            <div className='col-header'>Our Nonprofit</div>
+            <Link to='https://www.freecodecamp.org/news/about-freecodecamp/'>
+              About
             </Link>
-            <Link to='https://www.linkedin.com/school/free-code-camp/people/'>
+            <Link to='https://freecodecamp.org/donate'>Donate</Link>
+            <Link external={true} to='https://www.freecodecamp.org/news/shop/'>
+              Shop
+            </Link>
+            <Link
+              external={true}
+              to='https://www.linkedin.com/school/free-code-camp/people/'
+            >
               Alumni Network
             </Link>
-            <Link to='https://study-group-directory.freecodecamp.org'>
-              Study Groups
+            <Link to='https://github.com/freeCodeCamp/'>Open Source</Link>
+            <Link to='https://www.freecodecamp.org/news/support/'>Support</Link>
+            <Link to='https://www.freecodecamp.org/news/our-sponsors/'>
+              Sponsors
             </Link>
-            <Link external={true} to='/forum'>
-              Forum
+            <Link to='https://www.freecodecamp.org/news/academic-honesty-policy/'>
+              Academic Honesty
             </Link>
-            <Link to='https://gitter.im/FreeCodeCamp/home'>Gitter</Link>
-            <Link to='https://github.com/freeCodeCamp/'>GitHub</Link>
-            <Link to='/support'>Support</Link>
-            <Link to='/academic-honesty'>Academic Honesty</Link>
-            <Link to='/code-of-conduct'>Code of Conduct</Link>
-            <Link to='/privacy-policy'>Privacy Policy</Link>
-            <Link to='/terms-of-service'>Terms of Service</Link>
-          </Col>
-          <Col lg={3} sm={2} xs={12}>
-            <ColHeader>Our Learning Resources</ColHeader>
-            <Link to='/learn'>Learn</Link>
-            <Link to='https://www.youtube.com/freecodecamp'>Youtube</Link>
-            <Link to='https://podcast.freecodecamp.org'>Podcast</Link>
-            <Link to='https://twitter.com/freecodecamp'>Twitter</Link>
-            <Link to='https://instagram.com/freecodecamp'>Instagram</Link>
-          </Col>
-        </Row>
-      </Grid>
+            <Link to='https://www.freecodecamp.org/news/code-of-conduct/'>
+              Code of Conduct
+            </Link>
+            <Link to='https://www.freecodecamp.org/news/privacy-policy/'>
+              Privacy Policy
+            </Link>
+            <Link to='https://www.freecodecamp.org/news/freecodecamps-terms-of-service/'>
+              Terms of Service
+            </Link>
+            <Link to='https://www.freecodecamp.org/news/copyright-policy/'>
+              Copyright Policy
+            </Link>
+          </div>
+          <div className='footer-col-2'>
+            <div className='col-header'>Best Tutorials</div>
+            <Link to='https://www.freecodecamp.org/news/best-python-tutorial/'>
+              Python Tutorial
+            </Link>
+            <Link to='https://www.freecodecamp.org/news/best-git-tutorial/'>
+              Git Tutorial
+            </Link>
+            <Link to='https://www.freecodecamp.org/news/the-best-linux-tutorials/'>
+              Linux Tutorial
+            </Link>
+            <Link to='https://www.freecodecamp.org/news/best-javascript-tutorial/'>
+              JavaScript Tutorial
+            </Link>
+            <Link to='https://www.freecodecamp.org/news/best-react-javascript-tutorial/'>
+              React Tutorial
+            </Link>
+            <Link to='https://www.freecodecamp.org/news/best-html-html5-tutorial/'>
+              HTML Tutorial
+            </Link>
+            <Link to='https://www.freecodecamp.org/news/best-css-and-css3-tutorial/'>
+              CSS Tutorial
+            </Link>
+            <Link to='https://www.freecodecamp.org/news/best-sql-database-tutorial/'>
+              SQL Tutorial
+            </Link>
+            <Link to='https://www.freecodecamp.org/news/best-java-8-tutorial/'>
+              Java Tutorial
+            </Link>
+            <Link to='https://www.freecodecamp.org/news/best-angular-tutorial-angularjs/'>
+              Angular Tutorial
+            </Link>
+            <Link to='https://www.freecodecamp.org/news/best-wordpress-tutorial/'>
+              WordPress Tutorial
+            </Link>
+            <Link to='https://www.freecodecamp.org/news/best-bootstrap-tutorial-responsive-web-design/'>
+              Bootstrap Tutorial
+            </Link>
+          </div>
+          <div className='footer-col-3'>
+            <div className='col-header'>Best Examples</div>
+            <Link to='https://www.freecodecamp.org/news/python-example/'>
+              Python Example{' '}
+            </Link>
+            <Link to='https://www.freecodecamp.org/news/javascript-example/'>
+              JavaScript Example
+            </Link>
+            <Link to='https://www.freecodecamp.org/news/react-examples-reactjs/'>
+              React Example
+            </Link>
+            <Link to='https://www.freecodecamp.org/news/linux-example-bash-command-line/'>
+              Linux Example
+            </Link>
+            <Link to='https://www.freecodecamp.org/news/html-and-html5-example/'>
+              HTML Example
+            </Link>
+            <Link to='https://www.freecodecamp.org/news/css-example-css3/'>
+              CSS Example
+            </Link>
+            <Link to='https://www.freecodecamp.org/news/sql-example/'>
+              SQL Example
+            </Link>
+            <Link to='https://www.freecodecamp.org/news/java-example/'>
+              Java Example
+            </Link>
+            <Link to='https://www.freecodecamp.org/news/the-best-angular-examples/'>
+              Angular Example
+            </Link>
+            <Link to='https://www.freecodecamp.org/news/the-best-jquery-examples/'>
+              jQuery Example
+            </Link>
+            <Link to='https://www.freecodecamp.org/news/the-best-bootstrap-examples/'>
+              Bootstrap Example
+            </Link>
+            <Link to='https://www.freecodecamp.org/news/the-best-php-examples/'>
+              PHP Example
+            </Link>
+          </div>
+          <div className='footer-col-4'>
+            <div className='col-header'>Trending Reference</div>
+            <Link to='https://www.freecodecamp.org/news/2019-web-developer-roadmap/'>
+              2019 Web Developer Roadmap
+            </Link>
+            <Link to='https://www.freecodecamp.org/news/linux-command-line-bash-tutorial/'>
+              Linux Command Line Guide
+            </Link>
+            <Link to='https://www.freecodecamp.org/news/the-ultimate-guide-to-git-reset-and-git-revert/'>
+              Git Reset and Git Revert
+            </Link>
+            <Link to='https://www.freecodecamp.org/news/the-ultimate-guide-to-git-merge-and-git-rebase/'>
+              Git Merge and Git Rebase
+            </Link>
+            <Link to='https://www.freecodecamp.org/news/the-ultimate-guide-to-javascript-array-methods-map/'>
+              JavaScript Array Map
+            </Link>
+            <Link to='https://www.freecodecamp.org/news/the-ultimate-guide-to-javascript-array-methods-reduce/'>
+              JavaScript Array Reduce
+            </Link>
+            <Link to='https://www.freecodecamp.org/news/the-ultimate-guide-to-javascript-date-and-moment-js/'>
+              JavaScript Date
+            </Link>
+            <Link to='https://www.freecodecamp.org/news/the-ultimate-guide-to-javascript-string-methods-split/'>
+              JavaScript String Split
+            </Link>
+            <Link to='https://www.freecodecamp.org/news/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af/'>
+              CSS Flexbox Guide
+            </Link>
+            <Link to='https://www.freecodecamp.org/news/11-things-i-learned-reading-the-css-grid-specification-fb3983aa5e0/'>
+              CSS Grid Guide
+            </Link>
+            <Link to='https://www.freecodecamp.org/news/the-ultimate-guide-to-linux-creating-a-sudo-user/'>
+              Create a Linux Sudo User
+            </Link>
+            <Link to='https://www.freecodecamp.org/news/the-ultimate-guide-to-ssh-setting-up-ssh-keys/'>
+              How to Set Up SSH Keys
+            </Link>
+          </div>
+        </div>
+      </div>
     </footer>
   );
 }
diff --git a/client/src/components/FourOhFour/404.css b/client/src/components/FourOhFour/404.css
index 00d9214eb5..29f6c7ca87 100644
--- a/client/src/components/FourOhFour/404.css
+++ b/client/src/components/FourOhFour/404.css
@@ -14,10 +14,9 @@
 }
 
 .quote-wrapper {
-  background-color: #eee;
+  background-color: var(--tertiary-background);
   padding: 20px 20px 20px 42px;
   border-width: 0;
-  border-radius: 5px;
   position: relative;
   max-width: 980px;
 }
@@ -32,12 +31,13 @@
 .quote-wrapper span {
   font-size: 50px;
   font-weight: 600;
-  color: #a5a5a5;
+  color: var(--tertiary-color);
   font-family: 'Arial', sans-serif;
   font-style: normal;
   padding-left: 15px;
   padding-top: 5px;
   position: absolute;
+  border-radius: 0;
   top: 0;
   left: 0;
 }
@@ -46,21 +46,3 @@
   text-align: right;
   margin: 0;
 }
-
-.btn-curriculum {
-  margin-top: 20px;
-  background-color: #ffac33;
-  background-image: linear-gradient(#ffcc4d, #ffac33);
-  border: 1px solid #f1a02a;
-  color: #292f33;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
-  max-height: 38px;
-  padding: 8px 12px;
-  border-radius: 4px;
-  text-align: center;
-}
-
-.btn-curriculum:hover {
-  text-decoration: none;
-  color: inherit;
-}
diff --git a/client/src/components/FourOhFour/index.js b/client/src/components/FourOhFour/index.js
index 905e6cf05e..f3bb07659e 100644
--- a/client/src/components/FourOhFour/index.js
+++ b/client/src/components/FourOhFour/index.js
@@ -3,7 +3,7 @@ import Helmet from 'react-helmet';
 import Spinner from 'react-spinkit';
 import { Link } from 'gatsby';
 
-import notFoundLogo from '../../images/freeCodeCamp-404.svg';
+import notFoundLogo from '../../assets/images/freeCodeCamp-404.svg';
 import { quotes } from '../../resources/quotes.json';
 
 import './404.css';
@@ -49,7 +49,7 @@ class NotFoundPage extends Component {
         ) : (
           <Spinner color='#006400' name='ball-clip-rotate-multiple' />
         )}
-        <Link className='btn-curriculum' to='/learn'>
+        <Link className='btn btn-cta' to='/learn'>
           View the Curriculum
         </Link>
       </div>
diff --git a/client/src/components/Header/components/SignedIn.js b/client/src/components/Header/components/SignedIn.js
deleted file mode 100644
index 9c4aa6e45b..0000000000
--- a/client/src/components/Header/components/SignedIn.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Link } from 'gatsby';
-
-function SignedIn() {
-  return (
-    <Link className='top-right-nav-link' to='/settings'>
-      Settings
-    </Link>
-  );
-}
-
-SignedIn.displayName = 'SignedIn';
-SignedIn.propTypes = {
-  picture: PropTypes.string
-};
-
-export default SignedIn;
diff --git a/client/src/components/Header/components/UserState.js b/client/src/components/Header/components/UserState.js
index 9d860bce32..f5df0d05ef 100644
--- a/client/src/components/Header/components/UserState.js
+++ b/client/src/components/Header/components/UserState.js
@@ -2,11 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
+import { Link } from 'gatsby';
 import Spinner from 'react-spinkit';
 
 import { isSignedInSelector, userFetchStateSelector } from '../../../redux';
 import Login from './Login';
-import SignedIn from './SignedIn';
 
 const mapStateToProps = createSelector(
   userFetchStateSelector,
@@ -41,7 +41,13 @@ function UserState(props) {
       />
     );
   }
-  return isSignedIn ? <SignedIn /> : <Login />;
+  return isSignedIn ? (
+    <Link className='top-right-nav-link' to='/settings'>
+      Settings
+    </Link>
+  ) : (
+    <Login />
+  );
 }
 
 UserState.displayName = 'UserState';
diff --git a/client/src/components/Header/components/login.css b/client/src/components/Header/components/login.css
index 2ec93283e2..e49325e831 100644
--- a/client/src/components/Header/components/login.css
+++ b/client/src/components/Header/components/login.css
@@ -1,23 +1,3 @@
 .signup-btn {
-  background-color: #ffac33;
-  background-image: linear-gradient(#ffcc4d, #ffac33);
-  -ms-filter: 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffcc4d,  endColorstr=#ffac33,  GradientType=0)';
-  border-color: #f1a02a;
-  color: #292f33 !important;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
   padding: 4px 12px;
 }
-.signup-btn:hover,
-.signup-btn:focus,
-.signup-btn:active:hover {
-  background-color: #e99110;
-  background-image: linear-gradient(#ffcc4d, #e99110);
-  -ms-filter: 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffcc4d,  endColorstr=#e99110,  GradientType=0)';
-  border-color: #ec8b11;
-  color: #292f33 !important;
-}
-.signup-btn:active {
-  background-color: #f2a330;
-  background-image: none;
-  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3);
-}
diff --git a/client/src/components/Header/components/menuButton.css b/client/src/components/Header/components/menuButton.css
index f80574eff8..446c88b541 100644
--- a/client/src/components/Header/components/menuButton.css
+++ b/client/src/components/Header/components/menuButton.css
@@ -4,12 +4,11 @@
   margin: 0 20px 0 12px;
   padding: 2px 14px;
   border: 1px solid #fff;
-  border-radius: 3px;
 }
 
 #top-nav .menu-button-open {
   background: white;
-  color: #006400;
+  color: var(--theme-color);
 }
 
 @media (min-width: 735px) {
diff --git a/client/src/components/Header/components/menuLinks.css b/client/src/components/Header/components/menuLinks.css
index d2b9f5df14..abf5842670 100644
--- a/client/src/components/Header/components/menuLinks.css
+++ b/client/src/components/Header/components/menuLinks.css
@@ -4,7 +4,6 @@
   list-style: none;
   justify-content: space-between;
   align-items: center;
-  background-color: #006400;
 }
 
 #top-right-nav li {
@@ -16,13 +15,14 @@
   color: #fff;
   font-size: 18px;
   padding: 8px 15px;
+  text-decoration: none;
 }
 
 .top-right-nav-link:hover,
 .top-right-nav-link:focus,
 .top-right-nav-link:active {
   background-color: #fff;
-  color: #006400;
+  color: var(--theme-color);
   text-decoration: none;
 }
 
@@ -35,6 +35,10 @@
   animation-duration: 1.5s !important;
 }
 
+.top-nav-expanded {
+  background-color: var(--theme-color);
+}
+
 #top-right-nav .signup-btn,
 #top-right-nav .settings-link {
   margin: 0 15px;
diff --git a/client/src/components/Header/header.css b/client/src/components/Header/header.css
index 36951151c2..00b9ec2455 100644
--- a/client/src/components/Header/header.css
+++ b/client/src/components/Header/header.css
@@ -1,7 +1,3 @@
-:root {
-  --header-height: 38px;
-}
-
 header {
   top: 0;
   position: fixed;
@@ -10,7 +6,7 @@ header {
 }
 
 #top-nav {
-  background: #006400;
+  background: var(--theme-color);
   height: var(--header-height);
   margin-bottom: 0;
   border-radius: 0;
@@ -26,6 +22,10 @@ header {
   align-items: center;
 }
 
+#top-nav .home-link:hover {
+  background-color: var(--theme-color);
+}
+
 /* Navbar logo */
 
 #top-nav .nav-logo {
diff --git a/client/src/components/Map/components/Block.js b/client/src/components/Map/components/Block.js
index b5e9bbce38..9a9bc3fed6 100644
--- a/client/src/components/Map/components/Block.js
+++ b/client/src/components/Map/components/Block.js
@@ -8,11 +8,11 @@ import { Link } from 'gatsby';
 import ga from '../../../analytics';
 import { makeExpandedBlockSelector, toggleBlock } from '../redux';
 import { userSelector } from '../../../redux';
-import Caret from '../../icons/Caret';
+import Caret from '../../../assets/icons/Caret';
 import { blockNameify } from '../../../../utils/blockNameify';
 /* eslint-disable max-len */
-import GreenPass from '../../../templates/Challenges/components/icons/GreenPass';
-import GreenNotCompleted from '../../../templates/Challenges/components/icons/GreenNotCompleted';
+import GreenPass from '../../../assets/icons/GreenPass';
+import GreenNotCompleted from '../../../assets/icons/GreenNotCompleted';
 /* eslint-enable max-len */
 const mapStateToProps = (state, ownProps) => {
   const expandedSelector = makeExpandedBlockSelector(ownProps.blockDashedName);
diff --git a/client/src/components/Map/components/SuperBlock.js b/client/src/components/Map/components/SuperBlock.js
index 47b51dd708..c4811bcfb4 100644
--- a/client/src/components/Map/components/SuperBlock.js
+++ b/client/src/components/Map/components/SuperBlock.js
@@ -8,7 +8,7 @@ import { uniq, find } from 'lodash';
 import Block from './Block';
 
 import { makeExpandedSuperBlockSelector, toggleSuperBlock } from '../redux';
-import Caret from '../../icons/Caret';
+import Caret from '../../../assets/icons/Caret';
 import { ChallengeNode } from '../../../redux/propTypes';
 
 const mapStateToProps = (state, ownProps) => {
diff --git a/client/src/components/Map/map.css b/client/src/components/Map/map.css
index 6d49d08253..8d48cf6c9e 100644
--- a/client/src/components/Map/map.css
+++ b/client/src/components/Map/map.css
@@ -1,28 +1,29 @@
 .map-ui {
   height: 100%;
-  margin-left: 35px;
-}
-
-@media screen, (max-width: 630px) {
-  .map-ui {
-    margin: 0 auto;
-  }
 }
 
 .map-ui ul {
   list-style: none;
-  color: #006400;
+  color: var(--secondary-color);
 }
 
-.map-title {
+.map-ui > ul {
+  padding: 0;
+}
+
+button.map-title {
   display: flex;
   align-items: center;
-  padding-top: 10px;
-  padding-bottom: 20px;
+  cursor: pointer;
+  padding-top: 18px;
+  padding-bottom: 18px;
+  background: transparent;
   border: none;
-  border-bottom: 1px solid #e2e2e2;
-  background-color: transparent;
-  width: 100%;
+}
+
+button.map-title:hover {
+  color: var(--tertiary-color);
+  background-color: var(--tertiary-background);
 }
 
 .map-title > h4 {
@@ -35,10 +36,12 @@
   padding-left: 20px;
 }
 
-.map-title > svg {
+.superblock .map-title svg {
   width: 14px;
   margin-right: 5px;
   flex-shrink: 0;
+  fill: var(--color-quaternary) !important;
+  stroke: var(--color-quaternary);
 }
 
 li.open > .map-title svg:first-child {
@@ -50,12 +53,6 @@ li.open > .map-title svg:first-child {
   max-width: 28rem;
 }
 
-.night .map-challenge-title a,
-.night .map-title h4,
-.night .map-title-completed {
-  color: #67d269;
-}
-
-.map-challenge-title-completed {
-  opacity: 0.5;
+.block a {
+  text-decoration: none;
 }
diff --git a/client/src/components/helpers/ToggleButton.js b/client/src/components/helpers/ToggleButton.js
index 2fd67618c1..bb6b1fdd64 100644
--- a/client/src/components/helpers/ToggleButton.js
+++ b/client/src/components/helpers/ToggleButton.js
@@ -6,6 +6,8 @@ import {
 } from '@freecodecamp/react-bootstrap';
 
 import './toggle-button.css';
+import ToggleCheck from '../../assets/icons/ToggleCheck';
+import Spacer from '../../assets/icons/Spacer';
 
 const propTypes = {
   name: PropTypes.string.isRequired,
@@ -26,21 +28,30 @@ export default function ToggleButton({
   onLabel = 'On',
   offLabel = 'Off'
 }) {
+  const checkIconStyle = {
+    height: '15px',
+    width: '20px'
+  };
   return (
     <Fragment>
       <BSBG name={name} onChange={onChange} type='radio'>
         <TB
-          bsSize='lg'
+          bsSize='sm'
           bsStyle='primary'
           className={`toggle-${getActiveClass(value)}`}
           disabled={value}
           type='radio'
           value={1}
         >
+          {value ? (
+            <ToggleCheck style={checkIconStyle} />
+          ) : (
+            <Spacer style={checkIconStyle} />
+          )}
           {onLabel}
         </TB>
         <TB
-          bsSize='lg'
+          bsSize='sm'
           bsStyle='primary'
           className={`toggle-${getActiveClass(!value)}`}
           disabled={!value}
@@ -48,6 +59,11 @@ export default function ToggleButton({
           value={2}
         >
           {offLabel}
+          {!value ? (
+            <ToggleCheck style={checkIconStyle} />
+          ) : (
+            <Spacer style={checkIconStyle} />
+          )}
         </TB>
       </BSBG>
     </Fragment>
diff --git a/client/src/components/helpers/loader.css b/client/src/components/helpers/loader.css
index 47304054a8..a6ee0ef8ba 100644
--- a/client/src/components/helpers/loader.css
+++ b/client/src/components/helpers/loader.css
@@ -8,5 +8,5 @@
 
 .full-screen-wrapper .sk-spinner {
   transform: scale(2);
-  color: #006400;
+  color: var(--secondary-color);
 }
diff --git a/client/src/components/helpers/toggle-button.css b/client/src/components/helpers/toggle-button.css
index 8b79e6a571..c612717140 100644
--- a/client/src/components/helpers/toggle-button.css
+++ b/client/src/components/helpers/toggle-button.css
@@ -1,32 +1,29 @@
 .toggle-active.btn[disabled] {
-  background-color: #006400;
+  background-color: var(--secondary-color);
+  color: var(--secondary-background);
   opacity: 1;
 }
 
-.night .toggle-active {
-  color: #ddd;
-}
-
-.toggle-not-active.btn-primary.active {
-  background-color: #006400;
-}
-
 .toggle-not-active {
-  background-color: #ffffff;
-  color: rgb(0, 49, 0);
+  background-color: var(--quaternary-background);
+  color: var(--secondary-color);
 }
-
-.night .toggle-not-active {
-  background-color: #dedede;
-  color: #333;
+.toggle-not-active:hover {
+  color: var(--secondary-background);
 }
 
 .toggle-not-active:hover,
 .toggle-not-active:focus {
-  background-color: #006400;
+  background-color: var(--secondary-color);
 }
 
-.night .toggle-not-active:hover,
-.night .toggle-not-active:focus {
-  color: #ddd;
+.btn .toggle-not-active,
+.btn .toggle-active {
+  border-color: var(--secondary-color);
+}
+
+.btn-group .btn-primary,
+.btn-group .btn-primary:focus,
+.btn-group .btn-primary:hover {
+  border-color: var(--secondary-color);
 }
diff --git a/client/src/components/layouts/Default.js b/client/src/components/layouts/Default.js
index 2c9220e2b6..748351d4f0 100644
--- a/client/src/components/layouts/Default.js
+++ b/client/src/components/layouts/Default.js
@@ -11,7 +11,8 @@ import {
   fetchUser,
   isSignedInSelector,
   onlineStatusChange,
-  isOnlineSelector
+  isOnlineSelector,
+  userSelector
 } from '../../redux';
 import { flashMessageSelector, removeFlashMessage } from '../Flash/redux';
 
@@ -25,7 +26,7 @@ import Footer from '../Footer';
 
 import './global.css';
 import './layout.css';
-import './night.css';
+import './variables.css';
 
 fontawesome.config = {
   autoAddCss: false
@@ -70,18 +71,21 @@ const propTypes = {
   onlineStatusChange: PropTypes.func.isRequired,
   pathname: PropTypes.string.isRequired,
   removeFlashMessage: PropTypes.func.isRequired,
-  showFooter: PropTypes.bool
+  showFooter: PropTypes.bool,
+  theme: PropTypes.string
 };
 
 const mapStateToProps = createSelector(
   isSignedInSelector,
   flashMessageSelector,
   isOnlineSelector,
-  (isSignedIn, flashMessage, isOnline) => ({
+  userSelector,
+  (isSignedIn, flashMessage, isOnline, user) => ({
     isSignedIn,
     flashMessage,
     hasMessage: !!flashMessage.message,
-    isOnline
+    isOnline,
+    theme: user.theme
   })
 );
 const mapDispatchToProps = dispatch =>
@@ -131,11 +135,15 @@ class DefaultLayout extends Component {
       isSignedIn,
       landingPage,
       removeFlashMessage,
-      showFooter = true
+      showFooter = true,
+      theme
     } = this.props;
     return (
       <Fragment>
         <Helmet
+          bodyAttributes={{
+            class: `${theme === 'default' ? 'light-palette' : 'dark-palette'}`
+          }}
           meta={[
             {
               name: 'description',
@@ -151,7 +159,8 @@ class DefaultLayout extends Component {
         <WithInstantSearch>
           <Header disableSettings={landingPage} />
           <div
-            className={`default-layout ${landingPage ? 'landing-page' : ''}`}
+            className={`default-layout
+          ${landingPage ? 'landing-page' : ''}`}
           >
             <OfflineWarning isOnline={isOnline} isSignedIn={isSignedIn} />
             {hasMessage && flashMessage ? (
diff --git a/client/src/components/layouts/global.css b/client/src/components/layouts/global.css
index e02cfd62e4..e128f807a1 100644
--- a/client/src/components/layouts/global.css
+++ b/client/src/components/layouts/global.css
@@ -1,3 +1,13 @@
+html {
+  font-size: 18px;
+}
+
+body {
+  font-family: 'Roboto Mono', monospace;
+  color: var(--secondary-color);
+  background: var(--secondary-background);
+}
+
 .btn-cta-big {
   max-height: 100%;
   font-size: 40px;
@@ -7,13 +17,46 @@
 .big-heading {
   font-size: 50px !important;
 }
-h1,
-h2,
-h3,
+
+.default-layout {
+  display: block;
+  margin-top: var(--header-height);
+  background: var(--secondary-background);
+}
+
+h1 {
+  color: var(--secondary-color);
+  font-weight: 700;
+  font-size: 1.5rem;
+  font-family: 'Roboto Mono', monospace;
+  margin: 1.2rem 0 1.2rem;
+}
+h2 {
+  color: var(--secondary-color);
+  font-weight: 700;
+  font-size: 1.2rem;
+  font-family: 'Roboto Mono', monospace;
+  margin: 1.2rem 0 1.2rem;
+}
+h3 {
+  color: var(--secondary-color);
+  font-weight: 700;
+  font-size: 1.1rem;
+  font-family: 'Roboto Mono', monospace;
+  margin: 0 0 1.2rem;
+}
+
 h4,
 h5,
-h6 {
+h6,
+p,
+td,
+th {
+  color: var(--secondary-color);
   font-weight: 400;
+  font-size: 1rem;
+  font-family: 'Roboto Mono', monospace;
+  margin: 0 0 1.2rem;
 }
 
 .text-center {
@@ -21,26 +64,266 @@ h6 {
 }
 
 .green-text {
-  color: #006400;
+  color: var(--secondary-color);
 }
 
-.btn-invert {
-  background-color: #fff;
-  color: #006400;
+a:hover {
+  color: var(--tertiary-color);
+  background-color: var(--tertiary-background);
+}
+
+a {
+  color: inherit;
+  text-decoration: underline;
 }
 
 a:hover,
 a:focus {
   text-decoration: none;
 }
+/* modal */
 
 .fcc-modal {
-  background-color: #006400;
-  color: #fff;
+  background-color: var(--secondary-background);
+  color: var(--secondary-color);
 }
 
 .fcc-modal .close {
-  color: #fff;
+  color: var(--secondary-color);
+  opacity: 100%;
   font-size: 28px;
   text-shadow: none;
 }
+
+.modal-content {
+  background-color: var(--secondary-background);
+}
+
+/* button */
+.btn {
+  background-color: var(--quaternary-background);
+  border-width: 3px;
+  border-color: var(--secondary-color);
+  color: var(--secondary-color);
+  border-radius: 0px;
+  text-decoration: none;
+  /* outline: none; */
+}
+
+.btn:hover,
+.btn-primary:hover {
+  border-color: var(--secondary-color);
+  background-color: var(--secondary-color);
+  color: var(--secondary-background);
+}
+
+.btn:active,
+.btn-primary:active {
+  background-color: var(--secondary-background);
+}
+
+.btn:focus,
+.btn-primary:focus,
+.btn-primary.focus {
+  background-color: var(--quaternary-background);
+  color: var(--secondary-color);
+  border-color: var(--secondary-color);
+}
+
+.btn:active:hover,
+.btn-primary:active:hover,
+.btn-primary.active:hover,
+.open > .dropdown-toggle.btn-primary:hover,
+.btn-primary:active:focus,
+.btn-primary.active:focus,
+.open > .dropdown-toggle.btn-primary:focus,
+.btn-primary:active.focus,
+.btn-primary.active.focus,
+.open > .dropdown-toggle.btn-primary.focus {
+  background-color: var(--secondary-color);
+  color: var(--secondary-background);
+}
+
+.btn.disabled,
+.btn[disabled],
+fieldset[disabled] .btn,
+.btn-primary.disabled:hover,
+.btn-primary[disabled]:hover,
+fieldset[disabled] .btn-primary:hover,
+.btn-primary.disabled:focus,
+.btn-primary[disabled]:focus,
+fieldset[disabled] .btn-primary:focus,
+.btn-primary.disabled.focus,
+.btn-primary[disabled].focus,
+fieldset[disabled] .btn-primary.focus {
+  cursor: not-allowed;
+  background-color: var(--quaternary-background);
+  border-color: var(--quaternary-color);
+  color: var(--quaternary-color);
+}
+
+/* .btn:focus,
+.btn:active:focus,
+.btn.active:focus,
+.btn.focus,
+.btn:active.focus,
+.btn.active.focus {
+  outline: none;
+} */
+.btn-cta {
+  background-color: #ffac33;
+  background-image: linear-gradient(#ffcc4d, #ffac33);
+  -ms-filter: 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffcc4d,  endColorstr=#ffac33,  GradientType=0)';
+  border-color: #f1a02a;
+  color: #0a0a23 !important;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+  border: none;
+}
+.btn-cta:hover,
+.btn-cta:focus,
+.btn-cta:active:hover {
+  background-color: #e99110;
+  background-image: linear-gradient(#ffcc4d, #e99110);
+  -ms-filter: 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffcc4d,  endColorstr=#e99110,  GradientType=0)';
+  color: #0a0a23 !important;
+}
+.btn-cta:active {
+  background-image: none;
+  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3);
+}
+
+strong {
+  color: var(--secondary-color);
+}
+
+.form-control {
+  color: var(--theme-color);
+  outline: none;
+  border-color: var(--quaternary-background);
+  -webkit-box-shadow: none !important;
+  -moz-box-shadow: none !important;
+  box-shadow: none !important;
+  border-radius: 0px;
+}
+
+input {
+  outline: none;
+  border-color: var(--quaternary-background);
+  -webkit-box-shadow: none !important;
+  -moz-box-shadow: none !important;
+  box-shadow: none !important;
+  border-radius: 0px;
+}
+
+form {
+  margin-bottom: 5px;
+}
+.form-control:focus,
+input:focus {
+  border-color: var(--tertiary-color);
+}
+code {
+  background-color: var(--quaternary-background);
+  color: var(--tertiary-color);
+  border-radius: 0px;
+  font-family: 'Roboto Mono', monospace;
+}
+
+.panel {
+  border-radius: 0;
+  background-color: transparent;
+}
+
+.help-block em {
+  font-size: 0.8rem;
+}
+
+hr {
+  border-top: 1px solid var(--quaternary-background);
+}
+
+.panel-default {
+  background: var(--secondary-background);
+}
+
+.btn-primary:active,
+.btn-primary.active,
+.open > .dropdown-toggle.btn-primary,
+.open > .dropdown-toggle.btn-primary:hover {
+  background-color: var(--secondary-color);
+  color: var(--secondary-background);
+}
+
+.open > .dropdown-menu {
+  border-radius: 0px;
+}
+
+.dropdown-menu > li > a {
+  color: var(--secondary-background);
+}
+.dropdown-menu {
+  background-color: var(--secondary-color);
+}
+
+.table-striped > tbody > tr:nth-child(2n + 1) > td,
+.table-striped > tbody > tr:nth-child(2n + 1) > th {
+  background-color: var(--tertiary-background);
+}
+
+.help-block {
+  color: var(--quaternary-color);
+}
+
+.panel-default > .panel-heading {
+  background-color: transparent;
+}
+
+.challenge-output span {
+  font-size: 1rem;
+}
+
+.breadcrumb {
+  background: var(--tertiary-background);
+  border-radius: 0px;
+}
+
+code[class*='language-'],
+pre[class*='language-'] {
+  border-radius: 0px;
+}
+
+pre {
+  color: inherit;
+  background-color: inherit;
+  border: none;
+  border-radius: 0;
+}
+
+.list-group-item {
+  background: transparent;
+  border: none;
+  border-radius: 0;
+}
+
+.intro-toc .list-group-item:hover {
+  background-color: var(--tertiary-background) !important;
+  border-radius: 0;
+}
+
+.panel-primary > .panel-heading {
+  background-color: transparent;
+  border-color: var(--color-primary);
+}
+
+.has-success .help-block,
+.has-success .control-label,
+.has-success .radio,
+.has-success .checkbox,
+.has-success .radio-inline,
+.has-success .checkbox-inline,
+.has-success.radio label,
+.has-success.checkbox label,
+.has-success.radio-inline label,
+.has-success.checkbox-inline label {
+  color: var(--highlight-color);
+}
diff --git a/client/src/components/layouts/layout.css b/client/src/components/layouts/layout.css
index 58400d27ab..4846524024 100644
--- a/client/src/components/layouts/layout.css
+++ b/client/src/components/layouts/layout.css
@@ -1,4 +1,4 @@
-html {
+/* html {
   font-family: 'Lato', sans-serif;
   -ms-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
@@ -603,4 +603,4 @@ pre code {
   flex-direction: column;
   margin-top: var(--header-height);
   min-height: calc(100vh - var(--header-height));
-}
+} */
diff --git a/client/src/components/layouts/learn.css b/client/src/components/layouts/learn.css
index 6264673361..121807eee3 100644
--- a/client/src/components/layouts/learn.css
+++ b/client/src/components/layouts/learn.css
@@ -3,9 +3,7 @@
 }
 
 #learn-app-wrapper .reflex-container.vertical .reflex-splitter:hover {
-  border-left: 2px solid #006400;
-  border-right: 2px solid #006400;
-  background-color: #006400;
+  background-color: var(--tertiary-color);
 }
 
 #learn-app-wrapper .reflex-container.vertical > .reflex-splitter {
@@ -13,11 +11,13 @@
 }
 
 #learn-app-wrapper .reflex-container.horizontal .reflex-splitter:hover {
-  border-top: 2px solid #006400;
-  border-bottom: 2px solid #006400;
-  background-color: #006400;
+  background-color: var(--quaternary-background);
+  width: 5px;
+  border: none;
 }
 
 #learn-app-wrapper .reflex-container.horizontal > .reflex-splitter {
   height: 5px;
+  background-color: var(--quaternary-background);
+  border: none;
 }
diff --git a/client/src/components/layouts/night.css b/client/src/components/layouts/night.css
deleted file mode 100644
index 33e998f73f..0000000000
--- a/client/src/components/layouts/night.css
+++ /dev/null
@@ -1,51 +0,0 @@
-.night body {
-  background-color: #333;
-  color: #ddd;
-}
-
-.night .btn-invert {
-  background-color: #ddd;
-  color: #006400;
-}
-
-.night .btn-invert:hover,
-.night .btn-invert:focus {
-  background-color: #006400;
-  color: #ddd;
-}
-
-.night input,
-.night textarea {
-  background-color: #ddd;
-  color: #333;
-}
-
-.night a {
-  color: #f8f8f8;
-}
-
-.night .table-striped > tbody > tr:nth-child(odd) {
-  background-color: #555555;
-}
-
-.night .challenge-preview {
-  background: #fff;
-}
-.night .test-result:nth-child(2n + 1) {
-  color: #fff;
-  background: #2a2a2a;
-}
-
-.night .challenge-instructions pre,
-.night .challenge-instructions pre code,
-.night .challenge-instructions blockquote,
-.night blockquote,
-.night code,
-.night pre {
-  background-color: #242424;
-  color: #02a902;
-}
-
-.night .list-group-item {
-  background-color: unset;
-}
diff --git a/client/src/components/layouts/prism-night.css b/client/src/components/layouts/prism-night.css
index 3fdbdb51ec..bb44e1ee34 100644
--- a/client/src/components/layouts/prism-night.css
+++ b/client/src/components/layouts/prism-night.css
@@ -7,7 +7,7 @@
 
 .night code[class*='language-'],
 .night pre[class*='language-'] {
-  color: #ccc;
+  color: var(--secondary-color);
   font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
   font-size: 1em;
   text-align: left;
@@ -29,7 +29,7 @@
 }
 
 .night pre[class*='language-'] code[class*='language-'] {
-  color: #d4d4d4;
+  color: var(--quaternary-color);
 }
 
 /* Code blocks */
@@ -41,7 +41,7 @@
 
 .night :not(pre) > code[class*='language-'],
 .night pre[class*='language-'] {
-  background: #242424;
+  background: var(--primary-background);
 }
 
 /* Inline code */
diff --git a/client/src/components/layouts/variables.css b/client/src/components/layouts/variables.css
new file mode 100644
index 0000000000..adf5e68b82
--- /dev/null
+++ b/client/src/components/layouts/variables.css
@@ -0,0 +1,40 @@
+:root {
+  --header-height: 38px;
+  --theme-color: #0a0a23;
+  --gray-05: #f5f6f7;
+  --gray-mid: #858591;
+}
+
+.dark-palette {
+  --primary-color: #ffffff;
+  --secondary-color: #f5f6f7;
+  --tertiary-color: #dfdfe2;
+  --quaternary-color: #d0d0d5;
+  --quaternary-background: #3b3b4f;
+  --tertiary-background: #2a2a40;
+  --secondary-background: #1b1b32;
+  --primary-background: #0a0a23;
+  --highlight-color: #99c9ff;
+  --highlight-background: #002ead;
+  --success-color: #87d98e;
+  --success-background: #004d00;
+  --danger-color: #ffadad;
+  --danger-background: #850000;
+}
+
+.light-palette {
+  --primary-color: #0a0a23;
+  --secondary-color: #1b1b32;
+  --tertiary-color: #2a2a40;
+  --quaternary-color: #3b3b4f;
+  --quaternary-background: #d0d0d5;
+  --tertiary-background: #dfdfe2;
+  --secondary-background: #f5f6f7;
+  --primary-background: #ffffff;
+  --highlight-color: #002ead;
+  --highlight-background: #99c9ff;
+  --success-color: #004d00;
+  --success-background: #87d98e;
+  --danger-color: #850000;
+  --danger-background: #ffadad;
+}
diff --git a/client/src/components/profile/components/heatmap.css b/client/src/components/profile/components/heatmap.css
index ef89b8189b..54177bfd8e 100644
--- a/client/src/components/profile/components/heatmap.css
+++ b/client/src/components/profile/components/heatmap.css
@@ -3,11 +3,11 @@
   justify-content: space-around;
   align-items: center;
   font-size: 18px;
-  color: #006400;
+  color: var(--secondary-color);
 }
 
 .streak strong {
-  color: #333;
+  color: var(--secondary-color);
 }
 
 .night .streak strong {
diff --git a/client/src/components/search/searchBar/searchbar-base.css b/client/src/components/search/searchBar/searchbar-base.css
index ccee09178f..2bfeb40472 100644
--- a/client/src/components/search/searchBar/searchbar-base.css
+++ b/client/src/components/search/searchBar/searchbar-base.css
@@ -136,7 +136,7 @@
   height: 20px;
   background-color: #fff;
   border: 1px solid #333;
-  border-radius: 50%;
+  border-radius: 0;
   cursor: -webkit-grab;
   cursor: grab;
 }
@@ -242,7 +242,7 @@ a[class^='ais-'] {
   font-size: 0.8rem;
   color: #fff;
   background-color: #0096db;
-  border-radius: 5px;
+  border-radius: 0px;
   -webkit-transition: background-color 0.2s ease-out;
   transition: background-color 0.2s ease-out;
   outline: none;
@@ -309,7 +309,7 @@ a[class^='ais-'] {
   display: -ms-flexbox;
   display: flex;
   background-color: #495588;
-  border-radius: 5px;
+  border-radius: 0px;
 }
 .ais-CurrentRefinements-category {
   margin-left: 0.3em;
@@ -383,7 +383,7 @@ a[class^='ais-'] {
   font-size: 0.8rem;
   color: #3a4570;
   background-color: #dfe2ee;
-  border-radius: 8px;
+  border-radius: 0px;
 }
 .ais-HierarchicalMenu-showMore,
 .ais-Menu-showMore,
@@ -449,7 +449,7 @@ a[class^='ais-'] {
   background-size: 10px 10px;
   background-position: 92% 50%;
   border: 1px solid #c4c8d8;
-  border-radius: 5px;
+  border-radius: 0px;
 }
 .ais-Panel-header {
   margin-bottom: 0.5rem;
@@ -484,7 +484,7 @@ a[class^='ais-'] {
   color: #fff;
   background-color: #0096db;
   border: none;
-  border-radius: 5px;
+  border-radius: 0px;
   -webkit-transition: 0.2s ease-out;
   transition: 0.2s ease-out;
   outline: none;
@@ -508,7 +508,7 @@ a[class^='ais-'] {
   padding: 0.3rem 0.6rem;
   display: block;
   border: 1px solid #c4c8d8;
-  border-radius: 5px;
+  border-radius: 0px;
   -webkit-transition: background-color 0.2s ease-out;
   transition: background-color 0.2s ease-out;
 }
@@ -600,8 +600,8 @@ a[class^='ais-'] {
   width: 100%;
   position: relative;
   background-color: #fff;
-  border: 1px solid #c4c8d8;
-  border-radius: 5px;
+  border: none;
+  border-radius: 0px;
 }
 .ais-SearchBox-input::-webkit-input-placeholder {
   color: #a5aed1;
diff --git a/client/src/components/search/searchBar/searchbar.css b/client/src/components/search/searchBar/searchbar.css
index 776304583f..6b0fbc203e 100644
--- a/client/src/components/search/searchBar/searchbar.css
+++ b/client/src/components/search/searchBar/searchbar.css
@@ -6,7 +6,7 @@
 
 .fcc_searchBar .ais-SearchBox-input,
 .fcc_searchBar .ais-Hits {
-  background-color: #fff;
+  background-color: var(--quaternary-background);
 }
 
 .fcc_searchBar .ais-SearchBox-form {
diff --git a/client/src/components/settings/Portfolio.js b/client/src/components/settings/Portfolio.js
index bccc2e9fc7..c47434e25d 100644
--- a/client/src/components/settings/Portfolio.js
+++ b/client/src/components/settings/Portfolio.js
@@ -17,8 +17,6 @@ import { FullWidthRow, ButtonSpacer, Spacer } from '../helpers';
 import SectionHeader from './SectionHeader';
 import BlockSaveButton from '../helpers/form/BlockSaveButton';
 
-import './portfolio.css';
-
 const propTypes = {
   picture: PropTypes.string,
   portfolio: PropTypes.arrayOf(
@@ -285,7 +283,6 @@ class PortfolioSettings extends Component {
               block={true}
               bsSize='lg'
               bsStyle='danger'
-              className='btn-delete-portfolio'
               onClick={() => this.handleRemoveItem(id)}
               type='button'
             >
diff --git a/client/src/components/settings/danger-zone.css b/client/src/components/settings/danger-zone.css
index 77d0d75fca..c255fd7d99 100644
--- a/client/src/components/settings/danger-zone.css
+++ b/client/src/components/settings/danger-zone.css
@@ -1,22 +1,27 @@
 .btn-danger {
-  background-color: #fff;
-  color: #ad1601;
-  border-color: #ad1601;
+  background-color: var(--danger-color);
+  color: var(--danger-background);
+  border-color: var(--danger-background);
 }
 
 .btn-danger:hover,
 .btn-danger:focus {
-  background-color: #ad1601;
+  color: var(--danger-color);
+  background-color: var(--danger-background);
+  border-color: var(--danger-background);
 }
+
 .danger-zone .panel-heading {
-  background-color: #ad1601;
-  color: #fff;
+  color: var(--danger-color);
+  background-color: var(--danger-background);
+  border-radius: 0;
+  border: none;
 }
 
 .danger-zone .panel-danger {
-  border-color: #ad1601;
+  border-color: var(--danger-background);
 }
 
 .danger-zone p {
-  color: #ad1601;
+  color: var(--danger-color);
 }
diff --git a/client/src/components/settings/honesty.css b/client/src/components/settings/honesty.css
index ee2d8d9358..3e0aeb518b 100644
--- a/client/src/components/settings/honesty.css
+++ b/client/src/components/settings/honesty.css
@@ -11,9 +11,12 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: rgba(0, 100, 0, 0.8);
+  background-color: var(--quaternary-color);
   color: #fff;
-  border-color: #006400;
+}
+
+div .agreed p {
+  color: white;
 }
 
 .honesty-policy .agreed p {
@@ -21,11 +24,6 @@
   margin-bottom: 0;
 }
 
-.night .honesty-panel {
-  color: #333333;
-  background-color: #cccccc;
-}
-
-.night .honesty-panel a {
-  color: darkgreen;
+.honesty-panel .btn-invert {
+  color: var(--primary-background);
 }
diff --git a/client/src/components/settings/portfolio.css b/client/src/components/settings/portfolio.css
deleted file mode 100644
index 193e5184c8..0000000000
--- a/client/src/components/settings/portfolio.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.btn-delete-portfolio {
-  background-color: #fff;
-  color: #f11e00;
-}
diff --git a/client/src/components/settings/solution-viewer.css b/client/src/components/settings/solution-viewer.css
index e420f4fdbf..6364669d71 100644
--- a/client/src/components/settings/solution-viewer.css
+++ b/client/src/components/settings/solution-viewer.css
@@ -2,3 +2,7 @@
 .solution-viewer pre {
   margin-bottom: 0px;
 }
+
+.solution-viewer {
+  border-color: var(--color-primary);
+}
diff --git a/client/src/components/settings/toggle-setting.css b/client/src/components/settings/toggle-setting.css
index f0c8119a00..cb26b64f22 100644
--- a/client/src/components/settings/toggle-setting.css
+++ b/client/src/components/settings/toggle-setting.css
@@ -1,7 +1,6 @@
 .toggle-setting-container .form-group {
   display: flex;
   justify-content: space-between;
-  align-items: center;
 }
 
 .toggle-setting-container .form-group label {
diff --git a/client/src/images/square_puck.png b/client/src/images/square_puck.png
deleted file mode 100644
index a95ba06f5d..0000000000
Binary files a/client/src/images/square_puck.png and /dev/null differ
diff --git a/client/src/pages/certification.css b/client/src/pages/certification.css
index f5aed6ac20..ad9111fb81 100644
--- a/client/src/pages/certification.css
+++ b/client/src/pages/certification.css
@@ -14,7 +14,7 @@
   max-width: 1500px;
   width: 100%;
   padding: 30px;
-  border: darkgreen 15px solid;
+  border: var(--theme-color) 15px solid;
   border-radius: 3px;
 }
 
@@ -35,7 +35,7 @@
 .certification-namespace header {
   width: 100%;
   height: 140px;
-  background-color: darkgreen;
+  background-color: var(--theme-color);
   position: relative;
 }
 
@@ -63,7 +63,7 @@
   margin-top: -20px;
   height: 380px;
   text-align: center;
-  background-color: #efefef;
+  background-color: var(--gray-05);
 }
 
 .certification-namespace .information-container {
@@ -78,7 +78,8 @@
 }
 
 .certification-namespace h3 {
-  font-size: 30px;
+  font-size: 25px;
+  font-weight: normal;
 }
 
 .certification-namespace h4 {
@@ -88,13 +89,13 @@
 
 .certification-namespace h1 {
   font-size: 40px;
-  color: #006400;
+  color: var(--theme-color);
 }
 
 .certification-namespace .signatures {
   text-align: center;
   margin: 0 auto;
-  background-color: #efefef;
+  background-color: var(--gray-05);
 }
 
 .certification-namespace .signatures img {
@@ -113,7 +114,7 @@
   font-size: 15px;
   text-align: center;
   word-wrap: break-word;
-  background-color: #efefef;
+  background-color: var(--gray-05);
 }
 
 /*mobile media queries*/
diff --git a/client/src/pages/common-pages.css b/client/src/pages/common-pages.css
index f2b2efe143..705119b60a 100644
--- a/client/src/pages/common-pages.css
+++ b/client/src/pages/common-pages.css
@@ -1,3 +1,15 @@
 .questions > h4 {
   font-size: 1.25rem;
 }
+
+.table > thead > tr > th,
+.table > tbody > tr > th,
+.table > tfoot > tr > th,
+.table > thead > tr > td,
+.table > tbody > tr > td,
+.table > tfoot > tr > td {
+  border: none;
+  font-size: 1rem;
+  font-weight: bold;
+  padding-left: 0;
+}
diff --git a/client/src/pages/index.css b/client/src/pages/index.css
index 831d645de4..ba23a5a190 100644
--- a/client/src/pages/index.css
+++ b/client/src/pages/index.css
@@ -1,26 +1,5 @@
-/*
-  Embrace the cascade to override night mode styles
-  This ensures a consistent landing page, even for users with nigt mode enabled
-*/
-.night body .landing-page {
-  background-color: #fff;
-  color: #333;
-}
-.night .landing-page #top-right-nav li > a,
-.night #top-right-nav li > span {
-  color: #fff;
-}
-.night .landing-page a {
-  color: #006400;
-}
-.night .landing-page a:hover {
-  color: #001800;
-}
-
-/* End night mode override */
-
 .black-text {
-  color: #333;
+  color: var(--secondary-color);
   font-weight: 400;
   font-size: 40px;
 }
@@ -39,7 +18,7 @@
 }
 
 .landing-skill-icon {
-  color: #006400;
+  color: var(--secondary-color);
   margin-top: -15px;
   padding-bottom: 15px;
   height: 150px;
@@ -50,7 +29,7 @@
   border-radius: 5px;
   height: 200px;
   width: 200px;
-  color: #006400;
+  color: var(--secondary-color);
 }
 
 .testimonial-copy {
diff --git a/client/src/pages/learn.css b/client/src/pages/learn.css
index fbcfd51743..e635cdda0e 100644
--- a/client/src/pages/learn.css
+++ b/client/src/pages/learn.css
@@ -1,19 +1,18 @@
 .learn-page-wrapper {
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
   max-width: 960px;
   margin: 0 auto;
   padding: 0 20px;
+  top: 38px;
 }
 
 @media screen and (max-width: 630px) {
   .learn-page-wrapper {
-    padding: 0 15px;
+    padding: 0 40px;
   }
 }
 
-.learn-page-wrapper p {
-  margin-bottom: 0.75rem;
+.map-ui p {
+  margin-bottom: 0rem;
 }
diff --git a/client/src/pages/learn.js b/client/src/pages/learn.js
index 3b581f611b..cbe525f6fd 100644
--- a/client/src/pages/learn.js
+++ b/client/src/pages/learn.js
@@ -40,7 +40,7 @@ const IndexPage = ({
       <Helmet title='Learn | freeCodeCamp.org' />
       <Spacer />
       <Spacer />
-      <h2>Welcome to the freeCodeCamp curriculum</h2>
+      <h1 className='text-center'>Welcome to the freeCodeCamp curriculum</h1>
       <p>
         We have thousands of coding lessons to help you improve your skills.
       </p>
@@ -57,7 +57,6 @@ const IndexPage = ({
         If you are new to coding, we recommend you{' '}
         <Link to={slug}>start at the beginning</Link>.
       </p>
-      <Spacer />
       <Map
         introNodes={mdEdges.map(({ node }) => node)}
         nodes={edges
diff --git a/client/src/pages/welcome.css b/client/src/pages/welcome.css
index b5ca71c888..40e108c59d 100644
--- a/client/src/pages/welcome.css
+++ b/client/src/pages/welcome.css
@@ -10,7 +10,7 @@
 .update-link {
   text-decoration: underline;
   font-size: 1.4em;
-  color: #006400;
+  color: var(--secondary-color);
 }
 
 p.stats {
@@ -18,13 +18,5 @@ p.stats {
 }
 
 p.stats span {
-  color: #006400;
-}
-
-.night p.stats span {
-  color: #67d269;
-}
-
-.night .quote-partial .blockquote {
-  background-color: #333;
+  color: var(--secondary-color);
 }
diff --git a/client/src/pages/welcome.js b/client/src/pages/welcome.js
index cf0ea71198..89ee42ac64 100644
--- a/client/src/pages/welcome.js
+++ b/client/src/pages/welcome.js
@@ -89,11 +89,13 @@ function Welcome({
         <title>Welcome | freeCodeCamp.org</title>
       </Helmet>
       <main>
-        <Grid className='text-center'>
+        <Grid>
           <Row>
             <Col xs={12}>
               <Spacer />
-              <h1 className='big-heading'>Welcome {name ? name : 'Camper'}!</h1>
+              <h1 className='big-heading text-center'>
+                Welcome {name ? name : 'Camper'}!
+              </h1>
             </Col>
           </Row>
           <Spacer />
diff --git a/client/src/templates/Challenges/classic/Editor.js b/client/src/templates/Challenges/classic/Editor.js
index b9d8fd1eda..eafdc5b66d 100644
--- a/client/src/templates/Challenges/classic/Editor.js
+++ b/client/src/templates/Challenges/classic/Editor.js
@@ -51,6 +51,9 @@ const defineMonacoThemes = monaco => {
   monaco.editor.defineTheme('vs-dark-custom', {
     base: 'vs-dark',
     inherit: true,
+    colors: {
+      'editor.background': '#2a2a40'
+    },
     rules: [
       { token: 'delimiter.js', foreground: lightBlueColor },
       { token: 'delimiter.parenthesis.js', foreground: yellowCollor },
@@ -70,6 +73,12 @@ class Editor extends Component {
     super(...props);
 
     this.options = {
+      fontSize: '18px',
+      scrollBeyondLastLine: false,
+      selectionHighlight: false,
+      overviewRulerBorder: false,
+      hideCursorInOverviewRuler: true,
+      renderIndentGuides: false,
       minimap: {
         enabled: false
       },
@@ -78,7 +87,9 @@ class Editor extends Component {
       scrollbar: {
         horizontal: 'hidden',
         vertical: 'visible',
-        verticalHasArrows: true
+        verticalHasArrows: false,
+        useShadows: false,
+        verticalScrollbarSize: 5
       }
     };
 
diff --git a/client/src/templates/Challenges/classic/classic.css b/client/src/templates/Challenges/classic/classic.css
index 77a8fe7551..29024a7af4 100644
--- a/client/src/templates/Challenges/classic/classic.css
+++ b/client/src/templates/Challenges/classic/classic.css
@@ -3,7 +3,7 @@
 }
 
 .monaco-menu .action-label {
-  color: #a2bd9b;
+  color: var(--highlight-color);
   letter-spacing: 0.02em;
 }
 
diff --git a/client/src/templates/Challenges/components/Challenge-Title.js b/client/src/templates/Challenges/components/Challenge-Title.js
index 7f74f6e7b6..e036ee0293 100644
--- a/client/src/templates/Challenges/components/Challenge-Title.js
+++ b/client/src/templates/Challenges/components/Challenge-Title.js
@@ -25,7 +25,7 @@ function ChallengeTitle({
   if (isCompleted) {
     icon = (
       // TODO Use SVG here
-      <i className='ion-checkmark-circled text-primary' title='Completed' />
+      <i className='ion-checkmark text-primary' title='Completed' />
     );
   }
   return (
diff --git a/client/src/templates/Challenges/components/CompletionModal.js b/client/src/templates/Challenges/components/CompletionModal.js
index 4cf589c97d..1304bdc82d 100644
--- a/client/src/templates/Challenges/components/CompletionModal.js
+++ b/client/src/templates/Challenges/components/CompletionModal.js
@@ -6,7 +6,7 @@ import { createSelector } from 'reselect';
 import { Button, Modal } from '@freecodecamp/react-bootstrap';
 
 import ga from '../../../analytics';
-import GreenPass from './icons/GreenPass';
+import GreenPass from '../../../assets/icons/GreenPass';
 
 import { dasherize } from '../../../../utils';
 
diff --git a/client/src/templates/Challenges/components/Side-Panel.js b/client/src/templates/Challenges/components/Side-Panel.js
index e99147f8ee..7d33238028 100644
--- a/client/src/templates/Challenges/components/Side-Panel.js
+++ b/client/src/templates/Challenges/components/Side-Panel.js
@@ -6,7 +6,6 @@ import ChallengeTitle from './Challenge-Title';
 import ChallengeDescription from './Challenge-Description';
 import ToolPanel from './Tool-Panel';
 import TestSuite from './Test-Suite';
-import Spacer from '../../../components/helpers/Spacer';
 
 import { challengeTestsSelector } from '../redux';
 import { createSelector } from 'reselect';
@@ -71,7 +70,6 @@ export class SidePanel extends Component {
     } = this.props;
     return (
       <div className='instructions-panel' role='complementary'>
-        <Spacer />
         <div>
           <ChallengeTitle
             introPath={introPath}
diff --git a/client/src/templates/Challenges/components/Test-Suite.js b/client/src/templates/Challenges/components/Test-Suite.js
index ad08ef1909..feb6bd7c17 100644
--- a/client/src/templates/Challenges/components/Test-Suite.js
+++ b/client/src/templates/Challenges/components/Test-Suite.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import GreenPass from './icons/GreenPass';
-import Fail from './icons/Fail';
-import Initial from './icons/Initial';
+import GreenPass from '../../../assets/icons/GreenPass';
+import Fail from '../../../assets/icons/Fail';
+import Initial from '../../../assets/icons/Initial';
 
 import './test-suite.css';
 
diff --git a/client/src/templates/Challenges/components/__snapshots__/ChallengeTitle.test.js.snap b/client/src/templates/Challenges/components/__snapshots__/ChallengeTitle.test.js.snap
index 41e28b62a8..4cc1b8c993 100644
--- a/client/src/templates/Challenges/components/__snapshots__/ChallengeTitle.test.js.snap
+++ b/client/src/templates/Challenges/components/__snapshots__/ChallengeTitle.test.js.snap
@@ -16,7 +16,7 @@ exports[`<ChallengeTitle/> renders correctly 1`] = `
   >
     title text
     <i
-      className="ion-checkmark-circled text-primary"
+      className="ion-checkmark text-primary"
       title="Completed"
     />
   </h2>
diff --git a/client/src/templates/Challenges/components/challenge-description.css b/client/src/templates/Challenges/components/challenge-description.css
index f8152e2814..fd18c5dcf6 100644
--- a/client/src/templates/Challenges/components/challenge-description.css
+++ b/client/src/templates/Challenges/components/challenge-description.css
@@ -1,24 +1,9 @@
-.challenge-instructions {
-  font-size: 16px;
-}
-
-.challenge-instructions blockquote,
-.challenge-instructions pre {
-  background-color: #eee;
-  color: #c7254e;
-  padding: 10px 10px 10px 15px;
+.challenge-instructions blockquote {
+  background-color: var(--tertiary-background);
+  color: var(--tertiary-color);
+  padding: 10px;
   width: 100%;
   margin: 0;
   margin-bottom: 1.45rem;
-  font-family: monospace;
-  font-size: 16px;
-  border: none;
-}
-
-.challenge-instructions pre code {
-  line-height: 1.42;
-  text-shadow: none;
-  font-family: 'SFMono-Regular', Consolas, 'Roboto Mono', 'Droid Sans Mono',
-    'Liberation Mono', Menlo, Courier, monospace;
-  color: #c7254e;
+  font-size: 0.9rem;
 }
diff --git a/client/src/templates/Challenges/components/completion-modal.css b/client/src/templates/Challenges/components/completion-modal.css
index 2577ed9bd1..6f2a6563d6 100644
--- a/client/src/templates/Challenges/components/completion-modal.css
+++ b/client/src/templates/Challenges/components/completion-modal.css
@@ -10,15 +10,6 @@
   width: 30vh;
 }
 
-.night .challenge-list-header {
-  background-color: #333;
-  border-bottom-color: #222;
-}
-
-.night .challenge-success-modal .modal-content {
-  background-color: #333;
-}
-
 @media screen and (max-width: 767px) {
   .challenge-success-modal .btn-lg {
     font-size: 16px;
diff --git a/client/src/templates/Challenges/components/help-modal.css b/client/src/templates/Challenges/components/help-modal.css
index 73dcd00a05..74fbde5ee8 100644
--- a/client/src/templates/Challenges/components/help-modal.css
+++ b/client/src/templates/Challenges/components/help-modal.css
@@ -7,11 +7,3 @@
 .night .help-modal-header .close {
   color: #fff;
 }
-
-.night .help-modal-body,
-.night .help-modal-header {
-  background-color: #333;
-}
-.night .help-modal-header {
-  border-bottom-color: #222;
-}
diff --git a/client/src/templates/Challenges/components/reset-modal.css b/client/src/templates/Challenges/components/reset-modal.css
index eadba944ce..6221c4b6bd 100644
--- a/client/src/templates/Challenges/components/reset-modal.css
+++ b/client/src/templates/Challenges/components/reset-modal.css
@@ -1,29 +1,29 @@
+.reset-modal p {
+  color: var(--danger-color);
+}
+
 .reset-modal-header {
-  color: #fff;
-  background-color: #d9534f;
-  border-color: #d43f3a;
+  color: var(--danger-color);
+  background-color: var(--danger-background);
+  border: none;
+}
+
+.reset-modal-header h4 {
+  color: var(--danger-color);
+}
+
+.reset-modal .modal-footer {
+  border-color: var(--danger-color);
 }
 
 .reset-modal-header .close {
-  color: #fff;
+  color: var(--danger-color);
   font-size: 28px;
   text-shadow: none;
 }
 
-.night .reset-modal-header .close {
-  color: #222;
-}
-
 @media screen and (max-width: 767px) {
   .reset-modal .btn-lg {
     font-size: 16px;
   }
 }
-
-.night .reset-modal-body,
-.night .reset-modal-footer {
-  background-color: #333;
-}
-.night .reset-modal-footer {
-  border-top-color: #222;
-}
diff --git a/client/src/templates/Challenges/components/test-suite.css b/client/src/templates/Challenges/components/test-suite.css
index d412dc215d..73a32608ce 100644
--- a/client/src/templates/Challenges/components/test-suite.css
+++ b/client/src/templates/Challenges/components/test-suite.css
@@ -12,7 +12,7 @@
 }
 
 .test-result:nth-child(odd) {
-  background-color: #eee;
+  background-color: var(--tertiary-background);
 }
 
 .test-output {
diff --git a/client/src/templates/Challenges/components/video-modal.css b/client/src/templates/Challenges/components/video-modal.css
index 60ee6d0160..c3c3300ea6 100644
--- a/client/src/templates/Challenges/components/video-modal.css
+++ b/client/src/templates/Challenges/components/video-modal.css
@@ -30,15 +30,3 @@
 .video-modal p {
   margin-bottom: 0;
 }
-
-.night .video-modal-header .close {
-  color: #fff;
-}
-
-.night .video-modal-body,
-.night .video-modal-header {
-  background-color: #333;
-}
-.night .video-modal-header {
-  border-bottom-color: #222;
-}
diff --git a/client/src/templates/Challenges/rechallenge/builders.js b/client/src/templates/Challenges/rechallenge/builders.js
index 93b55acd12..b11e904a54 100644
--- a/client/src/templates/Challenges/rechallenge/builders.js
+++ b/client/src/templates/Challenges/rechallenge/builders.js
@@ -9,12 +9,13 @@ import {
 } from 'lodash';
 
 import { compileHeadTail, setExt, transformContents } from '../utils/polyvinyl';
+import { nightThemeStyle } from './displayStyle.js';
 
 const htmlCatch = '\n<!--fcc-->\n';
 const jsCatch = '\n;/*fcc*/\n';
 
 const defaultTemplate = ({ source }) => `
-  <body style='margin:8px;'>
+  <body id='display-body'style='margin:8px;'>
     <!-- fcc-start-source -->
       ${source}
     <!-- fcc-end-source -->
@@ -56,14 +57,15 @@ export const cssToHtml = cond([
   [stubTrue, identity]
 ]);
 
-// FileStream::concatHtml(
-//   required: [ ...Object ],
-//   template: String,
-//   files: [ polyVinyl ]
-// ) => String
-export function concatHtml({ required = [], template, files = [] } = {}) {
+export function concatHtml({
+  required = [],
+  template,
+  files = [],
+  theme = 'night'
+} = {}) {
+  theme = theme === '' ? 'night' : theme;
   const createBody = template ? _template(template) : defaultTemplate;
-
+  const displayTheme = theme === 'night' ? nightThemeStyle : ` `;
   const head = required
     .map(({ link, src }) => {
       if (link && src) {
@@ -79,7 +81,7 @@ A required file can not have both a src and a link: src = ${src}, link = ${link}
       }
       return '';
     })
-    .reduce((head, element) => head.concat(element), '');
+    .reduce((head, element) => head.concat(element), displayTheme);
 
   const source = files.reduce(
     (source, file) => source.concat(file.contents, htmlCatch),
diff --git a/client/src/templates/Challenges/rechallenge/displayStyle.js b/client/src/templates/Challenges/rechallenge/displayStyle.js
new file mode 100644
index 0000000000..0c49520106
--- /dev/null
+++ b/client/src/templates/Challenges/rechallenge/displayStyle.js
@@ -0,0 +1,10 @@
+export const nightThemeStyle = `
+<style>
+  html{
+    color: white;
+  }
+  a {
+    color: #99c9ff;
+  }
+</style>
+`;
diff --git a/client/src/templates/Challenges/redux/index.js b/client/src/templates/Challenges/redux/index.js
index 7d427d0085..e0ffa12a58 100644
--- a/client/src/templates/Challenges/redux/index.js
+++ b/client/src/templates/Challenges/redux/index.js
@@ -15,6 +15,7 @@ import { createIdToNameMapSaga } from './id-to-name-map-saga';
 import { createExecuteChallengeSaga } from './execute-challenge-saga';
 import { createCurrentChallengeSaga } from './current-challenge-saga';
 import { challengeTypes } from '../../../../utils/challengeTypes';
+import { userSelector } from '../../../redux';
 
 export const ns = 'challenge';
 export const backendNS = 'backendChallenge';
@@ -182,6 +183,7 @@ export const projectFormValuesSelector = state =>
   state[ns].projectFormValues || {};
 
 export const challengeDataSelector = state => {
+  const { theme } = userSelector(state);
   const { challengeType } = challengeMetaSelector(state);
   let challengeData = { challengeType };
   if (
@@ -223,6 +225,7 @@ export const challengeDataSelector = state => {
       template
     };
   }
+  challengeData.theme = theme;
   return challengeData;
 };
 
diff --git a/client/src/templates/Challenges/utils/build.js b/client/src/templates/Challenges/utils/build.js
index 46aafdbf37..7d26b52762 100644
--- a/client/src/templates/Challenges/utils/build.js
+++ b/client/src/templates/Challenges/utils/build.js
@@ -108,7 +108,12 @@ async function getDOMTestRunner(buildData, proxyLogger, document) {
     runTestInTestFrame(document, testString, testTimeout);
 }
 
-export function buildDOMChallenge({ files, required = [], template = '' }) {
+export function buildDOMChallenge({
+  files,
+  required = [],
+  template = '',
+  theme = ``
+}) {
   const finalRequires = [...globalRequires, ...required, ...frameRunner];
   const loadEnzyme = Object.keys(files).some(key => files[key].ext === 'jsx');
   const toHtml = [jsToHtml, cssToHtml];
@@ -120,7 +125,7 @@ export function buildDOMChallenge({ files, required = [], template = '' }) {
     .then(checkFilesErrors)
     .then(files => ({
       challengeType: challengeTypes.html,
-      build: concatHtml({ required: finalRequires, template, files }),
+      build: concatHtml({ required: finalRequires, template, files, theme }),
       sources: buildSourceMap(files),
       loadEnzyme
     }));
diff --git a/client/src/templates/Introduction/intro.css b/client/src/templates/Introduction/intro.css
index 2c57d6684e..409079c41e 100644
--- a/client/src/templates/Introduction/intro.css
+++ b/client/src/templates/Introduction/intro.css
@@ -13,11 +13,11 @@
 }
 
 .intro-toc .list-group-item:hover {
-  background-color: #eee;
+  background-color: var(--secondary-background);
 }
 
 .intro-toc a:hover {
   text-decoration: none;
   text-decoration-style: none;
-  color: #006400;
+  color: var(--secondary-color);
 }
diff --git a/package-lock.json b/package-lock.json
index 5b1e6e74e1..9ea8313a24 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4144,7 +4144,7 @@
     },
     "duplexer": {
       "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz",
+      "resolved": "http://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz",
       "integrity": "sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=",
       "dev": true
     },
@@ -5200,7 +5200,7 @@
       "dependencies": {
         "combined-stream": {
           "version": "1.0.6",
-          "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.6.tgz",
+          "resolved": "http://registry.npmjs.org/combined-stream/-/combined-stream-1.0.6.tgz",
           "integrity": "sha1-cj599ugBrFYTETp+RFqbactjKBg=",
           "dev": true,
           "requires": {
@@ -5304,8 +5304,7 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -5326,14 +5325,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -5348,20 +5345,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5478,8 +5472,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5491,7 +5484,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5506,7 +5498,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -5514,14 +5505,12 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -5540,7 +5529,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -5621,8 +5609,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -5634,7 +5621,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -5720,8 +5706,7 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -5757,7 +5742,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -5777,7 +5761,6 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -5821,14 +5804,12 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },
@@ -5966,7 +5947,7 @@
         },
         "load-json-file": {
           "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
+          "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
           "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
           "dev": true,
           "requires": {
@@ -6003,7 +5984,7 @@
         },
         "minimist": {
           "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
           "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
           "dev": true
         },
@@ -9199,7 +9180,7 @@
         },
         "minimist": {
           "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
           "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
           "dev": true
         },
@@ -11202,7 +11183,7 @@
       "dependencies": {
         "minimist": {
           "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
           "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
           "dev": true
         }
@@ -11921,7 +11902,7 @@
       "dependencies": {
         "minimist": {
           "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
           "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
           "dev": true
         }