diff --git a/src/components/asset-panel/asset-panel.css b/src/components/asset-panel/asset-panel.css
index 2d85da781..0cfb9a1c3 100644
--- a/src/components/asset-panel/asset-panel.css
+++ b/src/components/asset-panel/asset-panel.css
@@ -4,7 +4,7 @@
 .wrapper {
     display: flex;
     flex-grow: 1;
-    border: 1px solid $ui-pane-border;
+    border: 1px solid $ui-black-transparent;
     border-top-right-radius: $space;
     background: white;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -15,5 +15,5 @@
     display: flex;
     flex-grow: 1;
     flex-shrink: 1;
-    border-left: 1px solid $ui-pane-border;
+    border-left: 1px solid $ui-black-transparent;
 }
diff --git a/src/components/asset-panel/selector.css b/src/components/asset-panel/selector.css
index db9bca069..00aacef14 100644
--- a/src/components/asset-panel/selector.css
+++ b/src/components/asset-panel/selector.css
@@ -7,7 +7,7 @@
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    background: $ui-background-blue;
+    background: $ui-tertiary;
 }
 
 .new-buttons {
diff --git a/src/components/blocks/blocks.css b/src/components/blocks/blocks.css
index ee9ec8aeb..8b6205093 100644
--- a/src/components/blocks/blocks.css
+++ b/src/components/blocks/blocks.css
@@ -1,15 +1,13 @@
 @import "../../css/units.css";
 @import "../../css/colors.css";
 
-$border-style: 1px solid $ui-pane-border;
-
 .blocks :global(.injectionDiv){
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
-    border: $border-style;
+    border: 1px solid $ui-black-transparent;
     border-top-right-radius: $space;
 }
 
@@ -18,14 +16,14 @@ $border-style: 1px solid $ui-pane-border;
 }
 
 .blocks :global(.blocklyToolboxDiv) {
-    border-right: $border-style;
-    border-bottom: $border-style;
+    border-right: 1px solid $ui-black-transparent;
+    border-bottom: 1px solid $ui-black-transparent;
     box-sizing: content-box;
     height: calc(100% - 3.25rem) !important;
 }
 
 .blocks :global(.blocklyFlyout) {
-    border-right: $border-style;
+    border-right: 1px solid $ui-black-transparent;
     box-sizing: content-box;
 }
 
diff --git a/src/components/browser-modal/browser-modal.css b/src/components/browser-modal/browser-modal.css
index 0d3a2e35f..b93eb0db4 100644
--- a/src/components/browser-modal/browser-modal.css
+++ b/src/components/browser-modal/browser-modal.css
@@ -9,13 +9,13 @@
     right: 0;
     bottom: 0;
     z-index: 1000;
-    background-color: hsla(215, 100%, 65%, .9);
+    background-color: $ui-modal-overlay;
 }
 
 .modal-content {
     margin: 100px auto;
     outline: none;
-    border: .25rem solid hsla(0, 100%, 100%, .25);
+    border: .25rem solid $ui-white-transparent;
     padding: 0;
     border-radius: $space;
     user-select: none;
@@ -34,7 +34,7 @@
 }
 
 .body {
-    background: $ui-pane-gray;
+    background: $ui-white;
     padding: 1.5rem 2.25rem;
     text-align: center;
 }
diff --git a/src/components/close-button/close-button.css b/src/components/close-button/close-button.css
index 88ebb526e..072d5abff 100644
--- a/src/components/close-button/close-button.css
+++ b/src/components/close-button/close-button.css
@@ -7,7 +7,7 @@
     justify-content: center;
 
     overflow: hidden;  /* Mask the icon animation */
-    background-color: rgba(0, 0, 0, 0.1);
+    background-color: $ui-black-transparent;
     border-radius: 50%;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     user-select: none;
@@ -17,20 +17,20 @@
 
 .close-button.large:hover {
     transform: scale(1.1, 1.1);
-    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 0 0 4px $ui-black-transparent;
 }
 
 .small {
     width: 0.825rem;
     height: 0.825rem;
-    color: #FFF;
+    color: $ui-white;
     background-color: $motion-primary;
 }
 
 .large {
     width: 1.75rem;
     height: 1.75rem;
-    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0 0 2px $ui-black-transparent;
 }
 
 .close-icon {
diff --git a/src/components/coming-soon/coming-soon.css b/src/components/coming-soon/coming-soon.css
index 7c3bdeb14..db737e1c8 100644
--- a/src/components/coming-soon/coming-soon.css
+++ b/src/components/coming-soon/coming-soon.css
@@ -8,9 +8,9 @@
 
 .coming-soon {
     background-color: $data-primary !important;
-    border: 1px solid hsla(0, 0%, 0%, .1) !important;
+    border: 1px solid $ui-black-transparent) !important;
     border-radius: .25rem !important;
-    box-shadow: 0 0 .5rem hsla(0, 0%, 0%, .25) !important;
+    box-shadow: 0 0 .5rem $ui-black-transparent !important;
     padding: .75rem 1rem !important;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
     font-size: 1rem !important;
@@ -20,10 +20,10 @@
 
 .coming-soon:after {
     content: "";
-    border-top: 1px solid hsla(0, 0%, 0%, .1) !important;
+    border-top: 1px solid $ui-black-transparent !important;
     border-left: 0 !important;
     border-bottom: 0 !important;
-    border-right: 1px solid hsla(0, 0%, 0%, .1) !important;
+    border-right: 1px solid $ui-black-transparent !important;
     border-radius: .25rem;
     background-color: $data-primary !important;
     height: 1rem !important;
diff --git a/src/components/context-menu/context-menu.css b/src/components/context-menu/context-menu.css
index d74dc3720..fd1c28004 100644
--- a/src/components/context-menu/context-menu.css
+++ b/src/components/context-menu/context-menu.css
@@ -7,10 +7,10 @@
     margin: 2px 0 0; /* To keep the menu below the cursor comfortably */
     font-size: 0.85rem;
     text-align: left;
-    background-color: #fff;
-    border: 1px solid $ui-pane-border;
+    background-color: $ui-white;
+    border: 1px solid $ui-black-transparent;
     border-radius: calc($space / 2);
-    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
+    box-shadow: 0px 0px 5px 1px $ui-black-transparent;
     pointer-events: none;
     transition: opacity 0.2s ease;
     z-index: 100;
diff --git a/src/components/custom-procedures/custom-procedures.css b/src/components/custom-procedures/custom-procedures.css
index 6946bdb4c..6c8967a12 100644
--- a/src/components/custom-procedures/custom-procedures.css
+++ b/src/components/custom-procedures/custom-procedures.css
@@ -6,7 +6,7 @@
 }
 
 .body {
-    background: $ui-pane-gray;
+    background: $ui-white;
     padding: 1.5rem 2.25rem;
 }
 
@@ -25,7 +25,7 @@
 }
 
 .workspace :global(.blocklySvg) {
-    background-color: #E7EDF2;
+    background-color: $ui-primary;
 }
 
 /* Row of "card" buttons for modifying custom procedures */
@@ -36,7 +36,7 @@
 
 .option-card {
     background: white;
-    border: 2px solid $form-border;
+    border: 2px solid $ui-black-transparent;
     border-radius: $space;
     padding: calc($space * 2);
     text-align: center;
@@ -48,7 +48,7 @@
 
 .option-card:hover {
     border: 2px solid $motion-primary;
-    box-shadow: 0px 0px 0px 3px $motion-transparent;
+    box-shadow: 0px 0px 0px 4px $motion-transparent;
 }
 
 .option-card + .option-card {
@@ -77,7 +77,7 @@
 }
 
 .button-row button {
-    border: 1px solid $ui-pane-border;
+    border: 1px solid $ui-black-transparent;
     border-radius: 0.25rem;
     padding: 0.75rem 1rem;
     background: white;
diff --git a/src/components/feedback-form/feedback-form.css b/src/components/feedback-form/feedback-form.css
index ace3fcaac..5f1d7556f 100644
--- a/src/components/feedback-form/feedback-form.css
+++ b/src/components/feedback-form/feedback-form.css
@@ -12,13 +12,13 @@ $content-height: 450px;
     right: 0;
     bottom: 0;
     z-index: 1000;
-    background-color: hsla(215, 100%, 65%, .9);
+    background-color: $ui-modal-overlay;
 }
 
 .modal-content {
     margin: 100px auto;
     outline: none;
-    border: .25rem solid hsla(0, 100%, 100%, .25);
+    border: .25rem solid $ui-white-transparent;
     padding: 0;
     border-radius: $space;
     user-select: none;
@@ -31,7 +31,7 @@ $content-height: 450px;
     /* Need to repeat dimensions here to allow iframe scrolling for iOS */
     width: $content-width;
     height: $content-height;
-    background: $ui-pane-gray;
+    background: $ui-white;
 
     /* These properties needed to allow iframe scrolling for iOS */
     overflow-y: scroll;
diff --git a/src/components/filter/filter.css b/src/components/filter/filter.css
index fa8e072e1..a80fd4159 100644
--- a/src/components/filter/filter.css
+++ b/src/components/filter/filter.css
@@ -12,14 +12,14 @@
     flex-grow: 1;
 
     padding: 0.3rem 0.5rem;
-    background: rgba(0, 0, 0, 0.10);
-    border: 1px solid rgba(255, 255, 255, 0.10);
+    background: $ui-black-transparent;
+    border: 1px solid $ui-white-transparent;
     border-radius: 10rem;
     user-select: none;
 }
 
 .filter:hover {
-    background: rgba(0, 0, 0, 0.15);
+    background: $ui-black-transparent;
 }
 
 .filter-icon {
diff --git a/src/components/forms/input.css b/src/components/forms/input.css
index 5256e770e..8bcff393d 100644
--- a/src/components/forms/input.css
+++ b/src/components/forms/input.css
@@ -12,7 +12,7 @@
 
     border-width: 1px;
     border-style: solid;
-    border-color: $form-border;
+    border-color: $ui-black-transparent;
     border-radius: 2rem;
 
     outline: none;
@@ -32,8 +32,8 @@
 }
 
 .input-form:focus {
-    border-color: #4c97ff;
-    box-shadow: 0 0 0 0.2rem $motion-transparent;
+    border-color: $motion-primary;
+    box-shadow: 0 0 0 0.25rem $motion-transparent;
 }
 
 .input-small {
diff --git a/src/components/forms/label.css b/src/components/forms/label.css
index 5eb280b87..8ec6283bf 100644
--- a/src/components/forms/label.css
+++ b/src/components/forms/label.css
@@ -9,7 +9,7 @@
 
 .input-label, .input-label-secondary {
     font-size: 0.625rem;
-    margin-right: calc($space / 2);
+    margin-right: .5rem;
     user-select: none;
     cursor: default;
 }
diff --git a/src/components/green-flag/green-flag.css b/src/components/green-flag/green-flag.css
index 35ba29726..f9ab904f9 100644
--- a/src/components/green-flag/green-flag.css
+++ b/src/components/green-flag/green-flag.css
@@ -1,3 +1,5 @@
+@import "../../css/colors.css";
+
 .green-flag {
     box-sizing: content-box;
     width: 1.25rem;
@@ -18,5 +20,5 @@
 }
 
 .green-flag.is-active {
-    background-color: rgba(0, 0, 0, 0.1);
+    background-color: $motion-transparent;
 }
diff --git a/src/components/gui/gui.css b/src/components/gui/gui.css
index fa6c4ce1a..80e736039 100644
--- a/src/components/gui/gui.css
+++ b/src/components/gui/gui.css
@@ -7,7 +7,7 @@
 
 .body-wrapper {
     height: calc(100% - $menu-bar-height);
-    background-color: $ui-background-blue;
+    background-color: $ui-primary;
 }
 
 .flex-wrapper {
@@ -60,13 +60,13 @@
     margin-left: -0.5rem;
 
     border-radius: 1rem 1rem 0 0;
-    border: $ui-pane-border 1px solid;
+    border: 1px solid $ui-black-transparent;
 
-    padding: 0.125rem 1rem 0;
-    font-size: 0.7rem;
+    padding: 0.125rem 1.25rem 0;
+    font-size: 0.75rem;
 
-    background-color: #F6F8FA;
-    color: #9AA1B5;
+    background-color: $ui-tertiary;
+    color: $text-primary-transparent;
 
     display: flex;
     justify-content: center;
@@ -89,7 +89,7 @@
 
 .tab.is-selected {
     color: $motion-primary;
-    background-color: #FFFFFF;
+    background-color: $ui-white;
     z-index: 4; /* Make sure selected is always above */
 }
 
@@ -110,7 +110,7 @@
 .tab.is-selected:focus {
     outline: none;
     box-shadow: none;
-    border-color: $ui-pane-border;
+    border-color: $ui-black-transparent;
 }
 
 .tab.is-selected:focus:after {
diff --git a/src/components/import-modal/import-modal.css b/src/components/import-modal/import-modal.css
index b794fd753..93480429b 100644
--- a/src/components/import-modal/import-modal.css
+++ b/src/components/import-modal/import-modal.css
@@ -9,13 +9,13 @@
     right: 0;
     bottom: 0;
     z-index: 1000;
-    background-color: hsla(215, 100%, 65%, .9);
+    background-color: $ui-modal-overlay;
 }
 
 .modal-content {
     margin: 100px auto;
     outline: none;
-    border: .25rem solid hsla(0, 100%, 100%, .25);
+    border: .25rem solid $ui-white-transparent;
     padding: 0;
     border-radius: $space;
     user-select: none;
@@ -44,7 +44,7 @@ $sides: 20rem;
 
     box-sizing: border-box;
     width: 100%;
-    background-color: $import-primary;
+    background-color: $pen-primary;
 }
 
 .header-item {
@@ -82,7 +82,7 @@ $sides: 20rem;
 }
 
 .body {
-    background: $ui-pane-gray;
+    background: $ui-white;
     padding: 1.5rem 2.25rem;
     text-align: center;
 }
@@ -112,7 +112,7 @@ $sides: 20rem;
     width: 100%;
     padding: 0 1rem;
     height: 3rem;
-    color: #6b6b6b;
+    color: $text-primary;
     font-size: .875rem;
     outline: none;
     border: none;
@@ -120,7 +120,7 @@ $sides: 20rem;
 
 .input-row input::placeholder {
     font-style: italic;
-    color: rgba(87,94,117,0.5);
+    color: $text-primary-transparent;
 }
 
 .input-row button {
@@ -128,12 +128,12 @@ $sides: 20rem;
     font-weight: bold;
     font-size: .875rem;
     cursor: pointer;
-    border: 0px solid $import-primary;
+    border: 0px solid $pen-primary;
     outline: none;
 }
 
 .input-row button.ok-button {
-    background: $import-primary;
+    background: $pen-primary;
     color: white;
 }
 
diff --git a/src/components/language-selector/language-selector.css b/src/components/language-selector/language-selector.css
index bae30cdd3..5da79cf25 100644
--- a/src/components/language-selector/language-selector.css
+++ b/src/components/language-selector/language-selector.css
@@ -19,7 +19,7 @@
 .language-select {
     width: 100%;
     height: 1.85rem;
-    border: 1px solid #4c97ff;
+    border: 1px solid $motion-primary;
     user-select: none;
     outline: none;
     background: rgba(255, 255, 255, 0.5);
diff --git a/src/components/library-item/library-item.css b/src/components/library-item/library-item.css
index bf690872d..f8874e0c4 100644
--- a/src/components/library-item/library-item.css
+++ b/src/components/library-item/library-item.css
@@ -16,7 +16,7 @@
     background: white;
     border-width: 2px;
     border-style: solid;
-    border-color: #e9eef2;
+    border-color: $ui-black-transparent;
     border-radius: $space;
     text-align: center;
     cursor: pointer;
@@ -24,7 +24,7 @@
 
 .library-item:hover {
     border-width: 2px;
-    border-color: #1dacf4;
+    border-color: $motion-primary;
 }
 
 .disabled {
@@ -33,7 +33,7 @@
 }
 
 .disabled:hover {
-    border-color: #e9eef2;
+    border-color: $ui-black-transparent;
 }
 
 .library-item-image-container-wrapper {
@@ -105,5 +105,5 @@
     padding: .5rem 1rem;
     font-size: .875rem;
     font-weight: bold;
-    color: #FFF;
+    color: $ui-white;
 }
diff --git a/src/components/library/library.css b/src/components/library/library.css
index f89414550..8eb86eec0 100644
--- a/src/components/library/library.css
+++ b/src/components/library/library.css
@@ -22,7 +22,7 @@
     display: flex;
     justify-content: flex-start;
     align-content: flex-start;
-    background: $ui-pane-gray;
+    background: $ui-secondary;
     flex-grow: 1;
     flex-wrap: wrap;
     overflow-y: auto;
diff --git a/src/components/loupe/loupe.css b/src/components/loupe/loupe.css
index d0d708c0d..bdc1284c4 100644
--- a/src/components/loupe/loupe.css
+++ b/src/components/loupe/loupe.css
@@ -1,5 +1,7 @@
+@import "../../css/colors.css";
+
 .color-picker {
     position: absolute;
     border-radius: 100%;
-    border: 1px solid #222;
+    border: 4px solid $ui-black-transparent;
 }
diff --git a/src/components/menu-bar/menu-bar.css b/src/components/menu-bar/menu-bar.css
index 7e59dd4ef..00a5ed280 100644
--- a/src/components/menu-bar/menu-bar.css
+++ b/src/components/menu-bar/menu-bar.css
@@ -27,7 +27,7 @@
     font-size: .75rem;
     font-weight: bold;
     background-color: $motion-primary;
-    color: white;
+    color: $ui-white;
 }
 
 .main-menu {
@@ -55,7 +55,7 @@
     padding: 0 0.25rem;
     cursor: pointer;
     text-decoration: none;
-    color: #fff;
+    color: $ui-white;
     user-select: none;
     align-self: center;
 }
@@ -71,19 +71,19 @@
 }
 
 .feedback-button {
-    background-color: #FFF;
+    background-color: $ui-white;
     color: $motion-primary;
     height: 34px;
 }
 
 .divider {
-    border-right: 1px dashed $menubar-gray;
+    border-right: 1px dashed $ui-black-transparent;
     margin: 0 .5rem;
     height: 34px;
 }
 
 .title-field {
-    border: 1px dashed $menubar-gray;
+    border: 1px dashed $ui-black-transparent;
     border-radius: .25rem;
     width: 12rem;
     height: 34px;
@@ -93,20 +93,20 @@
 
 .title-field,
 .title-field::placeholder {
-    color: #fff;
+    color: $ui-white;
     font-weight: bold;
     font-size: .8rem;
 }
 
 .share-button {
-    background: #FFAB19;
+    background: $data-primary;
     height: 32px;
-    box-shadow: 0 0 0 1px rgba(0,0,0,.1);
+    box-shadow: 0 0 0 1px $ui-black-transparent;
 }
 
 .community-button {
     height: 32px;
-    box-shadow: 0 0 0 1px rgba(0,0,0,.1);
+    box-shadow: 0 0 0 1px $ui-black-transparent;
 }
 
 .community-button-icon {
diff --git a/src/components/modal/modal.css b/src/components/modal/modal.css
index 6b28f8b2e..9ece50786 100644
--- a/src/components/modal/modal.css
+++ b/src/components/modal/modal.css
@@ -8,19 +8,19 @@
     right: 0;
     bottom: 0;
     z-index: 1000;
-    background-color: rgba(0, 0, 0, .75);
+    background-color: $ui-modal-overlay;
 }
 
 .modal-content {
     margin: 100px auto;
     outline: none;
-    border: 3px solid rgb(126, 133, 151);
+    border: 4px solid $ui-white-transparent;
     padding: 0;
     border-radius: $space;
     user-select: none;
 
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    color: #5d647a;
+    color: $text-primary;
     overflow: hidden;
 }
 
@@ -54,7 +54,7 @@ $sides: 20rem;
     align-items: center;
     padding: 1rem;
     text-decoration: none;
-    color: white;
+    color: $ui-white;
     user-select: none;
 }
 
diff --git a/src/components/monitor/monitor.css b/src/components/monitor/monitor.css
index d5941abc7..97db1ec2c 100644
--- a/src/components/monitor/monitor.css
+++ b/src/components/monitor/monitor.css
@@ -4,9 +4,9 @@
 .monitor {
     position: absolute;
     padding: 3px;
-    background: $ui-pane-gray;
+    background: $ui-primary;
     z-index: 100;
-    border: 1px solid $ui-pane-border;
+    border: 1px solid $ui-black-transparent;
     border-radius: calc($space / 2);
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: 0.75rem;
diff --git a/src/components/preview-modal/preview-modal.css b/src/components/preview-modal/preview-modal.css
index c6e5037e8..837ed92cf 100644
--- a/src/components/preview-modal/preview-modal.css
+++ b/src/components/preview-modal/preview-modal.css
@@ -9,13 +9,13 @@
     right: 0;
     bottom: 0;
     z-index: 1000;
-    background-color: hsla(215, 100%, 65%, .9);
+    background-color: $ui-modal-overlay;
 }
 
 .modal-content {
     margin: 100px auto;
     outline: none;
-    border: .25rem solid hsla(0, 100%, 100%, .25);
+    border: .25rem solid $ui-white-transparent;
     padding: 0;
     border-radius: $space;
     user-select: none;
@@ -34,7 +34,7 @@
 }
 
 .body {
-    background: $ui-pane-gray;
+    background: $ui-white;
     padding: 1.5rem 2.25rem;
     text-align: center;
 }
@@ -68,8 +68,8 @@
 }
 
 .button-row button.view-project-button {
-    background: $import-primary;
-    border-color: $import-primary;
+    background: $pen-primary;
+    border-color: $pen-primary;
     color: white;
 }
 
diff --git a/src/components/prompt/prompt.css b/src/components/prompt/prompt.css
index aa35f1490..34a8f5a21 100644
--- a/src/components/prompt/prompt.css
+++ b/src/components/prompt/prompt.css
@@ -6,7 +6,7 @@
 }
 
 .body {
-    background: $ui-pane-gray;
+    background: $ui-white;
     padding: 1.5rem 2.25rem;
 }
 
@@ -18,11 +18,11 @@
 .input {
     margin-bottom: 1.5rem;
     width: 100%;
-    border: 1px solid rgba(0,0,0,.1);
+    border: 1px solid $ui-black-transparent;
     border-radius: 5px;
     padding: 0 1rem;
     height: 3rem;
-    color: #6b6b6b;
+    color: $text-primary-transparent;
     font-size: .875rem;
 }
 
@@ -35,7 +35,7 @@
     padding: 0.75rem 1rem;
     border-radius: 0.25rem;
     background: white;
-    border: 1px solid $ui-pane-border;
+    border: 1px solid $ui-black-transparent;
     font-weight: 600;
     font-size: 0.85rem;
 }
diff --git a/src/components/question/question.css b/src/components/question/question.css
index 7c6e672a9..ad5e748e6 100644
--- a/src/components/question/question.css
+++ b/src/components/question/question.css
@@ -10,7 +10,7 @@
 
 .question-container {
     margin: $space;
-    border: 1px solid $form-border;
+    border: 1px solid $ui-black-transparent;
     border-radius: $space;
     border-width: 2px;
     padding: 1rem;
diff --git a/src/components/record-modal/record-modal.css b/src/components/record-modal/record-modal.css
index 9a750fd4b..79ce9c606 100644
--- a/src/components/record-modal/record-modal.css
+++ b/src/components/record-modal/record-modal.css
@@ -6,7 +6,7 @@
 }
 
 .body {
-    background: white;
+    background: $ui-white;
     padding: 1.5rem 2.25rem;
 }
 
@@ -16,8 +16,8 @@
 }
 
 .meter-container, .waveform-container {
-    background: $ui-pane-gray;
-    border: 1px solid $ui-pane-border;
+    background: $ui-primary;
+    border: 1px solid $ui-black-transparent;
     border-radius: 5px;
     padding: 3px;
 
@@ -84,7 +84,7 @@
     padding: 0.75rem 1rem;
     border-radius: 0.25rem;
     background: white;
-    border: 1px solid $ui-pane-border;
+    border: 1px solid $ui-black-transparent;
     font-weight: 600;
     font-size: 0.85rem;
     color: $motion-primary;
diff --git a/src/components/sound-editor/sound-editor.css b/src/components/sound-editor/sound-editor.css
index 00cf9cbfd..f47a67ca9 100644
--- a/src/components/sound-editor/sound-editor.css
+++ b/src/components/sound-editor/sound-editor.css
@@ -29,7 +29,7 @@
 
 .input-group {
     padding-right: calc(2 * $space);
-    border-right: 1px dashed $ui-pane-border;
+    border-right: 1px dashed $ui-black-transparent;
 }
 
 .waveform-container {
@@ -41,7 +41,7 @@
     position: relative;
 
     background: hsla(300, 53%, 60%, 0.15);
-    border: 1px solid $ui-pane-border;
+    border: 1px solid $ui-black-transparent;
     border-radius: 5px;
     padding: 3px;
 }
@@ -54,7 +54,7 @@ $border-radius: 0.25rem;
     outline: none;
     background: white;
     border-radius: $border-radius;
-    border: 1px solid #ddd;
+    border: 1px solid $ui-black-transparent;
     cursor: pointer;
     font-size: 0.85rem;
     transition: 0.2s;
@@ -73,7 +73,7 @@ $border-radius: 0.25rem;
     outline: none;
     background: white;
     border-radius: 100%;
-    border: 1px solid $ui-pane-border;
+    border: 1px solid $ui-black-transparent;
     cursor: pointer;
     padding: 0.75rem;
 }
@@ -135,7 +135,7 @@ $border-radius: 0.25rem;
 }
 
 .button-group .button:first-of-type {
-    border-left: 1px solid #ddd;
+    border-left: 1px solid $ui-black-transparent;
     border-top-left-radius: $border-radius;
     border-bottom-left-radius: $border-radius;
 }
diff --git a/src/components/sprite-info/sprite-info.css b/src/components/sprite-info/sprite-info.css
index 0ac55d25b..ceb9e9ca5 100644
--- a/src/components/sprite-info/sprite-info.css
+++ b/src/components/sprite-info/sprite-info.css
@@ -9,7 +9,7 @@
     color: $text-primary;
     border-top-left-radius: $space;
     border-top-right-radius: $space;
-    border-bottom: 1px solid #eaeaea;
+    border-bottom: 1px solid $ui-black-transparent;
 }
 
 .row {
@@ -57,28 +57,28 @@
 }
 
 .radio-left {
-    border: 1px solid $form-border;
+    border: 1px solid $ui-black-transparent;
     border-top-left-radius: $form-radius;
     border-bottom-left-radius: $form-radius;
 }
 
 .radio-left:focus {
-    border-color: #4c97ff;
-    box-shadow: inset 0 0 0 -2px rgba(0, 0, 0, 0.1);
+    border-color: $motion-primary;
+    box-shadow: inset 0 0 0 -2px $ui-black-transparent;
 }
 
 .radio-right {
-    border-bottom: 1px solid $form-border;
-    border-top: 1px solid $form-border;
-    border-right: 1px solid $form-border;
-    border-left: 1px solid $form-border;
+    border-bottom: 1px solid $ui-black-transparent;
+    border-top: 1px solid $ui-black-transparent;
+    border-right: 1px solid $ui-black-transparent;
+    border-left: 1px solid $ui-black-transparent;
     border-top-right-radius: $form-radius;
     border-bottom-right-radius: $form-radius;
 }
 
 .radio-right:focus {
-    border-color: #4c97ff;
-    box-shadow: inset 0 0 0 -2px rgba(0, 0, 0, 0.1);
+    border-color: $motion-primary;
+    box-shadow: inset 0 0 0 -2px $ui-black-transparent;
 }
 
 .icon {
@@ -90,14 +90,14 @@
 .rotation-select {
     width: 100%;
     height: 1.85rem;
-    border: 1px solid $form-border;
+    border: 1px solid $ui-black-transparent;
     user-select: none;
     outline: none;
 }
 
 .rotation-select:focus {
-    border-color: #4c97ff;
-    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+    border-color: $motion-primary;
+    box-shadow: inset 0 0 0 1px $ui-black-transparent);
 }
 
 .larger-input input {
diff --git a/src/components/sprite-selector-item/sprite-selector-item.css b/src/components/sprite-selector-item/sprite-selector-item.css
index a0880a518..8567d1352 100644
--- a/src/components/sprite-selector-item/sprite-selector-item.css
+++ b/src/components/sprite-selector-item/sprite-selector-item.css
@@ -11,10 +11,10 @@
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: 0.8rem;
     background: white;
-    color: #5d647a;
+    color: $text-primary;
     border-width: 2px;
     border-style: solid;
-    border-color: #e9eef2;
+    border-color: $ui-black-transparent;
     border-radius: $space;
     text-align: center;
     cursor: pointer;
@@ -23,7 +23,7 @@
 
 .sprite-selector-item.is-selected {
     border: 2px solid $motion-primary;
-    box-shadow: 0px 0px 0px 3px $motion-transparent;
+    box-shadow: 0px 0px 0px 4px $motion-transparent;
 }
 
 .sprite-selector-item:hover {
diff --git a/src/components/sprite-selector/sprite-selector.css b/src/components/sprite-selector/sprite-selector.css
index ec5cfee2b..97cc42c38 100644
--- a/src/components/sprite-selector/sprite-selector.css
+++ b/src/components/sprite-selector/sprite-selector.css
@@ -1,3 +1,4 @@
+@import "../../css/colors.css";
 @import "../../css/units.css";
 
 .sprite-selector {
@@ -5,10 +6,10 @@
     position: relative;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     margin-right: calc($space / 2);
-    background-color: #f9f9f9;
+    background-color: $ui-secondary;
     border-top-right-radius: $space;
     border-top-left-radius: $space;
-    border-color: #dbdbdb;
+    border-color: $ui-black-transparent;
     border-width: 1px;
     border-style: solid;
     border-bottom: 0;
diff --git a/src/components/stage-header/stage-header.css b/src/components/stage-header/stage-header.css
index 614852308..b1cb5569a 100644
--- a/src/components/stage-header/stage-header.css
+++ b/src/components/stage-header/stage-header.css
@@ -35,12 +35,12 @@
 
 .stage-button {
     display: block;
-    border: 1px solid $ui-pane-border;
+    border: 1px solid $ui-black-transparent;
     border-radius: .25rem;
     box-sizing: content-box;
     width: 1.25rem;
     height: 1.25rem;
-    background: #FFF;
+    background: $ui-white;
     padding: 0.375rem;
     user-select: none;
     cursor: pointer;
diff --git a/src/components/stage-selector/stage-selector.css b/src/components/stage-selector/stage-selector.css
index 7b76457f8..3fd0342fa 100644
--- a/src/components/stage-selector/stage-selector.css
+++ b/src/components/stage-selector/stage-selector.css
@@ -10,11 +10,11 @@ $header-height: calc($stage-menu-height - 2px);
     position: relative; /* For the add backdrop button */
     flex-grow: 1;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    background-color: #fff;
+    background-color: $ui-white;
     color: $text-primary;
     border-top-left-radius: $space;
     border-top-right-radius: $space;
-    border-color: #dbdbdb;
+    border-color: $ui-black-transparent;
     border-width: 1px;
     border-style: solid;
     border-bottom: 0;
@@ -24,7 +24,7 @@ $header-height: calc($stage-menu-height - 2px);
 
 .stage-selector.is-selected {
     border-color: $motion-primary;
-    box-shadow: 0px 0px 0px 3px $motion-transparent;
+    box-shadow: 0px 0px 0px 4px $motion-transparent;
 }
 
 .stage-selector:hover {
@@ -41,7 +41,7 @@ $header-height: calc($stage-menu-height - 2px);
     color: $text-primary;
     border-top-left-radius: $space;
     border-top-right-radius: $space;
-    border-bottom: 1px solid #eaeaea;
+    border-bottom: 1px solid $ui-black-transparent;
     width: 100%;
 }
 
@@ -72,7 +72,7 @@ $header-height: calc($stage-menu-height - 2px);
     display: block;
     width: 100%;
     user-select: none;
-    border: 1px solid rgba(0,0,0,.1);
+    border-bottom: 1px solid $ui-black-transparent;
 }
 
 .add-button {
diff --git a/src/components/stage/stage.css b/src/components/stage/stage.css
index 8188751d1..dfce6ba24 100644
--- a/src/components/stage/stage.css
+++ b/src/components/stage/stage.css
@@ -18,7 +18,7 @@
 }
 
 .color-picker-background {
-    position: absolute;;
+    position: absolute;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.55);
@@ -31,7 +31,7 @@
 .stage-wrapper {
     position: relative;
     border-radius: $space;
-    border: 1px solid $ui-pane-border;
+    border: 1px solid $ui-black-transparent;
     /* Keep the canvas inside the border radius */
     overflow: hidden;
 }
@@ -43,7 +43,7 @@
     right: 0;
     bottom: 0;
     z-index: 5000;
-    background-color: rgba(255, 255, 255, 1);
+    background-color: $ui-white;
 }
 
 .stage-overlay-content {
diff --git a/src/components/webgl-modal/webgl-modal.css b/src/components/webgl-modal/webgl-modal.css
index 3fd1a1208..334ef8f68 100644
--- a/src/components/webgl-modal/webgl-modal.css
+++ b/src/components/webgl-modal/webgl-modal.css
@@ -9,13 +9,13 @@
     right: 0;
     bottom: 0;
     z-index: 1000;
-    background-color: hsla(215, 100%, 65%, .9);
+    background-color: $ui-modal-overlay;
 }
 
 .modal-content {
     margin: 100px auto;
     outline: none;
-    border: .25rem solid hsla(0, 100%, 100%, .25);
+    border: .25rem solid $ui-white-transparent;
     padding: 0;
     border-radius: $space;
     user-select: none;
@@ -34,7 +34,7 @@
 }
 
 .body {
-    background: $ui-pane-gray;
+    background: $ui-white;
     padding: 1.5rem 2.25rem;
     text-align: center;
 }
diff --git a/src/css/colors.css b/src/css/colors.css
index b46bc50bf..8dbc51ecd 100644
--- a/src/css/colors.css
+++ b/src/css/colors.css
@@ -1,29 +1,29 @@
-$ui-pane-border: #D9D9D9;
-$ui-pane-gray: #F9F9F9;
-$ui-background-blue: #e8edf1;
+$ui-primary: hsla(215, 100%, 95%, 1); /* #E5F0FF */
+$ui-secondary: hsla(215, 75%, 95%, 1); /* #E9F1FC */
+$ui-tertiary: hsla(215, 50%, 90%, 1); /* #D9E3F2 */
 
-$text-primary: #575e75;
+$ui-modal-overlay: hsla(215, 100%, 65%, 0.9); /* 90% transparent version of motion-primary */
 
-$menubar-gray: rgba(0,0,0,0.25);
+$ui-white: hsla(0, 100%, 100%, 1); /* #FFFFFF */
+$ui-white-transparent: hsla(0, 100%, 100%, 0.25); /* 25% transparent version of ui-white */
 
-$motion-primary: #4C97FF;
-$motion-tertiary: #3373CC;
-$motion-transparent: hsla(215, 100%, 65%, 0.20);
+$ui-black-transparent: hsla(0, 0%, 0%, 0.15); /* 15% transparent version of black */
 
-$red-primary: #FF661A;
-$red-tertiary: #E64D00;
+$text-primary: hsla(225, 15%, 40%, 1); /* #575E75 */
+$text-primary-transparent: hsla(225, 15%, 40%, 0.75);
 
-$share-orange: #FFAB19;
+$motion-primary: hsla(215, 100%, 65%, 1); /* #4C97FF */
+$motion-tertiary: hsla(215, 60%, 50%, 1); /* #3373CC */
+$motion-transparent: hsla(215, 100%, 65%, 0.35); /* 35% transparent version of motion-primary */
 
-$sound-primary: #CF63CF;
-$sound-tertiary: #A63FA6;
+$red-primary: hsla(20, 100%, 55%, 1); /* #FF661A */
+$red-tertiary: hsla(20, 100%, 45%, 1); /* #E64D00 */
 
-$control-primary: #FFAB19;
+$sound-primary: hsla(300, 53%, 60%, 1); /* #CF63CF */
+$sound-tertiary: hsla(300, 48%, 50%, 1); /* #BD42BD */
 
-$data-primary: #FF8C1A;
+$control-primary: hsla(38, 100%, 55%, 1); /* #FFAB19 */
 
-$pen-primary: #11B581;
+$data-primary: hsla(30, 100%, 55%, 1); /* #FF8C1A */
 
-$form-border: #E9EEF2;
-
-$import-primary: #0FBD8C;
+$pen-primary: hsla(163, 85%, 40%, 1); /* #0FBD8C */