diff --git a/src/app/thumbnail/thumbnail.component.scss b/src/app/thumbnail/thumbnail.component.scss
index 290b395212..e2374c96db 100644
--- a/src/app/thumbnail/thumbnail.component.scss
+++ b/src/app/thumbnail/thumbnail.component.scss
@@ -18,9 +18,9 @@ img {
     left: 0;
 
     > .thumbnail-placeholder {
-      background: var(--bs-gray-100);
-      border: 1px solid var(--bs-gray-300);
-      color: var(--bs-gray-800);
+      background: var(--ds-thumbnail-placeholder-background);
+      border: var(--ds-thumbnail-placeholder-border);
+      color: var(--ds-thumbnail-placeholder-color);
       font-weight: bold;
       display: flex;
       justify-content: center;
diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss
index 298be09f67..d0e1564281 100644
--- a/src/styles/_custom_variables.scss
+++ b/src/styles/_custom_variables.scss
@@ -46,6 +46,9 @@
   --ds-edit-item-language-field-width: 43px;
 
   --ds-thumbnail-max-width: 175px;
+  --ds-thumbnail-placeholder-background: #{$gray-100};
+  --ds-thumbnail-placeholder-border: 1px solid #{$gray-300};
+  --ds-thumbnail-placeholder-color: #{lighten($gray-800, 7%)};
 
   --ds-dso-selector-list-max-height: 475px;
   --ds-dso-selector-current-background-color: #eeeeee;