diff --git a/packages/main/src/plugin/color-registry.ts b/packages/main/src/plugin/color-registry.ts
index 8dfcf215ef6a7..6729830eb900a 100644
--- a/packages/main/src/plugin/color-registry.ts
+++ b/packages/main/src/plugin/color-registry.ts
@@ -1300,6 +1300,7 @@ export class ColorRegistry {
 
   protected initStates(): void {
     const state = 'state-';
+    const severity = 'severity-';
 
     // general error and warning states
     this.registerColor(`${state}success`, {
@@ -1318,6 +1319,17 @@ export class ColorRegistry {
       dark: colorPalette.purple[500],
       light: colorPalette.purple[600],
     });
+
+    // additional severity levels
+    this.registerColor(`${severity}low`, {
+      dark: colorPalette.gray[500],
+      light: colorPalette.gray[500],
+    });
+
+    this.registerColor(`${severity}medium`, {
+      dark: colorPalette.gray[800],
+      light: colorPalette.gray[800],
+    });
   }
 
   // colors for image files explorer
diff --git a/packages/renderer/src/lib/ui/ProviderResultPage.svelte b/packages/renderer/src/lib/ui/ProviderResultPage.svelte
index 4f5e0bdf97c25..292c9f09875e5 100644
--- a/packages/renderer/src/lib/ui/ProviderResultPage.svelte
+++ b/packages/renderer/src/lib/ui/ProviderResultPage.svelte
@@ -135,13 +135,13 @@ function onSeverityClicked(severity: 'critical' | 'high' | 'medium' | 'low' | 's
           selected={true}
           disabled={countBySeverity.medium === 0}
           icon={faExclamationTriangle}
-          iconClass="text-gray-800"
+          iconClass="text-[var(--pd-severity-medium)]"
           on:click={event => onSeverityClicked('medium', event.detail)}>Medium ({countBySeverity.medium})</ToggleButton>
         <ToggleButton
           selected={true}
           disabled={countBySeverity.low === 0}
           icon={faCircleMinus}
-          iconClass="text-gray-500"
+          iconClass="text-[var(--pd-severity-low)]"
           on:click={event => onSeverityClicked('low', event.detail)}>Low ({countBySeverity.low})</ToggleButton>
         <ToggleButton
           selected={true}
@@ -195,15 +195,15 @@ function onSeverityClicked(severity: 'critical' | 'high' | 'medium' | 'low' | 's
           class="rounded-r-lg bg-[var(--pd-content-bg)] mb-4 mr-4 p-4 border-l-2"
           class:border-l-[var(--pd-state-error)]={result.check.severity === 'critical'}
           class:border-l-[var(--pd-state-warning)]={result.check.severity === 'high'}
-          class:border-l-gray-800={result.check.severity === 'medium'}
-          class:border-l-gray-500={result.check.severity === 'low'}
+          class:border-l-[var(--pd-severity-medium)]={result.check.severity === 'medium'}
+          class:border-l-[var(--pd-severity-low)]={result.check.severity === 'low'}
           class:border-l-[var(--pd-state-success)]={result.check.status === 'success'}>
           <div class="flex flex-row space-x-2">
             <span
               class:text-[var(--pd-state-error)]={result.check.severity === 'critical'}
               class:text-[var(--pd-state-warning)]={result.check.severity === 'high'}
-              class:text-gray-800={result.check.severity === 'medium'}
-              class:text-gray-500={result.check.severity === 'low'}
+              class:text-[var(--pd-severity-medium)]={result.check.severity === 'medium'}
+              class:text-[var(--pd-severity-low)]={result.check.severity === 'low'}
               class:text-[var(--pd-state-success)]={result.check.status === 'success'}
               ><Fa size="1.1x" class="mt-1" icon={getIcon(result.check)} />
             </span>
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index c74d01d79d2ac..fae667e1e1147 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -62,14 +62,9 @@ module.exports = {
         100: tailwindColors.zinc[100],
         200: tailwindColors.zinc[200],
         300: tailwindColors.zinc[300],
-        400: tailwindColors.zinc[400],
-        600: tailwindColors.zinc[600],
         700: tailwindColors.zinc[700],
       },
       violet: {
-        50: tailwindColors.violet[50],
-        400: tailwindColors.violet[400],
-        500: tailwindColors.violet[500],
         600: tailwindColors.violet[600],
         700: tailwindColors.violet[700],
       },