diff --git a/app/javascript/styles/custom.scss b/app/javascript/styles/custom.scss
index 1f2be7bf5..503c5b94d 100644
--- a/app/javascript/styles/custom.scss
+++ b/app/javascript/styles/custom.scss
@@ -1,2 +1,24 @@
 @import 'large_center';
+// custom sheet made on https://www.cipherbliss.com
+// Commonly used web colors
+$black: #fff;            // Black
+$white: #000;            // White
+$success-green: #799fbd !default;    // Padua
+$error-red: #a654d4 !default;        // Cerise
+$warning-red: #528dc8 !default;      // Sunset Orange
+$gold-star: #ec8400 !default;        // Dark Goldenrod
+
+// User Interface Colors
+$ui-base-color: #313644;  // Midnight Express
+$ui-base-lighter-color: #bdd2d6 ;
+$ui-primary-color:  #4e4eff; // Echo Blue
+$ui-secondary-color:  #f4d3ff; // Pattens Blue
+$ui-highlight-color:  #b16fd1; // Summer Sky
+
+// Variables for components
+$media-modal-media-max-width: 100%;
+// put margins on top and bottom of image to avoid the screen covered by image.
+$media-modal-media-max-height: 80%;
+
+// then we import the rest of the world
 @import 'application';