diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
index b487cfa5c2553..21c1eb631e07b 100644
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/src/librustdoc/html/static/css/rustdoc.css
@@ -890,6 +890,10 @@ so that we can apply CSS-filters to change the arrow color in themes */
 .search-results .result-name .grey {
 	color: var(--search-results-grey-color);
 }
+.search-results .result-name .typename {
+	color: var(--search-results-grey-color);
+	font-size: 0.875rem;
+}
 
 .popover {
 	position: absolute;
diff --git a/src/librustdoc/html/static/js/search.js b/src/librustdoc/html/static/js/search.js
index 3059dac820723..452348dc86507 100644
--- a/src/librustdoc/html/static/js/search.js
+++ b/src/librustdoc/html/static/js/search.js
@@ -2024,7 +2024,9 @@ function initSearch(rawSearchIndex) {
 
                 resultName.insertAdjacentHTML(
                     "beforeend",
-                    `${typeName} ${item.displayPath}<span class="${type}">${name}</span>`);
+                    `<span class="typename">${typeName}</span>`
+                    + ` ${item.displayPath}<span class="${type}">${name}</span>`
+                );
                 link.appendChild(resultName);
 
                 const description = document.createElement("div");
diff --git a/tests/rustdoc-gui/search-result-color.goml b/tests/rustdoc-gui/search-result-color.goml
index c75e4141434e4..193a3eb3fd134 100644
--- a/tests/rustdoc-gui/search-result-color.goml
+++ b/tests/rustdoc-gui/search-result-color.goml
@@ -28,6 +28,12 @@ define-function: (
             ".result-" + |result_kind| + ":focus ." + |result_kind|,
             {"color": |hover_color|},
         )
+        // color of the typename (struct, module, method, ...) before search results
+        assert-css: (
+            ".result-name .typename",
+            {"color": "#888"},
+            ALL,
+        )
     },
 )