diff --git a/app/assets/stylesheets/shared_styles/constants/colors.scss b/app/assets/stylesheets/shared_styles/constants/colors.scss
index 77882664b..4b7cefcb8 100644
--- a/app/assets/stylesheets/shared_styles/constants/colors.scss
+++ b/app/assets/stylesheets/shared_styles/constants/colors.scss
@@ -62,3 +62,53 @@ $brand-light-blue: $brand-focus-light;
 
 // This color was removed from constants, but it is still in use for DD hover. Need it for button in DD
 $color-dd-hover: #f5f5f5;
+
+// pure css variables
+:root {
+  // main colors
+  --sn-white: #FFFFFF;
+  --sn-super-light-grey: #F9F9F9;
+  --sn-light-grey: #EAECF0;
+  --sn-sleepy-grey: #EAECF0;
+  --sn-grey: #98A2B3;
+  --sn-dark-grey: #475467;
+  --sn-black: #1D2939;
+  --sn-blue: #104DA9;
+  --sn-science-blue: #3B99FD;
+  --sn-super-light-blue: #F0F8FF;
+  --sn-blue-hover: #2D5FAA;
+  --sn-science-blue-hover: #79B4F3;
+
+  // alert colors
+  --sn-alert-green: #5EC66F;
+  --sn-alert-violet: #6F2DC1;
+  --sn-alert-brittlebush: #E9A845;
+  --sn-alert-passion: #DF3562;
+  --sn-alert-turqoise: #46C3C8;
+  --sn-alert-bloo: #3070ED;
+
+  // disabled alert colors
+  --sn-alert-blue-disabled: #87A6D4;
+  --sn-alert-green-disabled: #AEE3B7;
+  --sn-alert-violet-disabled: #B796E0;
+  --sn-alert-brittlebush-disabled: #F4D3A2;
+  --sn-alert-passion-disabled: #EF9AB0;
+  --sn-alert-turqoise-disabled: #A2E1E3;
+  --sn-alert-science-blue-disabled: #9DCCFE;
+
+  // delete colors
+  --sn-delete-red: #CE0C24;
+  --sn-delete-red-hover: #AD0015;
+
+  // notification sn-science-blue included
+  --sn-coral: #FB565B;
+
+  // background colors
+  --sn-background-blue: #DBE4F2;
+  --sn-background-green: #E7F7E9;
+  --sn-background-violet: #E9DFF6;
+  --sn-background-brittlebush: #FCF2E3;
+  --sn-background-passion: #FAE1E7;
+  --sn-background-turqoise: #E3F6F7;
+  --sn-background-bloo: #E2F0FF;
+}