diff --git a/frontend/assets/css/tailwind.css b/frontend/assets/css/tailwind.css
index b85c7dced..2880270d9 100644
--- a/frontend/assets/css/tailwind.css
+++ b/frontend/assets/css/tailwind.css
@@ -10,7 +10,7 @@
     @apply bg-light-header dark:bg-dark-header;
   }
   * {
-    @apply scrollbar scrollbar-w-2 scrollbar-thumb-light-special-text dark:scrollbar-thumb-dark-special-text scrollbar-track-transparent scrollbar-thumb-rounded-md;
+    @apply scrollbar scrollbar-w-2 scrollbar-thumb-light-distinct-text dark:scrollbar-thumb-dark-distinct-text scrollbar-track-transparent scrollbar-thumb-rounded-md;
   }
 }
 
diff --git a/frontend/components/PasswordStrengthIndicator.vue b/frontend/components/PasswordStrengthIndicator.vue
index 82d5462de..487b42b6b 100644
--- a/frontend/components/PasswordStrengthIndicator.vue
+++ b/frontend/components/PasswordStrengthIndicator.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="h-4">
-    <div class="h-1 bg-light-special-text dark:bg-dark-special-text rounded-md">
+    <div class="h-1 bg-light-distinct-text dark:bg-dark-distinct-text rounded-md">
       <div
         class="h-1 transition-width ease-in duration-500 rounded-md"
         :class="!!passwordValue.length ? `${color}` : ''"
@@ -10,7 +10,7 @@
     <div
       class="float-right mt-1 text-xs"
       :class="{
-        'text-light-special-text dark:text-dark-special-text':
+        'text-light-distinct-text dark:text-dark-distinct-text':
           color !== 'bg-light-text dark-bg-dark-text',
         'text-light-text dark:text-dark-text':
           color === 'bg-light-text dark-bg-dark-text',
diff --git a/frontend/components/SearchBar.vue b/frontend/components/SearchBar.vue
index 29bf5538f..f10debe2e 100644
--- a/frontend/components/SearchBar.vue
+++ b/frontend/components/SearchBar.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="location == 'sidebar'"
-    class="flex justify-between grow items-center pl-[12px] py-1 mx-2 text-left transition duration-200 rounded-md select-none text-light-special-text dark:text-dark-special-text focus-within:border-light-link-text focus-within:border-2 dark:focus-within:border-dark-link-text focus-within:mb-[-3px] bg-light-header dark:bg-dark-header elem-shadow-sm"
+    class="flex justify-between grow items-center pl-[12px] py-1 mx-2 text-left transition duration-200 rounded-md select-none text-light-distinct-text dark:text-dark-distinct-text focus-within:border-light-link-text focus-within:border-2 dark:focus-within:border-dark-link-text focus-within:mb-[-3px] bg-light-header dark:bg-dark-header elem-shadow-sm"
   >
     <div class="flex items-center pl-1 space-x-2">
       <Icon class="flex-shrink-0 w-4 h-4 my-1" name="bi:search" size="1em" />
@@ -25,7 +25,7 @@
         class="flex pr-1 space-x-1 transition-opacity transition-duration-200"
       >
         <div
-          class="flex px-2 py-[0.125rem] text-sm text-center rounded-md has-tooltip bg-light-highlight dark:bg-dark-highlight text-light-special-text dark:text-dark-special-text"
+          class="flex px-2 py-[0.125rem] text-sm text-center rounded-md has-tooltip bg-light-highlight dark:bg-dark-highlight text-light-distinct-text dark:text-dark-distinct-text"
         >
           <TooltipBase
             class="invisible -mt-8"
@@ -35,7 +35,7 @@
         </div>
         <div
           v-if="$device.isMacOS"
-          class="flex px-2 py-[0.125rem] text-sm text-center rounded-md has-tooltip bg-light-highlight dark:bg-dark-highlight text-light-special-text dark:text-dark-special-text"
+          class="flex px-2 py-[0.125rem] text-sm text-center rounded-md has-tooltip bg-light-highlight dark:bg-dark-highlight text-light-distinct-text dark:text-dark-distinct-text"
         >
           <TooltipBase
             class="invisible -mt-8"
@@ -45,7 +45,7 @@
         </div>
         <div
           v-else
-          class="flex px-2 py-[0.125rem] text-sm text-center rounded-md has-tooltip bg-light-highlight dark:bg-dark-highlight text-light-special-text dark:text-dark-special-text"
+          class="flex px-2 py-[0.125rem] text-sm text-center rounded-md has-tooltip bg-light-highlight dark:bg-dark-highlight text-light-distinct-text dark:text-dark-distinct-text"
         >
           <TooltipBase
             class="invisible -mt-8"
@@ -58,7 +58,7 @@
   </div>
   <div
     v-else
-    class="relative inline-flex items-center pl-[12px] pr-[10px] py-1 space-x-2 text-left border rounded-md select-none bg-light-header dark:bg-dark-header border-light-special-text dark:border-dark-special-text text-light-special-text dark:text-dark-special-text focus-within:border-light-cta-orange focus-within:border-2 dark:focus-within:border-dark-cta-orange"
+    class="relative inline-flex items-center pl-[12px] pr-[10px] py-1 space-x-2 text-left border rounded-md select-none bg-light-header dark:bg-dark-header border-light-distinct-text dark:border-dark-distinct-text text-light-distinct-text dark:text-dark-distinct-text focus-within:border-light-cta-orange focus-within:border-2 dark:focus-within:border-dark-cta-orange"
   >
     <Icon
       @click="emit('on-search-toggle')"
diff --git a/frontend/components/card/CardAbout.vue b/frontend/components/card/CardAbout.vue
index a3e98d37a..31f458161 100644
--- a/frontend/components/card/CardAbout.vue
+++ b/frontend/components/card/CardAbout.vue
@@ -12,7 +12,7 @@
           emit('expand-reduce-text');
           expand_reduce_text();
         "
-        class="absolute right-0 p-1 rounded-full text-light-special-text dark:text-dark-special-text hover:text-light-text hover:dark:text-dark-text focus-brand"
+        class="absolute right-0 p-1 rounded-full text-light-distinct-text dark:text-dark-distinct-text hover:text-light-text hover:dark:text-dark-text focus-brand"
       >
         <Icon class="w-10 h-10" name="bi:x-circle-fill" />
       </button>
diff --git a/frontend/components/card/CardLegalDisclaimer.vue b/frontend/components/card/CardLegalDisclaimer.vue
index bdda48b06..3709d598c 100644
--- a/frontend/components/card/CardLegalDisclaimer.vue
+++ b/frontend/components/card/CardLegalDisclaimer.vue
@@ -17,7 +17,7 @@
         class="py-2 mt-2 border-t focus-within:border-0 border-light-section-div dark:border-dark-section-div"
       >
         <p
-          class="text-left select-text text-light-special-text dark:text-dark-special-text"
+          class="text-left select-text text-light-distinct-text dark:text-dark-distinct-text"
         >
           {{ disclaimer }}
         </p>
diff --git a/frontend/components/card/CardTopicSelection.vue b/frontend/components/card/CardTopicSelection.vue
index 020bf4806..803f25948 100644
--- a/frontend/components/card/CardTopicSelection.vue
+++ b/frontend/components/card/CardTopicSelection.vue
@@ -13,7 +13,7 @@
       id="query"
       :display-value="() => query"
       :placeholder="$t('components.card-topic-selection.selector-placeholder')"
-      class="w-full py-2 pl-4 topicInput rounded-md text-light-special-text dark:text-dark-special-text bg-light-content dark:bg-dark-content elem-shadow-sm focus-brand"
+      class="w-full py-2 pl-4 topicInput rounded-md text-light-distinct-text dark:text-dark-distinct-text bg-light-content dark:bg-dark-content elem-shadow-sm focus-brand"
     />
     <ul class="hidden gap-2 sm:flex sm:flex-wrap">
       <ShieldTopic
diff --git a/frontend/components/card/discussion/CardDiscussionInput.vue b/frontend/components/card/discussion/CardDiscussionInput.vue
index c0eefa615..39079125f 100644
--- a/frontend/components/card/discussion/CardDiscussionInput.vue
+++ b/frontend/components/card/discussion/CardDiscussionInput.vue
@@ -97,7 +97,7 @@
         <textarea
           id="message"
           rows="4"
-          class="block p-2.5 w-full text-sm text-light-text rounded-lg border border-light-section-div placeholder-light-special-text dark:placeholder-dark-special-text dark:text-dark-text dark:bg-dark-distinct focus-brand"
+          class="block p-2.5 w-full text-sm text-light-text rounded-lg border border-light-section-div placeholder-light-distinct-text dark:placeholder-dark-distinct-text dark:text-dark-text dark:bg-dark-distinct focus-brand"
           :placeholder="$t('components.card-discussion-input.leave-comment')"
         ></textarea>
       </div>
diff --git a/frontend/components/combobox/ComboboxTopics.vue b/frontend/components/combobox/ComboboxTopics.vue
index 8f81735bb..f23936ce4 100644
--- a/frontend/components/combobox/ComboboxTopics.vue
+++ b/frontend/components/combobox/ComboboxTopics.vue
@@ -34,7 +34,7 @@
           >
             <div
               v-if="filteredTopics.length === 0 && query !== ''"
-              class="relative px-4 py-2 cursor-default select-none text-light-special-text dark:text-dark-special-text"
+              class="relative px-4 py-2 cursor-default select-none text-light-distinct-text dark:text-dark-distinct-text"
             >
               {{ $t("components.combobox-topics.no-matching-topics") }}
             </div>
diff --git a/frontend/components/dropdown/DropdownDateFilter.vue b/frontend/components/dropdown/DropdownDateFilter.vue
index d97b5a4cc..bbcc7bffb 100644
--- a/frontend/components/dropdown/DropdownDateFilter.vue
+++ b/frontend/components/dropdown/DropdownDateFilter.vue
@@ -29,7 +29,7 @@
               <li
                 class="relative py-2 pl-10 pr-4 cursor-default select-none"
                 :class="{
-                  'bg-light-highlight dark:bg-dark-header text-light-cta-orange dark:text-dark-special-text':
+                  'bg-light-highlight dark:bg-dark-header text-light-cta-orange dark:text-dark-distinct-text':
                     active,
                   'text-light-distinct dark:text-dark-distinct': !active,
                 }"
@@ -37,7 +37,7 @@
                 <span class="block truncate">{{ option }}</span>
                 <span
                   v-if="selected"
-                  class="absolute inset-y-0 left-0 flex items-center pl-3 text-light-cta-orange dark:text-dark-special-text"
+                  class="absolute inset-y-0 left-0 flex items-center pl-3 text-light-cta-orange dark:text-dark-distinct-text"
                 >
                   <Icon name="bi:check-lg" />
                 </span>
diff --git a/frontend/components/footer/Footer.vue b/frontend/components/footer/Footer.vue
index be78671eb..e492f39cc 100644
--- a/frontend/components/footer/Footer.vue
+++ b/frontend/components/footer/Footer.vue
@@ -1,6 +1,6 @@
 <template>
   <footer
-    class="responsive-px-5 responsive-py-5 bg-light-header dark:bg-dark-header text-light-special-text dark:text-dark-special-text"
+    class="responsive-px-5 responsive-py-5 bg-light-header dark:bg-dark-header text-light-distinct-text dark:text-dark-distinct-text"
   >
     <!-- Note: Content Sections Top for Mobile -->
     <FooterFlexCol class="flex flex-col lg:hidden" :links="links" />
diff --git a/frontend/components/form/FormSearch.vue b/frontend/components/form/FormSearch.vue
index 03be102e6..57bafbbe9 100644
--- a/frontend/components/form/FormSearch.vue
+++ b/frontend/components/form/FormSearch.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex items-center pl-[12px] pr-[10px] py-2 h-9 space-x-2 text-left border rounded-md select-none bg-light-header dark:bg-dark-header border-light-interactive dark:border-dark-interactive text-light-special-text dark:text-dark-special-text"
+    class="flex items-center pl-[12px] pr-[10px] py-2 h-9 space-x-2 text-left border rounded-md select-none bg-light-header dark:bg-dark-header border-light-interactive dark:border-dark-interactive text-light-distinct-text dark:text-dark-distinct-text"
   >
     <Icon class="flex-shrink-0 w-4 h-4 my-1" name="bi:search" size="1em" />
     <input
diff --git a/frontend/components/form/FormTextField.vue b/frontend/components/form/FormTextField.vue
index f3f782ff8..c4affb748 100644
--- a/frontend/components/form/FormTextField.vue
+++ b/frontend/components/form/FormTextField.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex items-center pl-[12px] pr-[10px] py-2 max-h-[40px] space-x-2 text-left border rounded select-none text-light-special-text dark:text-dark-special-text"
+    class="flex items-center pl-[12px] pr-[10px] py-2 max-h-[40px] space-x-2 text-left border rounded select-none text-light-distinct-text dark:text-dark-distinct-text"
     :class="{
       'border-light-action-red dark:border-dark-action-red': error,
       'border-light-interactive dark:border-dark-interactive': !error,
@@ -11,7 +11,7 @@
       @blur="emit('blurred')"
       @focus="emit('focused')"
       :id="uuid"
-      class="w-full h-5 bg-transparent outline-none placeholder:text-light-special-text dark:placeholder:text-dark-special-text"
+      class="w-full h-5 bg-transparent outline-none placeholder:text-light-distinct-text dark:placeholder:text-dark-distinct-text"
       :value="modelValue"
       :placeholder="placeholder"
       :type="refInputType"
diff --git a/frontend/components/form/checkbox/FormCheckboxBtn.vue b/frontend/components/form/checkbox/FormCheckboxBtn.vue
index 165114c56..851c910cb 100644
--- a/frontend/components/form/checkbox/FormCheckboxBtn.vue
+++ b/frontend/components/form/checkbox/FormCheckboxBtn.vue
@@ -5,7 +5,7 @@
       'bg-light-menu-selection dark:bg-dark-menu-selection text-light-distinct dark:text-dark-distinct':
         modelValue && !customColor,
       [customColorClass]: modelValue && customColor,
-      'bg-light-header text-light-special-text dark:text-dark-special-text dark:bg-dark-header':
+      'bg-light-header text-light-distinct-text dark:text-dark-distinct-text dark:bg-dark-header':
         !modelValue,
       'hover:bg-light-hover dark:hover:bg-dark-hover': !modelValue,
     }"
diff --git a/frontend/components/form/radio/FormRadioBtn.vue b/frontend/components/form/radio/FormRadioBtn.vue
index ff9a4c9dc..5a8d479a3 100644
--- a/frontend/components/form/radio/FormRadioBtn.vue
+++ b/frontend/components/form/radio/FormRadioBtn.vue
@@ -5,7 +5,7 @@
       'bg-light-menu-selection dark:bg-dark-menu-selection text-light-distinct dark:text-dark-distinct':
         modelValue === value && !customColor,
       [customColorClass]: modelValue === value && customColor,
-      'bg-light-header text-light-special-text dark:text-dark-special-text dark:bg-dark-header':
+      'bg-light-header text-light-distinct-text dark:text-dark-distinct-text dark:bg-dark-header':
         modelValue !== value,
     }"
   >
diff --git a/frontend/components/form/radio/FormRadioGroup.vue b/frontend/components/form/radio/FormRadioGroup.vue
index 5837da949..5f4866409 100644
--- a/frontend/components/form/radio/FormRadioGroup.vue
+++ b/frontend/components/form/radio/FormRadioGroup.vue
@@ -23,7 +23,7 @@
         v-if="showAdditionalInput"
         v-model="customValue"
         @input="inputDebounce"
-        class="flex-1 w-full pl-4 pr-2 font-bold border border-r-0 outline-none border-light-interactive rounded-l-md bg-light-header dark:bg-dark-header dark:border-dark-interactive text-light-special-text dark:text-dark-special-text"
+        class="flex-1 w-full pl-4 pr-2 font-bold border border-r-0 outline-none border-light-interactive rounded-l-md bg-light-header dark:bg-dark-header dark:border-dark-interactive text-light-distinct-text dark:text-dark-distinct-text"
         :type="customValueType"
         :placeholder="
           $t('components.form-radio-group.custom-numeric-value-placeholder')
@@ -33,7 +33,7 @@
         @click="toggleAdditionalInput"
         class="rounded-r-md relative min-w-[3rem] h-9 border border-light-interactive dark:border-dark-interactive focus-brand"
         :class="{
-          'bg-light-header text-light-special-text dark:bg-dark-header dark:text-dark-special-text':
+          'bg-light-header text-light-distinct-text dark:bg-dark-header dark:text-dark-distinct-text':
             !showAdditionalInput,
           'bg-light-menu-selection text-light-distinct dark:bg-dark-menu-selection dark:text-dark-distinct':
             showAdditionalInput,
diff --git a/frontend/components/header/HeaderAppPage.vue b/frontend/components/header/HeaderAppPage.vue
index 0646247b6..f015a74e3 100644
--- a/frontend/components/header/HeaderAppPage.vue
+++ b/frontend/components/header/HeaderAppPage.vue
@@ -38,7 +38,7 @@
   >
     <h2
       v-if="headerTagline"
-      class="transition-all duration-500 responsive-h4 text-light-special-text dark:text-dark-special-text"
+      class="transition-all duration-500 responsive-h4 text-light-distinct-text dark:text-dark-distinct-text"
     >
       {{ headerTagline }}
     </h2>
diff --git a/frontend/components/icon/IconActivist.vue b/frontend/components/icon/IconActivist.vue
index f9bbd67e9..6087f25c2 100644
--- a/frontend/components/icon/IconActivist.vue
+++ b/frontend/components/icon/IconActivist.vue
@@ -3,7 +3,7 @@
     <svg
       class="transition duration-100"
       :class="{
-        'fill-light-text dark:fill-dark-text hover:fill-light-special-text hover:dark:fill-dark-special-text':
+        'fill-light-text dark:fill-dark-text hover:fill-light-distinct-text hover:dark:fill-dark-distinct-text':
           !color,
         '{{color}}': color,
       }"
diff --git a/frontend/components/landing/LandingCommunityBanner.vue b/frontend/components/landing/LandingCommunityBanner.vue
index 40da843f1..5d2025528 100644
--- a/frontend/components/landing/LandingCommunityBanner.vue
+++ b/frontend/components/landing/LandingCommunityBanner.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex flex-col w-full space-y-1 sm:space-y-2 xl:space-y-4 responsive-py-4 bg-light-highlight dark:bg-dark-highlight text-light-special-text dark:text-dark-special-text"
+    class="flex flex-col w-full space-y-1 sm:space-y-2 xl:space-y-4 responsive-py-4 bg-light-highlight dark:bg-dark-highlight text-light-distinct-text dark:text-dark-distinct-text"
   >
     <div
       class="flex justify-center text-lg space-x-12 sm:space-x-8 xl:space-x-12 xl:text-xl"
diff --git a/frontend/components/landing/LandingContent.vue b/frontend/components/landing/LandingContent.vue
index 7f2bbe6a5..6407301e8 100644
--- a/frontend/components/landing/LandingContent.vue
+++ b/frontend/components/landing/LandingContent.vue
@@ -25,7 +25,7 @@
         {{ $t(header) }}
       </h2>
       <p
-        class="w-10/12 text-base tracking-wider text-center uppercase sm:text-lg sm:w-full sm:text-left xl:text-xl text-transform: text-light-special-text dark:text-dark-special-text"
+        class="w-10/12 text-base tracking-wider text-center uppercase sm:text-lg sm:w-full sm:text-left xl:text-xl text-transform: text-light-distinct-text dark:text-dark-distinct-text"
       >
         {{ $t(tagline) }}
       </p>
@@ -95,7 +95,7 @@
         {{ $t(header) }}
       </h2>
       <p
-        class="w-10/12 text-base tracking-wider text-center uppercase sm:text-lg sm:w-full sm:text-left xl:text-xl text-transform: text-light-special-text dark:text-dark-special-text"
+        class="w-10/12 text-base tracking-wider text-center uppercase sm:text-lg sm:w-full sm:text-left xl:text-xl text-transform: text-light-distinct-text dark:text-dark-distinct-text"
       >
         {{ $t(tagline) }}
       </p>
@@ -124,7 +124,7 @@
         {{ $t(header) }}
       </h2>
       <p
-        class="w-10/12 text-base tracking-wider text-center uppercase sm:text-lg sm:w-full xl:text-xl text-transform: text-light-special-text dark:text-dark-special-text"
+        class="w-10/12 text-base tracking-wider text-center uppercase sm:text-lg sm:w-full xl:text-xl text-transform: text-light-distinct-text dark:text-dark-distinct-text"
       >
         {{ $t(tagline) }}
       </p>
@@ -158,7 +158,7 @@
       </div>
       <p
         v-if="subText"
-        class="pt-8 mx-12 text-center md:max-w-md lg:max-w-lg xl:pt-12 text-light-special-text dark:text-dark-special-text"
+        class="pt-8 mx-12 text-center md:max-w-md lg:max-w-lg xl:pt-12 text-light-distinct-text dark:text-dark-distinct-text"
       >
         {{ $t(subText) }}
       </p>
diff --git a/frontend/components/landing/LandingTechBanner.vue b/frontend/components/landing/LandingTechBanner.vue
index 673499dc2..f0efe883e 100644
--- a/frontend/components/landing/LandingTechBanner.vue
+++ b/frontend/components/landing/LandingTechBanner.vue
@@ -8,7 +8,7 @@
       {{ $t("components.landing-tech-banner.open-source-header") }}
     </h2>
     <p
-      class="w-10/12 text-base tracking-wider text-center uppercase sm:text-lg sm:w-full xl:text-xl text-transform: text-light-special-text dark:text-dark-special-text"
+      class="w-10/12 text-base tracking-wider text-center uppercase sm:text-lg sm:w-full xl:text-xl text-transform: text-light-distinct-text dark:text-dark-distinct-text"
     >
       {{ $t("components.landing-tech-banner.open-source-tagline") }}
     </p>
diff --git a/frontend/components/logo/LogoActivist.vue b/frontend/components/logo/LogoActivist.vue
index e3d126cdf..92f536019 100644
--- a/frontend/components/logo/LogoActivist.vue
+++ b/frontend/components/logo/LogoActivist.vue
@@ -5,7 +5,7 @@
     :aria-label="$t('components.logo-activist.aria-label')"
   >
     <svg
-      class="transition duration-100 fill-light-text dark:fill-dark-text hover:fill-light-special-text hover:dark:fill-dark-special-text"
+      class="transition duration-100 fill-light-text dark:fill-dark-text hover:fill-light-distinct-text hover:dark:fill-dark-distinct-text"
       :class="{ 'w-28 h-7': isMobile, color }"
       width="3000"
       height="647"
diff --git a/frontend/components/logo/LogoImpactHub.vue b/frontend/components/logo/LogoImpactHub.vue
index c52fb585b..135fdb56f 100644
--- a/frontend/components/logo/LogoImpactHub.vue
+++ b/frontend/components/logo/LogoImpactHub.vue
@@ -1,6 +1,6 @@
 <template>
   <svg
-    class="fill-light-special-text dark:fill-dark-special-text"
+    class="fill-light-distinct-text dark:fill-dark-distinct-text"
     width="80"
     height="80"
     viewBox="0 0 80 80"
diff --git a/frontend/components/logo/LogoWikimediaDE.vue b/frontend/components/logo/LogoWikimediaDE.vue
index cb880c211..2f6d3eeec 100644
--- a/frontend/components/logo/LogoWikimediaDE.vue
+++ b/frontend/components/logo/LogoWikimediaDE.vue
@@ -1,6 +1,6 @@
 <template>
   <svg
-    class="fill-light-special-text dark:fill-dark-special-text"
+    class="fill-light-distinct-text dark:fill-dark-distinct-text"
     width="992"
     height="992"
     viewBox="0 0 992 992"
diff --git a/frontend/components/logo/LogoWikimediaRS.vue b/frontend/components/logo/LogoWikimediaRS.vue
index 42c5da3b7..f44068716 100644
--- a/frontend/components/logo/LogoWikimediaRS.vue
+++ b/frontend/components/logo/LogoWikimediaRS.vue
@@ -1,6 +1,6 @@
 <template>
   <svg
-    class="fill-light-special-text dark:fill-dark-special-text"
+    class="fill-light-distinct-text dark:fill-dark-distinct-text"
     width="322"
     height="386"
     viewBox="0 0 322 386"
diff --git a/frontend/components/media/MediaVideo.vue b/frontend/components/media/MediaVideo.vue
index 9472e2cf6..27606b030 100644
--- a/frontend/components/media/MediaVideo.vue
+++ b/frontend/components/media/MediaVideo.vue
@@ -3,7 +3,7 @@
     class="flex items-center justify-center w-full h-full card-style bg-light-placeholder dark:bg-dark-placeholder"
   >
     <div
-      class="p-6 rounded-full md:p-8 bg-light-special-text dark:bg-dark-menu-selection"
+      class="p-6 rounded-full md:p-8 bg-light-distinct-text dark:bg-dark-menu-selection"
     >
       <Icon
         name="bi:camera-video"
diff --git a/frontend/components/menu/MenuNavigationDropdown.vue b/frontend/components/menu/MenuNavigationDropdown.vue
index c0b7df1eb..2ab058926 100644
--- a/frontend/components/menu/MenuNavigationDropdown.vue
+++ b/frontend/components/menu/MenuNavigationDropdown.vue
@@ -51,7 +51,7 @@
                     !selected && active,
                   'text-light-distinct dark:text-dark-distinct fill-light-distinct dark:fill-dark-distinct':
                     !active && menuEntry.active,
-                  'text-light-special-text dark:text-dark-special-text fill-light-special-text dark:fill-dark-special-text':
+                  'text-light-distinct-text dark:text-dark-distinct-text fill-light-distinct-text dark:fill-dark-distinct-text':
                     !active && !menuEntry.active,
                 }"
               >
diff --git a/frontend/components/modal/ModalBase.vue b/frontend/components/modal/ModalBase.vue
index 2621b468f..7a29b4e56 100644
--- a/frontend/components/modal/ModalBase.vue
+++ b/frontend/components/modal/ModalBase.vue
@@ -28,7 +28,7 @@
         <button
           v-if="imageModal"
           @click="closeModal"
-          class="absolute right-0 p-1 mt-8 mr-24 rounded-full text-light-special-text dark:text-dark-special-text hover:text-light-text hover:dark:text-dark-text focus-brand"
+          class="absolute right-0 p-1 mt-8 mr-24 rounded-full text-light-distinct-text dark:text-dark-distinct-text hover:text-light-text hover:dark:text-dark-text focus-brand"
           :aria-label="$t('components.modal-image.close-modal-aria-label')"
         >
           <Icon class="w-10 h-10" name="bi:x-circle-fill" />
@@ -36,7 +36,7 @@
         <div v-else class="relative">
           <button
             @click="closeModal"
-            class="absolute right-0 p-1 rounded-full text-light-special-text dark:text-dark-special-text hover:text-light-text hover:dark:text-dark-text focus-brand"
+            class="absolute right-0 p-1 rounded-full text-light-distinct-text dark:text-dark-distinct-text hover:text-light-text hover:dark:text-dark-text focus-brand"
           >
             <Icon class="w-10 h-10" name="bi:x-circle-fill" />
           </button>
diff --git a/frontend/components/modal/ModalCommandPalette.vue b/frontend/components/modal/ModalCommandPalette.vue
index b079e02de..b4d68e35a 100644
--- a/frontend/components/modal/ModalCommandPalette.vue
+++ b/frontend/components/modal/ModalCommandPalette.vue
@@ -6,7 +6,7 @@
     </template>
     <template #modalDisplay>
       <div
-        class="flex w-[90%] justify-between grow items-center my-2.5 text-left transition duration-200 rounded-md select-none text-light-special-text dark:text-dark-special-text focus-inside bg-light-header dark:bg-dark-header elem-shadow-sm py-1 px-2"
+        class="flex w-[90%] justify-between grow items-center my-2.5 text-left transition duration-200 rounded-md select-none text-light-distinct-text dark:text-dark-distinct-text focus-inside bg-light-header dark:bg-dark-header elem-shadow-sm py-1 px-2"
       >
         <div class="flex items-center pl-1 space-x-2">
           <Icon name="bi:search" size="1em" />
diff --git a/frontend/components/modal/ModalQRCode.vue b/frontend/components/modal/ModalQRCode.vue
index f9024b4e2..ccb747a99 100644
--- a/frontend/components/modal/ModalQRCode.vue
+++ b/frontend/components/modal/ModalQRCode.vue
@@ -2,7 +2,7 @@
   <ModalBase>
     <template #normalDisplay>
       <button
-        class="absolute right-0 flex items-center justify-center w-10 h-10 rounded-md cursor-pointer sm:w-16 sm:h-16 elem-on-card-style focus-brand"
+        class="absolute right-0 flex items-center justify-center w-10 h-10 cursor-pointer rounded-md sm:w-16 sm:h-16 elem-on-card-style focus-brand"
         :aria-label="$t('components.modal-qr-code.open-modal-aria-label')"
       >
         <div class="sm:hidden">
@@ -31,7 +31,7 @@
         class="flex flex-col items-center pb-6 space-y-6 md:grid md:grid-cols-2 md:grid-rows-1 lg:grid-cols-3 lg:grid-rows-1 lg:space-y-0 lg:space-x-6 lg:mr-14 lg:pr-8"
       >
         <div
-          class="items-center col-span-2 pt-2 space-y-4 font-medium text-left"
+          class="items-center pt-2 font-medium text-left col-span-2 space-y-4"
         >
           <p>
             {{ $t("components.modal-qr-code.section-1-paragraph-1-event") }}
diff --git a/frontend/components/page/PageBreadcrumbs.vue b/frontend/components/page/PageBreadcrumbs.vue
index 76431659e..a6d87d1ed 100644
--- a/frontend/components/page/PageBreadcrumbs.vue
+++ b/frontend/components/page/PageBreadcrumbs.vue
@@ -8,34 +8,34 @@
       >
         <NuxtLink
           v-if="index === 0"
-          class="mx-[0.35rem] text-light-special-text hover:text-light-text dark:text-dark-special-text dark:hover:text-dark-text focus-brand"
+          class="mx-[0.35rem] text-light-distinct-text hover:text-light-text dark:text-dark-distinct-text dark:hover:text-dark-text focus-brand"
           :to="localePath('/')"
         >
           &#60;
         </NuxtLink>
         <span
           v-else
-          class="mx-[0.45rem] mb-[0.2rem] text-light-special-text dark:text-dark-special-text"
+          class="mx-[0.45rem] mb-[0.2rem] text-light-distinct-text dark:text-dark-distinct-text"
           >|</span
         >
         <span v-if="index !== displayBreadcrumbs.length - 1">
           <a
             v-if="Number.isInteger(Number(breadcrumb)) && event"
-            class="text-light-special-text hover:text-light-text dark:text-dark-special-text dark:hover:text-dark-text focus-brand"
+            class="text-light-distinct-text hover:text-light-text dark:text-dark-distinct-text dark:hover:text-dark-text focus-brand"
             :href="makeURL(breadcrumb)"
           >
             {{ event.name }}
           </a>
           <a
             v-else-if="Number.isInteger(Number(breadcrumb)) && organization"
-            class="text-light-special-text hover:text-light-text dark:text-dark-special-text dark:hover:text-dark-text focus-brand"
+            class="text-light-distinct-text hover:text-light-text dark:text-dark-distinct-text dark:hover:text-dark-text focus-brand"
             :href="makeURL(breadcrumb)"
           >
             {{ organization.name }}
           </a>
           <a
             v-else
-            class="text-light-special-text hover:text-light-text dark:text-dark-special-text dark:hover:text-dark-text focus-brand"
+            class="text-light-distinct-text hover:text-light-text dark:text-dark-distinct-text dark:hover:text-dark-text focus-brand"
             :href="makeURL(breadcrumb)"
           >
             {{ capitalizeFirstLetter(breadcrumb) }}
@@ -43,7 +43,7 @@
         </span>
         <span v-else>
           <a
-            class="text-light-special-text hover:text-light-text dark:text-dark-special-text dark:hover:text-dark-text focus-brand"
+            class="text-light-distinct-text hover:text-light-text dark:text-dark-distinct-text dark:hover:text-dark-text focus-brand"
             :href="makeURL(breadcrumb)"
             aria-current="page"
           >
diff --git a/frontend/components/popup/PopupNewField.vue b/frontend/components/popup/PopupNewField.vue
index fda5e27c3..fdb3b78fd 100644
--- a/frontend/components/popup/PopupNewField.vue
+++ b/frontend/components/popup/PopupNewField.vue
@@ -8,7 +8,7 @@
       </p>
       <div
         @click="emit('on-close-clicked')"
-        class="absolute right-0 mr-1 text-light-special-text dark:text-dark-special-text hover:text-light-text hover:dark:text-dark-text"
+        class="absolute right-0 mr-1 text-light-distinct-text dark:text-dark-distinct-text hover:text-light-text hover:dark:text-dark-text"
       >
         <Icon class="w-6 h-6" name="bi:x-circle-fill" />
       </div>
diff --git a/frontend/components/sidebar/left/SidebarLeft.vue b/frontend/components/sidebar/left/SidebarLeft.vue
index 70c281926..74fb7a8a2 100644
--- a/frontend/components/sidebar/left/SidebarLeft.vue
+++ b/frontend/components/sidebar/left/SidebarLeft.vue
@@ -8,7 +8,7 @@
       sidebar.collapsed = true;
       setContentScrollable();
     "
-    class="absolute z-10 flex-col hidden h-full transition-all duration-500 border-r bg-light-distinct dark:bg-dark-distinct md:flex border-light-section-div dark:border-dark-section-div elem-shadow-sm"
+    class="absolute z-10 flex-col hidden h-full border-r transition-all duration-500 bg-light-distinct dark:bg-dark-distinct md:flex border-light-section-div dark:border-dark-section-div elem-shadow-sm"
     :class="{
       'w-56': !sidebar.collapsed || sidebar.collapsedSwitch == false,
       'w-16': sidebar.collapsed && sidebar.collapsedSwitch == true,
diff --git a/frontend/components/sidebar/left/SidebarLeftHeader.vue b/frontend/components/sidebar/left/SidebarLeftHeader.vue
index 986b59725..56a11607c 100644
--- a/frontend/components/sidebar/left/SidebarLeftHeader.vue
+++ b/frontend/components/sidebar/left/SidebarLeftHeader.vue
@@ -24,7 +24,7 @@
               sidebar.collapsed == false || sidebar.collapsedSwitch == false
             "
             class="absolute inset-0 flex items-center justify-center flex-shrink-0 w-32 h-8 z-1 overflow-clip"
-            color="fill-light-text-over-header dark:fill-dark-text-over-header hover:fill-light-special-text-over-header hover:dark:fill-dark-special-text-over-header"
+            color="fill-light-text-over-header dark:fill-dark-text-over-header hover:fill-light-distinct-text-over-header hover:dark:fill-dark-distinct-text-over-header"
           />
         </Transition>
       </div>
@@ -35,7 +35,7 @@
             sidebar.toggleCollapsedSwitch();
             emit('toggle-pressed');
           "
-          class="flex items-center justify-center transition duration-100 w-7 h-7 text-light-special-text dark:text-dark-special-text hover:text-light-text dark:hover:text-dark-text focus-brand outline-offset-0"
+          class="flex items-center justify-center transition duration-100 w-7 h-7 text-light-distinct-text dark:text-dark-distinct-text hover:text-light-text dark:hover:text-dark-text focus-brand outline-offset-0"
           :aria-label="
             $t('components.sidebar-left-header.sidebar-collapse-aria-label')
           "
diff --git a/frontend/error.vue b/frontend/error.vue
index 71047b789..3cdc4937c 100644
--- a/frontend/error.vue
+++ b/frontend/error.vue
@@ -13,7 +13,7 @@
         {{ error.statusCode }}
       </div>
       <div
-        class="bg-light-special-text dark:bg-dark-special-text md:w-[2px] md:h-[200px] w-[120px] h-[2px]"
+        class="bg-light-distinct-text dark:bg-dark-distinct-text md:w-[2px] md:h-[200px] w-[120px] h-[2px]"
       ></div>
       <div
         class="text-left flex flex-col items-center md:items-start max-w-[350px]"
@@ -24,7 +24,7 @@
           {{ $t("pages.error.message") }}
         </div>
         <div
-          class="flex flex-wrap justify-center my-8 break-all md:my-6 md:text-lg text-light-special-text dark:text-dark-special-text"
+          class="flex flex-wrap justify-center my-8 break-all md:my-6 md:text-lg text-light-distinct-text dark:text-dark-distinct-text"
         >
           {{ error.message }}
         </div>
diff --git a/frontend/pages/about/index.vue b/frontend/pages/about/index.vue
index e175616d3..2bd823af2 100644
--- a/frontend/pages/about/index.vue
+++ b/frontend/pages/about/index.vue
@@ -18,7 +18,7 @@
         {{ $t("pages.about.index.section-1-subheader") }}
       </h3>
       <p
-        class="responsive-py-1 text-light-special-text dark:text-dark-special-text"
+        class="responsive-py-1 text-light-distinct-text dark:text-dark-distinct-text"
       >
         {{ $t("pages.about.index.section-1-tagline") }}
       </p>
diff --git a/frontend/pages/docs/index.vue b/frontend/pages/docs/index.vue
index 0b30f432b..7d25e5cf0 100644
--- a/frontend/pages/docs/index.vue
+++ b/frontend/pages/docs/index.vue
@@ -18,7 +18,7 @@
         {{ $t("pages.docs.index.section-1-subheader") }}
       </h3>
       <p
-        class="responsive-py-1 text-light-special-text dark:text-dark-special-text"
+        class="responsive-py-1 text-light-distinct-text dark:text-dark-distinct-text"
       >
         {{ $t("pages.docs.index.section-1-tagline") }}
       </p>
diff --git a/frontend/pages/events/[id]/index.vue b/frontend/pages/events/[id]/index.vue
index f37842bbb..cf00aeded 100644
--- a/frontend/pages/events/[id]/index.vue
+++ b/frontend/pages/events/[id]/index.vue
@@ -15,7 +15,7 @@
         {{ event.name }}
       </h1>
       <h2
-        class="text-lg font-bold responsive-h2 text-light-special-text dark:text-dark-special-text"
+        class="text-lg font-bold responsive-h2 text-light-distinct-text dark:text-dark-distinct-text"
       >
         {{ event.tagline }}
       </h2>
diff --git a/frontend/pages/help/index.vue b/frontend/pages/help/index.vue
index 926ff0f78..99f5f375d 100644
--- a/frontend/pages/help/index.vue
+++ b/frontend/pages/help/index.vue
@@ -18,7 +18,7 @@
         {{ $t("pages.help.index.section-1-subheader") }}
       </h3>
       <p
-        class="responsive-py-1 text-light-special-text dark:text-dark-special-text"
+        class="responsive-py-1 text-light-distinct-text dark:text-dark-distinct-text"
       >
         {{ $t("pages.help.index.section-1-tagline") }}
       </p>
diff --git a/frontend/pages/legal/index.vue b/frontend/pages/legal/index.vue
index e46411912..92a37a2f1 100644
--- a/frontend/pages/legal/index.vue
+++ b/frontend/pages/legal/index.vue
@@ -18,7 +18,7 @@
         {{ $t("pages.legal.index.section-1-subheader") }}
       </h3>
       <p
-        class="responsive-py-1 text-light-special-text dark:text-dark-special-text"
+        class="responsive-py-1 text-light-distinct-text dark:text-dark-distinct-text"
       >
         {{ $t("pages.legal.index.section-1-tagline") }}
       </p>
diff --git a/frontend/pages/legal/privacy-policy.vue b/frontend/pages/legal/privacy-policy.vue
index 87a41fafe..b440e09af 100644
--- a/frontend/pages/legal/privacy-policy.vue
+++ b/frontend/pages/legal/privacy-policy.vue
@@ -13,7 +13,7 @@
         {{ $t("_global.privacy-policy") }}
       </h1>
       <p
-        class="responsive-h4 text-light-special-text dark:text-dark-special-text"
+        class="responsive-h4 text-light-distinct-text dark:text-dark-distinct-text"
       >
         {{ $t("pages.legal.privacy-policy.last-updated") }}
       </p>
diff --git a/frontend/pages/legal/trademark-policy.vue b/frontend/pages/legal/trademark-policy.vue
index 9f0652a32..a3e0b2694 100644
--- a/frontend/pages/legal/trademark-policy.vue
+++ b/frontend/pages/legal/trademark-policy.vue
@@ -11,7 +11,7 @@
     >
       <h1 class="pb-2 font-bold responsive-h1">Trademark Policy</h1>
       <p
-        class="responsive-h4 text-light-special-text dark:text-dark-special-text"
+        class="responsive-h4 text-light-distinct-text dark:text-dark-distinct-text"
       >
         {{ $t("pages.legal.trademark-policy.last-updated") }}
       </p>
diff --git a/frontend/pages/organizations/[id]/index.vue b/frontend/pages/organizations/[id]/index.vue
index b236deacc..31c765c7d 100644
--- a/frontend/pages/organizations/[id]/index.vue
+++ b/frontend/pages/organizations/[id]/index.vue
@@ -15,7 +15,7 @@
         {{ organization.name }}
       </h1>
       <h2
-        class="text-lg font-bold text-center responsive-h2 text-light-special-text dark:text-dark-special-text"
+        class="text-lg font-bold text-center responsive-h2 text-light-distinct-text dark:text-dark-distinct-text"
       >
         {{ organization.tagline }}
       </h2>
diff --git a/frontend/pages/organizations/create.vue b/frontend/pages/organizations/create.vue
index 40627dd57..4994481e6 100644
--- a/frontend/pages/organizations/create.vue
+++ b/frontend/pages/organizations/create.vue
@@ -16,7 +16,7 @@
         class="flex flex-col items-center justify-center w-full pt-4"
       >
         <div
-          class="flex justify-between w-full gap-6 px-5 py-6 mx-14 card-style"
+          class="flex justify-between w-full px-5 py-6 gap-6 mx-14 card-style"
         >
           <div class="w-1/2">
             <label for="name" class="block font-medium responsive-h3"
diff --git a/frontend/pages/supporters/index.vue b/frontend/pages/supporters/index.vue
index d21e18a20..a5910fe74 100644
--- a/frontend/pages/supporters/index.vue
+++ b/frontend/pages/supporters/index.vue
@@ -18,7 +18,7 @@
         {{ $t("pages._global.our-network") }}
       </h3>
       <p
-        class="responsive-py-1 text-light-special-text dark:text-dark-special-text"
+        class="responsive-py-1 text-light-distinct-text dark:text-dark-distinct-text"
       >
         {{ $t("pages.supporters.index.section-1-tagline") }}
       </p>
diff --git a/frontend/pages/supporters/showcase.vue b/frontend/pages/supporters/showcase.vue
index 59b8a1af4..19f999978 100644
--- a/frontend/pages/supporters/showcase.vue
+++ b/frontend/pages/supporters/showcase.vue
@@ -52,7 +52,7 @@
       </h3>
       <p>{{ $t("pages.supporters.showcase.section-2-2-paragraph-1") }}</p>
       <!-- <ul class="py-4 pl-4 space-y-2"></ul> -->
-      <p class="text-light-special-text dark:text-dark-special-text">
+      <p class="text-light-distinct-text dark:text-dark-distinct-text">
         {{ $t("pages.supporters.showcase.section-2-2-thanks") }}
       </p>
       <h2 class="font-bold responsive-py-1 responsive-h3">
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index 1c260bfc0..f6ca4fb0e 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -28,8 +28,8 @@ export default <Partial<Config>>{
           "section-div": "rgba(216, 222, 228, 1)",
           text: "rgba(0, 0, 0, 0.85)",
           "text-over-header": "rgba(36, 36, 35, 1)",
-          "special-text": "rgba(90, 90, 90, 0.9)",
-          "special-text-over-header": "rgba(105, 105, 105, 1)",
+          "distinct-text": "rgba(90, 90, 90, 0.9)",
+          "distinct-text-over-header": "rgba(105, 105, 105, 1)",
           "link-text": "rgba(0, 92, 184, 0.9)",
           "link-text-hover": "rgba(0, 59, 119, 0.9)",
           "menu-selection": "rgba(50, 50, 50, 1)",
@@ -55,8 +55,8 @@ export default <Partial<Config>>{
           "section-div": "rgba(43, 50, 59, 1)",
           text: "rgba(255, 255, 255, 0.8)",
           "text-over-header": "rgba(208, 209, 211, 1)",
-          "special-text": "rgba(150, 150, 150, 0.85)",
-          "special-text-over-header": "rgba(131, 132, 133, 1)",
+          "distinct-text": "rgba(150, 150, 150, 0.85)",
+          "distinct-text-over-header": "rgba(131, 132, 133, 1)",
           "link-text": "rgba(86, 167, 252, 0.9)",
           "link-text-hover": "rgba(134, 192, 253, 0.9)",
           "menu-selection": "rgba(200, 200, 200, 1)",