diff --git a/apps/metadata-editor/src/app/app.module.ts b/apps/metadata-editor/src/app/app.module.ts
index 93a9fc7d21..0df8bf2962 100644
--- a/apps/metadata-editor/src/app/app.module.ts
+++ b/apps/metadata-editor/src/app/app.module.ts
@@ -72,7 +72,7 @@ export class AppModule {
     ThemeService.applyCssVariables(
       getThemeConfig().PRIMARY_COLOR,
       getThemeConfig().SECONDARY_COLOR,
-      getThemeConfig().MAIN_COLOR || '#475569',
+      getThemeConfig().MAIN_COLOR || '#555',
       getThemeConfig().BACKGROUND_COLOR,
       getThemeConfig().MAIN_FONT || "'Rubik', sans-serif",
       getThemeConfig().TITLE_FONT || "'Readex Pro', sans-serif",
diff --git a/conf/default.toml b/conf/default.toml
index 307c4c72a9..462af0dcd2 100644
--- a/conf/default.toml
+++ b/conf/default.toml
@@ -41,7 +41,7 @@ proxy_path = ""
 [theme]
 primary_color = "#c82850"
 secondary_color = "#001638"
-main_color = "#212029" # All-purpose text color
+main_color = "#555" # All-purpose text color
 background_color = "#fdfbff"
 
 # These optional parameters indicate which background should be used for the main header and the text color used
diff --git a/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.html b/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.html
index f8a3f1049e..126bef177a 100644
--- a/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.html
+++ b/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.html
@@ -4,7 +4,7 @@
     [title]="organisation.name"
   >
     <div
-      class="flex-shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 h-36 group-hover:shadow-xl group-hover:border-0"
+      class="flex-shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 h-36"
     >
       <gn-ui-thumbnail
         class="relative h-full w-full"
@@ -15,7 +15,7 @@
     </div>
     <div class="px-3 pb-2 capitalize flex flex-col flex-grow overflow-hidden">
       <span
-        class="flex-shrink-0 mb-3 mt-5 font-title text-21 text-title group-hover:text-primary line-clamp-2 sm:mt-2"
+        class="flex-shrink-0 mb-3 mt-5 font-title text-21 text-title group-hover:text-primary line-clamp-2 sm:mt-2 transition-colors"
         data-cy="organizationName"
       >
         {{ organisation.name }}</span
diff --git a/libs/ui/dataviz/src/lib/figure/figure.component.html b/libs/ui/dataviz/src/lib/figure/figure.component.html
index 6ee20e6df3..180c9e62cb 100644
--- a/libs/ui/dataviz/src/lib/figure/figure.component.html
+++ b/libs/ui/dataviz/src/lib/figure/figure.component.html
@@ -11,10 +11,10 @@
     {{ icon }}
   </mat-icon>
   <div class="shrink overflow-hidden">
-    <div class="figure-block text-[1.5em] text-main">
+    <div class="figure-block text-[1.5em] text-black">
       <span class="figure font-medium mr-[0.3em]">{{ figure }}</span>
       <span class="unit text-[0.665em]">{{ unit }}</span>
     </div>
-    <div class="title text-gray-900 truncate">{{ title }}</div>
+    <div class="title truncate">{{ title }}</div>
   </div>
 </div>
diff --git a/libs/ui/dataviz/src/lib/figure/figure.component.spec.ts b/libs/ui/dataviz/src/lib/figure/figure.component.spec.ts
index 010ef74e0f..b587252eb9 100644
--- a/libs/ui/dataviz/src/lib/figure/figure.component.spec.ts
+++ b/libs/ui/dataviz/src/lib/figure/figure.component.spec.ts
@@ -60,9 +60,9 @@ describe('FigureComponent', () => {
       'bg-primary'
     )
   })
-  it('label is main text color', () => {
+  it('label is black text color', () => {
     expect(compiled.querySelector('.figure-block')?.className).toContain(
-      'text-main'
+      'text-black'
     )
   })
   it('has a tooltip containing the information', () => {
diff --git a/libs/ui/elements/src/lib/metadata-info/metadata-info.component.html b/libs/ui/elements/src/lib/metadata-info/metadata-info.component.html
index 440e1ddee3..ee2d778187 100644
--- a/libs/ui/elements/src/lib/metadata-info/metadata-info.component.html
+++ b/libs/ui/elements/src/lib/metadata-info/metadata-info.component.html
@@ -41,19 +41,19 @@
   >
     <div *ngIf="metadata.recordUpdated">
       <p class="text-sm" translate>record.metadata.updatedOn</p>
-      <p class="text-primary font-medium mt-[4px]">
+      <p class="text-primary font-medium mt-1">
         {{ metadata.recordUpdated && metadata.recordUpdated.toLocaleString() }}
       </p>
     </div>
     <div *ngIf="metadata.updateFrequency">
       <p class="text-sm" translate>record.metadata.updateFrequency</p>
-      <p class="text-primary font-medium mt-[4px]" translate>
+      <p class="text-primary font-medium mt-1" translate>
         domain.record.updateFrequency.{{ metadata.updateFrequency }}
       </p>
     </div>
     <div *ngIf="metadata.status">
       <p class="text-sm" translate>record.metadata.updateStatus</p>
-      <p class="text-primary font-medium mt-[4px]" translate>
+      <p class="text-primary font-medium mt-1" translate>
         domain.record.status.{{ metadata.status }}
       </p>
     </div>
diff --git a/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.html b/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.html
index 9c07e761f8..c70b79eefa 100644
--- a/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.html
+++ b/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.html
@@ -15,7 +15,7 @@
   </div>
 </div>
 <div
-  class="content duration-250 overflow-hidden transition-[max-height]"
+  class="content overflow-hidden transition-[max-height] duration-300"
   [ngClass]="collapsed ? 'ease-out' : 'ease-in'"
   [style.maxHeight]="maxHeight"
   #contentDiv
diff --git a/libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.html b/libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.html
index 25c60138fb..93a0d51703 100644
--- a/libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.html
+++ b/libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.html
@@ -40,7 +40,7 @@
         >
           {{ contact.firstName }} {{ contact.lastName }}
         </span>
-        <p class="text-gray-900">
+        <p class="">
           <span translate [translateParams]="{ time }"
             >record.was.created.time</span
           >
@@ -55,12 +55,12 @@
         ></ng-container>
       </div>
       <h1
-        class="font-title text-[21px] font-medium mb-3 pr-8"
+        class="font-title text-black text-[21px] font-medium mb-3 pr-8"
         data-cy="recordTitle"
       >
         {{ record.title }}
       </h1>
-      <p class="text-gray-900 line-clamp-3">{{ abstract }}</p>
+      <p class="line-clamp-3">{{ abstract }}</p>
       <gn-ui-thumbnail
         *ngIf="record.overviews?.[0]"
         class="block mt-3 w-full h-[136px] border border-gray-100 rounded-lg overflow-hidden"
diff --git a/libs/ui/search/src/lib/record-preview-row/record-preview-row.component.html b/libs/ui/search/src/lib/record-preview-row/record-preview-row.component.html
index 201369a509..4506863177 100644
--- a/libs/ui/search/src/lib/record-preview-row/record-preview-row.component.html
+++ b/libs/ui/search/src/lib/record-preview-row/record-preview-row.component.html
@@ -20,7 +20,7 @@
   >
     <div class="mb-3 mt-5 sm:mt-2">
       <div
-        class="font-title text-21 text-title line-clamp-2 col-start-1 col-span-2 sm:line-clamp-1 group-hover:text-primary"
+        class="font-title text-21 text-title line-clamp-2 col-start-1 col-span-2 sm:line-clamp-1 group-hover:text-primary transition-colors"
         data-cy="recordTitle"
       >
         {{ record.title }}