diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index f43c5a2ca..a5af75b87 100644
--- a/stylesheets/_global.scss
+++ b/stylesheets/_global.scss
@@ -68,7 +68,7 @@ button {
 }
 button.grey {
   border-radius: $border-radius;
-  border: solid 1px #ccc;
+  border: solid 1px var(--color-light-gray-color);
   cursor: pointer;
   margin: 1em auto;
   padding: 1em;
diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index a8348c263..331a94bc2 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -819,8 +819,9 @@
   height: 48px;
   background-image: linear-gradient(
     to bottom,
-    rgba(0, 0, 0, 0),
-    rgba(0, 0, 0, 0) 9%,
+    var(--color-transparent-color),
+    /* TODO does this work */
+    var(--color-transparent-color) 9%,
     rgba(0, 0, 0, 0.6)
   );
   position: absolute;
diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index 973ed90ef..b928188d2 100644
--- a/stylesheets/_session.scss
+++ b/stylesheets/_session.scss
@@ -91,7 +91,7 @@ textarea {
   white-space: nowrap;
   cursor: pointer;
   transition: var(--default-duration);
-  background-color: rgba(0, 0, 0, 0);
+  background-color: var(--color-transparent-color);
 
   &.disabled {
     cursor: default;
@@ -138,7 +138,8 @@ textarea {
       background-color: $session-color-secondary;
     }
     &.success {
-      background-color: $session-color-success;
+      /* TODO is this correct? */
+      background-color: var(--color-text);
     }
     &.danger {
       background-color: var(--color-destructive);
@@ -238,8 +239,8 @@ textarea {
     background-color: $session-color-secondary;
   }
   &.success {
-    background-color: $session-color-success;
-  }
+/* TODO is this correct? */
+  background-color: var(--color-text);  }
   &.danger {
     background-color: var(--color-destructive);
   }
@@ -396,7 +397,8 @@ label {
     border-left: 4px solid $color;
   }
   &--success {
-    @include set-toast-theme($session-color-success);
+    /* TODO is this correct? */
+    @include set-toast-theme(var(--color-session-green-color));
   }
   &--info {
     @include set-toast-theme($session-color-info);
diff --git a/stylesheets/_session_constants.scss b/stylesheets/_session_constants.scss
index 25a7ada50..b93a5acc5 100644
--- a/stylesheets/_session_constants.scss
+++ b/stylesheets/_session_constants.scss
@@ -113,7 +113,6 @@ $session-shade-18: #141414;
 
 // Semantic Colors
 $session-color-info: $session-shade-11;
-$session-color-success: #35d388;
 $session-color-error: #edd422;
 $session-color-warning: var(--color-light-gray-color);
 $session-color-warning-alt: #ff9d00;
diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss
index 4ba6078af..5d815ad33 100644
--- a/stylesheets/_session_conversation.scss
+++ b/stylesheets/_session_conversation.scss
@@ -226,7 +226,7 @@
       margin-left: 2px;
       line-height: $session-font-h2;
       letter-spacing: 0.5px;
-      color: rgba(0, 0, 0, 0);
+      color: var(--color-transparent-color);
     }
   }
 }
@@ -436,7 +436,7 @@
 /* AUDIO PLAYER */
 /* ************ */
 $rhap_theme-color: #212121 !default;
-$rhap_background-color: rgba(0, 0, 0, 0) !default;
+$rhap_background-color: var(--color-transparent-color) !default;
 $rhap_font-family: inherit !default;
 
 .rhap_container,
diff --git a/stylesheets/_session_password.scss b/stylesheets/_session_password.scss
index ae620611a..73ba9f2fe 100644
--- a/stylesheets/_session_password.scss
+++ b/stylesheets/_session_password.scss
@@ -85,7 +85,7 @@
 
       #password-prompt-input {
         width: 100%;
-        color: #fff;
+        color: var(--color-white-color);
         background-color: #2e2e2e;
         margin-top: 2 * $session-margin-lg;
         padding: var(--margins-xs) var(--margins-lg);
diff --git a/stylesheets/_session_slider.scss b/stylesheets/_session_slider.scss
index a754541d4..1433961e3 100644
--- a/stylesheets/_session_slider.scss
+++ b/stylesheets/_session_slider.scss
@@ -25,11 +25,11 @@
   -ms-touch-action: none;
   touch-action: none;
   box-sizing: border-box;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: var(--color-transparent-color);
 }
 .rc-slider * {
   box-sizing: border-box;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: var(--color-transparent-color);
 }
 .rc-slider-rail {
   position: absolute;
@@ -51,18 +51,18 @@
   margin-left: -2.3px;
   cursor: grab;
   border-radius: 4px;
-  /* border: solid 2px rgba(0, 247, 130, 0.8); */
-  background-color: rgba(0, 247, 130, 1);
+  /* TODO What should this be? */
+  background-color: var(--color-session-green-color);
   -ms-touch-action: pan-x;
   touch-action: pan-x;
 }
 .rc-slider-handle:focus {
   border-color: var(--color-session-green-color);
-  box-shadow: 0 0 0 5px rgba(white, 0.2);
+  box-shadow: 0 0 0 5px rgba(var(--color-white-color), 0.2);
   outline: none;
 }
 .rc-slider-handle-click-focused:focus {
-  border-color: rgba(white, 0.2);
+  border-color: rgba(var(--color-white-color), 0.2);
   box-shadow: unset;
 }
 .rc-slider-handle:hover {
@@ -70,7 +70,7 @@
 }
 .rc-slider-handle:active {
   border-color: var(--color-session-green-color);
-  box-shadow: 0 0 5px rgba(white, 0.2);
+  box-shadow: 0 0 5px rgba(var(--color-white-color), 0.2);
   cursor: -webkit-grabbing;
   cursor: grabbing;
 }
@@ -87,10 +87,10 @@
   vertical-align: middle;
   text-align: center;
   cursor: pointer;
-  color: #999;
+  color: var(--color-light-gray-color);
 }
 .rc-slider-mark-text-active {
-  color: #666;
+  color: var(--color-gray-color);
 }
 .rc-slider-step {
   position: absolute;
@@ -118,7 +118,7 @@
   margin-right: -2px;
 }
 .rc-slider-dot-active {
-  border-color: #96dbfa;
+  border-color: var(--color-light-blue-color);
 }
 .rc-slider-dot-reverse {
   margin-left: 0;
@@ -129,9 +129,9 @@
 }
 .rc-slider-disabled .rc-slider-handle,
 .rc-slider-disabled .rc-slider-dot {
-  border-color: #ccc;
+  border-color: var(--color-light-gray-color);
   box-shadow: none;
-  background-color: #fff;
+  background-color: var(--color-white-color);
   cursor: not-allowed;
 }
 .rc-slider-disabled .rc-slider-mark-text,
@@ -229,11 +229,11 @@
   top: -9999px;
   visibility: visible;
   box-sizing: border-box;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: var(--color-transparent-color);
 }
 .rc-slider-tooltip * {
   box-sizing: border-box;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: var(--color-transparent-color);
 }
 .rc-slider-tooltip-hidden {
   display: none;
@@ -247,12 +247,12 @@
   height: 24px;
   font-size: 12px;
   line-height: 1;
-  color: #fff;
+  color: var(--color-white-color);
   text-align: center;
   text-decoration: none;
-  background-color: #6c6c6c;
+  background-color: var(--color-gray-color);
   border-radius: 6px;
-  box-shadow: 0 0 4px #d9d9d9;
+  box-shadow: 0 0 4px var(--color-lighter-gray-color);
 }
 .rc-slider-tooltip-arrow {
   position: absolute;
@@ -266,5 +266,5 @@
   left: 50%;
   margin-left: -4px;
   border-width: 4px 4px 0;
-  border-top-color: #6c6c6c;
+  border-top-color: var(--color-gray-color);
 }
diff --git a/stylesheets/_theme_dark.scss b/stylesheets/_theme_dark.scss
index 9f686d327..b5b469e4a 100644
--- a/stylesheets/_theme_dark.scss
+++ b/stylesheets/_theme_dark.scss
@@ -38,7 +38,7 @@
   }
 
   button.grey {
-    border: solid 1px #ccc;
+    border: solid 1px var(--color-light-gray-color);
     color: var(--color-gray-color);
     background: var(--color-lightest-gray-color);
     box-shadow: 0 0 10px -5px rgba(var(--color-gray-color), 0.5);
@@ -129,8 +129,9 @@
   .module-message__img-overlay {
     background-image: linear-gradient(
       to bottom,
-      rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 0) 9%,
+      var(--color-transparent-color),
+      /* TODO does this work? */
+      var(--color-transparent-color) 9%,
       rgba(0, 0, 0, 0.02) 17%,
       rgba(0, 0, 0, 0.05) 24%,
       rgba(0, 0, 0, 0.08) 31%,
diff --git a/stylesheets/_variables.scss b/stylesheets/_variables.scss
index 450fc641c..a97f11770 100644
--- a/stylesheets/_variables.scss
+++ b/stylesheets/_variables.scss
@@ -25,8 +25,6 @@ $color-dark-72: #31343c;
 $color-dark-90: #121417;
 $color-black-008: rgba(var(--color-black-color), 0.08);
 $color-black-005: rgba(var(--color-black-color), 0.05);
-$color-black-008-no-tranparency: #ededed;
-$color-black-016-no-tranparency: #d9d9d9;
 $color-black-012: rgba(var(--color-black-color), 0.12);
 $color-black-04: rgba(var(--color-black-color), 0.4);
 
diff --git a/ts/components/basic/SessionToggle.tsx b/ts/components/basic/SessionToggle.tsx
index 47f98ed96..12d0ce9b0 100644
--- a/ts/components/basic/SessionToggle.tsx
+++ b/ts/components/basic/SessionToggle.tsx
@@ -27,7 +27,7 @@ const StyledSessionToggle = styled.div<{ active: boolean }>`
   position: relative;
 
   cursor: pointer;
-  background-color: rgba(0, 0, 0, 0);
+  background-color: var(--color-transparent-color);
   transition: var(--default-duration);
 
   background-color: ${props =>
diff --git a/ts/components/conversation/composition/CompositionBox.tsx b/ts/components/conversation/composition/CompositionBox.tsx
index cb5af08bf..6a9273152 100644
--- a/ts/components/conversation/composition/CompositionBox.tsx
+++ b/ts/components/conversation/composition/CompositionBox.tsx
@@ -254,7 +254,7 @@ const StyledSendMessageInput = styled.div`
     margin-left: 2px;
     line-height: var(--font-size-h2);
     letter-spacing: 0.5px;
-    color: rgba(0, 0, 0, 0);
+    color: var(--color-transparent-color);
   }
 `;
 
diff --git a/ts/components/lightbox/Lightbox.tsx b/ts/components/lightbox/Lightbox.tsx
index d5354764f..713592ae9 100644
--- a/ts/components/lightbox/Lightbox.tsx
+++ b/ts/components/lightbox/Lightbox.tsx
@@ -17,7 +17,7 @@ import { isUndefined } from 'lodash';
 
 const Colors = {
   TEXT_SECONDARY: '#bbb',
-  ICON_SECONDARY: '#ccc',
+  ICON_SECONDARY: 'var(--color-light-gray-color)',
 };
 
 const colorSVG = (url: string, color: string) => {
diff --git a/ts/themes/SessionTheme.tsx b/ts/themes/SessionTheme.tsx
index 042f71bed..872098a9c 100644
--- a/ts/themes/SessionTheme.tsx
+++ b/ts/themes/SessionTheme.tsx
@@ -33,6 +33,9 @@ const darkGrayColor = '#414347';
 const darkerGrayColor = '#2f2f2f';
 const darkestGrayColor = '#17191d';
 
+// Transparent
+const transparentColor = 'transparent';
+
 // DARK COLORS
 const darkColorAccent = accentDarkTheme;
 const darkColorAccentButton = accentDarkTheme;
@@ -387,6 +390,7 @@ export const SessionGlobalStyles = createGlobalStyle`
     --color-darker-gray-color: ${darkerGrayColor};
     --color-darkest-gray-color: ${darkestGrayColor};
     --color-light-blue-color: ${lightBlueColor};
+    --color-transparent-color: ${transparentColor};
 
     --color-warning:  ${warning};
     --color-destructive:  ${destructive};
@@ -464,17 +468,7 @@ export const OceanBlueLight: SettingsThemeSwitcherColor = {
   received: '#B3EDF2',
 };
 
-export type PrimaryColorIds =
-  | 'green'
-  | 'blue'
-  | 'yellow'
-  | 'pink'
-  | 'purple'
-  | 'orange'
-  | 'red'
-  | 'blue'
-  | 'blue'
-  | 'blue';
+export type PrimaryColorIds = 'green' | 'blue' | 'yellow' | 'pink' | 'purple' | 'orange' | 'red';
 
 type PrimaryColorType = { id: PrimaryColorIds; ariaLabel: string; color: string };