diff --git a/Dashboard.js b/Dashboard.js
index 6ca3fdf22..4b9ec3d35 100644
--- a/Dashboard.js
+++ b/Dashboard.js
@@ -1,5 +1,13 @@
 
 
+
+/* User Interface Colors */
+
+UI_COLOR = {
+    DARK: "48, 48, 54",
+    LIGHT: "234, 226, 222"
+};
+
 /* Callbacks default responses. */
 
 let GLOBAL = {};
diff --git a/Spaces/BottomSpace.js b/Spaces/BottomSpace.js
index a958e8300..dedb8b6ed 100644
--- a/Spaces/BottomSpace.js
+++ b/Spaces/BottomSpace.js
@@ -67,7 +67,7 @@ function newBottomSpace() {
         browserCanvasContext.beginPath();
 
         browserCanvasContext.rect(zeroPoint.x, zeroPoint.y + breakpointsHeight, zeroPoint.x + thisObject.container.frame.width, zeroPoint.y + thisObject.container.frame.height - breakpointsHeight);
-        browserCanvasContext.fillStyle = 'rgba(0, 0, 0, ' + opacity + ')';
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK +  ', ' + opacity + ')';
 
         browserCanvasContext.closePath();
 
diff --git a/Spaces/TopSpace.js b/Spaces/TopSpace.js
index 14ff0f144..2c7d464ee 100644
--- a/Spaces/TopSpace.js
+++ b/Spaces/TopSpace.js
@@ -107,7 +107,7 @@ function newTopSpace() {
         browserCanvasContext.beginPath();
 
         browserCanvasContext.rect(0, 0, thisObject.container.frame.width, thisObject.container.frame.height);
-        browserCanvasContext.fillStyle = 'rgba(0, 0, 0, ' + opacity + ')';
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + opacity + ')';
 
         browserCanvasContext.closePath();