diff --git a/packages/ui-lib/src/Alerts/atom/AlertBar.tsx b/packages/ui-lib/src/Alerts/atom/AlertBar.tsx
index 9f008fb21..b8d9c28e3 100644
--- a/packages/ui-lib/src/Alerts/atom/AlertBar.tsx
+++ b/packages/ui-lib/src/Alerts/atom/AlertBar.tsx
@@ -7,7 +7,7 @@ import { resetButtonStyles } from '../../common/index';
 const IconButton = styled.button<{selected?: boolean}>`
   ${resetButtonStyles};
   ${({selected=false}) => selected && css`
-    border-bottom: 5px solid hsl(207, 80%, 64%);
+    border-bottom: 5px solid var(--primary-7);
   `}
   &:focus {
     outline: none;
diff --git a/packages/ui-lib/src/Alerts/atom/Notification.tsx b/packages/ui-lib/src/Alerts/atom/Notification.tsx
index e5c7330a8..1cc65cb93 100644
--- a/packages/ui-lib/src/Alerts/atom/Notification.tsx
+++ b/packages/ui-lib/src/Alerts/atom/Notification.tsx
@@ -71,7 +71,7 @@ export const IconNames = {
 const IconButton = styled.div<{selected?: boolean}>`
   ${resetButtonStyles};
   ${({selected=false}) => selected && css`
-    border-bottom: 5px solid hsl(207, 80%, 64%);
+    border-bottom: 5px solid var(--primary-7);
   `}
   &:focus {
     outline: none;
diff --git a/packages/ui-lib/src/CameraPanels/atoms/PanelMetaData.tsx b/packages/ui-lib/src/CameraPanels/atoms/PanelMetaData.tsx
index f12a38ae5..8307fdcc4 100644
--- a/packages/ui-lib/src/CameraPanels/atoms/PanelMetaData.tsx
+++ b/packages/ui-lib/src/CameraPanels/atoms/PanelMetaData.tsx
@@ -47,7 +47,7 @@ const LeftTitle = styled.div<{ hasMarginBottom: boolean, hasRightData: boolean }
   }};
   ${({ hasMarginBottom }) => hasMarginBottom && `margin-bottom: 1px;`};
 
-  color: hsla(195, 10%, 52%, 0.72);
+  color: var(--grey-a10);
   font-size: 10px;
 `;
 
@@ -59,14 +59,14 @@ const LeftSubTitle = styled.div<{ hasRightData: boolean }>`
     : `max-width: 250px;`
   }
 
-  color: hsl(208, 8%, 38%);
+  color: var(--grey-11);
   font-size: 16px;
 `;
 
 const Title = styled.div<{ hasMarginBottom: boolean }>`
   ${EllipsisStyles};
   max-width: 80px;
-  color: hsla(195, 10%, 52%, 0.72);
+  color: var(--grey-a10);
   font-size: 10px;
   ${({ hasMarginBottom }) => hasMarginBottom && `margin-bottom: 6px;`};
 `;
@@ -74,7 +74,7 @@ const Title = styled.div<{ hasMarginBottom: boolean }>`
 const SubTitle = styled.div`
   ${EllipsisStyles};
   max-width: 80px;
-  color: hsl(195, 10%, 52%);
+  color: var(--grey-11);
   font-size: 12px;
 `;
 
diff --git a/packages/ui-lib/src/CameraPanels/molecules/CameraPanel.tsx b/packages/ui-lib/src/CameraPanels/molecules/CameraPanel.tsx
index 74a147c8b..ae456414a 100644
--- a/packages/ui-lib/src/CameraPanels/molecules/CameraPanel.tsx
+++ b/packages/ui-lib/src/CameraPanels/molecules/CameraPanel.tsx
@@ -7,7 +7,7 @@ export const CameraPanelWrapper = styled.div<{hasOnClick: boolean}>`
   width: 300px;
   height: 230px;
   border-radius: 3px;
-  box-shadow: 0 2px 10px 0 hsla(211, 42%, 86%, 0.41);
+  box-shadow: 0 2px 10px 0 var(--grey-a5);
   background-color: ${({theme}) => theme.styles.global.background.backgroundImage};
   }
 
diff --git a/packages/ui-lib/src/Filters/atoms/LoadingBox.tsx b/packages/ui-lib/src/Filters/atoms/LoadingBox.tsx
index 2c8f7ef09..d1c7ad814 100644
--- a/packages/ui-lib/src/Filters/atoms/LoadingBox.tsx
+++ b/packages/ui-lib/src/Filters/atoms/LoadingBox.tsx
@@ -8,14 +8,14 @@ const Container = styled.div`
   align-items: center;
   justify-content: center;
   min-height: 146px;
-  border-top: 1px solid hsl(0, 0%, 91%);
+  border-top: 1px solid var(--grey-5);
 `;
 
 const LoadingText = styled.div`
   ${({ theme }) => theme && css`
     font-family: ${theme.fontFamily.data};
   `}
-  color: hsl(0, 0%, 55%);
+  color: var(--grey-11);
   font-size: 12px;
   font-style: italic;
   padding: 15px 0;
diff --git a/packages/ui-lib/src/Filters/molecules/FilterDropdown.tsx b/packages/ui-lib/src/Filters/molecules/FilterDropdown.tsx
index 7b64fa3f5..6def6c3a0 100644
--- a/packages/ui-lib/src/Filters/molecules/FilterDropdown.tsx
+++ b/packages/ui-lib/src/Filters/molecules/FilterDropdown.tsx
@@ -58,7 +58,7 @@ const ResultsContainer = styled.div`
 const ResultCounter = styled.div`
   opacity: 0.75;
   font-family: ${({ theme }) => theme.fontFamily.data};
-  color: hsl(0, 0%, 55%);
+  color: var(--grey-10);
   font-size: 12px;
   font-style: italic;
   font-weight: 300;
@@ -79,7 +79,7 @@ const SearchWrapper = styled.div`
 
 const EmptyResultText = styled.div`
   display: block;
-  color: hsl(0, 0%, 56%);
+  color: var(--grey-10);
   margin-left: 12px;
   user-select: none;
   pointer-events: none;
diff --git a/packages/ui-lib/src/Filters/molecules/FiltersResults.tsx b/packages/ui-lib/src/Filters/molecules/FiltersResults.tsx
index 459602cfd..c8cd9103c 100644
--- a/packages/ui-lib/src/Filters/molecules/FiltersResults.tsx
+++ b/packages/ui-lib/src/Filters/molecules/FiltersResults.tsx
@@ -16,7 +16,7 @@ const Container = styled.div`
 
 const ResultsTextWrapper = styled.div`
   font-family: ${({ theme }) => theme.fontFamily.ui};
-  color: hsl(207, 5%, 57%);
+  color: var(--grey-9);
 `;
 
 const FilterLabel = styled.div`
@@ -26,7 +26,7 @@ const FilterLabel = styled.div`
   align-items: center;
   padding: 0 11px 0 8px;
   margin-left: 3px;
-  color: hsl(207, 5%, 57%);
+  color: var(--grey-9);
 
   ${({ theme }) => theme && css`
     font-family: ${theme.fontFamily.data};
@@ -36,7 +36,7 @@ const FilterLabel = styled.div`
     display: flex;
     align-items: center;
   }
-  border-right: 1px solid hsla(0, 0%, 13%, 0.16);
+  border-right: 1px solid var(--grey-8);
 `;
 const FilterLabelText = styled.div<{ hasIcon?: boolean }>`
   padding: ${({ hasIcon }) => hasIcon ? '0 15px 0 9px' : '0 15px 0 0'};
@@ -49,7 +49,7 @@ const FilterLabelText = styled.div<{ hasIcon?: boolean }>`
 const ClearTextButton = styled.button`
   ${resetButtonStyles};
   font-family: ${({ theme }) => theme.fontFamily.data};
-  color: hsl(216, 4%, 77%);
+  color: var(--grey-10);
   margin-left: 11px;
   font-size: 12px;
 `;
diff --git a/packages/ui-lib/src/Filters/molecules/SortDropdown.tsx b/packages/ui-lib/src/Filters/molecules/SortDropdown.tsx
index a99a6080f..d1d4c48ba 100644
--- a/packages/ui-lib/src/Filters/molecules/SortDropdown.tsx
+++ b/packages/ui-lib/src/Filters/molecules/SortDropdown.tsx
@@ -22,8 +22,7 @@ const TopLine = styled.div`
 const InnerBox = styled.div`
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
-  box-shadow: 0 4px 9px 0 hsla(204, 22%, 67%, 0.07);
-  border: solid 1px hsl(207, 16%, 86%);
+  border: solid 1px var(--grey-7);
   border-top: unset;
   ${({theme}) => theme.styles.filters.dropdownContainer.background};
 `;
@@ -54,7 +53,7 @@ const OrderButton = styled.button<{ isSelected: boolean }>`
   display: flex;
   align-items: center;
   font-family: ${({ theme }) => theme.fontFamily.data};
-  color: hsl(0, 0%, 56%);
+  color: var(--grey-12);
   font-size: 14px;
   height: 35px;
   ${({ theme, isSelected }) => theme && css`
diff --git a/packages/ui-lib/src/Filters/organisms/FilterBar.tsx b/packages/ui-lib/src/Filters/organisms/FilterBar.tsx
index 78e2e051f..25da0b9f5 100644
--- a/packages/ui-lib/src/Filters/organisms/FilterBar.tsx
+++ b/packages/ui-lib/src/Filters/organisms/FilterBar.tsx
@@ -17,7 +17,7 @@ import debounce from 'lodash.debounce';
 
 const Title = styled.div`
   font-family: ${({ theme }) => theme.fontFamily.ui};
-  color: hsl(207, 5%, 57%);
+  color: var(--grey-10);
   font-size: 12px;
   font-weight: 700;
   margin-bottom: 17px;
diff --git a/packages/ui-lib/src/Form/atoms/ButtonWithIcon.tsx b/packages/ui-lib/src/Form/atoms/ButtonWithIcon.tsx
index dd4fa6dd4..2bd0113b6 100644
--- a/packages/ui-lib/src/Form/atoms/ButtonWithIcon.tsx
+++ b/packages/ui-lib/src/Form/atoms/ButtonWithIcon.tsx
@@ -40,7 +40,7 @@ const IconContainer = styled.div<{ position?: string }>`
   svg {
     display:block;
     path, rect, circle, d {
-      stroke: hsla(0, 0%, 100%, 1.000);
+      stroke: var(--white-1);
     }
   }
 `;
diff --git a/packages/ui-lib/src/Form/atoms/CropArea.tsx b/packages/ui-lib/src/Form/atoms/CropArea.tsx
index 60cc3346a..6baf7805a 100644
--- a/packages/ui-lib/src/Form/atoms/CropArea.tsx
+++ b/packages/ui-lib/src/Form/atoms/CropArea.tsx
@@ -46,8 +46,8 @@ const resizeSquaresCss = css`
   position: absolute;
   width: 10px;
   height: 10px;
-  border: solid 1px hsl(0, 1%, 28%);
-  background-color: hsl(0, 0%, 100%);
+  border: solid 1px var(--black-a12);
+  background-color: var(--white-1);
 `;
 
 const PointN = styled.div<{ isResizable: boolean }>`
diff --git a/packages/ui-lib/src/Form/atoms/DropArea.tsx b/packages/ui-lib/src/Form/atoms/DropArea.tsx
index dca38ebab..a417e3a31 100644
--- a/packages/ui-lib/src/Form/atoms/DropArea.tsx
+++ b/packages/ui-lib/src/Form/atoms/DropArea.tsx
@@ -16,7 +16,7 @@ const DragAndDrop = styled.div<{inDropZone: boolean}>`
   display: flex;
   align-items: center;
   justify-content: center;
-  border: ${({inDropZone}) => inDropZone ? `dashed #afa9a9 2px` : null};
+  border: ${({inDropZone}) => inDropZone ? `dashed var(--grey-8) 2px` : null};
 `;
 
 interface IDropArea {
diff --git a/packages/ui-lib/src/Form/atoms/Label.tsx b/packages/ui-lib/src/Form/atoms/Label.tsx
index e48529ef5..bf10b2620 100644
--- a/packages/ui-lib/src/Form/atoms/Label.tsx
+++ b/packages/ui-lib/src/Form/atoms/Label.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 export const StyledLabel = styled.label<{ rightAlign: boolean }>`
   font-family: ${({ theme }) => theme.fontFamily.ui};
-  color: hsl(207, 5%, 57%);
+  color: var(--grey-10);
   font-size: 14px;
   font-weight: 500;
   ${({ rightAlign }) => rightAlign
diff --git a/packages/ui-lib/src/Form/atoms/SliderInput.tsx b/packages/ui-lib/src/Form/atoms/SliderInput.tsx
index db52686dd..8aba63174 100644
--- a/packages/ui-lib/src/Form/atoms/SliderInput.tsx
+++ b/packages/ui-lib/src/Form/atoms/SliderInput.tsx
@@ -48,7 +48,7 @@ const Rail = styled.div`
   width: calc(100% - ${ThumbDiameter}px);
   height: 2px;
   border-radius: 11px;
-  background-image: linear-gradient(to bottom, hsl(210, 30%, 96%), hsl(203, 42%, 94%) 98%);
+  background-image: linear-gradient(to bottom, var(--grey-10), var(--primary-10) 98%);
 `;
 
 const Mark = styled.span<{leftValue: number}>`
@@ -58,7 +58,7 @@ const Mark = styled.span<{leftValue: number}>`
   width: 1px;
   height: 9px;
   opacity: 0.25;
-  background-color: hsl(205, 77%, 64%);
+  background-color: var(--primary-11);
 `;
 
 const MarkLabel = styled.span<{leftValue: number, alignment?: IMartAlignment,}>`
@@ -70,7 +70,7 @@ const MarkLabel = styled.span<{leftValue: number, alignment?: IMartAlignment,}>`
   font-style: italic;
   line-height: normal;
   text-align: center;
-  color: hsla(195, 10%, 52%, 0.72);
+  color: var(--grey-a11);
 
   ${({alignment}) => (alignment === 'center') && css`transform: translateX(-50%);;`}
   ${({alignment}) => (alignment === 'right') && css`transform: translateX(5%);`}
diff --git a/packages/ui-lib/src/Form/atoms/SmallInput.tsx b/packages/ui-lib/src/Form/atoms/SmallInput.tsx
index d5f5a9046..8c7bf6d68 100644
--- a/packages/ui-lib/src/Form/atoms/SmallInput.tsx
+++ b/packages/ui-lib/src/Form/atoms/SmallInput.tsx
@@ -61,7 +61,7 @@ const UnitKey = styled.div`
   top:0;
   font-family: ${({ theme }) => theme.fontFamily.ui };
   font-size: 12px;
-  color: #99a1a3;
+  color: var(--grey-10);
   line-height:30px;
 `;
 
diff --git a/packages/ui-lib/src/Form/atoms/TextArea.tsx b/packages/ui-lib/src/Form/atoms/TextArea.tsx
index e7da4beae..e9cdfec4c 100644
--- a/packages/ui-lib/src/Form/atoms/TextArea.tsx
+++ b/packages/ui-lib/src/Form/atoms/TextArea.tsx
@@ -66,7 +66,7 @@ const Container =  styled.div<{ fieldState: string }>`
     ${({theme, fieldState}) => theme.styles.form.input[fieldState].normal};
 
     &:focus {
-      box-shadow: 0px 3px 7px 0px hsla(207, 65.8%, 31%, 0.078);
+      box-shadow: 0px 3px 7px 0px var(--primary-a3);
     }
 
     &:disabled {
@@ -92,15 +92,15 @@ const Container =  styled.div<{ fieldState: string }>`
     ${({ fieldState }) =>
 
     fieldState === 'required' ? `
-      box-shadow: 0px 3px 7px 0px hsla(207, 67.8%, 35.3%, 0.071);
+      box-shadow: 0px 3px 7px 0px var(--primary-a3);
     ` : null};
 
     ${({ fieldState }) => fieldState === 'valid' ? `
-      box-shadow: 0px 3px 5px 0px hsla(120, 76.6%, 15.1%, 0.071);
+      box-shadow: 0px 3px 5px 0px var(--success-a3);
     ` : null};
 
     ${({ fieldState }) => fieldState === 'invalid' ? `
-      box-shadow: 0px 3px 7px 0px hsla(0, 100%, 50%, 0.102);
+      box-shadow: 0px 3px 7px 0px var(--error-a3);
     ` : null};
   }
 
@@ -128,11 +128,11 @@ const TextArea : React.FC<Props> = ({
       case 'disabled':
         break;
       case 'required':
-        return <Icon icon='Required' size={20} color='inverse' />;
+        return <Icon icon='Required' size={20} color='white' />;
       case 'valid':
-        return <Icon icon='Success' size={20} color='inverse' />;
+        return <Icon icon='Success' size={20} color='white' />;
       case 'invalid':
-        return <Icon icon='Invalid' size={20} color='inverse' />;
+        return <Icon icon='Invalid' size={20} color='white' />;
       case 'processing':
         return <Spinner size='medium' styling='primary' />;
     }
diff --git a/packages/ui-lib/src/Form/molecules/CropTool.tsx b/packages/ui-lib/src/Form/molecules/CropTool.tsx
index dcdf29642..404a56274 100644
--- a/packages/ui-lib/src/Form/molecules/CropTool.tsx
+++ b/packages/ui-lib/src/Form/molecules/CropTool.tsx
@@ -28,7 +28,7 @@ const Container = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: hsla(202, 33%, 95%, 0.51);
+  background-color: var(--grey-3);
   -webkit-backdrop-filter: blur(5px);
   backdrop-filter: blur(5px);
   font-family: ${({ theme }) => theme.fontFamily.ui};
@@ -73,8 +73,8 @@ const PreviewArea = styled.div<{ canvasHeight?: number, canvasWidth?: number }>`
   height: ${({ canvasHeight }) => canvasHeight ? `${canvasHeight}px` : `462px`};
   width: ${({ canvasWidth }) => canvasWidth ? `${canvasWidth}px` : `485px`};
   border-radius: 5px;
-  background-color: hsla(202, 33%, 95%, 0.8);
-  background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.8) 35px, rgba(255,255,255,.8) 70px);
+  background-color: var(--grey-3);
+  background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, var(--white-a10) 35px, var(--white-a10) 70px);
 `;
 
 const HiddenImage = styled.img`
@@ -83,8 +83,8 @@ const HiddenImage = styled.img`
 
 const SelectedArea = styled.div<{ cropLeft: number, cropTop: number, cropWidth: number, cropHeight: number }>`
   position: absolute;
-  border: dashed 1px hsl(0, 0%, 24%);
-  box-shadow: 0 0 0 9999em hsla(0, 0%, 32%, 0.75);
+  border: dashed 1px var(--black-a12);
+  box-shadow: 0 0 0 9999em var(--black-a11);
   ${({ cropLeft, cropTop, cropWidth, cropHeight }) => css`
     top: ${cropTop}px;
     left: ${cropLeft}px;
diff --git a/packages/ui-lib/src/Form/molecules/DurationSlider.tsx b/packages/ui-lib/src/Form/molecules/DurationSlider.tsx
index ddb1d7f12..e0be4e60c 100644
--- a/packages/ui-lib/src/Form/molecules/DurationSlider.tsx
+++ b/packages/ui-lib/src/Form/molecules/DurationSlider.tsx
@@ -16,7 +16,7 @@ import Label from '../atoms/Label';
 const Container = styled.div``;
 const Headers = styled.div`
   font-size: 14px;
-  color: hsl(207, 5%, 57%);
+  color: var(--grey-10);
   display: flex;
   justify-content: space-between;
   margin-bottom: 30px;
@@ -30,7 +30,7 @@ const ValueLabel = styled(Label)`
 
 const Unit = styled.div`
   font-family: ${({ theme }) => theme.fontFamily.data};
-  color: hsla(195, 10%, 52%, 0.72);
+  color: var(--grey-a11);
   font-style: italic;
   font-size: 12px;
   line-height: 1.5;
diff --git a/packages/ui-lib/src/Form/molecules/PercentageSlider.tsx b/packages/ui-lib/src/Form/molecules/PercentageSlider.tsx
index e73ea749d..2f019ac89 100644
--- a/packages/ui-lib/src/Form/molecules/PercentageSlider.tsx
+++ b/packages/ui-lib/src/Form/molecules/PercentageSlider.tsx
@@ -8,7 +8,7 @@ import Label from '../atoms/Label';
 const Container = styled.div``;
 const Headers = styled.div`
   font-size: 14px;
-  color: hsl(207, 5%, 57%);
+  color: var(--grey-10);
   display: flex;
   justify-content: space-between;
   margin-bottom: 20px;
diff --git a/packages/ui-lib/src/Form/organisms/AreaUploadManager.tsx b/packages/ui-lib/src/Form/organisms/AreaUploadManager.tsx
index 410839da8..ce6b4d9ef 100644
--- a/packages/ui-lib/src/Form/organisms/AreaUploadManager.tsx
+++ b/packages/ui-lib/src/Form/organisms/AreaUploadManager.tsx
@@ -32,7 +32,7 @@ const FilesUploadGroup = styled.div<{ height?: string, hasFiles: boolean }>`
 `;
 
 const Title = styled.div`
-  color: hsl(208, 8%, 38%);
+  color: var(--grey-11);
   font-size: 20px;
 `;
 
@@ -40,7 +40,7 @@ const Description = styled.div`
   font-size: 14px;
   line-height: 2.14;
   text-align: center;
-  color: hsl(207, 5%, 57%);
+  color: var(--grey-10);
   margin-top: 10px;
   max-width: 386px;
 `;
diff --git a/packages/ui-lib/src/Form/organisms/AvatarUploader.tsx b/packages/ui-lib/src/Form/organisms/AvatarUploader.tsx
index e440766fb..b399bf28d 100644
--- a/packages/ui-lib/src/Form/organisms/AvatarUploader.tsx
+++ b/packages/ui-lib/src/Form/organisms/AvatarUploader.tsx
@@ -50,7 +50,7 @@ const PhotoContainerStyle = css`
   align-items: center;
   justify-content: center;
   border-radius: 5px;
-  background-color: hsl(0, 0%, 90%);
+  background-color: var(--grey-5);
 `;
 const PreviewImage = styled.img`
   ${PhotoContainerStyle}
@@ -58,7 +58,7 @@ const PreviewImage = styled.img`
 `;
 
 const PlaceholderText = styled.div`
-  color: hsl(207, 5%, 57%);
+  color: var(--grey-10);
   font-size: 14px;
 `;
 
diff --git a/packages/ui-lib/src/Global/atoms/NotificationItem.tsx b/packages/ui-lib/src/Global/atoms/NotificationItem.tsx
index eaa3c9f07..a0d5dc91a 100644
--- a/packages/ui-lib/src/Global/atoms/NotificationItem.tsx
+++ b/packages/ui-lib/src/Global/atoms/NotificationItem.tsx
@@ -19,7 +19,7 @@ const ImgWrapper = styled.div`
 `;
 
 const EmptyImg = styled.div`
-  background-color: hsl(210, 22%, 91%);
+  background-color: var(--grey-5);
   width: 100%;
   height: 100%;
 `;
@@ -33,7 +33,7 @@ const Image = styled.div<{ image?: string }>`
   background-image: url(${p => p.image});
   background-position: center center;
   background-size: cover;
-  background-repeat: no-repeat; 
+  background-repeat: no-repeat;
   display: ${p => p.image ? 'block' : 'none'};
 `;
 
@@ -44,14 +44,14 @@ const InfoContainer = styled.div`
 const Title = styled.div`
   font-size: 16px;
   font-weight: 500;
-  color: hsl(0, 0%, 34%);
+  color: var(--grey-11);
 `;
 
 const Message = styled.div`
   font-size: 13px;
   font-weight: 500;
   overflow: hidden;
-  color: hsl(0, 0%, 34%);
+  color: var(--grey-11);
   margin: 4px 0;
   height: 30px;
   text-overflow: ellipsis;
@@ -63,7 +63,7 @@ const Message = styled.div`
 const TimeMsg = styled.div`
   font-size: 13px;
   font-weight: 500;
-  color: hsl(0, 0%, 67%);
+  color: var(--grey-12);
   margin-top: 15px;
 `;
 
diff --git a/packages/ui-lib/src/Global/molecules/NotificationsHistory.tsx b/packages/ui-lib/src/Global/molecules/NotificationsHistory.tsx
index ed0feb95f..66a221a4a 100644
--- a/packages/ui-lib/src/Global/molecules/NotificationsHistory.tsx
+++ b/packages/ui-lib/src/Global/molecules/NotificationsHistory.tsx
@@ -13,7 +13,7 @@ const StatusContainer = styled.h2`
     padding: 10px 0 10px 20px;
     font-size: 14px;
     font-weight: 500;
-    color: hsl(0, 0%, 34%);
+    color: var(--grey-12);
     border-bottom: ${({ theme }) => theme.colors.divider} 1px solid;
     margin: 0;
 `;
diff --git a/packages/ui-lib/src/Global/molecules/TopBar.tsx b/packages/ui-lib/src/Global/molecules/TopBar.tsx
index a6f839739..b8564fe54 100644
--- a/packages/ui-lib/src/Global/molecules/TopBar.tsx
+++ b/packages/ui-lib/src/Global/molecules/TopBar.tsx
@@ -21,7 +21,6 @@ const Container = styled.div`
 
   ${({ theme, theme: { colors } }) => colors && css`
     border-bottom: ${theme.styles.global.mainMenu.lines.backgroundColor} 1px solid;
-    // box-shadow: 5px 7px 10px 0 hsla(205, 16%, 77%, 0.1);
     background-color:${theme.styles.global.mainMenu.background.backgroundColor};
   `}
 `;
diff --git a/packages/ui-lib/src/Icons/StatusIcon.tsx b/packages/ui-lib/src/Icons/StatusIcon.tsx
index f79118a19..597642226 100644
--- a/packages/ui-lib/src/Icons/StatusIcon.tsx
+++ b/packages/ui-lib/src/Icons/StatusIcon.tsx
@@ -24,7 +24,7 @@ const StatusCounter = styled.div<{ color?: IStatusDot }>`
   ${({theme:{animation}}) => css`
     transition: background-color ${animation.speed.slow} ${animation.easing.primary.easeInOut};
   `}
-  background-color: ${({ theme, color }) => color ? theme.colors.status[color] : 'hsla(0, 0%, 91.8%, 0)'};
+  background-color: ${({ theme, color }) => color ? theme.colors.status[color] : 'var(--grey-5)'};
 `;
 
 const StatusDot = styled.div<{ color?: IStatusDot }>`
@@ -37,7 +37,7 @@ const StatusDot = styled.div<{ color?: IStatusDot }>`
   ${({theme:{animation}}) => css`
     transition: background-color ${animation.speed.slow} ${animation.easing.primary.easeInOut};
   `}
-  background-color: ${({ theme, color }) => color ? theme.colors.status[color] : 'hsla(0, 0%, 91.8%, 0)'};
+  background-color: ${({ theme, color }) => color ? theme.colors.status[color] : 'var(--grey-5)'};
 `;
 
 interface IStatusIcon {
diff --git a/packages/ui-lib/src/Icons/index.d.ts b/packages/ui-lib/src/Icons/index.d.ts
index 5eccd3961..8170c6aa4 100644
--- a/packages/ui-lib/src/Icons/index.d.ts
+++ b/packages/ui-lib/src/Icons/index.d.ts
@@ -1,5 +1,5 @@
 interface ISvgIcons extends React.SVGProps<SVGSVGElement> {
   size: number
-  color: 'mono' | 'dimmed' | 'subtle' | 'inverse' | 'primary' | 'danger';
+  color: 'mono' | 'dimmed' | 'subtle' | 'inverse' | 'primary' | 'danger' | 'white';
   weight: number
 }
\ No newline at end of file
diff --git a/packages/ui-lib/src/Misc/atoms/ActionsBar.tsx b/packages/ui-lib/src/Misc/atoms/ActionsBar.tsx
index 5e5bcf263..c76201f86 100644
--- a/packages/ui-lib/src/Misc/atoms/ActionsBar.tsx
+++ b/packages/ui-lib/src/Misc/atoms/ActionsBar.tsx
@@ -6,7 +6,7 @@ import ButtonWithIcon, { IButtonWithIcon } from '../../Form/atoms/ButtonWithIcon
 const Container = styled.div``;
 const Title = styled.div`
   font-family: ${({ theme }) => theme.fontFamily.ui};
-  color: hsl(207, 5%, 57%);
+  color: var(--grey-10);
   font-size: 12px;
   font-weight: 700;
   margin-bottom: 17px;
@@ -31,7 +31,7 @@ const SelectedResults = styled.div`
   font-family: ${({ theme }) => theme.fontFamily.ui};
   margin-top: 29px;
   min-height: 19px;
-  color: hsl(207, 5%, 57%);
+  color: var(--grey-10);
   font-size: 12px;
 `;
 
diff --git a/packages/ui-lib/src/Misc/atoms/BigIconsSummary.tsx b/packages/ui-lib/src/Misc/atoms/BigIconsSummary.tsx
index 658af0bc6..475bcc370 100644
--- a/packages/ui-lib/src/Misc/atoms/BigIconsSummary.tsx
+++ b/packages/ui-lib/src/Misc/atoms/BigIconsSummary.tsx
@@ -19,7 +19,7 @@ const PlusIconWrapper = styled.div`
   ${IconWrapper}{
     transform: rotate(45deg);
     [stroke]{
-      stroke: hsl(205, 22%, 66%);
+      stroke: var(--primary-7);
     }
   }
 `;
diff --git a/packages/ui-lib/src/Misc/atoms/MediaBox.tsx b/packages/ui-lib/src/Misc/atoms/MediaBox.tsx
index 0bbe0085c..e1b555100 100644
--- a/packages/ui-lib/src/Misc/atoms/MediaBox.tsx
+++ b/packages/ui-lib/src/Misc/atoms/MediaBox.tsx
@@ -15,7 +15,7 @@ const mediaStyle = `
   max-width:  100%;
   max-height: 100%;
   border-radius: 3px;
-  background-color: hsla(0deg, 0%, 0%, 35%);
+  background-color: var(--grey-11);
 `;
 
 const LoadingOverlay = styled.div`
diff --git a/packages/ui-lib/src/Misc/atoms/Tag.tsx b/packages/ui-lib/src/Misc/atoms/Tag.tsx
index de5ea53da..646a118fd 100644
--- a/packages/ui-lib/src/Misc/atoms/Tag.tsx
+++ b/packages/ui-lib/src/Misc/atoms/Tag.tsx
@@ -17,7 +17,7 @@ export const TagWrapper = styled.div<{ hoverColor:ISvgIcons['color']; enableHove
   font-weight: 500;
   color: var(--grey-11);
   padding: 4px 10px;
-  border: solid 1px hsl(120, 1%, 85%);
+  border: solid 1px var(--grey-8);
   display: inline-flex;
   align-items: center;
   border-radius: 3px;
diff --git a/packages/ui-lib/src/Modals/Modal.tsx b/packages/ui-lib/src/Modals/Modal.tsx
index 96489dcef..0816403b9 100644
--- a/packages/ui-lib/src/Modals/Modal.tsx
+++ b/packages/ui-lib/src/Modals/Modal.tsx
@@ -15,7 +15,7 @@ const Container = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: hsla(202, 33%, 95%, 0.51);
+  background-color: var(--grey-3);
   -webkit-backdrop-filter: blur(5px);
   backdrop-filter: blur(5px);
   z-index: 999;
@@ -44,7 +44,7 @@ const CloseButton = styled.button<{ selected?: boolean }>`
     margin-left: 12px;
   }
   ${({ selected = false }) => selected && css`
-    border-bottom: 5px solid hsl(207, 80%, 64%);
+    border-bottom: 5px solid var(--primary-7);
   `}
   &:focus {
     outline: none;
diff --git a/packages/ui-lib/src/Tables/atoms/TableRowThumbnail.tsx b/packages/ui-lib/src/Tables/atoms/TableRowThumbnail.tsx
index 20f87bda8..d5f0fe969 100644
--- a/packages/ui-lib/src/Tables/atoms/TableRowThumbnail.tsx
+++ b/packages/ui-lib/src/Tables/atoms/TableRowThumbnail.tsx
@@ -62,7 +62,7 @@ const PlayableDrop = styled.div`
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-  background-color: hsla(0, 0%, 0%, .5);
+  background-color: var(--black-a1);
   height: 24px;
   width: 24px;
   border-radius: 50%;
@@ -74,7 +74,7 @@ const PlayableDrop = styled.div`
     svg {
       padding-left: 2px;
       path {
-        stroke: hsla(0, 0%, 100%, 1.000);
+        stroke: var(--white-1);
       }
     }
   };
diff --git a/packages/ui-lib/src/Tables/molecules/EditCell.tsx b/packages/ui-lib/src/Tables/molecules/EditCell.tsx
index 10b2b3d7a..558d9004d 100644
--- a/packages/ui-lib/src/Tables/molecules/EditCell.tsx
+++ b/packages/ui-lib/src/Tables/molecules/EditCell.tsx
@@ -34,7 +34,7 @@ const StyledLink = styled(Link)`
 
 const EditContainer = styled.div`
   min-width: 320px;
-  background-color: hsl(0, 0%, 100%);
+  background-color: var(--gray-2);
   z-index: 99;
   position: absolute;
   bottom: -15px;
diff --git a/packages/ui-lib/src/Tables/organisms/TypeTable.tsx b/packages/ui-lib/src/Tables/organisms/TypeTable.tsx
index 2555478a4..97947b9f3 100644
--- a/packages/ui-lib/src/Tables/organisms/TypeTable.tsx
+++ b/packages/ui-lib/src/Tables/organisms/TypeTable.tsx
@@ -14,7 +14,7 @@ const TableContainer = styled.div`
 `;
 
 const LoadingText = styled.div`
-  color: hsla(195, 10%, 52%, 0.72);
+  color: var(--grey-a11);
 `;
 
 const LoadingBox = styled.div`
@@ -46,9 +46,9 @@ const EmptyTableBox = styled.div`
   text-align: center;
   h3 {
     font-weight: 500;
-    color: hsl(208, 8%, 38%);
+    color: var(--grey-11);
   }
-  color: hsl(207, 5%, 57%);
+  color: var(--grey-10);
 `;
 
 const isChecked = ({ _checked = false }: IRowData) => {
diff --git a/packages/ui-lib/src/Tabs/atoms/Tab.tsx b/packages/ui-lib/src/Tabs/atoms/Tab.tsx
index 4079942f8..ea40ab4f7 100644
--- a/packages/ui-lib/src/Tabs/atoms/Tab.tsx
+++ b/packages/ui-lib/src/Tabs/atoms/Tab.tsx
@@ -17,9 +17,9 @@ const TabLabel = styled.label<{ active: boolean }>`
   font-size: 15px;
   font-weight: ${({ active }) => active ? '600' : '500'};
   letter-spacing: 0.09px;
-  color: ${({ active }) => active ? '#0097ce' : '#787878'};
+  color: ${({ active }) => active ? 'var(--primary-11)' : 'var(--grey-11)'};
   cursor: pointer;
-  border-bottom: ${({ active }) => active ? '2px solid #0097ce' : '2px solid transparent'};
+  border-bottom: ${({ active }) => active ? '2px solid var(--primary-11)' : '2px solid transparent'};
   padding-top: 6px;
   padding-bottom: 14px;
   flex-shrink: 0;
diff --git a/packages/ui-lib/src/Tabs/atoms/TabWithIcon.tsx b/packages/ui-lib/src/Tabs/atoms/TabWithIcon.tsx
index b3c307ea8..1e3bd266b 100644
--- a/packages/ui-lib/src/Tabs/atoms/TabWithIcon.tsx
+++ b/packages/ui-lib/src/Tabs/atoms/TabWithIcon.tsx
@@ -12,7 +12,7 @@ const Container = styled.div<{ active: boolean }>`
   cursor: pointer;
 
   ${({ active }) => active ? css`
-    border-bottom: 3px solid hsl(196, 100%, 40%);
+    border-bottom: 3px solid var(--primary-11);
     `
     : css`
     border-bottom: 3px solid transparent;
@@ -28,7 +28,7 @@ const Title = styled.div<{ active: boolean }>`
   font-family: ${({ theme }) => theme.fontFamily.ui};
   letter-spacing: 0.09px;
   font-weight: 500;
-  color: ${({ active }) => active ? 'hsl(196, 100%, 40%)' : 'hsl(0, 0%, 46%)'};
+  color: ${({ active }) => active ? 'var(--primary-11)' : 'var(--grey-11)'};
   margin-bottom: 5px;
   flex-shrink: 0;
   white-space: nowrap;
@@ -40,7 +40,7 @@ const SubTitle = styled.div`
   font-size: 12px;
   font-family: ${({ theme }) => theme.fontFamily.data};
   font-style: italic;
-  color: hsla(195, 10%, 52%, 0.72);
+  color: var(--grey-a10);
   flex-shrink: 0;
   white-space: nowrap;
   text-overflow: ellipsis;
diff --git a/packages/ui-lib/src/Tabs/molecules/TabsWithIconBar.tsx b/packages/ui-lib/src/Tabs/molecules/TabsWithIconBar.tsx
index c9a7d0828..d37fba5c6 100644
--- a/packages/ui-lib/src/Tabs/molecules/TabsWithIconBar.tsx
+++ b/packages/ui-lib/src/Tabs/molecules/TabsWithIconBar.tsx
@@ -10,8 +10,8 @@ const Container = styled.div``;
 const TabListWrapper = styled.div<{ paddingLeft?: string }>`
   padding-top: 10px;
   padding-left: ${({ paddingLeft }) => paddingLeft ? paddingLeft : '87px'};
-  box-shadow: 0 -5px 5px 0 hsla(0, 0%, 0%, 0.01);
-  border-bottom: 1px solid hsl(0, 0%, 89%);
+  box-shadow: 0 -5px 5px 0 var(--black-a1);
+  border-bottom: 1px solid var(--grey-6);
   overflow-y: auto;
   scrollbar-width: none; /* Firefox */
   -ms-overflow-style: none;  /* Internet Explorer 10+ */
diff --git a/packages/ui-lib/src/themes/light/colors.ts b/packages/ui-lib/src/themes/light/colors.ts
index 0667576e0..b892e2dd9 100644
--- a/packages/ui-lib/src/themes/light/colors.ts
+++ b/packages/ui-lib/src/themes/light/colors.ts
@@ -8,7 +8,8 @@ export const colors = {
       "dimmed": "var(--grey-11)",
       "subtle": "var(--grey-10)",
       "primary": "var(--primary-9)",
-      "danger": "var(--error-9)"
+      "danger": "var(--error-9)",
+      "white": "var(--white-1)"
   },
   "menu": {
       "active": "var(--primary-9)",