diff --git a/src/app/features/boards/board-panel/board-panel.component.scss b/src/app/features/boards/board-panel/board-panel.component.scss
index b6cdafe89a..52a7f60552 100644
--- a/src/app/features/boards/board-panel/board-panel.component.scss
+++ b/src/app/features/boards/board-panel/board-panel.component.scss
@@ -1,7 +1,7 @@
 @import '../../../../common';
 
 :host {
-  //border: 1px solid var(--color-overlay-light-20);
+  //border: 1px solid var(--c-light-20);
   border: 1px solid var(--extra-border-color);
   border-radius: 8px;
   min-height: 200px;
diff --git a/src/app/features/issue/providers/gitlab/dialog-gitlab-submit-worklog-for-day/dialog-gitlab-submit-worklog-for-day.component.scss b/src/app/features/issue/providers/gitlab/dialog-gitlab-submit-worklog-for-day/dialog-gitlab-submit-worklog-for-day.component.scss
index d99685bcc6..d226993049 100644
--- a/src/app/features/issue/providers/gitlab/dialog-gitlab-submit-worklog-for-day/dialog-gitlab-submit-worklog-for-day.component.scss
+++ b/src/app/features/issue/providers/gitlab/dialog-gitlab-submit-worklog-for-day/dialog-gitlab-submit-worklog-for-day.component.scss
@@ -67,7 +67,7 @@
   right: -24px;
   bottom: 0;
   left: -24px;
-  background: var(--color-overlay-dark-50);
+  background: var(--c-dark-50);
   z-index: 10;
 
   mat-progress-spinner {
diff --git a/src/app/features/metric/improvement-banner/improvement-banner.ani.ts b/src/app/features/metric/improvement-banner/improvement-banner.ani.ts
deleted file mode 100644
index 274928a831..0000000000
--- a/src/app/features/metric/improvement-banner/improvement-banner.ani.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import {
-  animate,
-  keyframes,
-  query,
-  stagger,
-  style,
-  transition,
-  trigger,
-} from '@angular/animations';
-import { ANI_FAST_TIMING } from '../../../ui/animations/animation.const';
-
-const ANI = [
-  query(':enter', style({ opacity: 0, width: 0 }), { optional: true }),
-  query(
-    ':enter',
-    stagger('40ms', [
-      animate(
-        ANI_FAST_TIMING,
-        keyframes([
-          style({ opacity: 0, width: 0, transform: 'scale(0)', offset: 0 }),
-          style({ opacity: 1, width: '*', transform: 'scale(1)', offset: 0.99 }),
-          style({ width: 'auto', offset: 1.0 }),
-        ]),
-      ),
-    ]),
-    { optional: true },
-  ),
-  query(
-    ':leave',
-    stagger('-40ms', [
-      style({ transform: 'scale(1)', opacity: 1, width: '*' }),
-      animate(ANI_FAST_TIMING, style({ transform: 'scale(0)', width: 0 })),
-    ]),
-    { optional: true },
-  ),
-];
-
-export const improvementBannerAnimation = trigger('improvementBanner', [
-  transition(':increment, :decrement', ANI),
-  transition('* <=> ALWAYS', ANI),
-  transition('* <=> BLOCK', []),
-]);
diff --git a/src/app/features/metric/improvement-banner/improvement-banner.component.html b/src/app/features/metric/improvement-banner/improvement-banner.component.html
deleted file mode 100644
index b258099cc2..0000000000
--- a/src/app/features/metric/improvement-banner/improvement-banner.component.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<div
-  [@improvementBanner]="improvements.length"
-  class="improvements"
->
-  @for (improvement of improvements; track trackById($index, improvement)) {
-    <div
-      class="improvement"
-      mat-ripple
-    >
-      <button
-        (click)="dismiss(improvement)"
-        [matTooltip]="T.G.DISMISS | translate"
-        class="dismiss"
-        disableRipple
-        mat-icon-button
-      >
-        <mat-icon>close</mat-icon>
-      </button>
-      <div class="title">{{ improvement?.title }}</div>
-      <button
-        (click)="check(improvement)"
-        [matTooltip]="T.F.METRIC.BANNER.CHECK | translate"
-        class="check"
-        disableRipple
-        mat-icon-button
-      >
-        <mat-icon>check</mat-icon>
-      </button>
-    </div>
-  }
-</div>
diff --git a/src/app/features/metric/improvement-banner/improvement-banner.component.scss b/src/app/features/metric/improvement-banner/improvement-banner.component.scss
deleted file mode 100644
index 7ad5e339e4..0000000000
--- a/src/app/features/metric/improvement-banner/improvement-banner.component.scss
+++ /dev/null
@@ -1,104 +0,0 @@
-@import '../../../../common';
-
-:host {
-  display: block;
-}
-
-.improvements {
-  padding-top: 4px;
-  padding-bottom: 16px;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center;
-  margin: -4px;
-  white-space: nowrap;
-  justify-content: center;
-
-  @include mq(xs) {
-    padding-bottom: 30px;
-  }
-}
-
-.improvement {
-  align-items: center;
-  border-radius: 16px;
-  user-select: none;
-  -webkit-user-select: none; /* Safari */
-  display: flex;
-  font-weight: 500;
-  font-size: 14px;
-  height: 32px;
-  margin: 4px;
-  min-height: 32px;
-  position: relative;
-  padding: 7px 0;
-  overflow: hidden;
-  transition: var(--transition-fast);
-  background: transparent;
-
-  border: 1px solid;
-  color: var(--improvement-text);
-  border-color: var(--improvement-border);
-
-  &:active {
-    box-shadow: var(--whiteframe-shadow-2dp);
-  }
-
-  .title {
-    transition: inherit;
-    max-width: 300px;
-    height: 32px;
-    line-height: 32px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  button {
-    transition: inherit;
-    opacity: 0;
-    transform: scale(0.1);
-    position: relative;
-    z-index: 1;
-    transform-origin: center center;
-
-    color: var(--improvement-button-text);
-
-    &.dismiss {
-      transform: translateX(-11px);
-      margin-right: -12px;
-    }
-
-    &.check {
-      transform: translateX(11px);
-      margin-left: -12px;
-    }
-
-    mat-icon {
-      font-size: 22px;
-      max-height: 32px;
-    }
-  }
-
-  &:hover {
-    button {
-      opacity: 0.4;
-      transform: scale(1);
-
-      &:hover {
-        opacity: 1;
-      }
-    }
-
-    .title {
-      transform-origin: center center;
-      transform: scaleX(0.857142857142857);
-    }
-  }
-
-  .hover {
-    display: none;
-    position: absolute;
-    right: 100%;
-  }
-}
diff --git a/src/app/features/metric/improvement-banner/improvement-banner.component.spec.ts b/src/app/features/metric/improvement-banner/improvement-banner.component.spec.ts
deleted file mode 100644
index 944553851b..0000000000
--- a/src/app/features/metric/improvement-banner/improvement-banner.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-//
-// import {ImprovementBannerComponent} from './improvement-banner.component';
-//
-// describe('ImprovementBannerComponent', () => {
-//   let component: ImprovementBannerComponent;
-//   let fixture: ComponentFixture<ImprovementBannerComponent>;
-//
-//   beforeEach(async(() => {
-//     TestBed.configureTestingModule({
-//       declarations: [ImprovementBannerComponent]
-//     })
-//       .compileComponents();
-//   }));
-//
-//   beforeEach(() => {
-//     fixture = TestBed.createComponent(ImprovementBannerComponent);
-//     component = fixture.componentInstance;
-//     fixture.detectChanges();
-//   });
-//
-//   it('should create', () => {
-//     expect(component).toBeTruthy();
-//   });
-// });
diff --git a/src/app/features/metric/improvement-banner/improvement-banner.component.ts b/src/app/features/metric/improvement-banner/improvement-banner.component.ts
deleted file mode 100644
index 322307fcc1..0000000000
--- a/src/app/features/metric/improvement-banner/improvement-banner.component.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { ChangeDetectionStrategy, Component, inject, OnDestroy } from '@angular/core';
-import { Improvement } from '../improvement/improvement.model';
-import { ImprovementService } from '../improvement/improvement.service';
-import { improvementBannerAnimation } from './improvement-banner.ani';
-import { Subscription } from 'rxjs';
-import { T } from '../../../t.const';
-import { DateService } from 'src/app/core/date/date.service';
-import { MatRipple } from '@angular/material/core';
-import { MatIconButton } from '@angular/material/button';
-import { MatTooltip } from '@angular/material/tooltip';
-import { MatIcon } from '@angular/material/icon';
-import { TranslatePipe } from '@ngx-translate/core';
-
-@Component({
-  selector: 'improvement-banner',
-  templateUrl: './improvement-banner.component.html',
-  styleUrls: ['./improvement-banner.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  animations: [improvementBannerAnimation],
-  imports: [MatRipple, MatIconButton, MatTooltip, MatIcon, TranslatePipe],
-})
-export class ImprovementBannerComponent implements OnDestroy {
-  improvementService = inject(ImprovementService);
-  private _dateService = inject(DateService);
-
-  T: typeof T = T;
-  improvements: Improvement[] = [];
-
-  private _subs: Subscription = new Subscription();
-
-  constructor() {
-    this._subs.add(
-      this.improvementService.improvementBannerImprovements$.subscribe(
-        (val) => (this.improvements = val || []),
-      ),
-    );
-  }
-
-  ngOnDestroy(): void {
-    this._subs.unsubscribe();
-  }
-
-  dismiss(improvement: Improvement): void {
-    this.improvementService.hideImprovement(improvement.id);
-  }
-
-  check(improvement: Improvement): void {
-    this.improvementService.addCheckedDay(improvement.id, this._dateService.todayStr());
-    this.improvementService.hideImprovement(improvement.id);
-  }
-
-  trackById(i: number, improvement: Improvement): string {
-    return improvement.id;
-  }
-}
diff --git a/src/app/features/tasks/task/task.component.scss b/src/app/features/tasks/task/task.component.scss
index dd696c6cdb..d1b4792a82 100644
--- a/src/app/features/tasks/task/task.component.scss
+++ b/src/app/features/tasks/task/task.component.scss
@@ -295,7 +295,7 @@
     }
 
     &:hover {
-      ////  background: var(--color-overlay-light-10);
+      ////  background: var(--c-light-10);
       //
       //
     }
diff --git a/src/app/features/work-view/backlog/backlog.component.scss b/src/app/features/work-view/backlog/backlog.component.scss
index c2e1df0fa2..442102001f 100644
--- a/src/app/features/work-view/backlog/backlog.component.scss
+++ b/src/app/features/work-view/backlog/backlog.component.scss
@@ -16,7 +16,7 @@
   &:before {
     position: absolute;
     content: '';
-    background: var(--color-overlay-dark-20);
+    background: var(--c-dark-20);
     width: 100%;
     top: 0;
     left: 0;
@@ -43,7 +43,7 @@ body.isDarkTheme :host {
   background: var(--palette-primary-900);
 
   &:before {
-    background: var(--color-overlay-dark-50);
+    background: var(--c-dark-50);
   }
 }
 
diff --git a/src/app/features/work-view/split/split.component.scss b/src/app/features/work-view/split/split.component.scss
index 08896f1c77..dd6d41f1b8 100644
--- a/src/app/features/work-view/split/split.component.scss
+++ b/src/app/features/work-view/split/split.component.scss
@@ -21,7 +21,7 @@
       position: absolute;
       width: 100%;
       height: 100%;
-      //box-shadow: 0 -3px 5px 0 var(--color-overlay-dark-40);
+      //box-shadow: 0 -3px 5px 0 var(--c-dark-40);
       pointer-events: none;
     }
   }
diff --git a/src/app/ui/better-drawer/better-drawer-container/better-drawer-container.component.scss b/src/app/ui/better-drawer/better-drawer-container/better-drawer-container.component.scss
index 559c2c7144..b933977d45 100644
--- a/src/app/ui/better-drawer/better-drawer-container/better-drawer-container.component.scss
+++ b/src/app/ui/better-drawer/better-drawer-container/better-drawer-container.component.scss
@@ -35,7 +35,7 @@ $z-this-backdrop: calc(var(--z-task-side-bar-over) - 1);
   //border: 1px solid;
   //border-right: 0;
   //border-bottom: 0;
-  //box-shadow: 0px 8px 10px -5px var(--color-overlay-dark-20), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px var(--divider-color) !important;
+  //box-shadow: 0px 8px 10px -5px var(--c-dark-20), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px var(--divider-color) !important;
 
   @include mq(sm, max) {
     // NOTE: prevents overlapping with nav when open
diff --git a/src/app/ui/task-title/task-title.component.scss b/src/app/ui/task-title/task-title.component.scss
index 6a2fe1969d..e72198915f 100644
--- a/src/app/ui/task-title/task-title.component.scss
+++ b/src/app/ui/task-title/task-title.component.scss
@@ -47,7 +47,7 @@
 }
 :host > div > textarea {
   appearance: none;
-  //background: var(--color-overlay-dark-50);
+  //background: var(--c-dark-50);
   border: 0;
   padding: 0;
   position: absolute;
diff --git a/src/assets/api-test-plugin/index.html b/src/assets/api-test-plugin/index.html
index 21cd820dae..0accafbeaa 100644
--- a/src/assets/api-test-plugin/index.html
+++ b/src/assets/api-test-plugin/index.html
@@ -68,7 +68,7 @@
       }
 
       .run-all:hover {
-        background: var(--color-overlay-light-10, rgba(76, 175, 80, 0.1));
+        background: var(--c-light-10, rgba(76, 175, 80, 0.1));
       }
 
       .console {
diff --git a/src/styles/_css-variables.scss b/src/styles/_css-variables.scss
index e871b18740..d89b237945 100644
--- a/src/styles/_css-variables.scss
+++ b/src/styles/_css-variables.scss
@@ -92,23 +92,21 @@
   // -----------------------------
   // Overlay Colors
   // -----------------------------
-  --color-overlay-dark-10: rgba(0, 0, 0, 0.1);
-  --color-overlay-dark-20: rgba(0, 0, 0, 0.2);
-  --color-overlay-dark-30: rgba(0, 0, 0, 0.3);
-  --color-overlay-dark-40: rgba(0, 0, 0, 0.4);
-  --color-overlay-dark-50: rgba(0, 0, 0, 0.5);
-  --color-overlay-dark-60: rgba(0, 0, 0, 0.6);
-  --color-overlay-dark-80: rgba(0, 0, 0, 0.8);
-  --color-overlay-dark-90: rgba(0, 0, 0, 0.9);
-  --color-overlay-light-05: rgba(255, 255, 255, 0.05);
-  --color-overlay-light-10: rgba(255, 255, 255, 0.1);
-  --color-overlay-light-20: rgba(255, 255, 255, 0.2);
-  --color-overlay-light-30: rgba(255, 255, 255, 0.3);
-  --color-overlay-light-33: rgba(255, 255, 255, 0.33);
-  --color-overlay-light-40: rgba(255, 255, 255, 0.4);
-  --color-overlay-light-50: rgba(255, 255, 255, 0.5);
-  --color-overlay-light-70: rgba(255, 255, 255, 0.7);
-  --color-overlay-light-90: rgba(255, 255, 255, 0.9);
+  --c-dark-10: rgba(0, 0, 0, 0.1);
+  --c-dark-20: rgba(0, 0, 0, 0.2);
+  --c-dark-30: rgba(0, 0, 0, 0.3);
+  --c-dark-40: rgba(0, 0, 0, 0.4);
+  --c-dark-50: rgba(0, 0, 0, 0.5);
+  --c-dark-60: rgba(0, 0, 0, 0.6);
+  --c-dark-80: rgba(0, 0, 0, 0.8);
+  --c-dark-90: rgba(0, 0, 0, 0.9);
+  --c-light-05: rgba(255, 255, 255, 0.05);
+  --c-light-10: rgba(255, 255, 255, 0.1);
+  --c-light-33: rgba(255, 255, 255, 0.33);
+  --c-light-40: rgba(255, 255, 255, 0.4);
+  --c-light-50: rgba(255, 255, 255, 0.5);
+  --c-light-70: rgba(255, 255, 255, 0.7);
+  --c-light-90: rgba(255, 255, 255, 0.9);
 
   // Legacy palette references
   --c-primary: var(--palette-primary-500);
@@ -228,9 +226,8 @@
     0 3px 1px -2px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
     0 2px 2px 0 rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
     0 1px 5px 0 rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
-  --shadow-bottom: 0 10px 6px -6px var(--color-overlay-dark-30);
-  --shadow-bottom-boxed:
-    0 10px 6px -6px var(--color-overlay-dark-30), 0 0 1px var(--color-overlay-dark-30);
+  --shadow-bottom: 0 10px 6px -6px var(--c-dark-30);
+  --shadow-bottom-boxed: 0 10px 6px -6px var(--c-dark-30), 0 0 1px var(--c-dark-30);
 
   // ===============================
   // ANIMATION & TRANSITIONS
@@ -345,7 +342,7 @@ body {
   --divider-color: rgba(0, 0, 0, 0.12);
 
   // Backdrop
-  --c-backdrop: var(--color-overlay-dark-60);
+  --c-backdrop: var(--c-dark-60);
 
   // Note colors
   --standard-note-bg: #ffffff;
@@ -386,19 +383,19 @@ body {
 
   // Improvement banner
   --improvement-text: rgba(44, 44, 44, 1);
-  --improvement-border: var(--color-overlay-light-33);
+  --improvement-border: var(--c-light-33);
   --improvement-button-text: rgba(44, 44, 44, 1);
 
   // Select/Options
-  --select-hover-bg: var(--color-overlay-dark-10);
-  --options-border-color: var(--color-overlay-dark-10);
+  --select-hover-bg: var(--c-dark-10);
+  --options-border-color: var(--c-dark-10);
 
   // Attachments
   --attachment-bg: var(--card-bg);
   --attachment-border: var(--extra-border-color);
-  --attachment-control-bg: var(--color-overlay-light-40);
-  --attachment-control-border: var(--color-overlay-light-50);
-  --attachment-control-hover-bg: var(--color-overlay-light-90);
+  --attachment-control-bg: var(--c-light-40);
+  --attachment-control-border: var(--c-light-50);
+  --attachment-control-hover-bg: var(--c-light-90);
 
   // Hover controls
   --hover-controls-border: 1px solid;
@@ -452,7 +449,7 @@ body.isDarkTheme {
   --divider-color: rgba(255, 255, 255, 0.12);
 
   // Backdrop
-  --c-backdrop: var(--color-overlay-dark-60);
+  --c-backdrop: var(--c-dark-60);
 
   // Note colors
   --standard-note-bg: var(--dark16);
@@ -479,7 +476,7 @@ body.isDarkTheme {
   --scrollbar-track: #222;
 
   // Grid colors
-  --grid-color: var(--color-overlay-light-10);
+  --grid-color: var(--c-light-10);
 
   // Chip colors
   --chip-outline-color: rgba(125, 125, 125, 0.4);
@@ -493,19 +490,19 @@ body.isDarkTheme {
 
   // Improvement banner
   --improvement-text: var(--text-color-most-intense);
-  --improvement-border: var(--color-overlay-light-33);
+  --improvement-border: var(--c-light-33);
   --improvement-button-text: white;
 
   // Select/Options
-  --select-hover-bg: var(--color-overlay-light-10);
-  --options-border-color: var(--color-overlay-light-10);
+  --select-hover-bg: var(--c-light-10);
+  --options-border-color: var(--c-light-10);
 
   // Attachments
   --attachment-bg: var(--bg-lighter);
   --attachment-border: transparent;
-  --attachment-control-bg: var(--color-overlay-dark-40);
-  --attachment-control-border: var(--color-overlay-dark-50);
-  --attachment-control-hover-bg: var(--color-overlay-dark-90);
+  --attachment-control-bg: var(--c-dark-40);
+  --attachment-control-border: var(--c-dark-50);
+  --attachment-control-hover-bg: var(--c-dark-90);
 
   // Hover controls
   --hover-controls-border: none;
diff --git a/src/styles/components/enlarge-img.scss b/src/styles/components/enlarge-img.scss
index 56ba46b330..b3f022b8f4 100644
--- a/src/styles/components/enlarge-img.scss
+++ b/src/styles/components/enlarge-img.scss
@@ -15,7 +15,7 @@
   flex-direction: column; /* make main axis vertical */
   justify-content: center; /* center items vertically, in this case */
   align-items: center; /* center items horizontally, in this case */
-  //background: var(--color-overlay-dark-20);
+  //background: var(--c-dark-20);
   animation: var(--transition-standard) fadeIn;
   z-index: var(--z-backdrop);
 
diff --git a/src/styles/components/global-error-alert.scss b/src/styles/components/global-error-alert.scss
index a36c1a9169..6a94a72359 100644
--- a/src/styles/components/global-error-alert.scss
+++ b/src/styles/components/global-error-alert.scss
@@ -27,7 +27,7 @@
   .spinner {
     width: 40px;
     height: 40px;
-    border: 4px solid var(--color-overlay-dark-10);
+    border: 4px solid var(--c-dark-10);
     border-top: 4px solid #3498db;
     border-radius: 50%;
     animation: globalErrorAlertSpin 1s linear infinite;
diff --git a/src/styles/components/planner-shared.scss b/src/styles/components/planner-shared.scss
index 103412fa2f..c5eb2546ef 100644
--- a/src/styles/components/planner-shared.scss
+++ b/src/styles/components/planner-shared.scss
@@ -34,5 +34,5 @@
   margin-bottom: 4px;
   border-radius: 6px;
   // NOTE bg color is set in material overwrite file since otherwise it does not seem to work
-  background: var(--color-overlay-light-05) !important;
+  background: var(--c-light-05) !important;
 }
diff --git a/src/styles/components/shepherd.scss b/src/styles/components/shepherd.scss
index 4203dcb8e0..11842d7e08 100644
--- a/src/styles/components/shepherd.scss
+++ b/src/styles/components/shepherd.scss
@@ -17,8 +17,8 @@
   border-radius: 3px;
   border: 1px solid var(--extra-border-color);
   box-shadow:
-    0 1px 1px var(--color-overlay-dark-20),
-    0 2px 0 0 var(--color-overlay-light-70) inset;
+    0 1px 1px var(--c-dark-20),
+    0 2px 0 0 var(--c-light-70) inset;
   color: var(--text-color);
   display: inline-block;
   font-size: 0.85em;
diff --git a/src/styles/mixins/_inline-edit-elevation.scss b/src/styles/mixins/_inline-edit-elevation.scss
index 7b325e4570..76f0135ea3 100644
--- a/src/styles/mixins/_inline-edit-elevation.scss
+++ b/src/styles/mixins/_inline-edit-elevation.scss
@@ -1,4 +1,4 @@
-//$shadow-edit-on-click-light: 0 0 4px 0 var(--color-overlay-dark-80), var(--whiteframe-shadow-14dp);
+//$shadow-edit-on-click-light: 0 0 4px 0 var(--c-dark-80), var(--whiteframe-shadow-14dp);
 //$shadow-edit-on-click-dark: 0 0 4px 0 var(--bg)-lightest, var(--whiteframe-shadow-14dp);
 $shadow-edit-on-click-dark: var(--whiteframe-shadow-15dp);
 $shadow-edit-on-click-light: var(--whiteframe-shadow-7dp);