diff --git a/app/helpers/github.js b/app/helpers/github.js
index 9aa1547..d58a36f 100644
--- a/app/helpers/github.js
+++ b/app/helpers/github.js
@@ -355,7 +355,7 @@ function updateGithubFeed() {
 //  H E L P E R
 
 function refToBranch(ref) {
-  return ref.replace("refs/heads/", "");
+  if (ref) return ref.replace("refs/heads/", "");
 }
 
 
diff --git a/app/sass/_layout.scss b/app/sass/_layout.scss
index fb614f9..ab24440 100644
--- a/app/sass/_layout.scss
+++ b/app/sass/_layout.scss
@@ -4,14 +4,14 @@ body {
 }
 
 html {
-  background-color: $white;
+  background-color: $lbry-white;
 }
 
 body {
   @include font-sans;
   min-width: 320px;
 
-  color: $black;
+  color: $lbry-black;
   font-size: 12px;
   overflow-x: hidden;
   position: relative;
@@ -59,7 +59,7 @@ h5 {
 hr {
   width: 100%; height: 1px;
 
-  background-color: rgba($gray, 0.3);
+  background-color: $lbry-gray-2;
   border: none;
   margin-bottom: 1rem;
 }
@@ -72,7 +72,7 @@ code {
   width: 100%;
   bottom: 0; left: 0;
 
-  background-color: $yellow;
+  background-color: $lbry-yellow-3;
   line-height: 1.33;
   padding-top: 1rem;
   padding-right: env(safe-area-inset-right);
@@ -113,7 +113,7 @@ code {
     width: 1.25rem; height: 1.25rem;
     top: 0; right: 0;
 
-    background-color: $white;
+    background-color: $lbry-white;
     border-radius: 50%;
     display: block;
     font-size: 1rem;
diff --git a/app/sass/bundle.scss b/app/sass/bundle.scss
index 738f629..1009898 100755
--- a/app/sass/bundle.scss
+++ b/app/sass/bundle.scss
@@ -1,7 +1,8 @@
 @charset "utf-8";
 
+@import "../../node_modules/@lbry/color/lbry-color";
+
 @import
-"init/colors",
 "init/base",
 "init/mixins",
 "init/markdown",
diff --git a/app/sass/init/_base.scss b/app/sass/init/_base.scss
index 31b04ef..cb10864 100644
--- a/app/sass/init/_base.scss
+++ b/app/sass/init/_base.scss
@@ -93,10 +93,10 @@ img {
   &::after {
     width: 100%; height: 100%;
 
-    background-color: $white;
+    background-color: $lbry-white;
     background-image: url("/assets/media/images/missing.png");
     background-size: cover;
-    box-shadow: 0 0 1px 0 rgba($black, 0.3);
+    box-shadow: 0 0 1px 0 rgba($lbry-black, 0.3);
     content: "";
     display: block;
   }
@@ -182,7 +182,7 @@ button::-moz-focus-inner {
 
 // Get rid of yellow autofill background
 input:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0 1000px $white inset !important;
+  -webkit-box-shadow: 0 0 0 1000px $lbry-white inset !important;
 
   &:focus {
     outline: none;
diff --git a/app/sass/init/_colors.scss b/app/sass/init/_colors.scss
deleted file mode 100644
index c0f28b8..0000000
--- a/app/sass/init/_colors.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-$white:   #fff;
-$silver:  #f1f3f5;
-$black:   #212529;
-$gray:    #ced4da;
-$teal:    #38d9a9;
-$cyan:    #3bc9db;
-$blue:    #339af0;
-$indigo:  #748ffc;
-$violet:  #9775fa;
-$fuchsia: #da77f2;
-$pink:    #f783ac;
-$red:     #e03131;
-$orange:  #ff922b;
-$yellow:  #ffe066;
-$lime:    #a9e34b;
-$green:   #51cf66;
diff --git a/app/sass/init/_extends.scss b/app/sass/init/_extends.scss
index 5c6ccdf..cf8b33f 100644
--- a/app/sass/init/_extends.scss
+++ b/app/sass/init/_extends.scss
@@ -52,7 +52,7 @@
   }
 
   &:hover::after {
-    background-color: $black;
+    background-color: $lbry-black;
   }
 }
 
@@ -62,16 +62,16 @@
   @extend .__button-padding-horizontal;
 
   &:not(:hover) {
-    background-color: $black;
-    border-color: $white;
-    box-shadow: 2px 2px 0 $white;
-    color: $white;
+    background-color: $lbry-black;
+    border-color: $lbry-white;
+    box-shadow: 2px 2px 0 $lbry-white;
+    color: $lbry-white;
   }
 
   &:hover {
-    background-color: $white;
-    border-color: $black;
-    box-shadow: 2px 2px 0 $black;
+    background-color: $lbry-white;
+    border-color: $lbry-black;
+    box-shadow: 2px 2px 0 $lbry-black;
     color: inherit;
   }
 }
@@ -82,17 +82,17 @@
   @extend .__button-padding-horizontal;
 
   &:not(:hover) {
-    background-color: $white;
+    background-color: $lbry-white;
     border-color: transparent;
-    box-shadow: 2px 2px 0 $black;
+    box-shadow: 2px 2px 0 $lbry-black;
     color: inherit;
   }
 
   &:hover {
-    background-color: $black;
-    border-color: $white;
-    box-shadow: 2px 2px 0 $white;
-    color: $white;
+    background-color: $lbry-black;
+    border-color: $lbry-white;
+    box-shadow: 2px 2px 0 $lbry-white;
+    color: $lbry-white;
   }
 }
 
@@ -101,17 +101,17 @@
   @extend .__button-padding-vertical;
   @extend .__button-padding-horizontal;
 
-  background-color: $white;
+  background-color: $lbry-white;
 
   &:not(:hover) {
     border-color: transparent;
-    box-shadow: 2px 2px 0 $black;
+    box-shadow: 2px 2px 0 $lbry-black;
   }
 
   &:hover {
-    border-color: $teal;
-    box-shadow: 2px 2px 0 $teal;
-    color: $teal;
+    border-color: $lbry-teal-3;
+    box-shadow: 2px 2px 0 $lbry-teal-3;
+    color: $lbry-teal-3;
   }
 }
 
@@ -127,7 +127,7 @@
 
 .button {
   @extend .__button-padding-horizontal;
-  color: $white;
+  color: $lbry-white;
   font-size: 1rem;
   line-height: 2rem;
   position: relative;
@@ -144,18 +144,18 @@
   }
 
   &:not(:hover) {
-    background-color: $black;
+    background-color: $lbry-black;
 
     &::after {
-      background-color: $black;
+      background-color: $lbry-black;
     }
   }
 
   &:hover {
-    background-color: $teal;
+    background-color: $lbry-teal-3;
 
     &::after {
-      background-color: $teal;
+      background-color: $lbry-teal-3;
     }
   }
 }
@@ -181,7 +181,7 @@
     top: 2rem; left: calc(50% - 2rem);
 
     animation: spin 2s linear infinite;
-    border-top-color: $teal;
+    border-top-color: $lbry-teal-3;
     border-radius: 50%;
     border-style: solid;
     border-width: 6px;
diff --git a/app/sass/init/_markdown.scss b/app/sass/init/_markdown.scss
index c07dc61..4848eed 100644
--- a/app/sass/init/_markdown.scss
+++ b/app/sass/init/_markdown.scss
@@ -94,7 +94,7 @@
       width: 150px; height: 100px;
       top: 3rem; left: -2rem;
 
-      color: rgba($teal, 0.2);
+      color: rgba($lbry-teal-3, 0.2);
       content: "\201C";
       font-size: 20rem;
       line-height: 0.5;
@@ -109,9 +109,9 @@
     code {
       padding: 0.3rem 0.5rem;
 
-      background-color: $black;
+      background-color: $lbry-black;
       border-radius: 3px;
-      color: $white;
+      color: $lbry-white;
       font-size: 60%;
       letter-spacing: 0.05rem;
       vertical-align: middle;
@@ -185,11 +185,11 @@
   }
 
   a:not(.__button-black):not(.button) {
-    @include underline($teal, $white);
-    color: $teal;
+    @include underline($lbry-teal-3, $lbry-white);
+    color: $lbry-teal-3;
 
     code {
-      background-color: $teal;
+      background-color: $lbry-teal-3;
       text-shadow: none;
     }
   }
@@ -210,8 +210,8 @@
   table {
     width: 100%;
 
-    background-color: $white;
-    border: 1px solid rgba($gray, 0.3);
+    background-color: $lbry-white;
+    border: 1px solid $lbry-gray-1;
     border-spacing: 0;
     margin-bottom: 2rem;
     position: relative;
@@ -230,13 +230,13 @@
       }
 
       tbody tr:last-of-type td:not(:last-of-type) {
-        border-bottom: 1px solid rgba($gray, 0.3);
+        border-bottom: 1px solid $lbry-gray-1;
       }
     }
 
     thead {
-      background-color: $black;
-      color: $white;
+      background-color: $lbry-black;
+      color: $lbry-white;
       cursor: default;
       position: relative;
 
@@ -253,7 +253,7 @@
         width: calc(100% + 2px); height: calc(100% + 2px);
         top: -1px; left: -1px;
 
-        background-color: $black;
+        background-color: $lbry-black;
         content: "";
         position: absolute;
         z-index: 0;
@@ -265,7 +265,7 @@
     }
 
     tr:nth-of-type(even) {
-      background-color: rgba($black, 0.025);
+      background-color: $lbry-gray-1;
     }
 
     th,
@@ -280,7 +280,7 @@
     }
 
     tbody tr:not(:last-of-type) td {
-      border-bottom: 1px solid rgba($gray, 0.3);
+      border-bottom: 1px solid $lbry-gray-1;
     }
 
     td {
diff --git a/app/sass/init/_mixins.scss b/app/sass/init/_mixins.scss
index 38153f3..29f9ee7 100644
--- a/app/sass/init/_mixins.scss
+++ b/app/sass/init/_mixins.scss
@@ -57,17 +57,17 @@
   }
 }
 
-@mixin underline($text-color: #000, $whitespace-color: #fff) {
-  @include selection($text-color, $whitespace-color);
+@mixin underline($text-color: #000, $lbry-whitespace-color: #fff) {
+  @include selection($text-color, $lbry-whitespace-color);
 
-  background-image: linear-gradient($whitespace-color, $whitespace-color), linear-gradient($whitespace-color, $whitespace-color), linear-gradient($text-color, $text-color);
+  background-image: linear-gradient($lbry-whitespace-color, $lbry-whitespace-color), linear-gradient($lbry-whitespace-color, $lbry-whitespace-color), linear-gradient($text-color, $text-color);
   background-position: 0 88%, 100% 88%, 0 88%;
   background-repeat: no-repeat, no-repeat, repeat-x;
   background-size: 0.05rem 1px, 0.05rem 1px, 1px 1px;
   box-decoration-break: clone;
   display: inline;
   text-decoration: none;
-  text-shadow: 0.03rem 0 $whitespace-color, -0.03rem 0 $whitespace-color, 0 0.03rem $whitespace-color, 0 -0.03rem $whitespace-color, 0.06rem 0 $whitespace-color, -0.06rem 0 $whitespace-color, 0.09rem 0 $whitespace-color, -0.09rem 0 $whitespace-color, 0.12rem 0 $whitespace-color, -0.12rem 0 $whitespace-color, 0.15rem 0 $whitespace-color, -0.15rem 0 $whitespace-color;
+  text-shadow: 0.03rem 0 $lbry-whitespace-color, -0.03rem 0 $lbry-whitespace-color, 0 0.03rem $lbry-whitespace-color, 0 -0.03rem $lbry-whitespace-color, 0.06rem 0 $lbry-whitespace-color, -0.06rem 0 $lbry-whitespace-color, 0.09rem 0 $lbry-whitespace-color, -0.09rem 0 $lbry-whitespace-color, 0.12rem 0 $lbry-whitespace-color, -0.12rem 0 $lbry-whitespace-color, 0.15rem 0 $lbry-whitespace-color, -0.15rem 0 $lbry-whitespace-color;
 
   @-moz-document url-prefix() { // sass-lint:disable-line empty-args
     background-position: 0 90%, 100% 90%, 0 90%;
diff --git a/app/sass/pages/_api.scss b/app/sass/pages/_api.scss
index 1f65eed..cd726a8 100644
--- a/app/sass/pages/_api.scss
+++ b/app/sass/pages/_api.scss
@@ -23,7 +23,7 @@
     width: 100%; height: 1px;
     bottom: -1px; left: 0;
 
-    background-color: rgba($gray, 0.3);
+    background-color: $lbry-gray-2;
     content: "";
     position: absolute;
   }
@@ -50,8 +50,8 @@
   width: 200px; height: calc(100vh - 4rem); // navigation is 4rem tall
   bottom: 0; left: 0;
 
-  background-color: $white;
-  border-right: 1px solid rgba($gray, 0.3);
+  background-color: $lbry-white;
+  border-right: 1px solid $lbry-gray-1;
   float: left;
   overflow-x: hidden;
   overflow-y: auto;
@@ -67,7 +67,7 @@
   width: 100%;
   padding: 0.25rem calc(2rem + 4px) 0.25rem 0.75rem;
 
-  border-bottom: 1px solid rgba($gray, 0.3);
+  border-bottom: 1px solid $lbry-gray-1;
   font-size: 0.8rem;
   line-height: 2rem;
 }
@@ -76,9 +76,9 @@
   width: 1.25rem; height: 1.25rem;
   top: 0.6rem; right: 0.75rem;
 
-  background-color: $black;
+  background-color: $lbry-black;
   border-radius: 50%;
-  color: $white;
+  color: $lbry-white;
   cursor: pointer;
   font-size: 1rem;
   line-height: 1.15;
@@ -107,7 +107,7 @@
 
 .api__toc__item {
   &:hover {
-    background-color: rgba($gray, 0.3);
+    background-color: $lbry-gray-2;
   }
 
   a {
@@ -157,7 +157,7 @@
   table {
     width: 100%;
 
-    border: 1px solid rgba($white, 0.1);
+    border: 1px solid rgba($lbry-white, 0.1);
     border-radius: 0.3rem;
     border-spacing: 0;
     font-size: 0.8rem;
@@ -174,36 +174,32 @@
   }
 
   th {
-    border-bottom: 1px solid rgba($white, 0.1);
+    border-bottom: 1px solid rgba($lbry-white, 0.1);
   }
 
   tr:nth-child(even) {
-    background-color: rgba($white, 0.1);
+    background-color: rgba($lbry-white, 0.1);
   }
 }
 
 .api__content__body {
   padding: 2rem;
-  border-bottom: 1px solid rgba($gray, 0.3);
-
-  pre {
-    border: 1px solid rgba($gray, 0.3);
-  }
+  border-bottom: 1px solid $lbry-gray-1; // rgba($lbry-gray-1, 0.3);
 }
 
 .api__content__body__arguments {
-  border: 1px solid rgba($gray, 0.3);
+  border: 1px solid $lbry-gray-2;
   border-radius: 3px;
   list-style-type: none;
 }
 
 .api__content__body__argument {
   &:not(:last-of-type) {
-    border-bottom: 1px solid rgba($gray, 0.3);
+    border-bottom: 1px solid $lbry-gray-2;
   }
 
   &:nth-child(even) {
-    background-color: rgba($gray, 0.1);
+    background-color: rgba($lbry-gray-1, 0.2);
   }
 
   .left,
@@ -214,12 +210,12 @@
   .left {
     width: 30%;
 
-    border-right: 1px solid rgba($gray, 0.3);
+    border-right: 1px solid $lbry-gray-2;
     float: left;
     word-wrap: break-word;
 
     span {
-      color: $gray;
+      color: $lbry-gray-3;
       font-size: 0.8rem;
 
       &:not(:first-of-type) {
@@ -241,11 +237,11 @@
 .api__content__example {
   padding: 2rem;
 
-  background-color: mix($gray, $black, 10%);
-  border-bottom: 1px solid rgba($white, 0.1);
-  color: $white;
+  background-color: rgba($lbry-black, 0.9);
+  border-bottom: 1px solid rgba($lbry-white, 0.1);
+  color: $lbry-white;
 
   pre {
-    background-color: $black;
+    background-color: $lbry-black;
   }
 }
diff --git a/app/sass/pages/_documentation.scss b/app/sass/pages/_documentation.scss
index 5b3d7b1..746b3bb 100644
--- a/app/sass/pages/_documentation.scss
+++ b/app/sass/pages/_documentation.scss
@@ -18,7 +18,7 @@
     position: relative;
 
     &::before {
-      background-color: $black;
+      background-color: $lbry-black;
       border-radius: 50%;
       content: "";
       line-height: 0;
@@ -97,7 +97,7 @@
     position: relative;
 
     &::before {
-      color: rgba($black, 0.5);
+      color: rgba($lbry-black, 0.5);
       font-style: italic;
       position: absolute;
       vertical-align: bottom;
diff --git a/app/sass/pages/_home.scss b/app/sass/pages/_home.scss
index b8b4e3e..5ce21d7 100644
--- a/app/sass/pages/_home.scss
+++ b/app/sass/pages/_home.scss
@@ -36,7 +36,7 @@ body.home { // sass-lint:disable-line no-qualifying-elements // TODO: FIX THIS
   hr {
     width: 100%; height: 1px;
 
-    background-color: rgba($black, 0.1);
+    background-color: rgba($lbry-black, 0.1);
     border: none;
     margin-bottom: 4rem;
   }
@@ -45,7 +45,7 @@ body.home { // sass-lint:disable-line no-qualifying-elements // TODO: FIX THIS
     height: calc(50vh - 4rem); min-height: 300px;
 
     align-items: center;
-    background-color: $black;
+    background-color: $lbry-black;
     // background-image: url("/assets/media/svg/text-logo--white.svg");
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 800 300' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill='%23fcfcfc' d='M567.328, 43.44l72.864, 130.464l0, 82.656l46.944, 0l0, -82.656l72.576, -130.464l-50.688, 0l-44.64, 84.672l-44.64, -84.672l-52.416, 0Z'/%3E %3Cpath fill='%23fcfcfc' d='M520.672, 173.616c22.464, -10.656 34.848, -31.968 34.848, -61.056c0, -44.64 -26.496, -68.832 -81.216, -69.12l-82.368, 0l0, 213.12l46.656, 0l0, -75.168l35.136, 0l31.392, 75.168l52.416, 0l-36.864, -82.944Zm-46.656, -32.544l-35.424, 0l0, -56.448l35.712, 0c23.904, 0 31.968, 12.96 31.968, 27.936c0, 15.264 -8.352, 28.512 -32.256, 28.512Z'/%3E %3Cpath fill='%23fcfcfc' d='M328.864, 150.576c15.552, -7.2 28.512, -23.04 28.512, -48.096c0, -34.848 -25.344, -58.464 -67.104, -58.464l-43.776, 0l-46.368, 0l0, 212.544l89.568, 0c42.048, 0 70.272, -19.584 70.272, -55.872c0, -26.784 -14.976, -42.048 -31.104, -50.112Zm-43.776, -67.104c19.008, 0 25.92, 14.112 25.92, 25.344c0, 11.808 -7.2, 24.768 -25.92, 24.768l-38.592, 0l0, -50.112l38.592, 0Zm2.592, 133.632l-41.184, 0l0, -49.248l41.184, 0c15.264, 0 26.208, 10.08 26.208, 25.056c0, 14.976 -10.656, 24.192 -26.208, 24.192Z'/%3E %3Cpath fill='%23fcfcfc' d='M87.52, 214.8l0, -171.36l-47.232, 0l0, 213.12l130.752, 0l0, -41.76l-83.52, 0Z'/%3E %3C/svg%3E");
     background-position: center;
@@ -62,8 +62,8 @@ body.home { // sass-lint:disable-line no-qualifying-elements // TODO: FIX THIS
     h1 {
       padding: 0.4rem 1rem;
 
-      background-color: $white;
-      border: 1px solid rgba($black, 0.1);
+      background-color: $lbry-white;
+      border: 1px solid rgba($lbry-black, 0.1);
       box-decoration-break: clone;
       display: inline;
       font-weight: normal;
@@ -82,7 +82,7 @@ body.home { // sass-lint:disable-line no-qualifying-elements // TODO: FIX THIS
   }
 
   .features {
-    border-bottom: 1px solid rgba($black, 0.05);
+    border-bottom: 1px solid rgba($lbry-black, 0.05);
     grid-area: features;
   }
 
@@ -106,13 +106,13 @@ body.home { // sass-lint:disable-line no-qualifying-elements // TODO: FIX THIS
       @media (min-width: 1301px) {
         top: -0.85rem; left: -2rem;
 
-        color: rgba($black, 0.045);
+        color: rgba($lbry-black, 0.045);
         font-size: 4rem;
         position: absolute;
       }
 
       @media (max-width: 1300px) {
-        color: $black;
+        color: $lbry-black;
       }
 
       @media (min-width: 901px) and (max-width: 1300px) {
@@ -159,7 +159,7 @@ body.home { // sass-lint:disable-line no-qualifying-elements // TODO: FIX THIS
   .docs,
   .contribute,
   .develop {
-    border-bottom: 1px solid rgba($black, 0.05);
+    border-bottom: 1px solid rgba($lbry-black, 0.05);
   }
 
   .intro,
@@ -238,7 +238,7 @@ body.home { // sass-lint:disable-line no-qualifying-elements // TODO: FIX THIS
           }
 
           &:hover {
-            color: $teal;
+            color: $lbry-teal-3;
           }
         }
       }
diff --git a/app/sass/pages/_page.scss b/app/sass/pages/_page.scss
index dfd3471..e7ce7cf 100644
--- a/app/sass/pages/_page.scss
+++ b/app/sass/pages/_page.scss
@@ -14,11 +14,11 @@
   @include center;
   width: 100%;
 
-  background-color: $black;
+  background-color: $lbry-black;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
-  color: $white;
+  color: $lbry-white;
   padding-right: env(safe-area-inset-right);
   padding-left: env(safe-area-inset-left);
   position: relative;
@@ -26,7 +26,7 @@
 
 .page__header__title {
   font-weight: 300;
-  text-shadow: 1px 1px 2px rgba($black, 0.3);
+  text-shadow: 1px 1px 2px rgba($lbry-black, 0.3);
 
   @media (min-width: 901px) {
     font-size: 3rem;
diff --git a/app/sass/pages/_playground.scss b/app/sass/pages/_playground.scss
index 5768d2f..f3e18bd 100644
--- a/app/sass/pages/_playground.scss
+++ b/app/sass/pages/_playground.scss
@@ -10,14 +10,14 @@
 .playground {
   top: 1rem;
 
-  border-top: 1px solid rgba($black, 0.05);
+  border-top: 1px solid rgba($lbry-gray-1, 0.3);
   position: relative;
 
   &.waiting::before {
     top: 0; right: 0;
     bottom: 0; left: 0;
 
-    background-color: rgba($white, 0.7);
+    background-color: rgba($lbry-white, 0.7);
     content: "";
     cursor: progress;
     position: absolute;
@@ -78,19 +78,19 @@
     &::before,
     button,
     span {
-      color: rgba($black, 0.3);
+      color: $lbry-gray-1;
     }
   }
 
   &.active,
   &:hover {
     button {
-      color: $teal;
+      color: $lbry-teal-3;
     }
 
     &::before,
     span {
-      color: $black;
+      color: $lbry-black;
     }
   }
 
@@ -99,7 +99,7 @@
       width: 100%; height: 100%;
       top: 0; left: 0;
 
-      background-color: rgba($white, 0.7);
+      background-color: rgba($lbry-white, 0.7);
       content: "✓";
       font-size: 3rem;
       line-height: 0.85;
@@ -151,7 +151,7 @@
 **/
 
 .playground__content {
-  border-top: 1px solid rgba($black, 0.05);
+  // border-top: 1px solid rgba($lbry-black, 0.05);
   overflow-y: visible;
   padding-top: 1rem;
   padding-bottom: 1rem;
@@ -193,7 +193,7 @@
   canvas {
     width: 100%; height: 100%;
 
-    background-color: rgba($teal, 0.3);
+    background-color: rgba($lbry-teal-1, 0.3);
     margin-bottom: 1rem;
   }
 }
@@ -217,7 +217,7 @@
   }
 
   &.selected {
-    border-color: $black;
+    border-color: $lbry-black;
   }
 }
 
@@ -244,7 +244,7 @@
   label {
     width: 100%;
 
-    color: rgba($black, 0.3);
+    color: $lbry-gray-2;
     display: block;
     font-size: 0.8rem;
     font-weight: 600;
@@ -276,12 +276,12 @@
 
     &:not([type="file"]):not([type="submit"]) {
       &:not(:hover):not(:active) {
-        border-color: $black;
+        border-color: $lbry-black;
       }
 
       &:hover,
       &:active {
-        border-color: $teal;
+        border-color: $lbry-teal-3;
       }
     }
 
@@ -297,7 +297,7 @@
         width: 100%; height: 100%;
 
         content: "✓";
-        font-size: 1.5rem;
+        font-size: 1.3rem;
         line-height: 1rem;
         position: absolute;
       }
@@ -307,7 +307,7 @@
       }
 
       &:checked::after {
-        color: $teal;
+        color: $lbry-teal-3;
       }
     }
   }
@@ -318,12 +318,12 @@
     border-bottom: 2px solid;
 
     &:not(:hover):not(:active) {
-      border-color: $black;
+      border-color: $lbry-black;
     }
 
     &:hover,
     &:active {
-      border-color: $teal;
+      border-color: $lbry-teal-3;
     }
   }
 
@@ -376,7 +376,7 @@
     line-height: 1.33;
 
     span {
-      color: rgba($black, 0.3);
+      color: rgba($lbry-black, 0.3);
       display: block;
       font-size: 0.8rem;
       letter-spacing: 0.025rem;
@@ -385,7 +385,7 @@
 }
 
 .playground__content__urlbar {
-  border: 1px solid rgba($black, 0.05);
+  border: 1px solid $lbry-gray-1;
   display: flex;
   margin-bottom: 1rem;
 
@@ -404,6 +404,7 @@
   button {
     width: 6rem;
     text-transform: lowercase;
+    z-index: 1;
   }
 
   input {
@@ -411,7 +412,7 @@
     font-size: 1rem;
 
     &::placeholder {
-      color: rgba($black, 0.5);
+      color: $lbry-gray-4;
       opacity: 1;
     }
   }
@@ -420,7 +421,7 @@
     @include no-user-select;
     width: 3.5rem;
 
-    color: rgba($black, 0.5);
+    color: $lbry-gray-4;
     cursor: default;
     font-size: 1rem;
     line-height: 2rem;
@@ -442,12 +443,12 @@
   line-height: 1.33;
 
   &:not(.success) {
-    background-color: rgba($black, 0.05);
+    background-color: rgba($lbry-gray-1, 0.3);
     text-align: center;
   }
 
   &.success {
-    background-color: rgba($teal, 0.05);
+    background-color: rgba($lbry-teal-1, 0.3);
 
     strong {
       display: block;
@@ -457,9 +458,9 @@
 
   code {
     padding: 2px 5px;
-    background-color: $black;
+    background-color: $lbry-black;
     border-radius: 0.2rem;
-    color: $white;
+    color: $lbry-white;
     font-size: 0.8rem;
   }
 
diff --git a/app/sass/partials/_ecosystem.scss b/app/sass/partials/_ecosystem.scss
index e0d99e5..05869c1 100644
--- a/app/sass/partials/_ecosystem.scss
+++ b/app/sass/partials/_ecosystem.scss
@@ -96,7 +96,7 @@
           &::after {
             top: 0; right: -0.7rem;
 
-            color: rgba($gray, 0.3);
+            color: $lbry-gray-1;
             content: "/";
             font-style: italic;
             position: absolute;
@@ -172,7 +172,7 @@
     }
 
     &::before {
-      background-color: $white;
+      background-color: $lbry-white;
     }
 
     .__close {
@@ -207,18 +207,18 @@
 
   &.lbrycrd {
     &:not(.active)::before {
-      background-color: $red;
+      background-color: $lbry-red-3;
     }
 
     &.active::before {
-      border: 2px solid $red;
+      border: 2px solid $lbry-red-3;
     }
   }
 
   &.lbry {
     &:not(.active) {
       &::before {
-        background-color: $blue;
+        background-color: $lbry-blue-3;
       }
 
       h2::after {
@@ -227,14 +227,14 @@
     }
 
     &.active::before {
-      border: 2px solid $blue;
+      border: 2px solid $lbry-blue-3;
     }
   }
 
   &.applications {
     &:not(.active) {
       &::before {
-        background-color: $green;
+        background-color: $lbry-green-3;
       }
 
       h2::after {
@@ -243,7 +243,7 @@
     }
 
     &.active::before {
-      border: 2px solid $green;
+      border: 2px solid $lbry-green-3;
     }
   }
 }
@@ -256,7 +256,7 @@
 .ecosystem__module__piece {
   width: 80%; left: 10%;
 
-  background-color: $white;
+  background-color: $lbry-white;
   line-height: 2;
   position: relative;
 
@@ -277,7 +277,7 @@
   }
 
   &:not(.on):not(.active) {
-    color: rgba($black, 0.3);
+    color: $lbry-gray-1;
   }
 
   &:not(.active) {
@@ -313,7 +313,7 @@
   }
 
   &:not(.blue):not(.green):not(.red) {
-    border-color: rgba($gray, 0.3);
+    border-color: $lbry-gray-1;
   }
 
   &.blue,
@@ -325,18 +325,18 @@
   }
 
   &.blue {
-    background-color: rgba($blue, 0.025);
-    border-color: $blue;
+    background-color: rgba($lbry-blue-1, 0.05);
+    border-color: $lbry-blue-3;
   }
 
   &.green {
-    background-color: rgba($green, 0.025);
-    border-color: $green;
+    background-color: rgba($lbry-green-1, 0.05);
+    border-color: $lbry-green-3;
   }
 
   &.red {
-    background-color: rgba($red, 0.025);
-    border-color: $red;
+    background-color: rgba($lbry-red-1, 0.05);
+    border-color: $lbry-red-3;
   }
 }
 
@@ -353,7 +353,7 @@
 }
 
 .ecosystem__submodule__description__title {
-  color: rgba($black, 0.3);
+  color: $lbry-gray-4;
   letter-spacing: 0.1rem;
   text-transform: uppercase;
 }
@@ -377,7 +377,7 @@
     @include font-serif;
     top: 0.3rem; left: -3.4rem;
 
-    color: rgba($black, 0.3);
+    color: $lbry-gray-4;
     content: "back to";
     font-size: 0.8rem;
     font-style: italic;
@@ -388,7 +388,7 @@
     width: 2px; height: 100%;
     top: 0; right: 0;
 
-    background-color: rgba($black, 0.3);
+    background-color: $lbry-gray-1;
     content: "";
   }
 }
diff --git a/app/sass/partials/_email-subscribe.scss b/app/sass/partials/_email-subscribe.scss
index d10f48d..a65dfa2 100644
--- a/app/sass/partials/_email-subscribe.scss
+++ b/app/sass/partials/_email-subscribe.scss
@@ -1,5 +1,5 @@
 .newsletter-cta {
-  background-color: rgba($black, 0.2);
+  background-color: $lbry-gray-2;
   padding-top: 1rem;
   padding-bottom: 1rem;
   text-align: center;
@@ -43,7 +43,7 @@
 .newsletter-cta__input {
   height: 38px;
 
-  background-color: $white;
+  background-color: $lbry-white;
   font-size: 1rem;
   transition: border 0.2s;
 
@@ -57,31 +57,31 @@
   }
 
   &:not(:focus) {
-    border-top-color: $black;
-    border-left-color: $black;
+    border-top-color: $lbry-black;
+    border-left-color: $lbry-black;
 
     @media (min-width: 551px) {
       border-right-color: transparent;
-      border-bottom-color: $black;
+      border-bottom-color: $lbry-black;
     }
 
     @media (max-width: 550px) {
-      border-right-color: $black;
+      border-right-color: $lbry-black;
       border-bottom-color: transparent;
     }
   }
 
   &:focus {
-    border-top-color: mix($black, $teal, 20%);
-    border-left-color: mix($black, $teal, 20%);
+    border-top-color: $lbry-teal-5;
+    border-left-color: $lbry-teal-5;
 
     @media (min-width: 551px) {
       border-right-color: transparent;
-      border-bottom-color: mix($black, $teal, 20%);
+      border-bottom-color: $lbry-teal-5;
     }
 
     @media (max-width: 550px) {
-      border-right-color: mix($black, $teal, 20%);
+      border-right-color: $lbry-teal-5;
       border-bottom-color: transparent;
     }
   }
@@ -90,7 +90,7 @@
 .newsletter-cta__submit {
   @extend .__button-basic;
   @extend .__button-padding-vertical;
-  color: $white;
+  color: $lbry-white;
 
   @media (min-width: 551px) {
     width: 112px; height: 38px;
@@ -105,19 +105,19 @@
   }
 
   &:not(:hover) {
-    background-color: $black;
-    border-color: $black;
+    background-color: $lbry-black;
+    border-color: $lbry-black;
   }
 
   &:hover {
-    background-color: $teal;
-    border-color: mix($black, $teal, 20%);
+    background-color: $lbry-teal-3;
+    border-color: $lbry-teal-5;
   }
 }
 
 .newsletter-cta__message {
   @include clearfix;
-  color: $white;
+  color: $lbry-white;
   cursor: default;
   display: inline-block;
   font-size: 0.8rem;
@@ -128,10 +128,10 @@
   }
 
   &:not(.error) {
-    background-color: $teal;
+    background-color: $lbry-teal-3;
   }
 
   &.error {
-    background-color: $red;
+    background-color: $lbry-red-3;
   }
 }
diff --git a/app/sass/partials/_feature-links.scss b/app/sass/partials/_feature-links.scss
index 139c10c..3b9edc7 100644
--- a/app/sass/partials/_feature-links.scss
+++ b/app/sass/partials/_feature-links.scss
@@ -13,8 +13,8 @@ $width-feature-link: 320px;
 }
 
 .feature-link {
-  background-color: $white;
-  border: 1px solid rgba($black, 0.1);
+  background-color: $lbry-white;
+  border: 1px solid rgba($lbry-black, 0.1);
   border-radius: 3px;
   cursor: pointer;
   display: inline-block;
@@ -53,10 +53,10 @@ $width-feature-link: 320px;
   }
 
   &:hover {
-    box-shadow: 0 0 15px rgba($black, 0.15);
+    box-shadow: 0 0 15px $lbry-gray-1;
 
     .feature-link__title {
-      color: $teal;
+      color: $lbry-teal-3;
     }
   }
 }
@@ -75,11 +75,11 @@ $width-feature-link: 320px;
 .feature-link__title-inner {
   padding: 0.25rem 0.5rem;
 
-  background-color: $white;
-  border: 1px solid rgba($gray, 0.1);
+  background-color: $lbry-white;
+  border: 1px solid $lbry-gray-1;
   border-radius: 3px;
   box-decoration-break: clone;
-  box-shadow: 0 2px 5px rgba($black, 0.025);
+  box-shadow: 0 2px 5px rgba($lbry-gray-5, 0.1);
   display: inline-block;
 }
 
@@ -87,7 +87,7 @@ $width-feature-link: 320px;
   width: calc(100% + 2px); height: 100px;
   top: -1px; left: -1px;
 
-  background-color: $teal;
+  background-color: $lbry-teal-3;
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
   overflow: hidden;
diff --git a/app/sass/partials/_flash.scss b/app/sass/partials/_flash.scss
index 2602da2..db47e1f 100644
--- a/app/sass/partials/_flash.scss
+++ b/app/sass/partials/_flash.scss
@@ -17,8 +17,8 @@
   position: absolute;
 
   &:not(.error):not(.info):not(.warning) {
-    background-color: mix($white, $teal, 90%);
-    border-color: $teal;
+    background-color: $lbry-teal-1;
+    border-color: $lbry-teal-3;
   }
 
   &:not(.active) {
@@ -31,17 +31,17 @@
   }
 
   &.error {
-    background-color: mix($white, $red, 90%);
-    border-color: $red;
+    background-color: $lbry-red-1;
+    border-color: $lbry-red-3;
   }
 
   &.info {
-    background-color: mix($white, $gray, 90%);
-    border-color: $gray;
+    background-color: $lbry-gray-1;
+    border-color: $lbry-gray-3;
   }
 
   &.warning {
-    background-color: mix($white, $yellow, 90%);
-    border-color: $yellow;
+    background-color: $lbry-yellow-1;
+    border-color: $lbry-yellow-3;
   }
 }
diff --git a/app/sass/partials/_footer.scss b/app/sass/partials/_footer.scss
index afd7bba..78d1fe3 100644
--- a/app/sass/partials/_footer.scss
+++ b/app/sass/partials/_footer.scss
@@ -1,6 +1,6 @@
 .footer {
-  background-color: $black;
-  color: rgba($white, 0.15);
+  background-color: $lbry-black;
+  color: rgba($lbry-white, 0.15);
   font-size: 1rem;
   padding-right: env(safe-area-inset-right);
   padding-left: env(safe-area-inset-left);
@@ -11,7 +11,7 @@
       width: 3rem; height: 100%;
       right: 0; bottom: 0;
 
-      background-image: linear-gradient(90deg, rgba($black, 0), $black 50%, $black); // iOS Safari cannot handle `transparent`
+      background-image: linear-gradient(90deg, rgba($lbry-black, 0), $lbry-black 50%, $lbry-black); // iOS Safari cannot handle `transparent`
       content: "";
       position: absolute;
       z-index: 2;
@@ -64,11 +64,11 @@
     transition: color 0.2s;
 
     &:not(:hover) {
-      color: $white;
+      color: $lbry-white;
     }
 
     &:hover {
-      color: $teal;
+      color: $lbry-teal-3;
     }
   }
 }
diff --git a/app/sass/partials/_github-feed.scss b/app/sass/partials/_github-feed.scss
index b3f50fa..f9305c1 100644
--- a/app/sass/partials/_github-feed.scss
+++ b/app/sass/partials/_github-feed.scss
@@ -1,6 +1,6 @@
 .github-feed {
-  border-bottom: 1px solid rgba($black, 0.05);
-  border-left: 1px solid rgba($black, 0.05);
+  border-bottom: 1px solid $lbry-gray-1;
+  border-left: 1px solid $lbry-gray-1;
   font-size: 0.8rem;
   grid-area: github;
   position: relative;
@@ -56,13 +56,13 @@
       width: calc(100% - (1rem + 5%));
       top: 2.15rem; left: 0;
 
-      color: rgba($black, 0.045);
+      color: rgba($lbry-black, 0.045);
       font-size: 4rem;
       position: absolute;
     }
 
     @media (max-width: 1300px) {
-      color: $black;
+      color: $lbry-black;
     }
 
     @media (min-width: 901px) and (max-width: 1300px) {
@@ -123,16 +123,16 @@
 
   > p:first-of-type {
     @media (max-width: 700px) {
-      box-shadow: 0 2px 5px rgba($black, 0.025);
+      box-shadow: 0 2px 5px $lbry-gray-1;
     }
 
     code {
       padding: 0.2rem 0.5rem;
       top: -1px;
 
-      background-color: $black;
+      background-color: $lbry-black;
       border-radius: 3px;
-      color: $white;
+      color: $lbry-white;
       font-size: 80%;
       letter-spacing: 0.05rem;
       position: relative;
@@ -154,8 +154,8 @@
       width: 90%; padding: 1rem;
       top: -3.5rem; left: 5%;
 
-      background-color: $white;
-      border: 1px solid rgba($gray, 0.1);
+      background-color: $lbry-white;
+      border: 1px solid $lbry-gray-1;
       border-radius: 3px;
       position: relative;
       white-space: normal;
@@ -164,7 +164,7 @@
 }
 
 .github-feed__event__avatar {
-  border: 1px solid rgba($gray, 0.1);
+  border: 1px solid $lbry-gray-1;
   border-radius: 3px;
   object-fit: cover;
   object-position: center;
@@ -179,7 +179,7 @@
 }
 
 .github-feed__event__time {
-  color: $gray;
+  color: $lbry-gray-3;
   display: block;
 
   @media (max-width: 700px) {
diff --git a/app/sass/partials/_glossary.scss b/app/sass/partials/_glossary.scss
index e3302d7..9751c96 100644
--- a/app/sass/partials/_glossary.scss
+++ b/app/sass/partials/_glossary.scss
@@ -63,8 +63,8 @@
   width: 250px; height: calc(100vh - 4rem);
   top: 4rem; left: 0;
 
-  background-color: $white;
-  border-right: 1px solid rgba($gray, 0.3);
+  background-color: $lbry-white;
+  border-right: 1px solid $lbry-gray-2;
   font-size: 0.8rem; // TODO: Why was !important here?
   overflow-x: hidden;
   overflow-y: auto;
@@ -78,7 +78,7 @@
 }
 
 .component--glossary-toc-toggle {
-  background-color: mix($gray, $white, 30%);
+  background-color: $lbry-gray-1;
   font-size: 0.7rem;
   position: absolute;
   text-orientation: upright;
diff --git a/app/sass/partials/_mission-statement.scss b/app/sass/partials/_mission-statement.scss
index 817f9b3..c6a4ec2 100644
--- a/app/sass/partials/_mission-statement.scss
+++ b/app/sass/partials/_mission-statement.scss
@@ -1,8 +1,8 @@
 .component--mission-statement {
   padding: 1rem 1rem 1rem 1.25rem;
 
-  background-color: rgba($teal, 0.1);
-  border-left: 0.5rem solid $teal;
+  background-color: rgba($lbry-teal-1, 0.3);
+  border-left: 0.5rem solid $lbry-teal-3;
   line-height: 1.55;
   margin-bottom: 1.5rem;
   position: relative;
@@ -17,7 +17,7 @@
 }
 
 .component--mission-statement__title {
-  color: $teal;
+  color: $lbry-teal-3;
   display: block;
   letter-spacing: 0.025rem;
   text-transform: uppercase;
diff --git a/app/sass/partials/_modal.scss b/app/sass/partials/_modal.scss
index 192e7bf..e88d40a 100644
--- a/app/sass/partials/_modal.scss
+++ b/app/sass/partials/_modal.scss
@@ -3,7 +3,7 @@
   top: 0; right: 0;
   bottom: 0; left: 0;
 
-  background-color: rgba($black, 0.5);
+  background-color: rgba($lbry-black, 0.5);
   position: fixed;
   z-index: 10;
 
@@ -32,14 +32,14 @@
     }
 
     a {
-      color: $teal;
+      color: $lbry-teal-3;
     }
   }
 }
 
 .modal-wrap {
   padding: 2rem 1.5rem;
-  background-color: $white;
+  background-color: $lbry-white;
 
   @media (min-width: 501px) {
     width: 500px;
diff --git a/app/sass/partials/_navigation.scss b/app/sass/partials/_navigation.scss
index a12d060..8b96ee5 100644
--- a/app/sass/partials/_navigation.scss
+++ b/app/sass/partials/_navigation.scss
@@ -2,8 +2,8 @@
   width: 100%;
   top: 0; left: 0;
 
-  background-color: $white;
-  box-shadow: 0 1px 5px rgba($black, 0.1);
+  background-color: $lbry-white;
+  box-shadow: 0 1px 5px rgba($lbry-black, 0.1);
   padding-right: env(safe-area-inset-right);
   padding-left: env(safe-area-inset-left);
   position: fixed;
@@ -29,7 +29,7 @@
         width: 2rem; height: 4rem;
         top: 0; right: 0;
 
-        background-image: linear-gradient(90deg, rgba($white, 0), $white 50%, $white); // iOS Safari cannot handle `transparent`
+        background-image: linear-gradient(90deg, rgba($lbry-white, 0), $lbry-white 50%, $lbry-white); // iOS Safari cannot handle `transparent`
         content: "";
         position: fixed;
         z-index: 2;
@@ -70,7 +70,7 @@
       width: 100%; height: 3px;
       left: 0;
 
-      background-color: $teal;
+      background-color: $lbry-teal-3;
       content: "";
       position: absolute;
       transition: bottom 0.2s;
@@ -103,17 +103,17 @@
 
   &[href="http://localhost:8000"],
   &[href="https://lbry.io"] {
-    color: $white;
+    color: $lbry-white;
     margin-right: 0.5rem;
     padding-right: 1rem;
     padding-left: 1rem;
 
     &:not(:hover)::after {
-      background-color: $black;
+      background-color: $lbry-black;
     }
 
     &:hover::after {
-      background-color: $teal;
+      background-color: $lbry-teal-3;
     }
 
     &::after {
diff --git a/app/sass/partials/_pre.scss b/app/sass/partials/_pre.scss
index 98595dc..09d9312 100644
--- a/app/sass/partials/_pre.scss
+++ b/app/sass/partials/_pre.scss
@@ -9,7 +9,7 @@ pre {
   &:not([class]),
   &.language-text {
     background-color: #27283e;
-    color: $white;
+    color: $lbry-white;
   }
 
   &.language-yaml {
@@ -25,7 +25,7 @@ pre {
     }
 
     .punctuation {
-      color: $white;
+      color: $lbry-white;
     }
   }
 }
diff --git a/documents/contribute.md b/documents/contribute.md
index f70ddcf..8f0b421 100644
--- a/documents/contribute.md
+++ b/documents/contribute.md
@@ -1,6 +1,7 @@
 ---
 title: Contributor's Guide
 ---
+
 ## Welcome to LBRY!
 
 Interested in working on the LBRY protocol, an official LBRY app, or other LBRY infrastructure? Awesome! This guide will get you started.
diff --git a/documents/guides.md b/documents/guides.md
deleted file mode 100644
index 3d3d031..0000000
--- a/documents/guides.md
+++ /dev/null
@@ -1,29 +0,0 @@
----
-title: Quality Guides
----
-
-When contributing to this repo there are existing coding guidelines that you can find [here](/guides/css) (CSS) and [here](/guides/js) (JavaScript). However, here's a high-level overview:
-
-
-
-## CSS
-- Styles should never override - `:not` and media queries make this possible
-- **IDs do not belong in stylesheets**
-- Nesting should be a maximum of three levels deep
-- BEM is your friend
-- Nested includes should be at the top of rules
-- CSS parameters in alphabetical order, except for presentation styles
-
-
-
-## JS
-- Space indentation - Two spaces, makes reading code easy for humans
-- Double-quotes - Use single quotes within to avoid escaping
-- No unused variables - This one catches tons of bugs!
-- Semicolons protect you from yourself
-- Space after keyword - `if (condition) {}`
-- Space after function name - `function name (arg) { ... }`
-- No space in array bracket - `const arr = [1, 2, 3]`
-- Always space in block - `const obj = { foo: "bar" }`
-- Always `===` instead of `==` - Strict compares are consistent
-- No trailing commas
diff --git a/documents/resources.md b/documents/resources.md
index 42a3015..bd25cdd 100644
--- a/documents/resources.md
+++ b/documents/resources.md
@@ -2,7 +2,7 @@
 title: Resources
 ---
 
-<ResourcesLinkGrid />
+<ResourcesLinkGrid/>
 
 ## Additional Resources
 
diff --git a/package.json b/package.json
index 439e1cf..4e71306 100755
--- a/package.json
+++ b/package.json
@@ -2,6 +2,7 @@
   "author": "LBRY Team",
   "dependencies": {
     "@babel/polyfill": "^7.0.0",
+    "@lbry/color": "^1.0.1",
     "@octokit/rest": "^15.13.1",
     "app-root-path": "^2.1.0",
     "async": "^2.6.1",
@@ -57,11 +58,11 @@
     "@babel/preset-env": "^7.1.0",
     "@babel/register": "^7.0.0",
     "@inc/eslint-config": "^1.0.5",
-    "eslint": "^5.6.1",
-    "husky": "^1.1.1",
+    "eslint": "^5.7.0",
+    "husky": "^1.1.2",
     "nodemon": "^1.18.4",
     "npm-run-all": "^4.1.3",
-    "sass": "^1.14.1",
+    "sass": "^1.14.2",
     "sass-lint": "^1.12.1",
     "snazzy": "^8.0.0",
     "standardx": "^3.0.1",