diff --git a/src/components/Avatar/Avatar.scss b/src/components/Avatar/Avatar.scss
index 6e0e9b3470..e5eb952f8e 100644
--- a/src/components/Avatar/Avatar.scss
+++ b/src/components/Avatar/Avatar.scss
@@ -16,5 +16,5 @@
 
 .avatar #Circle-Background,
 .avatar #Color\/Palette\/Blue-01 {
-  fill: var(--accent-color);
+  fill: var(--accent-color--light);
 }
diff --git a/src/components/Badge/Badge.scss b/src/components/Badge/Badge.scss
index 4d29235eb3..656f6480b0 100644
--- a/src/components/Badge/Badge.scss
+++ b/src/components/Badge/Badge.scss
@@ -14,7 +14,7 @@
   min-width: 30px;
   text-align: center;
   margin: auto;
-  background-color: var(--accent-color);
+  background-color: var(--accent-color--light);
   border-radius: 4px;
   font-size: 8px;
   color: $gray--000;
diff --git a/src/components/BoardHeader/HeaderMenu/BoardSettings/BoardSettings.scss b/src/components/BoardHeader/HeaderMenu/BoardSettings/BoardSettings.scss
index d0fdd9e2ae..26412b0043 100644
--- a/src/components/BoardHeader/HeaderMenu/BoardSettings/BoardSettings.scss
+++ b/src/components/BoardHeader/HeaderMenu/BoardSettings/BoardSettings.scss
@@ -15,7 +15,7 @@ $header-menu-button-width: 24px;
 .board-settings {
   position: relative;
   height: 64px;
-  background-color: var(--accent-color);
+  background-color: var(--accent-color--light);
 }
 
 .board-settings > form {
@@ -77,12 +77,12 @@ $header-menu-button-width: 24px;
 
   &:focus-visible {
     background-color: $gray--000;
-    color: var(--accent-color);
+    color: var(--accent-color--light);
   }
 
   &:hover {
     background-color: $gray--000;
-    color: var(--accent-color);
+    color: var(--accent-color--light);
     transform: scale(1.06);
   }
 
diff --git a/src/components/Column/Column.scss b/src/components/Column/Column.scss
index 6925b35fdc..45573ee433 100644
--- a/src/components/Column/Column.scss
+++ b/src/components/Column/Column.scss
@@ -44,7 +44,7 @@
   flex-direction: column;
   flex: 1;
   ::selection {
-    background-color: rgba(var(--accent-color-rgb), 0.5);
+    background-color: rgba(var(--accent-color--light-rgb), 0.5);
   }
 }
 
@@ -70,7 +70,7 @@
   justify-content: space-between;
   width: auto;
   height: auto;
-  border-bottom: solid 3px var(--accent-color);
+  border-bottom: solid 3px var(--accent-color--light);
   margin: 0 $spacing--xs 0 0;
   overflow: hidden;
 }
@@ -107,7 +107,7 @@
   border: none;
   font-size: calc(#{$text-size--large} + 0.4vw);
   color: $navy--900;
-  border-bottom: dashed 3px var(--accent-color);
+  border-bottom: dashed 3px var(--accent-color--light);
   margin: 0 auto 0 0;
   font-weight: bold;
   letter-spacing: $letter-spacing--large;
@@ -148,8 +148,8 @@
 }
 
 .column__notes-wrapper.isOver {
-  border-color: var(--accent-color);
-  background-color: rgba(var(--accent-color-rgb), 0.2);
+  border-color: var(--accent-color--light);
+  background-color: rgba(var(--accent-color--light-rgb), 0.2);
 }
 
 .column__note-list {
@@ -218,8 +218,8 @@
   &:hover > svg,
   &:focus-visible > svg {
     transform: translate(-0.64px, -0.64px);
-    filter: drop-shadow(2px 2px 2px rgba(var(--accent-color-rgb), 0.24));
-    color: var(--accent-color);
+    filter: drop-shadow(2px 2px 2px rgba(var(--accent-color--light-rgb), 0.24));
+    color: var(--accent-color--light);
   }
 }
 
diff --git a/src/components/Column/ColumnSettings.scss b/src/components/Column/ColumnSettings.scss
index 6377b4d35a..a7f4aae08b 100644
--- a/src/components/Column/ColumnSettings.scss
+++ b/src/components/Column/ColumnSettings.scss
@@ -64,7 +64,7 @@
   height: 18px;
   width: 18px;
   border-radius: 4px;
-  background-color: var(--accent-color);
+  background-color: var(--accent-color--light);
   transition: all 0.08s ease-out;
 
   &:hover {
diff --git a/src/components/ConfirmationDialog/ConfirmationDialog.scss b/src/components/ConfirmationDialog/ConfirmationDialog.scss
index ea5721137c..8aa7048021 100644
--- a/src/components/ConfirmationDialog/ConfirmationDialog.scss
+++ b/src/components/ConfirmationDialog/ConfirmationDialog.scss
@@ -35,7 +35,7 @@
   height: 100%;
   margin-top: -9px;
   margin-left: -14px;
-  color: var(--accent-color);
+  color: var(--accent-color--light);
   opacity: 0.6;
 }
 
@@ -58,7 +58,7 @@
   margin: 12px 0px 0px 0px;
 }
 .confirmation-dialog__warning > svg {
-  color: var(--accent-color);
+  color: var(--accent-color--light);
   height: $icon--medium;
   width: $icon--medium;
   opacity: 0.8;
diff --git a/src/components/Dialog/Dialog.scss b/src/components/Dialog/Dialog.scss
index 95e5e4fb20..88a16e5662 100644
--- a/src/components/Dialog/Dialog.scss
+++ b/src/components/Dialog/Dialog.scss
@@ -70,10 +70,10 @@
   border-radius: $rounded--full;
 
   &:hover {
-    background-color: var(--accent-color--desaturated-light);
+    background-color: var(--accent-color--100);
   }
   &:focus-visible {
-    border: 2px solid var(--accent-color);
+    border: 2px solid var(--accent-color--light);
     outline: none;
   }
 }
@@ -98,11 +98,11 @@
   outline: none;
 
   &:hover {
-    background-color: rgba(var(--accent-color-rgb), 0.1);
+    background-color: rgba(var(--accent-color--light-rgb), 0.1);
   }
 
   &:focus-visible {
-    box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb), 1);
+    box-shadow: 0 0 0 2px rgba(var(--accent-color--light-rgb), 1);
   }
 
   > label:first-of-type {
@@ -124,6 +124,6 @@
     color: $gray--000;
   }
   .dialog__close-button:hover {
-    background-color: var(--accent-color--desaturated-dark);
+    background-color: rgba(var(--accent-color--dark-rgb), 0.6);
   }
 }
diff --git a/src/components/EmojiSuggestions/EmojiSuggestions.scss b/src/components/EmojiSuggestions/EmojiSuggestions.scss
index ab8a52368e..2f97143fe8 100644
--- a/src/components/EmojiSuggestions/EmojiSuggestions.scss
+++ b/src/components/EmojiSuggestions/EmojiSuggestions.scss
@@ -21,7 +21,7 @@
 
   &__element:hover,
   .emoji-suggestions__element--focus {
-    background-color: rgba(var(--accent-color-rgb), 0.2);
+    background-color: rgba(var(--accent-color--light-rgb), 0.2);
   }
 
   &__emoji {
diff --git a/src/components/Note/Note.scss b/src/components/Note/Note.scss
index d050d68101..3e2a9cd082 100644
--- a/src/components/Note/Note.scss
+++ b/src/components/Note/Note.scss
@@ -58,7 +58,7 @@ $note__footer-gap: 42px;
 
 .note:focus-within,
 .note:focus-visible {
-  outline: 2px solid rgba(var(--accent-color-rgb), 0.5);
+  outline: 2px solid rgba(var(--accent-color--light-rgb), 0.5);
 }
 
 .note:hover {
@@ -67,7 +67,7 @@ $note__footer-gap: 42px;
 
 .shouldCombine .note {
   transform-origin: center;
-  border: 2px solid var(--accent-color);
+  border: 2px solid var(--accent-color--light);
   border-radius: $note__border-radius;
 
   transform: scale(0.98);
@@ -111,7 +111,7 @@ $note__footer-gap: 42px;
   width: $note__indicator-width;
   height: $note__indicator-height;
   border-radius: 0 $note__indicator-width $note__indicator-width 0;
-  background: var(--accent-color);
+  background: var(--accent-color--light);
 }
 .note__container {
   margin: $note__text-margin-top 0 $spacing--xs;
@@ -164,7 +164,7 @@ $note__footer-gap: 42px;
   position: absolute;
   top: calc(50% - ($icon--huge / 2));
   left: calc(50% - ($icon--huge / 2));
-  fill: var(--accent-color);
+  fill: var(--accent-color--light);
 }
 
 .note__header {
diff --git a/src/components/Note/NoteAuthorList/NoteAuthorList.scss b/src/components/Note/NoteAuthorList/NoteAuthorList.scss
index c8810872d5..64da017093 100644
--- a/src/components/Note/NoteAuthorList/NoteAuthorList.scss
+++ b/src/components/Note/NoteAuthorList/NoteAuthorList.scss
@@ -30,7 +30,7 @@ $max-name-length: 112px;
 }
 
 .note-author__container--self {
-  background: var(--accent-color--desaturated-light);
+  background: var(--accent-color--100);
   padding-right: $spacing--base;
   width: max-content;
 }
@@ -112,7 +112,7 @@ $max-name-length: 112px;
 
 [theme="dark"] {
   .note-author__container--self {
-    background: var(--accent-color--desaturated-dark);
+    background: rgba(var(--accent-color--dark-rgb), 0.6);
   }
 
   .note__author-name {
diff --git a/src/components/Note/NoteReactionList/NoteReactionBar/NoteReactionBar.scss b/src/components/Note/NoteReactionList/NoteReactionBar/NoteReactionBar.scss
index 84e6781b24..ce153053ed 100644
--- a/src/components/Note/NoteReactionList/NoteReactionBar/NoteReactionBar.scss
+++ b/src/components/Note/NoteReactionList/NoteReactionBar/NoteReactionBar.scss
@@ -32,15 +32,15 @@ $scale-factor: 120%;
   }
 
   &--active {
-    background-color: var(--accent-color--desaturated-light);
+    background-color: var(--accent-color--100);
 
     &:hover {
-      background-color: var(--accent-color--desaturated-light-hover);
+      background-color: var(--accent-color--200);
     }
   }
 
   &:focus {
-    background-color: var(--accent-color--desaturated-light-hover);
+    background-color: var(--accent-color--100);
   }
 }
 
@@ -57,15 +57,14 @@ $scale-factor: 120%;
     }
 
     &--active {
-      background-color: var(--accent-color--desaturated-dark);
-
+      background-color: rgba(var(--accent-color--dark-rgb), 0.6);
       &:hover {
-        background-color: var(--accent-color--desaturated-dark-hover);
+        background-color: rgba(var(--accent-color--dark-rgb), 0.8);
       }
     }
 
     &:focus {
-      background-color: var(--accent-color--desaturated-dark-hover);
+      background-color: rgba(var(--accent-color--dark-rgb), 0.8);
     }
   }
 }
diff --git a/src/components/Note/NoteReactionList/NoteReactionChip/NoteReactionChip.scss b/src/components/Note/NoteReactionList/NoteReactionChip/NoteReactionChip.scss
index 9e3d28caa6..bc67bb5c2d 100644
--- a/src/components/Note/NoteReactionList/NoteReactionChip/NoteReactionChip.scss
+++ b/src/components/Note/NoteReactionList/NoteReactionChip/NoteReactionChip.scss
@@ -22,7 +22,7 @@
   cursor: pointer;
 
   &:hover {
-    background-color: $gray--300;
+    background-color: $gray--500;
   }
 }
 
@@ -38,23 +38,23 @@
 }
 
 .note-reaction-chip__root--self {
-  background-color: var(--accent-color--desaturated-light);
+  background-color: var(--accent-color--100);
 
   &:hover {
-    background-color: var(--accent-color--desaturated-light-hover);
+    background-color: var(--accent-color--200);
   }
 }
 
 // override
 .note-reaction-chip__root--override-active {
-  background-color: var(--accent-color);
+  background-color: var(--accent-color--light);
 
   .note-reaction-chip__amount {
     color: $gray--000;
   }
 
   &:hover {
-    background-color: var(--accent-color); // essentially no hover color when active.
+    background-color: var(--accent-color--light); // essentially no hover color when active.
   }
 }
 
@@ -68,18 +68,17 @@
   }
 
   .note-reaction-chip__root--self {
-    background-color: var(--accent-color--desaturated-dark);
+    background-color: rgba(var(--accent-color--dark-rgb), 0.6);
 
     &:hover {
-      background-color: var(--accent-color--desaturated-dark-hover);
+      background-color: rgba(var(--accent-color--dark-rgb), 0.8);
     }
   }
 
   .note-reaction-chip__root--override-active {
-    background-color: var(--accent-color--desaturated-dark-hover);
-
+    background-color: rgba(var(--accent-color--dark-rgb), 0.8);
     &:hover {
-      background-color: var(--accent-color--desaturated-dark-hover);
+      background-color: rgba(var(--accent-color--dark-rgb), 0.8);
     }
   }
 
diff --git a/src/components/Note/NoteReactionList/NoteReactionList.scss b/src/components/Note/NoteReactionList/NoteReactionList.scss
index 0918131e63..1e4ce6db64 100644
--- a/src/components/Note/NoteReactionList/NoteReactionList.scss
+++ b/src/components/Note/NoteReactionList/NoteReactionList.scss
@@ -39,10 +39,10 @@
   cursor: pointer;
 
   &:hover {
-    background-color: $gray--300;
+    background-color: rgba(var(--accent-color--light-rgb), 0.1);
   }
   &:focus-visible {
-    outline: 2px solid rgba(var(--accent-color-rgb), 0.5);
+    outline: 2px solid rgba(var(--accent-color--light-rgb), 0.5);
   }
 }
 
diff --git a/src/components/Note/NoteReactionList/NoteReactionPopup/NoteReactionPopup.scss b/src/components/Note/NoteReactionList/NoteReactionPopup/NoteReactionPopup.scss
index 6fbbb37a8b..457ffaab93 100644
--- a/src/components/Note/NoteReactionList/NoteReactionPopup/NoteReactionPopup.scss
+++ b/src/components/Note/NoteReactionList/NoteReactionPopup/NoteReactionPopup.scss
@@ -67,11 +67,11 @@
   }
 
   &--active {
-    background-color: var(--accent-color);
+    background-color: var(--accent-color--light);
     color: $gray--000;
 
     &:hover {
-      background-color: var(--accent-color); // essentially no hover color when active.
+      background-color: var(--accent-color--light); // essentially no hover color when active.
     }
   }
 }
@@ -121,7 +121,7 @@
   border-radius: $rounded--full;
 
   &--active {
-    background-color: var(--accent-color--desaturated-light);
+    background-color: var(--accent-color--100);
   }
 }
 
@@ -157,13 +157,13 @@
     background-color: $navy--600;
 
     &--active {
-      background-color: var(--accent-color--desaturated-dark-hover);
+      background-color: rgba(var(--accent-color--dark-rgb), 0.8);
     }
   }
 
   .note-reaction-popup__row-reaction {
     &--active {
-      background-color: var(--accent-color--desaturated-dark);
+      background-color: rgba(var(--accent-color--dark-rgb), 0.6);
     }
   }
 
diff --git a/src/components/Note/NoteTextContent/NoteTextContent.scss b/src/components/Note/NoteTextContent/NoteTextContent.scss
index d0c317a709..c92939d4c5 100644
--- a/src/components/Note/NoteTextContent/NoteTextContent.scss
+++ b/src/components/Note/NoteTextContent/NoteTextContent.scss
@@ -9,6 +9,6 @@
     overflow: hidden;
     text-overflow: ellipsis;
     vertical-align: top; /* align with the rest of the text */
-    color: var(--accent-color);
+    color: var(--accent-color--light);
   }
 }
diff --git a/src/components/NoteDialogComponents/NoteDialogHeader.scss b/src/components/NoteDialogComponents/NoteDialogHeader.scss
index 3df60a76fa..0c1be14332 100644
--- a/src/components/NoteDialogComponents/NoteDialogHeader.scss
+++ b/src/components/NoteDialogComponents/NoteDialogHeader.scss
@@ -24,7 +24,7 @@
       content: " ";
       display: block;
       height: 6px;
-      background: var(--accent-color);
+      background: var(--accent-color--light);
       border-radius: $rounded--full;
       margin-top: $spacing--base;
 
diff --git a/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogNoteContent.scss b/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogNoteContent.scss
index a14a6f95cb..ce038187dc 100644
--- a/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogNoteContent.scss
+++ b/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogNoteContent.scss
@@ -45,7 +45,7 @@
   &:not(:disabled) {
     &:hover,
     &:focus-visible {
-      border-color: var(--accent-color--desaturated-dark);
+      border-color: rgba(var(--accent-color--dark-rgb), 0.6);
     }
   }
 }
@@ -87,7 +87,7 @@
   left: 0;
   cursor: zoom-out;
   backdrop-filter: blur(10px) brightness(0.76) saturate(0);
-  background: rgba(var(--accent-color-rgb), 0.42);
+  background: rgba(var(--accent-color--light-rgb), 0.42);
 
   animation: fade 0.1s ease-in-out;
 }
diff --git a/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogDeleteNoteButton.scss b/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogDeleteNoteButton.scss
index 25634804be..f122e257b2 100644
--- a/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogDeleteNoteButton.scss
+++ b/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogDeleteNoteButton.scss
@@ -7,18 +7,18 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: rgba(var(--accent-color-rgb), 0.2);
-  color: var(--accent-color);
+  background-color: rgba(var(--accent-color--light-rgb), 0.2);
+  color: var(--accent-color--light);
   transition:
     background-color 150ms ease-in-out,
     color 150ms ease-in-out;
 }
 .note-dialog__note-option__remove:hover {
-  background-color: var(--accent-color);
+  background-color: var(--accent-color--light);
   color: $gray--000;
 }
 .note-dialog__note-option__remove:focus-visible {
-  outline: 2px solid rgba(var(--accent-color-rgb), 0.5);
+  outline: 2px solid rgba(var(--accent-color--light-rgb), 0.5);
 }
 
 .note-dialog__note-option__remove-icon {
diff --git a/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogNoteOptions.scss b/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogNoteOptions.scss
index ba95eb86a9..ff44295db5 100644
--- a/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogNoteOptions.scss
+++ b/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogNoteOptions.scss
@@ -19,16 +19,16 @@
   width: 32px;
   padding: 0;
   border: 0;
-  color: var(--accent-color);
-  background-color: var(--accent-color--desaturated-light);
+  color: var(--accent-color--light);
+  background-color: var(--accent-color--100);
   border-radius: $rounded--full;
   cursor: pointer;
   transition:
     background-color 80ms ease-in-out,
     color 80ms ease-in-out;
   box-shadow:
-    0 1px 3px 0 rgba(var(--accent-color-rgb), 0.1),
-    0 1px 2px -1px rgba(var(--accent-color-rgb), 0.1);
+    0 1px 3px 0 rgba(var(--accent-color--light-rgb), 0.1),
+    0 1px 2px -1px rgba(var(--accent-color--light-rgb), 0.1);
 
   > svg {
     height: 100%;
@@ -36,25 +36,25 @@
   }
 
   &:hover {
-    background-color: var(--accent-color);
+    background-color: var(--accent-color--light);
     color: $gray--000;
   }
   &:focus-visible {
-    outline: 2px solid var(--accent-color);
+    outline: 2px solid var(--accent-color--light);
   }
 }
 
 [theme="dark"] {
   .note-option__button {
-    background-color: var(--accent-color--desaturated-dark);
+    background-color: rgba(var(--accent-color--dark-rgb), 0.6);
     color: var(--accent-color--dark);
 
     &:hover {
-      background-color: var(--accent-color);
+      background-color: var(--accent-color--light);
       color: $gray--000;
     }
     &:focus-visible {
-      outline: 2px solid var(--accent-color--desaturated-dark);
+      outline: 2px solid rgba(var(--accent-color--dark-rgb), 0.6);
     }
   }
 }
diff --git a/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogUnstackNoteButton.scss b/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogUnstackNoteButton.scss
index 8cc3239ad8..b4295ec777 100644
--- a/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogUnstackNoteButton.scss
+++ b/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogUnstackNoteButton.scss
@@ -7,18 +7,18 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: rgba(var(--accent-color-rgb), 0.2);
-  color: var(--accent-color);
+  background-color: rgba(var(--accent-color--light-rgb), 0.2);
+  color: var(--accent-color--light);
   transition:
     background-color 150ms ease-in-out,
     color 150ms ease-in-out;
 }
 .note-dialog__note-option__unstack:hover {
-  background-color: var(--accent-color);
+  background-color: var(--accent-color--light);
   color: $gray--000;
 }
 .note-dialog__note-option__unstack:focus-visible {
-  outline: 2px solid rgba(var(--accent-color-rgb), 0.5);
+  outline: 2px solid rgba(var(--accent-color--light-rgb), 0.5);
 }
 
 .note-dialog__note-option__unstack-icon {
diff --git a/src/components/NoteInput/NoteInput.scss b/src/components/NoteInput/NoteInput.scss
index 60da354d73..ddaba791ae 100644
--- a/src/components/NoteInput/NoteInput.scss
+++ b/src/components/NoteInput/NoteInput.scss
@@ -17,8 +17,8 @@ $note-input__input-right: 40px;
 
   &:hover,
   &:focus-within {
-    border-color: rgba(var(--accent-color-rgb), 0.5);
-    box-shadow: 0 6px 9px 0 rgba(var(--accent-color-rgb), 0.16);
+    border-color: rgba(var(--accent-color--light-rgb), 0.5);
+    box-shadow: 0 6px 9px 0 rgba(var(--accent-color--light-rgb), 0.16);
   }
 }
 
@@ -65,7 +65,7 @@ $note-input__input-right: 40px;
 .note-input__icon--add {
   width: $icon--large;
   height: $icon--large;
-  color: var(--accent-color);
+  color: var(--accent-color--light);
   align-self: center;
   transition: all 0.08s ease-out;
 }
@@ -81,7 +81,7 @@ $note-input__input-right: 40px;
 
 .note-input__icon--star {
   position: absolute;
-  color: var(--accent-color);
+  color: var(--accent-color--light);
   animation: sparkle 1.5s ease-in-out infinite alternate;
 
   &.star-1 {
diff --git a/src/components/Portal/Portal.scss b/src/components/Portal/Portal.scss
index eb3110005e..b4761cc78f 100644
--- a/src/components/Portal/Portal.scss
+++ b/src/components/Portal/Portal.scss
@@ -42,7 +42,7 @@
   height: fit-content;
   width: fit-content;
   ::selection {
-    background-color: rgba(var(--accent-color-rgb), 0.5);
+    background-color: rgba(var(--accent-color--light-rgb), 0.5);
   }
 }
 
diff --git a/src/components/ScrumlrLogo/ScrumlrLogo.scss b/src/components/ScrumlrLogo/ScrumlrLogo.scss
index 89362250d5..c2dc277265 100644
--- a/src/components/ScrumlrLogo/ScrumlrLogo.scss
+++ b/src/components/ScrumlrLogo/ScrumlrLogo.scss
@@ -39,7 +39,7 @@
   }
 
   .scrumlr-logo__stop {
-    stop-color: var(--accent-color);
+    stop-color: var(--accent-color--light);
   }
 }
 
diff --git a/src/components/SettingsDialog/BoardSettings/BoardSettings.scss b/src/components/SettingsDialog/BoardSettings/BoardSettings.scss
index 73d74b9f00..57794b98e7 100644
--- a/src/components/SettingsDialog/BoardSettings/BoardSettings.scss
+++ b/src/components/SettingsDialog/BoardSettings/BoardSettings.scss
@@ -8,7 +8,7 @@
   padding-bottom: $settings-dialog-container--bottom;
 
   &:focus-visible {
-    outline: 2px dashed rgba(var(--accent-color-rgb), 0.5);
+    outline: 2px dashed rgba(var(--accent-color--light-rgb), 0.5);
     border-radius: 8px;
   }
 
@@ -133,7 +133,7 @@
 .board-settings__policy-button_value svg {
   width: $icon--medium;
   height: $icon--medium;
-  color: var(--accent-color);
+  color: var(--accent-color--light);
 }
 
 .board-settings__password-button {
@@ -160,7 +160,7 @@
 }
 
 .board-settings__show-password-button--enabled {
-  color: var(--accent-color);
+  color: var(--accent-color--light);
   cursor: pointer;
   transition: all 0.08s ease-out;
 
@@ -218,7 +218,7 @@
   height: 30px;
   border: none;
   background-color: inherit;
-  color: var(--accent-color);
+  color: var(--accent-color--light);
   align-self: center;
 }
 
@@ -244,14 +244,14 @@
 .board-settings__remove-protection-button svg {
   width: $icon--medium;
   height: $icon--medium;
-  color: var(--accent-color);
+  color: var(--accent-color--light);
 }
 
 .board-settings__generate-password-button svg {
   // TODO remove margin when icon gets updated
   width: $icon--medium;
   height: $icon--medium;
-  color: var(--accent-color);
+  color: var(--accent-color--light);
 }
 
 .board-settings__password-management-text {
diff --git a/src/components/SettingsDialog/Components/AvatarSettings.scss b/src/components/SettingsDialog/Components/AvatarSettings.scss
index 189e4f266c..7412b34093 100644
--- a/src/components/SettingsDialog/Components/AvatarSettings.scss
+++ b/src/components/SettingsDialog/Components/AvatarSettings.scss
@@ -24,7 +24,7 @@
       border: 0;
       border-radius: 20px;
       background-color: $gray--000;
-      box-shadow: 0 8px 16px rgba(var(--accent-color-rgb), 0.3);
+      box-shadow: 0 8px 16px rgba(var(--accent-color--light-rgb), 0.3);
       align-items: center;
       justify-content: center;
       transition: all 0.08s ease-out;
@@ -32,7 +32,7 @@
       &:hover {
         background-color: mix($gray--000, $purple--500, 92%);
         transform: scale(1.06);
-        box-shadow: 0 12px 20px rgba(var(--accent-color-rgb), 0.2);
+        box-shadow: 0 12px 20px rgba(var(--accent-color--light-rgb), 0.2);
       }
 
       &:active {
@@ -72,7 +72,7 @@
         cursor: pointer;
 
         &:hover {
-          background-color: rgba(var(--accent-color-rgb), 0.1);
+          background-color: rgba(var(--accent-color--light-rgb), 0.1);
         }
       }
 
@@ -90,7 +90,7 @@
         }
 
         &:hover:not(.disabled) {
-          background-color: rgba(var(--accent-color-rgb), 0.1);
+          background-color: rgba(var(--accent-color--light-rgb), 0.1);
         }
 
         &-seperator {
diff --git a/src/components/SettingsDialog/Components/SettingsAccordion.scss b/src/components/SettingsDialog/Components/SettingsAccordion.scss
index 0d29b8245e..edf1162457 100644
--- a/src/components/SettingsDialog/Components/SettingsAccordion.scss
+++ b/src/components/SettingsDialog/Components/SettingsAccordion.scss
@@ -20,14 +20,14 @@
     }
 
     &:focus-visible {
-      background-color: rgba(var(--accent-color-rgb), 0.1);
+      background-color: rgba(var(--accent-color--light-rgb), 0.1);
     }
   }
 
   &__header-icon {
     height: 24px;
     width: 24px;
-    color: var(--accent-color);
+    color: var(--accent-color--light);
     transform: rotate(90deg);
     transition: transform 0.2s ease-out;
 
diff --git a/src/components/SettingsDialog/Components/SettingsButton.scss b/src/components/SettingsDialog/Components/SettingsButton.scss
index ba70f636a3..388ad8e985 100644
--- a/src/components/SettingsDialog/Components/SettingsButton.scss
+++ b/src/components/SettingsDialog/Components/SettingsButton.scss
@@ -30,7 +30,7 @@ $header-menu-border-bottom-color: #efefef;
 
 .settings-option-button:focus-within,
 .settings-option-button:hover {
-  background-color: rgba(var(--accent-color-rgb), 0.1);
+  background-color: rgba(var(--accent-color--light-rgb), 0.1);
 }
 
 .settings-option-button__label {
@@ -46,7 +46,7 @@ $header-menu-border-bottom-color: #efefef;
   width: $icon--large;
   height: $icon--large;
   flex-shrink: 0;
-  color: var(--accent-color);
+  color: var(--accent-color--light);
   vertical-align: middle;
   border-bottom: none !important;
 }
diff --git a/src/components/SettingsDialog/Components/SettingsCarousel.scss b/src/components/SettingsDialog/Components/SettingsCarousel.scss
index c778befc44..d817de4a95 100644
--- a/src/components/SettingsDialog/Components/SettingsCarousel.scss
+++ b/src/components/SettingsDialog/Components/SettingsCarousel.scss
@@ -30,16 +30,16 @@
     align-items: center;
     border: none;
     outline: none;
-    color: var(--accent-color);
+    color: var(--accent-color--light);
     transition: all 0.08s ease-out;
 
     &:hover > svg {
-      background-color: var(--accent-color--desaturated-light);
+      background-color: var(--accent-color--100);
       transform: scale(1.1);
     }
 
     &:focus-visible > svg {
-      background-color: var(--accent-color--desaturated-light);
+      background-color: var(--accent-color--100);
     }
 
     svg {
@@ -60,11 +60,11 @@
     }
 
     &__button {
-      color: var(--accent-color);
+      color: var(--accent-color--light);
 
       &:hover > svg,
       &:focus-visible > svg {
-        background-color: var(--accent-color--desaturated-dark);
+        background-color: rgba(var(--accent-color--dark-rgb), 0.6);
       }
     }
   }
diff --git a/src/components/SettingsDialog/Components/SettingsDropdown.scss b/src/components/SettingsDialog/Components/SettingsDropdown.scss
index 868ba3b80e..086aae1772 100644
--- a/src/components/SettingsDialog/Components/SettingsDropdown.scss
+++ b/src/components/SettingsDialog/Components/SettingsDropdown.scss
@@ -20,12 +20,12 @@
 
     &:focus-visible {
       position: relative;
-      outline: 2px solid rgba(var(--accent-color-rgb), 0.3);
+      outline: 2px solid rgba(var(--accent-color--light-rgb), 0.3);
       z-index: 1;
     }
 
     &:hover {
-      background-color: rgba(var(--accent-color-rgb), 0.1);
+      background-color: rgba(var(--accent-color--light-rgb), 0.1);
     }
 
     &[aria-expanded="true"] .settings-dropdown__item-icon--dropdown {
@@ -68,7 +68,7 @@
     padding: 0;
     background-color: $gray--000;
     border-radius: 0 0 8px 8px;
-    box-shadow: 0 4px 8px 0 rgba(var(--accent-color-rgb), 0.4);
+    box-shadow: 0 4px 8px 0 rgba(var(--accent-color--light-rgb), 0.4);
 
     &:not(.active) {
       display: none;
@@ -87,7 +87,7 @@
       }
 
       &:focus-visible {
-        outline: 2px solid rgba(var(--accent-color-rgb), 0.6);
+        outline: 2px solid rgba(var(--accent-color--light-rgb), 0.6);
       }
     }
 
diff --git a/src/components/SettingsDialog/Components/SettingsInput.scss b/src/components/SettingsDialog/Components/SettingsInput.scss
index 47aaf7cc76..267ee43c48 100644
--- a/src/components/SettingsDialog/Components/SettingsInput.scss
+++ b/src/components/SettingsDialog/Components/SettingsInput.scss
@@ -13,7 +13,7 @@
 
   &:has(:focus-visible),
   &:hover {
-    background-color: rgba(var(--accent-color-rgb), 0.1);
+    background-color: rgba(var(--accent-color--light-rgb), 0.1);
   }
 }
 
@@ -84,7 +84,7 @@
   cursor: pointer;
 
   &:focus-visible * {
-    outline: 2px solid var(--accent-color-rgb);
+    outline: 2px solid var(--accent-color--light-rgb);
   }
 }
 
diff --git a/src/components/SettingsDialog/Components/SettingsToggle.scss b/src/components/SettingsDialog/Components/SettingsToggle.scss
index 165f51badd..b2d3d2b7a4 100644
--- a/src/components/SettingsDialog/Components/SettingsToggle.scss
+++ b/src/components/SettingsDialog/Components/SettingsToggle.scss
@@ -43,5 +43,5 @@ $header-menu-toggle-background-color: #c8c8c8;
 }
 .settings-toggle__switch--right::after {
   left: $header-menu-toggle-button-width;
-  background-color: var(--accent-color);
+  background-color: var(--accent-color--light);
 }
diff --git a/src/components/SettingsDialog/Components/ThemeSettings.scss b/src/components/SettingsDialog/Components/ThemeSettings.scss
index 782eee7a52..6e3df773fc 100644
--- a/src/components/SettingsDialog/Components/ThemeSettings.scss
+++ b/src/components/SettingsDialog/Components/ThemeSettings.scss
@@ -28,7 +28,7 @@
   min-width: 0;
 
   &:hover {
-    color: var(--accent-color);
+    color: var(--accent-color--light);
   }
 
   > input {
@@ -39,20 +39,20 @@
 
     &:checked {
       + img {
-        box-shadow: 0 0 0 2px var(--accent-color);
+        box-shadow: 0 0 0 2px var(--accent-color--light);
       }
       ~ p {
-        background-color: var(--accent-color);
+        background-color: var(--accent-color--light);
         color: $gray--000;
       }
     }
 
     &:focus-within {
       + img {
-        outline: rgba(var(--accent-color-rgb), 0.7) solid 2px;
+        outline: rgba(var(--accent-color--light-rgb), 0.7) solid 2px;
       }
       ~ p {
-        outline: rgba(var(--accent-color-rgb), 0.7) solid 2px;
+        outline: rgba(var(--accent-color--light-rgb), 0.7) solid 2px;
       }
     }
   }
@@ -105,7 +105,7 @@
   }
 
   .appearence-settings__theme-option:hover {
-    color: var(--accent-color--desaturated-light);
+    color: var(--accent-color--100);
   }
 }
 
diff --git a/src/components/SettingsDialog/ExportBoard/PrintView/PrintView.scss b/src/components/SettingsDialog/ExportBoard/PrintView/PrintView.scss
index 37d727db61..ffcc868009 100644
--- a/src/components/SettingsDialog/ExportBoard/PrintView/PrintView.scss
+++ b/src/components/SettingsDialog/ExportBoard/PrintView/PrintView.scss
@@ -159,7 +159,7 @@ $color-button-shadow: rgba(133, 144, 147, 0.5);
   letter-spacing: $letter-spacing--large;
   line-height: $line-height--large;
   color: $navy--900;
-  border-bottom: solid 3px var(--accent-color);
+  border-bottom: solid 3px var(--accent-color--light);
 }
 
 .print-view__column-header-card-count {
@@ -171,10 +171,10 @@ $color-button-shadow: rgba(133, 144, 147, 0.5);
 .print-view__note-stack-wrapper {
   border-radius: $note__border-radius;
   padding: $spacing--xs $spacing--xs 0 $spacing--xs;
-  border: 2px solid rgba(var(--accent-color-rgb), 0.25);
+  border: 2px solid rgba(var(--accent-color--light-rgb), 0.25);
   width: 100%;
   margin-bottom: $spacing--base;
-  background: rgba(var(--accent-color-rgb), 0.05);
+  background: rgba(var(--accent-color--light-rgb), 0.05);
 }
 
 .print-view__note {
@@ -182,7 +182,7 @@ $color-button-shadow: rgba(133, 144, 147, 0.5);
   width: 100%;
   margin-bottom: $spacing--base;
   padding: calc(#{$spacing--xs} + 4px);
-  border: 2px solid rgba(var(--accent-color-rgb), 0.25);
+  border: 2px solid rgba(var(--accent-color--light-rgb), 0.25);
   border-radius: $note__border-radius;
   background: $gray--000;
 }
@@ -195,7 +195,7 @@ $color-button-shadow: rgba(133, 144, 147, 0.5);
 .print-view__note--isChild {
   width: 100%;
   margin-bottom: $spacing--xs;
-  border: 2px dashed rgba(var(--accent-color-rgb), 0.25);
+  border: 2px dashed rgba(var(--accent-color--light-rgb), 0.25);
 }
 
 .print-view__note--isTop {
@@ -214,13 +214,13 @@ $color-button-shadow: rgba(133, 144, 147, 0.5);
 
 .print-view__note-info--isTop {
   svg {
-    color: var(--accent-color);
+    color: var(--accent-color--light);
   }
 }
 
 .print-view__note-info--isChild {
   svg {
-    color: rgba(var(--accent-color-rgb), 0.25);
+    color: rgba(var(--accent-color--light-rgb), 0.25);
   }
 }
 
@@ -240,8 +240,8 @@ $color-button-shadow: rgba(133, 144, 147, 0.5);
   float: right;
   border-radius: $rounded--full;
   padding: 6px 11px;
-  background: rgba(var(--accent-color-rgb), 0.25);
-  color: var(--accent-color);
+  background: rgba(var(--accent-color--light-rgb), 0.25);
+  color: var(--accent-color--light);
   font-weight: bold;
 }
 
diff --git a/src/components/SettingsDialog/Feedback/Feedback.scss b/src/components/SettingsDialog/Feedback/Feedback.scss
index 912b8d5a84..44a7d9f489 100644
--- a/src/components/SettingsDialog/Feedback/Feedback.scss
+++ b/src/components/SettingsDialog/Feedback/Feedback.scss
@@ -36,18 +36,18 @@ $FEEDBACK_OPTION_WIDTH: 80px;
   position: relative;
   top: -19px;
   &:hover {
-    background-color: var(--accent-color--desaturated-light);
+    background-color: var(--accent-color--100);
   }
 }
 .feedback-option__input:checked + .feedback-option__label {
   color: $gray--000;
-  background-color: var(--accent-color);
+  background-color: var(--accent-color--light);
 }
 [theme="dark"] .settings-dialog__feedback-option > label {
   color: $gray--000;
   background-color: $navy--500;
   &:hover {
-    background-color: var(--accent-color--desaturated-dark);
+    background-color: rgba(var(--accent-color--dark-rgb), 0.6);
   }
 }
 
@@ -61,7 +61,7 @@ $FEEDBACK_OPTION_WIDTH: 80px;
 .feedback-form__submit-button {
   padding: $spacing--xs $spacing--lg;
   border-radius: 32px;
-  background-color: var(--accent-color);
+  background-color: var(--accent-color--light);
   color: $gray--000;
   border: none;
   width: 260px;
@@ -72,7 +72,7 @@ $FEEDBACK_OPTION_WIDTH: 80px;
     transform: scale(0.95);
   }
   &:hover {
-    background-color: rgba(var(--accent-color-rgb), 0.8);
+    background-color: rgba(var(--accent-color--light-rgb), 0.8);
   }
 }
 
diff --git a/src/components/SettingsDialog/Participants/Participants.scss b/src/components/SettingsDialog/Participants/Participants.scss
index 9c5293fda7..1dff86bb56 100644
--- a/src/components/SettingsDialog/Participants/Participants.scss
+++ b/src/components/SettingsDialog/Participants/Participants.scss
@@ -14,7 +14,7 @@
     right: -3px;
     bottom: -3px;
     left: -3px;
-    border: 2px solid var(--accent-color);
+    border: 2px solid var(--accent-color--light);
     border-radius: $rounded--full;
     pointer-events: none;
   }
@@ -61,16 +61,16 @@
   cursor: pointer;
 
   &--active {
-    background-color: var(--accent-color);
+    background-color: var(--accent-color--light);
     color: $gray--000;
   }
   &:focus {
-    outline: 2px solid var(--accent-color);
+    outline: 2px solid var(--accent-color--light);
   }
 }
 @media (hover: hover) {
   .participants__permisson-filter-button:hover {
-    background-color: var(--accent-color--desaturated-light);
+    background-color: var(--accent-color--100);
     color: $navy--900;
   }
 }
@@ -91,11 +91,11 @@
   cursor: pointer;
 
   &--active {
-    background-color: var(--accent-color);
+    background-color: var(--accent-color--light);
     color: $gray--000;
   }
   &:focus {
-    outline: 2px solid var(--accent-color);
+    outline: 2px solid var(--accent-color--light);
   }
   > svg {
     height: $icon--large;
@@ -104,7 +104,7 @@
 }
 @media (hover: hover) {
   .participant__status-filter-button:hover {
-    background-color: var(--accent-color--desaturated-light);
+    background-color: var(--accent-color--100);
     color: $navy--900;
   }
 }
@@ -178,28 +178,28 @@
   padding: 0 $spacing--xs;
   font-weight: 500;
   letter-spacing: $letter-spacing--medium;
-  background-color: var(--accent-color);
+  background-color: var(--accent-color--light);
   color: $gray--000;
   width: fit-content;
 
   &:is(button) {
     line-height: 12px;
     background-color: $gray--000;
-    border: 2px solid var(--accent-color--desaturated-light);
+    border: 2px solid var(--accent-color--100);
     color: $navy--900;
     cursor: pointer;
   }
   &:is(button):hover,
   &:is(button):focus {
     outline: none;
-    border-color: var(--accent-color--desaturated-light);
-    background-color: var(--accent-color--desaturated-light);
+    border-color: var(--accent-color--100);
+    background-color: var(--accent-color--100);
   }
   &--active:is(button),
   &--active:is(button):hover {
     cursor: default;
-    border-color: var(--accent-color);
-    background-color: var(--accent-color);
+    border-color: var(--accent-color--light);
+    background-color: var(--accent-color--light);
     color: $gray--000;
   }
 }
@@ -285,15 +285,15 @@
   cursor: pointer;
 
   &--active {
-    background-color: var(--accent-color);
+    background-color: var(--accent-color--light);
     color: $gray--000;
   }
   &:focus {
-    outline: 2px solid var(--accent-color);
+    outline: 2px solid var(--accent-color--light);
   }
 
   &:hover {
-    background-color: var(--accent-color--desaturated-light);
+    background-color: var(--accent-color--100);
   }
 }
 
@@ -323,14 +323,14 @@
     background-color: $navy--500;
     color: $gray--000;
     &--active {
-      background-color: var(--accent-color);
+      background-color: var(--accent-color--light);
       color: $gray--000;
     }
   }
   @media (hover: hover) {
     .participants__permisson-filter-button:hover,
     .participant__status-filter-button:hover {
-      background-color: var(--accent-color--desaturated-dark);
+      background-color: rgba(var(--accent-color--dark-rgb), 0.6);
       color: $gray--000;
     }
   }
@@ -346,16 +346,16 @@
   .participant__role {
     &:is(button) {
       background-color: $navy--500;
-      border: 2px solid var(--accent-color--desaturated-dark);
+      border: 2px solid rgba(var(--accent-color--dark-rgb), 0.6);
       color: $gray--000;
     }
     &:is(button):hover {
-      background-color: var(--accent-color--desaturated-dark);
+      background-color: rgba(var(--accent-color--dark-rgb), 0.6);
     }
     &--active:is(button),
     &--active:is(button):hover {
-      background-color: var(--accent-color);
-      border-color: var(--accent-color);
+      background-color: var(--accent-color--light);
+      border-color: var(--accent-color--light);
     }
   }
 
@@ -382,7 +382,7 @@
     background-color: $navy--500;
 
     &:hover {
-      background-color: var(--accent-color--desaturated-dark);
+      background-color: rgba(var(--accent-color--dark-rgb), 0.6);
     }
   }
 }
diff --git a/src/components/SettingsDialog/ProfileSettings/ProfileSettings.scss b/src/components/SettingsDialog/ProfileSettings/ProfileSettings.scss
index bf4e186fe5..97f77792aa 100644
--- a/src/components/SettingsDialog/ProfileSettings/ProfileSettings.scss
+++ b/src/components/SettingsDialog/ProfileSettings/ProfileSettings.scss
@@ -35,7 +35,7 @@ $settings__item-height: 48px;
       @include scrollbar();
 
       &:focus-visible {
-        outline: 2px dashed rgba(var(--accent-color-rgb), 0.5);
+        outline: 2px dashed rgba(var(--accent-color--light-rgb), 0.5);
         border-radius: 8px;
       }
     }
@@ -90,7 +90,7 @@ $settings__item-height: 48px;
 
   &:focus-visible {
     border-radius: $rounded--full;
-    outline: 2px solid var(--accent-color);
+    outline: 2px solid var(--accent-color--light);
   }
 }
 
@@ -99,7 +99,7 @@ $settings__item-height: 48px;
     color: $gray--700;
 
     &:focus-visible {
-      outline: 2px solid rgba(var(--accent-color-rgb), 0.5);
+      outline: 2px solid rgba(var(--accent-color--light-rgb), 0.5);
     }
   }
 }
diff --git a/src/components/SettingsDialog/SettingsDialog.scss b/src/components/SettingsDialog/SettingsDialog.scss
index 338509c9e7..f475ab5c9c 100644
--- a/src/components/SettingsDialog/SettingsDialog.scss
+++ b/src/components/SettingsDialog/SettingsDialog.scss
@@ -212,12 +212,12 @@ $settings-dialog-container--bottom: 62px;
   padding: 8px;
 
   &:hover {
-    background: rgba(var(--accent-color-rgb), 0.8);
+    background: rgba(var(--accent-color--light-rgb), 0.8);
     color: $gray--000;
   }
 
   &:focus-visible {
-    box-shadow: 0 0 0 2px var(--accent-color);
+    box-shadow: 0 0 0 2px var(--accent-color--light);
   }
 }
 
@@ -253,7 +253,7 @@ $settings-dialog-container--bottom: 62px;
 
 .navigation__item--active {
   outline: none;
-  background: var(--accent-color);
+  background: var(--accent-color--light);
   color: $gray--000;
 }
 
@@ -261,7 +261,7 @@ $settings-dialog-container--bottom: 62px;
   width: 40px;
   height: 40px;
   border-radius: $rounded--full;
-  background: var(--accent-color);
+  background: var(--accent-color--light);
   color: $gray--000;
 }
 
@@ -291,7 +291,7 @@ $settings-dialog-container--bottom: 62px;
 }
 
 .settings-dialog__header-text {
-  border-bottom: solid 3px var(--accent-color);
+  border-bottom: solid 3px var(--accent-color--light);
   padding-bottom: 8px;
   margin: 0;
 }
diff --git a/src/components/SettingsDialog/ShareSession/ShareSession.scss b/src/components/SettingsDialog/ShareSession/ShareSession.scss
index efef297420..57915362cf 100644
--- a/src/components/SettingsDialog/ShareSession/ShareSession.scss
+++ b/src/components/SettingsDialog/ShareSession/ShareSession.scss
@@ -29,9 +29,9 @@ $header-menu-border-bottom-color: #efefef;
   padding: $spacing--xs $spacing--lg;
   margin-top: $spacing--xl;
   width: 260px;
-  border: solid 2px var(--accent-color);
+  border: solid 2px var(--accent-color--light);
   border-radius: 32px;
-  background-color: var(--accent-color);
+  background-color: var(--accent-color--light);
   color: $gray--000;
   font-weight: bold;
   cursor: pointer;
@@ -40,7 +40,7 @@ $header-menu-border-bottom-color: #efefef;
   &:hover {
     filter: brightness(1.05);
     transform: scale(1.02);
-    box-shadow: 0 6px 9px 0 rgba(var(--accent-color-rgb), 0.24);
+    box-shadow: 0 6px 9px 0 rgba(var(--accent-color--light-rgb), 0.24);
   }
 
   &:active {
@@ -48,12 +48,12 @@ $header-menu-border-bottom-color: #efefef;
   }
 
   &:focus-visible {
-    outline: 2px solid rgba(var(--accent-color-rgb), 0.4);
+    outline: 2px solid rgba(var(--accent-color--light-rgb), 0.4);
   }
 
   &.--copied {
     background-color: transparent;
-    color: var(--accent-color);
+    color: var(--accent-color--light);
     cursor: default;
 
     &:hover {
diff --git a/src/components/StackNavigation/Dots/StackNavigationDots.scss b/src/components/StackNavigation/Dots/StackNavigationDots.scss
index 541e5a0a4c..a6b0d852f9 100644
--- a/src/components/StackNavigation/Dots/StackNavigationDots.scss
+++ b/src/components/StackNavigation/Dots/StackNavigationDots.scss
@@ -31,7 +31,7 @@
   &:focus-visible::after {
     opacity: 1;
     outline: 2px solid $gray--000;
-    background: var(--accent-color);
+    background: var(--accent-color--light);
     transform: scale(1);
   }
 
diff --git a/src/components/StackNavigation/StackNavigation.scss b/src/components/StackNavigation/StackNavigation.scss
index 93943c55d8..a52758381f 100644
--- a/src/components/StackNavigation/StackNavigation.scss
+++ b/src/components/StackNavigation/StackNavigation.scss
@@ -46,7 +46,7 @@
     }
 
     &:focus-visible {
-      background: var(--accent-color);
+      background: var(--accent-color--light);
       color: $gray--000;
     }
 
diff --git a/src/components/Toggle/Toggle.scss b/src/components/Toggle/Toggle.scss
index f877006db3..e914d1fb4a 100644
--- a/src/components/Toggle/Toggle.scss
+++ b/src/components/Toggle/Toggle.scss
@@ -39,8 +39,8 @@
 
 .toggle--active::after {
   left: 16px;
-  background-color: var(--accent-color);
-  box-shadow: 0 4px 8px rgba(var(--accent-color-rgb), 0.24);
+  background-color: var(--accent-color--light);
+  box-shadow: 0 4px 8px rgba(var(--accent-color--light-rgb), 0.24);
 }
 
 .toggle.toggle--disabled {
diff --git a/src/components/TooltipButton/TooltipButton.scss b/src/components/TooltipButton/TooltipButton.scss
index 40509fc5b9..9048245872 100644
--- a/src/components/TooltipButton/TooltipButton.scss
+++ b/src/components/TooltipButton/TooltipButton.scss
@@ -72,7 +72,7 @@ $tooltip-button-size: 46px;
   letter-spacing: $letter-spacing--medium;
   line-height: $line-height--small;
   border-radius: calc($tooltip-button-size / 2);
-  color: var(--accent-color);
+  color: var(--accent-color--light);
 }
 
 .tooltip-button__icon-container {
diff --git a/src/components/Votes/VoteButtons/AddVoteButton.scss b/src/components/Votes/VoteButtons/AddVoteButton.scss
index 49afdcb0ff..eca823af30 100644
--- a/src/components/Votes/VoteButtons/AddVoteButton.scss
+++ b/src/components/Votes/VoteButtons/AddVoteButton.scss
@@ -9,14 +9,14 @@
   height: 32px;
   width: 32px;
 
-  background-color: var(--accent-color--desaturated-light);
-  color: var(--accent-color);
+  background-color: var(--accent-color--100);
+  color: var(--accent-color--light);
   transition:
     background-color 80ms ease-in-out,
     color 80ms ease-in-out;
   box-shadow:
-    0 1px 3px 0 rgba(var(--accent-color-rgb), 0.1),
-    0 1px 2px -1px rgba(var(--accent-color-rgb), 0.1);
+    0 1px 3px 0 rgba(var(--accent-color--light-rgb), 0.1),
+    0 1px 2px -1px rgba(var(--accent-color--light-rgb), 0.1);
 }
 .vote-button-add:disabled {
   opacity: 0.5;
@@ -29,17 +29,21 @@
   pointer-events: none;
 }
 .vote-button-add:enabled:hover {
-  background-color: var(--accent-color);
+  background-color: var(--accent-color--light);
   color: $gray--000;
 }
 .vote-button-add:focus-visible {
-  outline: 2px solid rgba(var(--accent-color-rgb), 0.5);
+  outline: 2px solid rgba(var(--accent-color--light-rgb), 0.5);
 }
 
 [theme="dark"] {
   .vote-button-add {
-    background-color: var(--accent-color--desaturated-dark);
+    background-color: rgba(var(--accent-color--dark-rgb), 0.6);
     color: var(--accent-color--dark);
     filter: drop-shadow(0 3px 4px rgba($navy--900, 0.16));
+
+    &:enabled:hover {
+      background-color: var(--accent-color--dark);
+    }
   }
 }
diff --git a/src/components/Votes/VoteButtons/RemoveVoteButton.scss b/src/components/Votes/VoteButtons/RemoveVoteButton.scss
index c15c9f5a06..25ebe93b7f 100644
--- a/src/components/Votes/VoteButtons/RemoveVoteButton.scss
+++ b/src/components/Votes/VoteButtons/RemoveVoteButton.scss
@@ -9,14 +9,14 @@
   justify-content: center;
   align-items: center;
   overflow: hidden;
-  background-color: var(--accent-color--desaturated-light);
-  color: var(--accent-color);
+  background-color: var(--accent-color--100);
+  color: var(--accent-color--light);
   transition:
     background-color 80ms ease-in-out,
     color 80ms ease-in-out;
   box-shadow:
-    0 1px 3px 0 rgba(var(--accent-color-rgb), 0.1),
-    0 1px 2px -1px rgba(var(--accent-color-rgb), 0.1);
+    0 1px 3px 0 rgba(var(--accent-color--light-rgb), 0.1),
+    0 1px 2px -1px rgba(var(--accent-color--light-rgb), 0.1);
 }
 
 .vote-button-remove:disabled {
@@ -28,7 +28,7 @@
 }
 
 .vote-button-remove:enabled:hover {
-  background-color: var(--accent-color);
+  background-color: var(--accent-color--light);
   color: $gray--000;
   .vote-button-remove__count {
     display: none;
@@ -39,7 +39,7 @@
 }
 
 .vote-button-remove:focus-visible {
-  outline: 2px solid rgba(var(--accent-color-rgb), 0.5);
+  outline: 2px solid rgba(var(--accent-color--light-rgb), 0.5);
   .vote-button-remove__icon {
     display: block;
   }
@@ -91,9 +91,13 @@
 
 [theme="dark"] {
   .vote-button-remove {
-    color: var(--accent-color--dark);
-    background-color: var(--accent-color--desaturated-dark);
+    color: $gray--000;
+    background-color: rgba(var(--accent-color--dark-rgb), 0.6);
     filter: drop-shadow(0 3px 4px rgba($navy--900, 0.16));
+
+    &:enabled:hover {
+      background-color: var(--accent-color--dark);
+    }
   }
 
   .vote-button-remove__folded-corner {
diff --git a/src/components/VotingDialog/VotingDialog.scss b/src/components/VotingDialog/VotingDialog.scss
index 8ae4673411..82f12a3214 100644
--- a/src/components/VotingDialog/VotingDialog.scss
+++ b/src/components/VotingDialog/VotingDialog.scss
@@ -48,7 +48,7 @@
   &:hover {
     filter: brightness(1.05);
     transform: scale(1.01);
-    box-shadow: 0 4px 8px 0 rgba(var(--accent-color-rgb), 0.24);
+    box-shadow: 0 4px 8px 0 rgba(var(--accent-color--light-rgb), 0.24);
   }
 
   &:active {
@@ -56,7 +56,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid rgba(var(--accent-color-rgb), 0.4);
+    outline: 2px solid rgba(var(--accent-color--light-rgb), 0.4);
   }
 }
 
diff --git a/src/constants/colors.scss b/src/constants/colors.scss
new file mode 100644
index 0000000000..432527bb26
--- /dev/null
+++ b/src/constants/colors.scss
@@ -0,0 +1,242 @@
+@use "sass:color";
+
+// primary
+// blue
+$blue--800: #002366;
+$blue--700: #003499;
+$blue--600: #0046cc;
+$blue--500: #0057ff; // primary light
+$blue--400: #3379ff; // primary dark
+$blue--300: #669aff;
+$blue--200: #99bcff;
+$blue--100: #ccddff;
+
+// pink
+$pink--800: #66002a;
+$pink--700: #99003f;
+$pink--600: #cc0054;
+$pink--500: #ff0069; // primary light
+$pink--400: #ff3387; // primary dark
+$pink--300: #ff66a5;
+$pink--200: #ff99c3;
+$pink--100: #ffcce1;
+
+// purple
+$purple--800: #500e66;
+$purple--700: #791599;
+$purple--600: #a11ccc;
+$purple--500: #c923ff; // primary light
+$purple--400: #d44fff; // primary dark
+$purple--300: #df7bff;
+$purple--200: #e9a7ff;
+$purple--100: #f4d3ff;
+
+// violet
+$violet--800: #250062;
+$violet--700: #380094;
+$violet--600: #4a00c5;
+$violet--500: #5d00f6; // primary light
+$violet--400: #7d33f8; // primary dark
+$violet--300: #9e66fa;
+$violet--200: #be99fb;
+$violet--100: #dfccfd;
+
+// secondary
+// green
+$green--800: #0b5532;
+$green--700: #107f4c;
+$green--600: #16aa65;
+$green--500: #1bd47e; // primary light
+$green--400: #49dd98; // primary dark
+$green--300: #76e5b2;
+$green--200: #a4eecb;
+$green--100: #d1f6e5;
+
+// yellow
+$yellow--800: #666200;
+$yellow--700: #999300;
+$yellow--600: #ccc400;
+$yellow--500: #fff500; // primary light
+$yellow--400: #fff733; // primary dark
+$yellow--300: #fff966;
+$yellow--200: #fffb99;
+$yellow--100: #fffdcc;
+
+// orange
+$orange--800: #664300;
+$orange--700: #996500;
+$orange--600: #cc8600;
+$orange--500: #ffa800; // primary light
+$orange--400: #ffb933; // primary dark
+$orange--300: #ffcb66;
+$orange--200: #ffdc99;
+$orange--100: #ffeecc;
+
+// base
+// navy
+$navy--900: #111111;
+$navy--800: #15171e;
+$navy--700: #232732;
+$navy--600: #292f3b; // e.g. background columns 2, board settings right
+$navy--500: #303745; // e.g. background columns 1
+$navy--400: #373e4f; // e.g. input fields, cards, board setting left
+$navy--300: #454e63;
+$navy--200: #586073; // e.g tooltip
+$navy--100: #6a7182;
+
+// gray
+$gray--800: #8f95a1; // e.g. usernames, add note, hotkey cheat sheet
+$gray--700: #a2a7b1;
+$gray--600: #b5b8c1;
+$gray--500: #dddfe3;
+$gray--400: #e9eaec;
+$gray--300: #eeeff1; // e.g. input field
+$gray--200: #f4f4f6; // e.g. background column 1
+$gray--100: #f9fafa; // e.g. background column 2
+$gray--000: #ffffff;
+
+// info states
+// error
+$critical-carmine--light: #fe3f3f;
+$critical-carmine--dark: #fe5757;
+
+// warning
+$alert-amber--light: #ffa800;
+$alert-amber--dark: #ffb933;
+
+// success
+$victory-verde--light: $green--500;
+$victory-verde--dark: $green--400;
+
+// color maps
+$primary-colors: (
+  backlog-blue: (
+    800: $blue--800,
+    700: $blue--700,
+    600: $blue--600,
+    500: $blue--500,
+    400: $blue--400,
+    300: $blue--300,
+    200: $blue--200,
+    100: $blue--100,
+  ),
+  planning-pink: (
+    800: $pink--800,
+    700: $pink--700,
+    600: $pink--600,
+    500: $pink--500,
+    400: $pink--400,
+    300: $pink--300,
+    200: $pink--200,
+    100: $pink--100,
+  ),
+  poker-purple: (
+    800: $purple--800,
+    700: $purple--700,
+    600: $purple--600,
+    500: $purple--500,
+    400: $purple--400,
+    300: $purple--300,
+    200: $purple--200,
+    100: $purple--100,
+  ),
+  value-violet: (
+    800: $violet--800,
+    700: $violet--700,
+    600: $violet--600,
+    500: $violet--500,
+    400: $violet--400,
+    300: $violet--300,
+    200: $violet--200,
+    100: $violet--100,
+  ),
+);
+
+$secondary-colors: (
+  goal-green: (
+    800: $green--800,
+    700: $green--700,
+    600: $green--600,
+    500: $green--500,
+    400: $green--400,
+    300: $green--300,
+    200: $green--200,
+    100: $green--100,
+  ),
+  yielding-yellow: (
+    800: $yellow--800,
+    700: $yellow--700,
+    600: $yellow--600,
+    500: $yellow--500,
+    400: $yellow--400,
+    300: $yellow--300,
+    200: $yellow--200,
+    100: $yellow--100,
+  ),
+  online-orange: (
+    800: $orange--800,
+    700: $orange--700,
+    600: $orange--600,
+    500: $orange--500,
+    400: $orange--400,
+    300: $orange--300,
+    200: $orange--200,
+    100: $orange--100,
+  ),
+);
+
+$base-colors: (
+  navy: (
+    900: $navy--900,
+    800: $navy--800,
+    700: $navy--700,
+    600: $navy--600,
+    500: $navy--500,
+    400: $navy--400,
+    300: $navy--300,
+    200: $navy--200,
+    100: $navy--100,
+  ),
+  gray: (
+    800: $gray--800,
+    700: $gray--700,
+    600: $gray--600,
+    500: $gray--500,
+    400: $gray--400,
+    300: $gray--300,
+    200: $gray--200,
+    100: $gray--100,
+    000: $gray--000,
+  ),
+);
+
+// sets css variables to be used for the accent colors
+// e.g. var(--accent-color--500)
+@mixin set-accent-variables($color-map) {
+  @each $shade, $color in $color-map {
+    --accent-color--#{$shade}: #{$color};
+    --accent-color--#{$shade}-rgb: #{red($color)}, #{green($color)}, #{blue($color)};
+  }
+
+  // shortcut for most commonly used accent colors
+  $shade-light: map-get($color-map, 500);
+  $shade-dark: map-get($color-map, 400);
+  --accent-color--light: #{$shade-light};
+  --accent-color--light-rgb: #{red($shade-light)}, #{green($shade-light)}, #{blue($shade-light)};
+  --accent-color--dark: #{$shade-dark};
+  --accent-color--dark-rgb: #{red($shade-dark)}, #{green($shade-dark)}, #{blue($shade-dark)};
+}
+
+// generates css classes which can be included in an element
+// to use their different accent color shades
+// e.g. .accent-color__backlog-blue
+@mixin generate-accent-classes($colors) {
+  @each $color-name, $color-values in $colors {
+    .accent-color__#{$color-name} {
+      @include set-accent-variables($color-values);
+    }
+  }
+}
+
+@include generate-accent-classes($primary-colors);
+@include generate-accent-classes($secondary-colors);
diff --git a/src/constants/style.scss b/src/constants/style.scss
index b62523d0e8..c8e5fc5fc5 100644
--- a/src/constants/style.scss
+++ b/src/constants/style.scss
@@ -1,158 +1,9 @@
 // @use "sass:list";
 @use "sass:color";
 
-// primary
-// blue
-$blue--800: #002366;
-$blue--700: #003499;
-$blue--600: #0046cc;
-$blue--500: #0057ff; // primary light
-$blue--400: #3379ff; // primary dark
-$blue--300: #669aff;
-$blue--200: #99bcff;
-$blue--100: #ccddff;
+@import "./colors";
 
-// pink
-$pink--800: #66002a;
-$pink--700: #99003f;
-$pink--600: #cc0054;
-$pink--500: #ff0069; // primary light
-$pink--400: #ff3387; // primary dark
-$pink--300: #ff66a5;
-$pink--200: #ff99c3;
-$pink--100: #ffcce1;
-
-// purple
-$purple--800: #500e66;
-$purple--700: #791599;
-$purple--600: #a11ccc;
-$purple--500: #c923ff; // primary light
-$purple--400: #d44fff; // primary dark
-$purple--300: #df7bff;
-$purple--200: #e9a7ff;
-$purple--100: #f4d3ff;
-
-// violet
-$violet--800: #250062;
-$violet--700: #380094;
-$violet--600: #4a00c5;
-$violet--500: #5d00f6; // primary light
-$violet--400: #7d33f8; // primary dark
-$violet--300: #9e66fa;
-$violet--200: #be99fb;
-$violet--100: #dfccfd;
-
-// secondary
-// green
-$green--800: #0b5532;
-$green--700: #107f4c;
-$green--600: #16aa65;
-$green--500: #1bd47e; // primary light
-$green--400: #49dd98; // primary dark
-$green--300: #76e5b2;
-$green--200: #a4eecb;
-$green--100: #d1f6e5;
-
-// yellow
-$yellow--800: #666200;
-$yellow--700: #999300;
-$yellow--600: #ccc400;
-$yellow--500: #fff500; // primary light
-$yellow--400: #fff733; // primary dark
-$yellow--300: #fff966;
-$yellow--200: #fffb99;
-$yellow--100: #fffdcc;
-
-// orange
-$orange--800: #664300;
-$orange--700: #996500;
-$orange--600: #cc8600;
-$orange--500: #ffa800; // primary light
-$orange--400: #ffb933; // primary dark
-$orange--300: #ffcb66;
-$orange--200: #ffdc99;
-$orange--100: #ffeecc;
-
-// base
-// navy
-$navy--900: #111111;
-$navy--800: #15171e;
-$navy--700: #232732;
-$navy--600: #292f3b; // e.g. background columns 2, board settings right
-$navy--500: #303745; // e.g. background columns 1
-$navy--400: #373e4f; // e.g. input fields, cards, board setting left
-$navy--300: #454e63;
-$navy--200: #586073; // e.g tooltip
-$navy--100: #6a7182;
-
-// gray
-$gray--800: #8f95a1; // e.g. usernames, add note, hotkey cheat sheet
-$gray--700: #a2a7b1;
-$gray--600: #b5b8c1;
-$gray--500: #dddfe3;
-$gray--400: #e9eaec;
-$gray--300: #eeeff1; // e.g. input field
-$gray--200: #f4f4f6; // e.g. background column 1
-$gray--100: #f9fafa; // e.g. background column 2
-$gray--000: #ffffff;
-
-// info states
-// error
-$critical-carmine--light: #fe3f3f;
-$critical-carmine--dark: #fe5757;
-
-// warning
-$alert-amber--light: #ffa800;
-$alert-amber--dark: #ffb933;
-
-// success
-$victory-verde--light: $green--500;
-$victory-verde--dark: $green--400;
-
-@mixin rgb($color--light, $color--dark) {
-  --accent-color: #{$color--light};
-  --accent-color-rgb: #{red($color--light)}, #{green($color--light)}, #{blue($color--light)};
-  --accent-color--dark: #{color.change($color--dark, $lightness: 72%, $saturation: 99%)};
-  --accent-color--desaturated-light: #{color.change($color--light, $lightness: 90%)};
-  --accent-color--desaturated-light-hover: #{color.change($color--light, $lightness: 85%)};
-  --accent-color--desaturated-dark: #{color.change($color--dark, $lightness: 39%, $saturation: 48%)};
-  --accent-color--desaturated-dark-hover: #{color.change($color--dark, $lightness: 50%, $saturation: 48%)};
-  --accent-color--background-light: #{color.change($color--light, $lightness: 80%, $alpha: 0.2, $saturation: 60%)};
-  --accent-color--background-dark: #{color.change($color--dark, $lightness: 75%, $alpha: 0.04, $saturation: 75%)};
-}
-
-// accent colors for columns, note etc
-.accent-color__backlog-blue {
-  @include rgb($blue--500, $blue--400);
-}
-.accent-color__goal-green {
-  @include rgb($green--500, $green--400);
-}
-.accent-color__poker-purple {
-  @include rgb($purple--500, $purple--400);
-}
-.accent-color__online-orange {
-  @include rgb($orange--500, $orange--400);
-}
-.accent-color__planning-pink {
-  @include rgb($pink--500, $pink--400);
-}
-.accent-color__value-violet {
-  @include rgb($violet--500, $violet--400);
-}
-.accent-color__yielding-yellow {
-  @include rgb($yellow--500, $yellow--400);
-}
-// info states
-.accent-color__error-ember {
-  @include rgb($critical-carmine--light, $critical-carmine--dark);
-}
-.accent-color__alert-amber {
-  @include rgb($alert-amber--light, $alert-amber--dark);
-}
-.accent-color__victory-verde {
-  @include rgb($victory-verde--light, $victory-verde--dark);
-}
+// TODO put below in files functions.scss and spacings.scss when other tasks are finished (avoid conflicts)
 
 // board & column constants
 $board__side-panel-width: 64px;
@@ -278,20 +129,20 @@ $column-stripes--light: repeating-linear-gradient(
   45deg,
   $gray--100 calc(0px + var(--stripe-offset, 0px)),
   $gray--100 calc(20px + var(--stripe-offset, 0px)),
-  var(--accent-color--background-light) calc(20px + var(--stripe-offset, 0px)),
-  var(--accent-color--background-light) calc(40px + var(--stripe-offset, 0px))
+  rgba(var(--accent-color--light-rgb), 0.2) calc(20px + var(--stripe-offset, 0px)),
+  rgba(var(--accent-color--light-rgb), 0.2) calc(40px + var(--stripe-offset, 0px))
 );
 
 $column-stripes--dark: repeating-linear-gradient(
   45deg,
   $navy--600 calc(0px + var(--stripe-offset, 0px)),
   $navy--600 calc(20px + var(--stripe-offset, 0px)),
-  var(--accent-color--background-dark) calc(20px + var(--stripe-offset, 0px)),
-  var(--accent-color--background-dark) calc(40px + var(--stripe-offset, 0px))
+  rgba(var(--accent-color--dark-rgb), 0.04) calc(20px + var(--stripe-offset, 0px)),
+  rgba(var(--accent-color--dark-rgb), 0.04) calc(40px + var(--stripe-offset, 0px))
 );
 
 // helper functions
-@function inset-border($left: false, $right: false, $top: false, $bottom: false, $color: var(--accent-color)) {
+@function inset-border($left: false, $right: false, $top: false, $bottom: false, $color: var(--accent-color--light)) {
   $props: ();
   $props: append($props, if($left, inset #{2 * $column__border-width} 0 0 #{-$column__border-width} #{$color}, null), comma);
   $props: append($props, if($right, inset #{-2 * $column__border-width} 0 0 #{-$column__border-width} #{$color}, null), comma);
@@ -307,7 +158,7 @@ $column-stripes--dark: repeating-linear-gradient(
   @return color.scale($backgroundColor, $lightness: 10%);
 }
 
-@mixin inset-border($left: false, $right: false, $top: false, $bottom: false, $color: var(--accent-color)) {
+@mixin inset-border($left: false, $right: false, $top: false, $bottom: false, $color: var(--accent-color--light)) {
   box-shadow: inset-border($left, $right, $top, $bottom, $color);
 }
 
diff --git a/src/routes/StackView/StackView.scss b/src/routes/StackView/StackView.scss
index 27c8c47c89..ed260f61fe 100644
--- a/src/routes/StackView/StackView.scss
+++ b/src/routes/StackView/StackView.scss
@@ -7,7 +7,7 @@ $stack-view__min-height: 82px;
 .stack-view__portal {
   background-color: rgba(0, 0, 0, 0.8);
   backdrop-filter: blur(10px) brightness(0.76) saturate(0);
-  background: rgba(var(--accent-color-rgb), 0.42);
+  background: rgba(var(--accent-color--light-rgb), 0.42);
   transition: all 0.2s ease-in-out;
 }
 
@@ -27,7 +27,7 @@ $stack-view__min-height: 82px;
   left: 0;
   pointer-events: none;
   background: transparent;
-  box-shadow: inset 0 0 0 $column__border-width var(--accent-color);
+  box-shadow: inset 0 0 0 $column__border-width var(--accent-color--light);
 }
 
 .stack-view__border--moderating {
@@ -77,7 +77,7 @@ $stack-view__min-height: 82px;
   }
 
   &:focus-visible {
-    color: var(--accent-color);
+    color: var(--accent-color--light);
   }
 }
 
@@ -104,7 +104,7 @@ $stack-view__min-height: 82px;
   .stack-view__portal {
     backdrop-filter: blur(10px) brightness(0.24) saturate(0);
     box-shadow: inset 0 0 0 $column__border-width var(--accent-color--dark);
-    background: rgba(var(--accent-color-rgb), 0.1);
+    background: rgba(var(--accent-color--light-rgb), 0.1);
   }
 
   .stack-view__border {